/* =====================================================================
   ROYAL MORTGAGE  ·  the site layer
   Loaded AFTER css/royal-system.css. It adds nothing the system already
   has and it re-mixes nothing the system already settled: every colour,
   radius, shadow and type size below reads a system token.

   What lives here and why:
     - the header lockup (castle R + ROYAL MORTGAGE), which is this
       site's own wordmark and belongs to no other Royal surface
     - the BUBBLE NEST: a top-level coin that opens its family beneath
       it. Bryan, 7/28: "I think we are going to the 16 bubbles too
       quick." So the front door shows five, and the rest live one tap
       inside their parent.
     - the app-store badge, the three-pillar block, the machine strip,
       the numbered steps, the check list, breadcrumbs and page-to-page
       navigation across the loans/ subfolder

   Royal Mortgage LLC · NMLS #2059962
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. THE HEADER LOCKUP
   --------------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  min-height:0;flex:none}
.brand .castle{height:38px;width:auto;flex:none;display:block}
.brandwords{font-weight:800;color:var(--navy);line-height:1;
  font-size:clamp(16px,2.6vw,21px);letter-spacing:.005em;white-space:nowrap}
.brandbar nav a.cta{color:var(--gold-deep);font-weight:800}
.brandbar nav a[aria-current="page"]{opacity:1;
  box-shadow:inset 0 -2px 0 0 var(--gold)}

/* THE TRADEMARK LAW (Bryan, 7/28/2026).
   The castle R is the only thing actually trademarked, so the TM rides the
   MARK and nothing else. It used to sit after the word MORTGAGE; that is
   retired here and .brandwords .tm no longer exists.
   The filed lockup artwork still puts TM after the word — the artwork is what
   needs re-cutting, not this. */
.brand .brandmark{display:inline-flex;align-items:flex-start;flex:none;
  font-size:19px;line-height:1}
.brand .brandmark .tm{color:var(--gold-deep);margin-left:1px;flex:none}


/* ---------------------------------------------------------------------
   2. THE BUBBLE NEST
   A top-level coin is a <button>. Pressing it opens its family in a
   drawer directly beneath the row. One drawer open at a time.
   --------------------------------------------------------------------- */
button.cell{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;min-height:0}
.cell[aria-expanded="true"] .label{color:var(--navy)}
.cell[aria-expanded="true"] .coin{transform:translateY(-4px) scale(1.05);
  box-shadow:0 16px 34px rgba(37,48,105,.30),
             inset 0 2px 6px rgba(255,255,255,.65),
             inset 0 -6px 12px rgba(90,66,30,.45)}

/* the chevron that says a coin has a family under it */
.cell .more{display:block;width:16px;height:16px;margin-top:-3px;
  color:var(--ink-off);transition:transform .2s ease}
.cell[aria-expanded="true"] .more{transform:rotate(180deg);color:var(--gold-deep)}
.cell .more svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.nest{width:var(--col);margin-top:18px;background:var(--card-tint);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 18px 20px;animation:royal-rise .26s ease}
.nest[hidden]{display:none}
.nest .nesthead{font-size:var(--fs-micro);font-weight:800;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--gold-ink);text-align:center;margin:0 0 16px}
.nest .nestfoot{margin:16px 0 0;text-align:center;font-size:var(--fs-small);
  color:var(--muted)}
.nest .nestfoot a{color:var(--navy);font-weight:700}
.nest .coins{margin-top:0}
.nest .coin{width:100%;max-width:84px}
@media (max-width:390px){.nest{padding:18px 12px 16px}.nest .coin{max-width:62px}}

/* A five-across row on a phone gives each coin about 52px. "ONE DOOR" at
   that width wraps across the coin it is labelling, so below the tablet
   the badge stands down and the label carries the door on its own. */
@media (max-width:540px){.coins.g5 .cell .badge{display:none}}


/* ---------------------------------------------------------------------
   2b. ONE LEFT EDGE
   The system's rule is: pick .wrap OR .col per page, never both, or the
   page gets two left edges. Several system components are hard-set to
   var(--col) — .band, .trust, .askout, .searchbox. On a page built on
   the wide rail those would sit narrower than everything around them
   and open a second edge. Inside .wrap they take the rail instead, so
   the rail is the only edge on the page.
   --------------------------------------------------------------------- */
.wrap .band,.wrap .trust,.wrap .askout,.wrap .searchbox,
.wrap .crumbs,.wrap .pagenav,.wrap .nest,.wrap .promise{width:100%}
.wrap .deck{width:100%}


/* ---------------------------------------------------------------------
   3. THE APP-STORE BADGE
   --------------------------------------------------------------------- */
.appbtn{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--navy);color:#fff;border-radius:var(--r-sm);
  padding:10px 20px 10px 17px;min-height:56px;
  box-shadow:0 8px 22px rgba(37,48,105,.22);
  transition:transform .18s ease,background .18s ease}
.appbtn:hover{background:var(--navy-deep);transform:translateY(-2px)}
.appbtn svg{width:26px;height:26px;flex:none;fill:#fff}
.appbtn .t{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.appbtn .t small{font-size:10.5px;font-weight:600;opacity:.82;
  letter-spacing:.02em}
.appbtn .t b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.storerow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}

.qrcard{display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px}
.qrcard img{width:150px;height:150px;display:block;border-radius:8px}
.qrcard span{font-size:var(--fs-fine);font-weight:700;color:var(--muted);
  text-align:center;letter-spacing:.04em}


/* ---------------------------------------------------------------------
   4. THE THREE PILLARS
   SPEED / PRECISION / ACCURACY — the Royal Standard.
   --------------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media (min-width:768px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 22px;box-shadow:var(--lift-1)}
.pillar .pnum{font-size:var(--fs-micro);font-weight:800;
  letter-spacing:var(--ls-eyebrow);color:var(--gold-ink)}
.pillar h3{font-size:clamp(21px,3vw,26px);margin:8px 0 2px;letter-spacing:-.02em}
.pillar .psub{font-size:var(--fs-fine);font-weight:800;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.pillar hr{border:0;border-top:2px solid var(--gold);width:38px;margin:0 0 12px}
.pillar ul{margin:0;padding:0;list-style:none}
.pillar li{font-size:var(--fs-small);color:var(--muted);padding:4px 0;
  line-height:1.5}


/* ---------------------------------------------------------------------
   5. LISTS — checks and numbered steps
   --------------------------------------------------------------------- */
.checks{margin:0;padding:0;list-style:none}
.checks li{position:relative;padding:8px 0 8px 30px;font-size:var(--fs-small);
  color:var(--muted);line-height:1.55;border-bottom:1px solid var(--line-soft)}
.checks li:last-child{border-bottom:none}
.checks li::before{content:"";position:absolute;left:2px;top:14px;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#e2c283 40%,#a5814a 100%);
  box-shadow:inset 0 -1px 2px rgba(90,66,30,.45)}
.checks li b{color:var(--ink)}

.steps{counter-reset:royalstep;margin:0;padding:0;list-style:none}
.steps li{counter-increment:royalstep;position:relative;
  padding:0 0 22px 56px;color:var(--muted);font-size:var(--fs-small);
  line-height:1.6}
.steps li::before{content:counter(royalstep);position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px}
.steps li::after{content:"";position:absolute;left:18.5px;top:38px;bottom:2px;
  width:1px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps li b{display:block;color:var(--navy);font-size:var(--fs-h3);
  font-weight:800;margin-bottom:4px;letter-spacing:-.01em}


/* ---------------------------------------------------------------------
   6. THE MACHINE STRIP — the end-to-end run, first question to funding
   --------------------------------------------------------------------- */
.machine{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
/* five across only on the wide rail. In a 680px column five cards would be
   128px each, which is not a stage, it is a sliver. */
@media (min-width:768px){.wrap .machine{grid-template-columns:repeat(5,1fr);gap:10px}}
.mstage{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 15px;position:relative}
.mstage .mnum{font-size:var(--fs-micro);font-weight:800;color:var(--gold-ink);
  letter-spacing:var(--ls-eyebrow)}
.mstage h4{margin:6px 0 6px;font-size:14.5px;font-weight:800;color:var(--navy);
  line-height:1.3;letter-spacing:-.01em}
.mstage p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.mstage .mglyph{width:26px;height:26px;display:block;margin-bottom:8px;opacity:.9}


/* ---------------------------------------------------------------------
   7. BREADCRUMBS + PAGE-TO-PAGE NAV (the loans/ subfolder)
   --------------------------------------------------------------------- */
.crumbs{width:var(--col);font-size:var(--fs-fine);font-weight:700;
  color:var(--muted);letter-spacing:.06em;margin-bottom:10px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--navy)}
.crumbs span{color:var(--ink-off);padding:0 6px}

.pagenav{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;
  width:var(--col);margin-top:var(--sec);padding-top:20px;
  border-top:1px solid var(--line)}
.pagenav a{flex:1 1 220px;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;
  transition:border-color .18s ease,transform .18s ease}
.pagenav a:hover{border-color:var(--gold);transform:translateY(-2px)}
.pagenav small{display:block;font-size:var(--fs-micro);font-weight:800;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold-ink)}
.pagenav b{display:block;color:var(--navy);font-size:var(--fs-h3);margin-top:3px}


/* ---------------------------------------------------------------------
   8. SMALL PARTS
   --------------------------------------------------------------------- */
.leadin{font-size:clamp(16px,2.2vw,19px);color:var(--ink);font-weight:600;
  line-height:1.55}
.stat{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.stat div{flex:1 1 160px;background:var(--card-tint);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px}
.stat b{display:block;color:var(--navy);font-size:clamp(19px,3vw,25px);
  font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stat small{display:block;color:var(--muted);font-size:var(--fs-fine);
  margin-top:5px;line-height:1.45}

.quote{border-left:3px solid var(--gold);padding:2px 0 2px 18px;
  font-size:clamp(16px,2.3vw,20px);font-weight:700;color:var(--navy);
  line-height:1.45;letter-spacing:-.01em}
.quote cite{display:block;font-style:normal;font-size:var(--fs-fine);
  font-weight:700;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;margin-top:10px}

.deck{width:var(--col)}
.deck p{color:var(--muted);font-size:var(--fs-small)}
.deck p b,.deck b{color:var(--ink)}

/* the hero coin, floating in midair against the white */
.herocoin{display:flex;justify-content:center;padding:6px 0 2px}
.herocoin .coin{width:clamp(96px,22vw,132px);height:clamp(96px,22vw,132px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-sm) 0;z-index:99;font-weight:700}
.skip:focus{left:0}

/* THE THINKING STATE.
   The system draws three pulsing dots on an EMPTY .askout.show. This
   panel is never empty — it carries .q, .a and .hook — so the same
   three dots are drawn on the answer line instead. Zero round-trips. */
.askout.thinking .a::after{content:"\25CF\00a0\25CF\00a0\25CF";
  color:var(--gold-deep);letter-spacing:.15em;
  animation:royal-pulse 1.1s ease-in-out infinite}
.askout .a{white-space:pre-wrap}

/* the in-room ask block: bar + answer, both filling their card */
.askcard .askrow,.askcard .askout{width:100%}
.askcard .askout{margin-top:14px}

/* a run of gold-ruled facts inside a card */
.facts{margin:0;padding:0;list-style:none}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);font-size:var(--fs-small)}
.facts li:last-child{border-bottom:none}
.facts .f{color:var(--muted)}
.facts .g{color:var(--ink);font-weight:700;text-align:right}

/* ---------------------------------------------------------------------
   9. THE ONE DOOR  (Bryan, 7/28/2026: "it was at the bottom, it goes to
   the TOP")
   Both treatments he asked for, on one rail: the gold coin carrying the
   chrome R, and the gold bar. The coin is the loud one and it appears on
   every page, at the top, at full size.
   The URL itself lives in ONE place — ROYAL_DOOR in js/site.js.
   --------------------------------------------------------------------- */
.doorrail{width:var(--col);display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;background:var(--card-tint);border:1px solid var(--gold);
  border-radius:var(--r-lg);padding:20px 22px;margin-top:clamp(16px,3vh,26px);
  box-shadow:var(--lift-1)}
.wrap .doorrail{width:100%}
.doorcoin{flex:none;text-decoration:none;display:block;line-height:0}
.doorcoin .coin{width:88px;height:88px}
.doorwords{flex:1 1 220px;min-width:0}
.doorwords .klabel{margin:0}
.doorline{margin:4px 0 0;font-size:clamp(16px,2.3vw,20px);font-weight:800;
  color:var(--navy);letter-spacing:-.01em;line-height:1.3}
.doorrail .btn-gold{flex:none}
@media (max-width:540px){
  .doorrail{gap:14px;padding:18px 16px}
  .doorcoin .coin{width:68px;height:68px}
  .doorrail .btn-gold{width:100%}
}

/* ---------------------------------------------------------------------
   10. THE SUNNY LAW  (Bryan, 7/28/2026)
   Every page has EITHER a following ROVER or a persistent solid-gold
   Sunny bubble you can touch to talk to Royal Ai. Never neither. A hero
   bar that scrolls away does not count — this one is fixed and it
   persists. Sunny becomes ROVER later; nothing here hardcodes a name.

   This supersedes the older "one ask bar per page, never a floating
   avatar" rule. The floating bubble IS the ask surface now.
   --------------------------------------------------------------------- */
.sunny{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vh,26px);
  z-index:60;background:none;border:0;padding:0;cursor:pointer;line-height:0;
  border-radius:50%;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 10px 24px rgba(21,27,60,.28))}
.sunny .coin{width:clamp(58px,13vw,66px);height:clamp(58px,13vw,66px)}
.sunny:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.sunny:hover .coin{transform:translateY(-3px) scale(1.05)}

.sunnypanel{position:fixed;right:clamp(14px,3vw,26px);
  bottom:calc(clamp(58px,13vw,66px) + clamp(24px,4vh,38px));z-index:61;
  width:min(380px,calc(100vw - 28px));background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 16px 14px;box-shadow:var(--lift-3);
  animation:royal-rise .22s ease}
.sunnypanel[hidden]{display:none}
.sunnyhead{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.sunnyclose{background:none;border:0;padding:4px;cursor:pointer;
  color:var(--ink-off);line-height:0;border-radius:var(--r-sm)}
.sunnyclose svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round}
.sunnyclose:hover{color:var(--navy)}
.sunnypanel .askout{width:100%;margin:0 0 12px}
.sunnypanel .askout:not(.show){display:none}
.sunnypanel .askrow{width:100%}
.sunnypanel .a{max-height:38vh;overflow:auto}

@media (prefers-reduced-motion:reduce){
  .sunnypanel{animation:none}
  .sunny:hover .coin{transform:none}
}

@media print{
  .nest[hidden]{display:block}
  .cell .more,.skip,.sunny,.sunnypanel{display:none !important}
  .appbtn{background:#fff !important;color:#000 !important;
    border:1pt solid var(--navy);box-shadow:none !important}
  .appbtn svg{fill:#000}
  .doorrail{border:1pt solid var(--gold-deep);box-shadow:none}
}

/* THE ROYAL Ai APP ICON (Bryan, 9/27/2026: "It needs to be the square icon for
   our AI app... at least the AI logo, not whatever that is").
   Wherever Royal Ai is the door - the floating ask button, the Royal Ai door
   and the Royal Ai card - it wears the square app icon from his taskbar
   (royalai.app's live icon, byte-identical), never a coin and never a bare
   gold ball. The Ai mark never sits inside a coin. */
.appicon{display:block;flex:none;aspect-ratio:1;border-radius:22.5%;overflow:hidden;
  background:#fff;box-shadow:0 10px 24px rgba(21,27,60,.22),0 0 0 1px rgba(203,162,96,.55);
  transition:transform .18s ease}
.appicon img{width:100%;height:100%;display:block}
.cell .appicon{width:88%;max-width:96px;margin:min(6%,6px) 0}
.cell:hover .appicon{transform:translateY(-4px) scale(1.05)}
.herocoin .appicon{width:clamp(88px,20vw,120px)}
.appicon.appicon-sm{width:64px}
.sunny{border-radius:22.5%}
.sunny .appicon{width:clamp(56px,12vw,62px);box-shadow:0 0 0 1px rgba(203,162,96,.55)}
.sunny:hover .appicon{transform:translateY(-3px) scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .cell:hover .appicon,.sunny:hover .appicon{transform:none}
}