/* =====================================================================
   ROYAL SYSTEM  ·  royal-system.css
   The one stylesheet every Royal site links. Eight sites, one family.

   THIS IS A COPY. The master lives at Royal AI Launch/_royal-system/
   royal-system.css. These sites deploy as separate hosts, so a shared
   parent path does not resolve in production and every site carries its
   own copy. RE-SYNC THIS FILE WHENEVER THE MASTER MOVES.

   The copy diverges from the master in COMMENTS ONLY, in three places
   (this paragraph, the section 6 heading, and the section 6 mark list):
   the master names an internal product in prose, and internal product
   names do not ship to a public web root. No selector, no property and
   no value differs from the master. A re-sync diff is comment-only.

   Nothing here was invented. It is the house style already shipping
   across the Royal sites, promoted into one file and reconciled to the
   filed brand guide on the three points that had drifted:

     navy   #253069   (filed)
     gold   #CBA260   (filed)
     paper  #FFFFFF   (ruling)

   The retired hexes are deliberately NOT written out above. They were,
   until 7/28/2026 — which meant every site carrying this file returned a
   hit on the pre-publish drift grep and taught whoever ran it to ignore
   a real signal. A check that always fires is not a check.

   The one thing NOT reconciled is the canon coin's own gradient. Its
   52% stop is #c9a15f and it stays #c9a15f. That gradient is the coin's
   material, not a brand token, and it is reproduced here verbatim.

   THE COMPANY NMLS ONLY. A personal NMLS number stood on this line until
   7/28/2026. It came off: this file ships to a public web root and
   view-source reads a CSS comment as easily as a paragraph.

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


/* ---------------------------------------------------------------------
   1. THE TYPEFACE
   Montserrat, self-hosted. Same approach and the same two woff2 files
   as royalai.ai/css/font.css — one less third party in front of a
   lender's customers, and a service worker can cache it.
   The url() is relative to THIS FILE, so _royal-system/fonts/ must
   travel with _royal-system/royal-system.css. See README.md.
   --------------------------------------------------------------------- */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/montserrat-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ---------------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* ---- brand ---- */
  --navy:#253069;          /* THE filed navy. Every other navy is drift. */
  --navy-deep:#171F49;     /* the second stop of every navy gradient */
  --navy-ink:#0F1533;      /* type on gold, the darkest navy we set */
  --gold:#CBA260;          /* THE filed gold */
  --gold-deep:#7D6238;     /* gold that is readable as type on white */
  --gold-ink:#7A5E2A;      /* small uppercase gold type, AA on white */

  /* ---- surface ---- */
  --paper:#FFFFFF;         /* EVERY page background. No exceptions. */
  --card:#FFFFFF;          /* cards are white; the line is what defines them */
  --card-tint:#FCFBF8;     /* the barely-there warm surface (docks, rails) */
  --line:#E7E4DB;          /* the one hairline */
  --line-soft:#F1EFE8;     /* dividers inside a card */
  --track:#EDEBE2;         /* bar / timeline / progress groove */

  /* ---- ink ---- */
  --ink:#1B2140;           /* body copy */
  --muted:#5C6178;         /* secondary copy, labels */
  --ink-off:#8F8B80;       /* recessive markers. 3.9:1 on white. */

  /* ---- status ---- */
  --green:#2F6B4F;
  --green-bg:#EFF6F2;
  --alert:#A34B3D;

  /* ---- type stack ---- */
  --royal-font:'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif;

  /* ---- type scale ----
     Every size is a clamp so one scale covers 390 to 1280+ without a
     media query. The floor is the 390 phone, the ceiling is the 1280 desk. */
  --fs-hero:clamp(32px,5.4vw,58px);
  --fs-h1:clamp(25px,4.4vw,40px);
  --fs-h2:clamp(20px,3vw,28px);
  --fs-h3:clamp(15.5px,1.9vw,17px);
  --fs-lede:clamp(15px,2vw,18.5px);
  --fs-body:15px;
  --fs-small:13.5px;
  --fs-fine:11.5px;
  --fs-micro:10.5px;
  --fs-eyebrow:12px;
  --lh-tight:1.1;
  --lh-head:1.25;
  --lh-body:1.6;
  --ls-eyebrow:.2em;

  /* ---- rhythm ---- */
  --gutter:20px;
  --rail:min(1080px, 100% - 48px);   /* wide marketing pages */
  --col:min(620px, 100%);            /* the front-door column */
  --band:clamp(26px,4.5vh,40px);     /* gap above a band heading */
  --sec:clamp(44px,7vh,84px);        /* gap between sections */

  /* ---- radius ---- */
  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;

  /* ---- elevation ---- */
  --lift-1:0 6px 18px rgba(37,48,105,.08);
  --lift-2:0 10px 30px rgba(37,48,105,.10);
  --lift-3:0 18px 44px rgba(37,48,105,.14);
}


/* ---------------------------------------------------------------------
   3. RESET + PAGE
   --------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* 2026-07-31 standard-property fallback, Phase 1 browser-agnostic pass */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--royal-font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh; /* 2026-07-31 dvh fallback added, Phase 1 mobile audit */
  overflow-x:hidden;
}
img,svg,video{max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em;line-height:var(--lh-head);color:var(--navy)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--navy)}
strong,b{font-weight:800}

/* screen-reader only */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Keyboard focus, site-wide. The UA ring is invisible on navy. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* Every interactive target clears 44px. */
button,[role="button"],a.btn,.btn{min-height:44px}


/* ---------------------------------------------------------------------
   4. LAYOUT
   .wrap  = the wide marketing rail (royalai.app)
   .col   = the narrow front-door column (royalai.ai, royalmortgage.ai)
   .stage = the flexing body between header and footer
   --------------------------------------------------------------------- */
.wrap{width:var(--rail);margin-inline:auto}
.col{width:var(--col);margin-inline:auto}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,3.5vh,40px) var(--gutter) var(--sec);width:100%}
.section{margin-top:var(--sec)}
.center{text-align:center}
/* the split hero: copy left, art right. One column until 768. */
.hero{padding:clamp(28px,5vh,48px) 0 24px}


/* ---------------------------------------------------------------------
   5. THE BRANDBAR (header)
   --------------------------------------------------------------------- */
header{padding:26px 0 8px}
.brandbar{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;width:var(--rail);margin-inline:auto}
.brandbar .mark{height:44px;width:auto;display:block}
.brandbar nav{display:flex;gap:26px;flex-wrap:wrap;
  font-size:14.5px;font-weight:600}
.brandbar nav a{color:var(--navy);text-decoration:none;opacity:.85;
  padding:6px 0;min-height:0}
.brandbar nav a:hover{opacity:1}

/* the stacked site wordmark the narrow front doors use */
.markwrap{padding:clamp(26px,5.5vh,58px) 16px 0;display:flex;justify-content:center}
.sitemark{width:min(620px,94vw);display:flex;align-items:center;
  justify-content:center;gap:14px}
.sitemark .castle{height:clamp(38px,7vw,54px);width:auto;flex:none}
.sitemark .words{font-weight:800;color:var(--navy);letter-spacing:.01em;
  line-height:1;font-size:clamp(21px,4.6vw,38px)}
.sitemark .words em{font-style:italic;color:var(--gold-deep)}

/* the eyebrow above a headline */
.eyebrow{color:var(--gold-ink);font-size:var(--fs-eyebrow);font-weight:800;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-bottom:12px}


/* ---------------------------------------------------------------------
   6. THE WRITTEN MARKS
   LAW: the written product names never render as plain type. They are
   lockups, not keyboard text. js/royal-brand.js paints them in; these
   rules are what it paints into.

   .rw is the three-part lockup class the family shares: a chrome castle
   letter, a solid gold ball at cap height, and the rest of the word set
   in Montserrat 800 navy. RoyalBuilder.ai does not use .rw — this site
   paints .rmai and .rai only — but the rules stay so a re-sync against
   the master is a clean, comment-only diff.
   --------------------------------------------------------------------- */
.rw{font-weight:800;letter-spacing:.07em;color:var(--navy);white-space:nowrap}
.rw .chr{display:inline-block;vertical-align:baseline;height:.79em;width:.745em;
  margin-right:.02em;-webkit-user-drag:none;user-select:none}
.rw i{display:inline-block;vertical-align:baseline;width:.76em;height:.76em;
  border-radius:50%;margin:0 .04em;font-style:normal;
  background:radial-gradient(circle at 32% 26%, #fdf6e3 0%, #f5e2b4 15%, #e2c283 33%,
    var(--gold) 52%, #a5814a 70%, #7d6238 87%, #6a5330 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7), inset 0 -2px 4px rgba(90,66,30,.45),
    0 1px 2px rgba(21,27,60,.22)}
.rw.onnavy{color:#fff}
.rw.onnavy i{box-shadow:inset 0 1px 2px rgba(255,255,255,.7),
  inset 0 -2px 4px rgba(90,66,30,.45), 0 1px 2px rgba(0,0,0,.35)}

/* RoyalMortgage.ai · ROYAL Ai · royalai.app — navy word, gold suffix, always */
.rmai,.rai{font-weight:800;color:var(--navy);letter-spacing:.01em;white-space:nowrap}
.rmai em,.rai em,.rai i{font-style:italic;color:var(--gold-deep);font-weight:800}
.onnavy .rmai,.onnavy .rai,.rmai.onnavy,.rai.onnavy{color:#fff}
.onnavy .rmai em,.onnavy .rai em,.onnavy .rai i,
.rmai.onnavy em,.rai.onnavy em,.rai.onnavy i{color:var(--gold)}

/* the chrome Ai mark inline in a sentence */
.aimk{display:inline-block;vertical-align:baseline;height:.72em;width:1.156em;
  margin:0 .02em;-webkit-user-drag:none;user-select:none}

/* TM. Never the registered symbol — nothing in the Royal house is registered. */
.tm{font-size:.55em;vertical-align:.5em;letter-spacing:.02em;font-weight:700}


/* ---------------------------------------------------------------------
   7. THE COIN
   The block below is the canon coin, verbatim. Do not re-mix the gold,
   do not touch the stops, do not touch the shadow ratios. Everything
   after it is a modifier layered on top.
   --------------------------------------------------------------------- */
.coin{width:108px;height:108px;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
  box-shadow:
    0 10px 24px rgba(21,27,60,.22),
    inset 0 2px 6px rgba(255,255,255,.65),
    inset 0 -6px 12px rgba(90,66,30,.45);
  transition:transform .18s ease, box-shadow .18s ease}
.coin::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 100%);
  pointer-events:none}

/* --- modifiers (the canon block above is untouched) --- */
.coin{display:grid;place-items:center;flex:none}
.coin.coin-sm{width:72px;height:72px}
.coin.coin-lg{width:148px;height:148px}
/* fills its grid cell but never grows past 108 — the coin-grid default */
.coin.coin-fluid{width:100%;height:auto;max-width:108px;aspect-ratio:1}
.coin.coin-fluid.coin-sm{max-width:72px}
.coin.coin-fluid.coin-lg{max-width:148px}

/* THE SEATING LAW  (Bryan, 7/28/2026: "the R looks too big for the circle")
   Inner medallion 68% of the coin, mark capped at 59% of the medallion.
   0.68 x 0.59 = 40.1% of the coin diameter, the ratio measured off the
   reference button image he named. (The file name is not written out here:
   it carries an internal product name, and this sheet ships to a public
   web root where view-source reads a comment like any other copy.)
   It was 66% x 70% = 46.2%. That was the ~14% oversize he caught.
   The master copy of this law lives in _royal-system\royal-system.css. */
.coin-inner{width:68%;height:68%;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;
  overflow:hidden;box-shadow:inset 0 1px 4px rgba(90,66,30,.35)}
.coin-inner img{max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.coin-inner svg{width:59%;height:59%;fill:var(--navy);stroke:none}
.coin-inner svg .gold{fill:var(--gold)}

/* ASLEEP, THEN AWAKE (Bryan, 7/25/2026).
   The gold ball carries NOTHING at rest. Touch it, focus it, or say his
   name and the mark rises out of the gold. Add .coin-awake-default to a
   coin whose face must be visible from the first paint (the hub grids). */
.coin.coin-asleep .coin-inner{opacity:0;transform:scale(.55);
  transition:opacity .24s ease, transform .34s cubic-bezier(.34,1.42,.5,1)}
.coin.coin-asleep.awake .coin-inner,
.coin.coin-asleep:hover .coin-inner,
.cell:hover .coin.coin-asleep .coin-inner,
.cell:focus-visible .coin.coin-asleep .coin-inner{opacity:1;transform:none}
.coin.coin-awake-default .coin-inner{opacity:1;transform:none;transition:none}

/* the lift */
.coin:hover,.cell:hover .coin{transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 30px rgba(21,27,60,.28),
    inset 0 2px 6px rgba(255,255,255,.65),
    inset 0 -6px 12px rgba(90,66,30,.45)}

/* the coin grid + its label */
.coins{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,2vw,18px);width:var(--col)}
.coins.g3{grid-template-columns:repeat(3,1fr)}
.coins.g5{grid-template-columns:repeat(5,1fr)}
.cell{display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:var(--ink);min-width:0;background:none;border:none;
  cursor:pointer;font-family:inherit;padding:0;position:relative;min-height:0}
.cell .label{font-size:clamp(10.5px,1.6vw,12.5px);font-weight:700;
  color:var(--muted);text-align:center;letter-spacing:.03em;line-height:1.25}
.cell:hover .label{color:var(--navy)}
.cell .badge{position:absolute;top:-6px;right:6%;background:var(--gold);
  color:var(--navy-ink);font-size:8.5px;font-weight:800;letter-spacing:.1em;
  padding:3px 8px;border-radius:var(--r-pill);z-index:5}

/* the seal — the coin shrunk to a chip. Same gold, same light source. */
.seal{width:17px;height:17px;border-radius:50%;flex:none;position:relative;
  display:inline-block;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%,
    var(--gold) 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
  box-shadow:0 2px 5px rgba(21,27,60,.28), inset 0 1px 2px rgba(255,255,255,.6),
    inset 0 -2px 4px rgba(90,66,30,.4)}
.seal.seal-lg{width:44px;height:44px}
.seal::after{content:"";position:absolute;inset:22%;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55)}


/* ---------------------------------------------------------------------
   8. THE ASK BAR
   One component, two dresses:
     .searchbox  the hero bar on a front door (input + gold send)
     .askrow     the compact bar inside a room (input + navy send)
     .askout     the output region both of them write into
   .phold is the branded placeholder: an <input> placeholder is a string
   attribute so it cannot carry a lockup. The real one goes transparent
   and this sits over it; :placeholder-shown hides it on first keystroke.
   --------------------------------------------------------------------- */
.searchbox{width:var(--col);position:relative;margin:clamp(18px,3vh,32px) 0 0}
.searchbox input{width:100%;border:1.5px solid var(--line);
  border-radius:var(--r-pill);background:var(--card);
  padding:17px 58px 17px 26px;font-size:16.5px;font-family:inherit;
  color:var(--ink);box-shadow:var(--lift-2);outline:none;
  transition:box-shadow .2s,border-color .2s}
.searchbox input:focus{border-color:var(--gold);
  box-shadow:0 12px 34px rgba(203,162,96,.28)}
.searchbox input::placeholder{color:transparent}
.phold{position:absolute;left:26px;top:50%;transform:translateY(-50%);right:58px;
  pointer-events:none;font-size:16.5px;line-height:1.5;color:var(--muted);
  font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .12s ease}
.searchbox input:not(:placeholder-shown) ~ .phold{opacity:0}
.phold .rw{color:var(--muted);opacity:.92}
.searchbox .btns{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px}
.searchbox button{width:40px;height:40px;min-height:40px;border-radius:50%;
  border:none;cursor:pointer;display:grid;place-items:center;flex:none;padding:0}
.searchbox .go{background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 22%,#d5b271 45%,#ab854a 70%,#7d6238 100%);
  box-shadow:0 3px 8px rgba(21,27,60,.25)}
.searchbox .go svg{width:17px;height:17px;stroke:var(--navy-deep);
  stroke-width:2.4;fill:none}
.searchbox .mic{background:var(--card);border:1.5px solid var(--line)}
.searchbox .mic svg{width:17px;height:17px;fill:var(--navy)}
.searchbox .mic[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)}
.searchbox .mic[aria-pressed="true"] svg{fill:var(--gold)}

/* the compact in-room bar */
.askrow{display:flex;gap:9px;align-items:center;width:100%}
.askrow input{flex:1;min-width:0;border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:12px 18px;font-family:inherit;
  font-size:14.5px;background:var(--card);color:var(--ink)}
.askrow input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.askrow .send{background:var(--navy);color:#fff;border:none;
  border-radius:var(--r-pill);min-width:48px;min-height:48px;font-size:17px;
  cursor:pointer;font-family:inherit;display:grid;place-items:center;flex:none;
  transition:background .15s,transform .12s}
.askrow .send:hover{background:var(--navy-deep);transform:translateY(-1px)}
.askrow .send svg{width:18px;height:18px;fill:#fff}
.askrow .send:disabled{opacity:.55;cursor:default;transform:none}

/* THE OUTPUT REGION. Hidden until it has something to say. */
.askout{width:var(--col);background:var(--card);border:1px solid var(--line);
  border-radius:18px;margin-top:14px;padding:18px 22px;font-size:14.5px;
  line-height:var(--lh-body);color:var(--ink);box-shadow:var(--lift-1);
  display:none;text-align:left}
.askout.show{display:block;animation:royal-rise .28s ease}
@keyframes royal-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.askout .q{color:var(--muted);font-size:13px;margin:0 0 8px}
.askout .a{margin:0}
.askout .hook{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);
  font-size:var(--fs-fine);color:var(--muted)}
/* the beat between send and the first sentence — three gold dots */
.askout.show:empty::after{content:"\25CF\00a0\25CF\00a0\25CF";color:var(--gold-deep);
  letter-spacing:.2em;animation:royal-pulse 1.1s ease-in-out infinite}
@keyframes royal-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* the floating ask pill that follows a visitor down a page */
.askbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:11px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 22px 10px 12px;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 28px rgba(23,31,73,.22);
  transition:transform .22s ease,box-shadow .15s ease,opacity .22s ease;
  max-width:min(480px,calc(100% - 32px))}
.askbar:hover{transform:translateX(-50%) translateY(-2px);
  box-shadow:0 14px 32px rgba(23,31,73,.3)}
.askbar.tucked{transform:translateX(-50%) translateY(140%);opacity:0;pointer-events:none}
.askbar .orb{width:36px;height:36px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, var(--gold) 52%, #a5814a 70%, #6a5330 100%);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.65), inset 0 -3px 6px rgba(90,66,30,.45);
  display:grid;place-items:center;overflow:hidden}
.askbar .orb img{max-width:60%;max-height:60%;display:block;opacity:0;
  transform:scale(.55);
  transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.42,.5,1)}
.askbar:hover .orb img,.askbar:focus-visible .orb img,
.askbar.awake .orb img{opacity:1;transform:none}
.askbar .ask{font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askbar .ask b{color:var(--navy);font-weight:800}


/* ---------------------------------------------------------------------
   9. BUTTONS
   --------------------------------------------------------------------- */
.btn,.btn-primary,.btn-ghost,.btn-gold{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  padding:13px 30px;border-radius:var(--r-pill);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;width:fit-content;text-align:center;
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}

.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(37,48,105,.22)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,48,105,.30)}
.btn-primary:active{transform:none}

.btn-ghost{background:var(--card);color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}

/* the gold bar CTA — the one the house saves for the moment that matters.

   THE LAST STOP BELOW IS MATERIAL, NOT DRIFT. #8a6f3f is where this bar's
   light runs out; it is not --gold-deep wearing the wrong hex (that token
   is #7D6238 and is correct up in section 2). It trips the pre-publish
   drift grep and it is a FALSE POSITIVE every time. Same standing as the
   coin's #c9a15f: a gradient is the object's own material and is never
   re-mixed to a brand token. Do not "fix" it. */
.btn-gold{color:var(--navy-ink);font-weight:800;
  background:linear-gradient(160deg,#fdf6e3 0%,#f0d9a6 18%,#d5b271 45%,#ab854a 78%,#8a6f3f 100%);
  box-shadow:0 8px 20px rgba(21,27,60,.22), inset 0 2px 4px rgba(255,255,255,.7),
    inset 0 -3px 7px rgba(90,66,30,.45)}
.btn-gold:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn:disabled,.btn-primary:disabled,.btn-ghost:disabled,.btn-gold:disabled{
  opacity:.55;cursor:default;transform:none;filter:none;box-shadow:none}
.btn-block{width:100%}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}

/* the pill chip */
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;
  font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;
  font-family:inherit;min-height:44px;transition:border-color .12s,transform .12s}
.chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.on::before{content:"\2713\00a0";color:var(--gold)}

/* the status tag (not a button) */
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);min-height:0}
.tag.live{background:var(--green-bg);color:var(--green)}
.tag.soon{background:rgba(203,162,96,.18);color:var(--gold-deep)}


/* ---------------------------------------------------------------------
   10. CARDS + SECTION RHYTHM
   --------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.card h3{margin:0 0 6px;color:var(--navy)}
.card p{margin:0;font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-body)}
.card-tint{background:var(--card-tint)}
.card-gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF8,#FDF7EC)}
.card-lift{box-shadow:var(--lift-1)}

.cards{display:grid;grid-template-columns:1fr;gap:16px}
.cards.c2{grid-template-columns:1fr}
.cards.c3{grid-template-columns:1fr}

/* the navy panel — the one place a Royal page is not white */
.panel{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,44px) clamp(22px,3.5vw,40px);
  color:#fff;box-shadow:var(--lift-3)}
.panel h2,.panel h3{color:#fff}
.panel p{color:#C7CBE0}
.panel .klabel{font-size:var(--fs-micro);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}

/* the band heading with the gold rule */
.band{width:var(--col)}
.band h2{font-size:12px;font-weight:800;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--muted);margin:var(--band) 0 4px;
  display:flex;align-items:center;gap:10px}
.band h2::after{content:"";flex:1;height:2px;background:var(--gold);
  opacity:.45;border-radius:2px}
.band .bandsub{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 14px}

/* the standing copy sizes */
.lede{font-size:var(--fs-lede);color:var(--muted);max-width:56ch;margin:0 0 22px}
.anchorline{font-size:clamp(14px,2.1vw,17px);color:var(--ink);font-weight:700;
  margin:0 0 6px;text-align:center;max-width:36ch;line-height:1.4}
.anchorsub{font-size:clamp(12.5px,1.8vw,14.5px);color:var(--muted);font-weight:600;
  margin:0 0 20px;text-align:center;max-width:52ch;line-height:1.55}
.fine{font-size:var(--fs-micro);color:var(--muted);line-height:var(--lh-body);
  max-width:60ch}

/* the promise row — three short truths, side by side */
.promise{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:var(--sec) 0 0;width:var(--col)}
.promise div{flex:1 1 150px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;text-align:center}
.promise b{display:block;font-size:15px;color:var(--navy);letter-spacing:-.01em}
.promise small{display:block;font-size:var(--fs-fine);color:var(--muted);
  font-weight:600;line-height:1.5;margin-top:3px}

/* the trust box */
.trust{width:var(--col);background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 20px;margin-top:clamp(24px,4.5vh,40px);
  font-size:12px;color:var(--muted);line-height:var(--lh-body);text-align:center}
.trust b{color:var(--ink)}

/* the toast — every tap gets an answer, never a dead click */
.toast{position:fixed;bottom:34px;left:50%;
  transform:translateX(-50%) translateY(8px);background:var(--navy);color:#fff;
  padding:11px 22px;border-radius:var(--r-pill);font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90;
  max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}


/* ---------------------------------------------------------------------
   11. THE FOOTER
   The standard footer, and only the standard footer: company name,
   NMLS #2059962, Equal Housing Lender, not a commitment to lend,
   copyright. Nothing is added to it and nothing is taken out of it.
   Markup is in README.md 5.
   --------------------------------------------------------------------- */
footer{padding:26px var(--gutter) 34px;text-align:center;
  font-size:var(--fs-fine);color:var(--muted);line-height:1.7;
  border-top:1px solid var(--line);margin-top:var(--sec)}
footer .wrap,footer .col{text-align:center}
footer b{color:var(--ink)}
footer a{color:var(--muted)}
footer a:hover{color:var(--navy)}
.ehl{width:13px;height:13px;vertical-align:-2px;fill:currentColor}
.flinks{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  margin-bottom:14px;font-size:14px;font-weight:600}
.flinks a{color:var(--navy);text-decoration:none;opacity:.85}
.flinks a:hover{opacity:1}


/* ---------------------------------------------------------------------
   11b. FORM FIELDS + SMALL PARTS
   Everything a page needs that is not the ask bar.
   --------------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr;gap:14px;max-width:640px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;padding:12px 15px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);resize:vertical}
.field textarea{min-height:96px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.field input:disabled,.field select:disabled,.field textarea:disabled{
  background:var(--card-tint);color:var(--ink-off);cursor:not-allowed}
/* the honeypot. Off-screen, never display:none — a bot reads that. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.errnote{color:var(--alert);font-size:12px;font-weight:600}
.errnote:empty{display:none}

/* the hero headline, one step above h1 */
.h-hero{font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:800;
  letter-spacing:-.02em;color:var(--navy);margin:0 0 18px;text-wrap:balance}
.h-hero .gold{color:var(--gold-deep)}

/* the groove: progress, timeline, a bar that fills */
.bar{height:7px;background:var(--track);border-radius:var(--r-pill);
  overflow:hidden;margin:6px 0 14px}
.bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .35s ease}

/* the divider inside a card */
.divider{border:0;border-top:1px solid var(--line-soft);margin:14px 0}

/* a key/value row */
.kv{display:flex;justify-content:space-between;gap:18px;padding:6px 0;
  border-bottom:1px dashed var(--line-soft);font-size:var(--fs-small)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{color:var(--ink);font-weight:700;text-align:right}
.kv.off .v{color:var(--ink-off);font-weight:500}


/* ---------------------------------------------------------------------
   12. BREAKPOINTS
   390  the phone floor        (iPhone 14/15/16 portrait)
   768  tablet and up          (layouts open to two and three columns)
   1280 the desk               (the rail stops growing, air comes in)
   --------------------------------------------------------------------- */

/* ---- 390 and under: the phone floor ---- */
@media (max-width:390px){
  :root{--gutter:16px;--rail:min(1080px, 100% - 32px)}
  .brandbar{gap:12px}
  .brandbar .mark{height:36px}
  .brandbar nav{gap:16px;font-size:13.5px;width:100%;justify-content:center}
  .coins{gap:9px}
  .coin.coin-fluid{max-width:72px}
  .searchbox input{padding:15px 52px 15px 20px;font-size:16px}
  .phold{left:20px;right:52px;font-size:16px}
  .btn,.btn-primary,.btn-ghost,.btn-gold{padding:12px 22px;font-size:14px}
  .btnrow{gap:10px}
  .btnrow .btn,.btnrow .btn-primary,.btnrow .btn-ghost,.btnrow .btn-gold{
    flex:1 1 100%}
  .card{padding:16px 18px}
  .panel{border-radius:var(--r)}
  .promise div{flex:1 1 100%}
  .askbar{bottom:14px;padding:8px 16px 8px 9px}
  .askbar .ask{font-size:13px}
}

/* ---- 768 and up: tablet ---- */
@media (min-width:768px){
  /* --col widens here rather than each component, so a narrow section and
     everything nested inside it stay on the same centre line. */
  :root{--gutter:28px;--col:min(680px, 100%)}
  .cards.c2{grid-template-columns:1fr 1fr}
  .cards.c3{grid-template-columns:repeat(3,1fr)}
  .form{grid-template-columns:1fr 1fr}
  .coins{gap:18px}
  .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;
    align-items:center;padding:56px 0 36px}
  .panel.panel-split{display:grid;grid-template-columns:1fr auto;gap:28px;
    align-items:center}
}

/* ---- 1280 and up: the desk ---- */
@media (min-width:1280px){
  :root{--gutter:32px;--rail:1080px;--col:min(720px, 100%)}
  body{font-size:15.5px}
  .coins{gap:22px}
  .hero{gap:56px;padding:72px 0 44px}
  .brandbar nav{gap:30px}
  .section{margin-top:clamp(56px,7vh,96px)}
}

/* ---- stacking below tablet ---- */
@media (max-width:767px){
  .hero{display:block}
  .panel.panel-split{display:block;text-align:center}
  .panel.panel-split .btn,.panel.panel-split .btn-primary,
  .panel.panel-split .btn-gold{margin:18px auto 0}
}

/* ---- motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .coin,.coin.coin-asleep .coin-inner,.askbar{transition:none}
  .coin:hover,.cell:hover .coin{transform:none}
}


/* ---------------------------------------------------------------------
   13. PRINT
   A Royal page printed is a leave-behind. Navy panels become white with
   a rule, the coin becomes a gold ring (radial gradients print as mud),
   the floating chrome disappears, and every link shows where it goes.
   --------------------------------------------------------------------- */
@media print{
  @page{margin:14mm}
  html,body{background:#fff !important;color:#000 !important;
    font-size:10.5pt;line-height:1.45}
  body{display:block;min-height:0}
  .askbar,.toast,.searchbox .btns,.askrow .send,.brandbar nav,.chip,
  [data-noprint]{display:none !important}
  header,footer{border-color:#999}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  a[href^="#"]::after,a[href^="mailto"]::after{content:""}

  .panel{background:#fff !important;color:#000 !important;
    border:1.5pt solid var(--navy);box-shadow:none}
  .panel h2,.panel h3{color:#000 !important}
  .panel p,.panel .klabel{color:#333 !important}

  .card,.trust,.promise div,.askout{border:.75pt solid #999 !important;
    box-shadow:none !important;break-inside:avoid}

  .coin{background:#fff !important;border:2.5pt solid var(--gold-deep);
    box-shadow:none !important;width:84px;height:84px}
  .coin::after{display:none}
  .coin-inner{background:#fff !important;box-shadow:none !important}
  .seal{background:#fff !important;border:1pt solid var(--gold-deep);box-shadow:none !important}
  .rw i{background:#fff !important;border:1pt solid var(--gold-deep);box-shadow:none !important}

  .btn,.btn-primary,.btn-ghost,.btn-gold{background:#fff !important;
    color:#000 !important;border:1pt solid var(--navy) !important;
    box-shadow:none !important;filter:none !important}

  h1,h2,h3{break-after:avoid;color:#000}
  .section,.band{break-inside:avoid}
  footer{margin-top:16pt}
}