/* ============================================================
   ROYAL Ai — royalai.ai design system
   Source of truth: the locked Layer-1 home + Worlds v2.
   Navy #253069 · Gold #CBA260 · quiet-luxury, coins, gold-bar pop.

   THIS FILE IS THIS SURFACE'S DESIGN SYSTEM, AND THAT IS DELIBERATE.
   The shared Royal system lives at ../_royal-system/royal-system.css and is
   linked directly by the sites that were built on it (rm-dot-com,
   royalai.app-v2). royalai.ai does NOT link it and must not: the two files
   collide on 49 identical selectors — including :root, body, .coin, .stage,
   .hero, .searchbox, .askbar, .band and footer — so whichever loads second
   silently wins on every colliding property, across roughly ninety layer-3
   and layer-4 tool screens. A byte-identical unlinked copy used to sit beside
   this file as css/royal-system.css; it was deleted on the hardening pass
   because a duplicate nobody loads is not compliance, it is a second copy
   free to rot. Compliance with the shared system on this surface is TOKEN
   PARITY, verified: navy, gold, gold-deep, paper, card, ink, muted, line and
   green all match _royal-system/royal-system.css exactly. The single
   remaining divergence is --navy-deep (#0E1D49 here, #171F49 there); it is
   not a filed brand token and it is the dark end of the welcome overlay, the
   Meet him pill and the button hovers, so it is left for the owner to call.

   RECONCILED 7/28/2026 to the filed brand guide and to that shared system:
     --navy  was 152B6B, now #253069   (the filed navy; 152B6B was drift)
     --gold  was CAA25F, now #CBA260   (the filed gold; CAA25F was drift)
     --paper was F8F6F1, now #FFFFFF   (EVERY Royal page background is white)
   The 52% stop inside the canon coin gradient stays #c9a15f: that is the
   coin's own material, not a brand token, and it is never re-mixed.
   ============================================================ */
:root{
  --navy:#253069; --navy-deep:#0E1D49; --gold:#CBA260; --gold-deep:#7D6238;
  --paper:#FFFFFF; --card:#FFFFFF; --ink:#1B2140; --muted:#5C6178; --line:#E7E4DB;
  --green:#2F6B4F; --greenbg:#EFF6F2;
  /* promoted from royal-daylight.html: the softer greys the bars and dead cells use.
     --ink-off was #B7B3A8, which measures 1.94:1 on --paper — under the 3:1 floor even
     for non-text graphics, so the dead-cell marker in a schedule table was invisible.
     #8F8B80 is 3.9:1: still clearly recessive, actually readable.
     --track is the bar / timeline / progress groove. It was hand-typed as #EDEBE2 in
     three files before it had a name. */
  --muted-lite:#8891B4; --ink-off:#8F8B80; --track:#EDEBE2;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);
  /* The fallback lives INSIDE the var(): --royal-font is defined only in css/font.css.
     If that request 404s or the SW misses, a bare var(--royal-font) is invalid at
     computed-value time and font-family falls all the way to the UA serif. */
  font-family:var(--royal-font,'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  overflow-x:hidden}
.brandword{font-weight:800;color:var(--navy)}
.brandword i{font-style:italic;color:var(--gold-deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Keyboard focus, site-wide. Promoted out of royal-daylight.html, which was the only page
   that had it — everything linking this file was falling back to the UA ring, which is
   effectively invisible on the navy hero. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- top strip ---------- */
/* KNOWN DIVERGENCE, left standing on purpose: the two standalone pages that inline their
   own CSS (precision-pricing.html, royal-daylight.html) use `padding:18px 20px 0` and
   `max-width:660px`. This file is what app.html renders, and reconciling the two moves the
   flagship's top strip — a brand-geometry call for the owner, not a cleanup. If you are
   writing a new page, copy ONE of these two; do not invent a third. */
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  max-width:700px;margin:0 auto;width:100%}
/* The back link is the only navigation on a world or tool overlay, and with padding:0 its
   computed height was the 19px .arr line box — well under the 44px tap floor, on every page
   that links this file. The padding buys the target; the matching negative margin cancels
   the visual shift, so .top alignment and the absolutely-positioned .whead/.thead backs
   below do not move. Promoted verbatim out of royal-daylight.html. */
.back{display:inline-flex;align-items:center;gap:7px;color:var(--navy);text-decoration:none;
  font-size:14px;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:12px 6px;margin:-12px -6px;min-height:44px}
.back .arr{font-size:19px;line-height:1}
.top .tag{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold-deep);text-transform:uppercase}

/* ---------- hero ----------
   NO BLUE BANNER (Bryan, 7/28/2026). This used to be a full-width navy
   gradient band — the blue banner on the second layer. It is white now, like
   every Royal page, and it carries the front door's own navy-and-gold
   wordmark rather than the gold-on-navy chrome lockup, which washed out the
   moment the navy went away. --gold on white is ~2.4:1, so the emphasis in
   the anchor line takes --gold-deep (5.29:1) instead. */
.hero{background:var(--paper);
  padding:clamp(28px,5vh,50px) 24px clamp(24px,4vh,38px);text-align:center}
.hero img{width:min(430px,82vw);height:auto;display:block;margin:0 auto}
.hero .heromark{width:min(430px,84vw);height:auto;display:block;margin:0 auto;overflow:visible}
.hero .anchor{color:var(--muted);font-size:clamp(14.5px,2.2vw,17.5px);font-weight:600;
  margin:clamp(14px,2.6vh,22px) auto 0;max-width:46ch;line-height:1.5}
.hero .anchor em{font-style:normal;color:var(--gold-deep);font-weight:700}

/* ---------- stage + bands ---------- */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 20px 110px;width:100%}
.band{width:min(640px,100%)}
.band h2{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:clamp(26px,4.5vh,40px) 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}

/* ---------- coins ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,18px)}
.grid.g5{grid-template-columns:repeat(5,1fr)}
.cell{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink);min-width:0;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:0;position:relative}
/* 108px is the coin, everywhere. Same diameter on the front door, the hub,
   and here — one family or it is not a family. */
/* THE CANON COIN GRADIENT IS LITERAL, NOT TOKENISED. The 52% stop is #c9a15f —
   the coin's own material — and it must never ride --gold, or every correction
   to the brand token silently re-mixes the coin. It used to be var(--gold)
   here while index.html spelled #c9a15f, so the front door and the app were
   already painting two different coins; pinning it settles that too. */
.coin{width:100%;max-width:108px;aspect-ratio:1;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 8px 18px rgba(21,27,60,.20),
    inset 0 2px 6px rgba(255,255,255,.65),
    inset 0 -6px 12px rgba(90,66,30,.45);
  display:grid;place-items:center;transition:transform .16s ease, box-shadow .16s 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}
.cell:hover .coin{transform:translateY(-4px) scale(1.05);
  box-shadow:0 13px 26px rgba(21,27,60,.28),inset 0 2px 6px rgba(255,255,255,.65),inset 0 -6px 12px rgba(90,66,30,.45)}
/* 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 his named
   reference "BuilderBee Home Base Button - Rover Match.png".
   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;box-shadow:inset 0 1px 4px rgba(90,66,30,.35)}
.coin .inner svg{width:59%;height:59%;fill:var(--navy);stroke:none}
.coin .inner img{max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.coin .inner svg .gold{fill:var(--gold)}
/* The floor was 10.5px, which on a 390px phone made the names of the sixteen
   doors — the whole navigation — smaller than the NMLS line in the footer of
   the same page. 11.5px is the phone size now; the 12px ceiling is untouched,
   so anything from 800px up renders exactly as before. */
.cell .label{font-size:clamp(11.5px,1.5vw,12px);font-weight:700;color:var(--muted);
  text-align:center;letter-spacing:.02em;line-height:1.25}
.cell:hover .label{color:var(--navy)}
.cell .badge{position:absolute;top:-6px;right:6%;background:var(--gold);color:var(--navy-deep);
  font-size:8.5px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:99px;z-index:5}

.cell.popping .coin{animation:pop .26s cubic-bezier(.5,1.6,.6,1) forwards}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(.06);opacity:0}}
.cell.restored .coin{animation:restore .32s ease-out}
@keyframes restore{from{transform:scale(.06);opacity:0}to{transform:scale(1);opacity:1}}
.particle{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f5e2b4, var(--gold) 60%, #8a6f3f);
  pointer-events:none;z-index:40}

/* ---------- world panel ---------- */
.world{position:fixed;inset:0;background:var(--paper);z-index:50;overflow-y:auto;
  transform:translateY(14px);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .24s ease}
.world.show{transform:translateY(0);opacity:1;pointer-events:auto}
.whead{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:14px 20px 30px;text-align:center;position:relative}
.whead .back{position:absolute;left:18px;top:16px;color:#DCE0EF}
.whead .wcoin{width:86px;margin:26px auto 0}
.whead .wcoin .coin{max-width:86px}
.whead h1{color:#fff;font-size:22px;margin:14px 0 6px;letter-spacing:.03em}
.whead .wtag{color:#DCE0EF;font-size:13.5px;font-weight:600;margin:0}
.whead .wtag em{font-style:normal;color:var(--gold)}
.wstage{max-width:640px;margin:0 auto;padding:26px 20px 120px}
.wstage .grid{grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,22px)}
.wstage .coin{max-width:84px}

/* ---------- Layer 3: the tool screen ---------- */
.tool{position:fixed;inset:0;background:var(--paper);z-index:52;overflow-y:auto;
  transform:translateY(14px);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .24s ease}
.tool.show{transform:translateY(0);opacity:1;pointer-events:auto}
.thead{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:14px 20px 34px;text-align:center;position:relative}
.thead .back{position:absolute;left:18px;top:16px;color:#DCE0EF}
.thead .tcoin{width:72px;margin:26px auto 0}
.thead .tcoin .coin{max-width:72px}
.thead .tbar{width:min(360px,86%);margin:16px auto 0;min-height:52px;border-radius:10px;
  background:linear-gradient(160deg,#fdf6e3 0%,#f0d9a6 18%,#d5b271 45%,#ab854a 75%,#8a6f3f 100%);
  box-shadow:0 10px 24px rgba(21,27,60,.35), inset 0 2px 5px rgba(255,255,255,.7), inset 0 -5px 9px rgba(90,66,30,.5);
  display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 16px}
.thead .tbar b{color:var(--navy-deep);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.thead .ttag{color:#DCE0EF;font-size:13.5px;font-weight:600;margin:12px auto 0;max-width:46ch}
.thead .ttag em{font-style:normal;color:var(--gold)}
/* The chip's SHAPE is global; only its position in the tool header is scoped. It used to be
   the other way round — base scoped to .thead, all three modifiers global — so a chip used
   anywhere else got the colors and none of the pill: no display, no size, no padding, no
   radius. Matches royal-daylight.html's standalone .chip exactly. */
.chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:99px}
.thead .chip{margin-top:12px}
.chip.live{background:var(--greenbg);color:var(--green)}
/* --gold on an 18% gold tint is ~2.0:1 — nowhere near AA for 10px uppercase.
   --gold-deep is the readable one; royal-daylight.html already had it right. */
.chip.staged{background:rgba(202,162,95,.18);color:var(--gold-deep)}
.chip.app{background:rgba(255,255,255,.12);color:#DCE0EF}
.tstage{max-width:600px;margin:0 auto;padding:24px 20px 130px}
.tintro{font-size:15px;line-height:1.65;color:var(--ink);text-align:center;margin:0 0 20px}

.tcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;margin-bottom:14px}
.tcard h3{margin:0 0 6px;font-size:14.5px;color:var(--navy);letter-spacing:.01em}
.tcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6;font-weight:500}

/* checklist */
.check{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.check:last-child{border-bottom:none}
.check .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.check.done .box{background:var(--gold);border-color:var(--gold)}
.check .box svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.check.done .box svg{opacity:1}
.check .ctext{font-size:13.5px;line-height:1.5;color:var(--ink);font-weight:600}
.check .ctext small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.check.done .ctext{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(90,66,30,.4)}
.check.done .ctext small{text-decoration:none}
.cprog{height:7px;background:var(--track);border-radius:99px;margin:4px 0 16px;overflow:hidden}
.cprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  border-radius:99px;transition:width .3s ease}

/* quiz */
.qstep .qq{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 14px;text-align:center;line-height:1.45}
.qopts{display:flex;flex-direction:column;gap:9px}
.qopts button{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px 16px;
  font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .15s, transform .12s}
.qopts button:hover{border-color:var(--gold);transform:translateY(-1px)}
.qnote{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.55}
.qdots{display:flex;gap:6px;justify-content:center;margin:0 0 18px}
.qdots i{width:7px;height:7px;border-radius:50%;background:#DEDCD1}
.qdots i.on{background:var(--gold)}

/* calculator */
.calc label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 5px}
.calc input,.calc select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;
  font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)}
.calc input:focus,.calc select:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.calcout{margin-top:18px;background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-radius:16px;padding:20px 22px;text-align:center;color:#fff}
.calcout .klabel{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.calcout .kval{font-size:clamp(26px,6vw,34px);font-weight:800;margin:6px 0 2px;letter-spacing:-.01em}
.calcout .ksub{font-size:12px;color:#C9CDE2;line-height:1.5}
.calcout.idle .kval{color:#8F97BC;font-size:15px;font-weight:600}

/* chat */
.chatlog{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.msg{max-width:86%;border-radius:16px;padding:11px 15px;font-size:13.5px;line-height:1.55}
.msg.you{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.msg.rai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.rai b i{font-style:italic;color:var(--gold-deep)}
.sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
/* the starter chips came out 33px tall — the input and the send button beside
   them are already 48px, so these were the short ones in their own row */
.sugg button{background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;font-family:inherit;
  min-height:44px}
.sugg button:hover{border-color:var(--gold)}
.chatrow{display:flex;gap:9px}
.chatrow input{flex:1;border:1px solid var(--line);border-radius:99px;padding:12px 18px;
  font-family:inherit;font-size:14px;background:var(--card);color:var(--ink);min-width:0}
.chatrow input:focus{outline:2px solid var(--gold)}
.chatrow .send{background:var(--navy);color:#fff;border:none;border-radius:99px;min-width:48px;min-height:48px;
  font-size:17px;cursor:pointer;font-family:inherit}

/* CTAs */
.cta{display:block;margin:18px auto 0;background:var(--navy);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;padding:13px 34px;border-radius:99px;text-decoration:none;
  text-align:center;width:fit-content}
.cta:hover{background:var(--navy-deep)}
.cta.goldcta{background:var(--gold);color:var(--navy-deep)}
/* the outline variant — promoted out of royal-daylight.html so it is available site-wide */
.cta.ghost{background:var(--card);color:var(--navy);border:1.5px solid var(--line)}
.cta.ghost:hover{background:var(--card);border-color:var(--gold)}
.appnudge{margin-top:20px;background:var(--card);border:1.5px solid var(--gold);border-radius:16px;
  padding:18px 20px;text-align:center}
.appnudge p{margin:0 0 4px;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.55}
.appnudge small{font-size:11.5px;color:var(--muted)}

/* fine print */
.fine{font-size:10.5px;color:var(--muted);margin:18px auto 0;text-align:center;line-height:1.6;max-width:52ch}

/* ---------- tool sheet (gold-bar pop) ---------- */
.veil{position:fixed;inset:0;background:rgba(14,29,73,.45);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:60}
.veil.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(560px,100%);
  background:var(--paper);border-radius:22px 22px 0 0;z-index:70;
  box-shadow:0 -18px 50px rgba(14,29,73,.35);padding:0 22px 26px;
  transition:transform .3s cubic-bezier(.3,1.2,.4,1)}
.sheet.show{transform:translate(-50%,0)}
.goldbar{width:min(340px,84%);margin:-26px auto 14px;height:52px;border-radius:10px;
  background:linear-gradient(160deg,#fdf6e3 0%,#f0d9a6 18%,#d5b271 45%,#ab854a 75%,#8a6f3f 100%);
  box-shadow:0 10px 24px rgba(21,27,60,.35), inset 0 2px 5px rgba(255,255,255,.7), inset 0 -5px 9px rgba(90,66,30,.5);
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;
  transform:translateY(18px) scale(.6);opacity:0;transition:transform .3s cubic-bezier(.3,1.5,.5,1) .06s, opacity .16s .06s}
.sheet.show .goldbar{transform:translateY(0) scale(1);opacity:1}
.goldbar b{color:var(--navy-deep);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goldbar svg{width:18px;height:18px;fill:var(--navy-deep);flex:none}
.sheet .close,.rsheet .close{position:absolute;top:2px;right:4px;background:none;border:none;font-size:22px;
  color:var(--muted);cursor:pointer;font-family:inherit;min-width:48px;min-height:48px}
.sheet .ssub{text-align:center;font-size:13px;color:var(--gold-deep);font-weight:700;margin:0 0 10px}
.sheet .sbody{font-size:14px;color:var(--ink);line-height:1.65;margin:0 auto 16px;max-width:46ch;text-align:center}
.sheet .cta{margin:0 auto}
.sheet .fine{margin:14px 0 0}

/* ---------- the big search bar — the same bar as the front door ----------
   Copied stroke-for-stroke from index.html so the two pages read as one page:
   the mark, the bar, then the doors. Wired to the ask sheet in app.js. */
.searchbox{width:min(620px,100%);position:relative;
  margin:clamp(22px,4vh,42px) 0 clamp(10px,2vh,20px)}
.searchbox input{width:100%;border:1.5px solid var(--line);border-radius:999px;
  background:var(--card);padding:17px 58px 17px 26px;font-size:16.5px;font-family:inherit;
  color:var(--ink);box-shadow:0 10px 30px rgba(21,43,107,.10);outline:none;
  transition:box-shadow .2s,border-color .2s}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 12px 34px rgba(202,162,95,.28)}
.searchbox button{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 22%,#d5b271 45%,#ab854a 70%,#7d6238 100%);
  display:grid;place-items:center;box-shadow:0 3px 8px rgba(21,27,60,.25)}
.searchbox button svg{width:17px;height:17px;stroke:var(--navy-deep);stroke-width:2.4;fill:none}

/* ---------- ask bar ---------- */
.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:99px;padding:10px 22px 10px 12px;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 28px rgba(14,29,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(14,29,73,.3)}
/* TUCKED: while the big search bar is on screen there is no reason for a
   second one, and the floating pill sits on top of the bottom row of coin
   labels — which must always be readable. It slides back the moment the big
   bar scrolls away, so the escape hatch is never gone in the deeper layers. */
.askbar.tucked{transform:translateX(-50%) translateY(140%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.askbar.tucked{transition:none}}
/* ASLEEP, THEN AWAKE (Bryan, 7/25/2026): the ask-bar orb is ROVER's gold
   ball — empty at rest. Hover, focus, or opening the sheet brings the
   chrome castle R up out of the gold. In the sheet he is talking, so the
   sheet orb is always awake. */
.askbar .orb,.rsheet .orb{width:36px;height:36px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 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 svg{width:20px;height:20px}
.askbar .orb img,.rsheet .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,
.rsheet .orb img{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.askbar .orb img{transition:opacity .01s linear;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}
.askbar .ask b i{font-style:italic;color:var(--gold-deep)}
/* the Ai in the ask line is the real chrome mark, sized up so it holds */
.askbar .ask b img.aimk,.rsheet .rtitle img.aimk{height:1.05em;width:auto;
  vertical-align:-.14em;margin:0 .03em;-webkit-user-drag:none}

.rsheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(560px,100%);
  background:var(--paper);border-radius:22px 22px 0 0;z-index:80;
  box-shadow:0 -18px 50px rgba(14,29,73,.35);padding:0 22px 24px;
  transition:transform .3s cubic-bezier(.3,1.2,.4,1)}
.rsheet.show{transform:translate(-50%,0)}
.rsheet .rhead{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px 0 4px}
.rsheet .rhead .orb{width:42px;height:42px}
.rsheet .rhead .orb svg{width:24px;height:24px}
.rsheet .rhead .rtitle{font-size:17px}
.rsheet .rsub{text-align:center;font-size:12.5px;color:var(--muted);font-weight:600;margin:6px 0 14px}
/* MEET ROVER — the one control on this site that summons the first-run intro.
   Nothing autoplays anywhere any more, so this button IS the feature's door.
   ROVER's wordmark is cut for navy (platinum R, gold ball, near-white VER), so
   it rides a navy pill rather than sitting invisible on a white sheet. */
.meetrover{display:flex;align-items:center;gap:13px;margin:0 auto 14px;cursor:pointer;
  background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:none;border-radius:99px;padding:9px 22px 9px 17px;font-family:inherit;
  min-height:48px;box-shadow:0 8px 20px rgba(14,29,73,.22);
  transition:transform .16s ease,box-shadow .16s ease}
.meetrover img{height:20px;width:auto;display:block;-webkit-user-drag:none}
.meetrover span{font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.meetrover:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(14,29,73,.3)}
@media (prefers-reduced-motion: reduce){ .meetrover{transition:none} }
.rsheet .row{display:flex;gap:9px}
.rsheet input{flex:1;border:1px solid var(--line);border-radius:99px;padding:12px 18px;
  font-family:inherit;font-size:14px;background:var(--card);color:var(--ink);min-width:0}
.rsheet input:focus{outline:2px solid var(--gold)}
.rsheet .send{background:var(--navy);color:#fff;border:none;border-radius:99px;min-width:48px;min-height:48px;
  font-size:17px;cursor:pointer;font-family:inherit}
.rsheet .ranswer{display:none;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;font-size:13px;line-height:1.6;color:var(--ink);margin:12px 0 0}
.rsheet .ranswer.show{display:block}
.rsheet .fine{margin:12px 0 0}
/* THINKING — the beat between send and the first cleared sentence. The orb
   breathes and three gold dots hold the answer box, on the SAME FRAME as the
   tap — acknowledgment costs zero round-trips (the Royal treatment: perceived
   speed is a product feature). With no endpoint configured the concierge line
   resolves before the next paint, so none of this ever becomes visible there —
   the waiting state belongs to the live engine alone. */
.rsheet.thinking .rhead .orb{animation:rthink 1.3s ease-in-out infinite}
@keyframes rthink{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.rsheet .ranswer.show:empty::after{content:"\25CF\00a0\25CF\00a0\25CF";color:var(--gold-deep);
  letter-spacing:.2em;animation:pulse 1.1s ease-in-out infinite}
/* the chat renderer's placeholder bubble — same dots, same clock */
.msg.rai.thinking:empty::after{content:"\25CF\00a0\25CF\00a0\25CF";color:var(--gold-deep);
  letter-spacing:.2em;animation:pulse 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .rsheet.thinking .rhead .orb{animation:none}
  .rsheet .ranswer.show:empty::after,.msg.rai.thinking:empty::after{animation:none}
}

/* ---------- trust + footer + toast ---------- */
.trust{width:min(640px,100%);background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;margin-top:clamp(28px,5vh,44px);font-size:12px;color:var(--muted);
  line-height:1.6;text-align:center}
.trust b{color:var(--ink)}
footer{padding:22px 16px 96px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.6}
footer b{color:var(--ink)}
.toast{position:fixed;bottom:92px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--navy);color:#fff;padding:10px 22px;border-radius:99px;font-size:13px;
  font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion: reduce){
  .cell.popping .coin,.cell.restored .coin{animation:none}
  .particle{display:none}
  .sheet,.goldbar,.rsheet,.world,.tool{transition:none}
}

/* ---------- THE LAYERS: coins leave, fewer coins arrive — same room, every layer ---------- */
.cell.leaving .coin{animation:leave .24s ease forwards}
@keyframes leave{to{transform:scale(.06);opacity:0}}
.cell.leaving .label{transition:opacity .18s;opacity:0}
.cell.arriving .coin{animation:arrive .3s cubic-bezier(.4,1.4,.5,1)}
@keyframes arrive{from{transform:scale(.06);opacity:0}to{transform:scale(1);opacity:1}}
.bandsub .crumb{color:var(--gold-deep);font-weight:800}
@media (prefers-reduced-motion: reduce){
  .cell.leaving .coin,.cell.arriving .coin{animation:none}
  .cell.leaving .label{transition:none;opacity:1}
}

/* ---------- THE AI TOOL — one interface, six shapes (compose/analyze/match/simulate/plan/ask).
   Every room bottoms out here: inputs, one gold action, one streamed answer. ---------- */
.aitool label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px}
.aitool label:first-child{margin-top:0}
.aitool input[type=text],.aitool input[type=number],.aitool select,.aitool textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;
  font-family:inherit;font-size:15px;background:var(--card);color:var(--ink);resize:vertical}
.aitool textarea{min-height:96px;line-height:1.55}
.aitool input:focus,.aitool select:focus,.aitool textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.aitool .chips{display:flex;flex-wrap:wrap;gap:8px}
.aitool .chips button{background:var(--card);border:1.5px solid var(--line);border-radius:99px;
  padding:9px 16px;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;font-family:inherit;
  transition:border-color .15s,background .15s}
.aitool .chips button:hover{border-color:var(--gold)}
.aitool .chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.aitool .chips button.on::before{content:"\2713\00a0";color:var(--gold)}

.airun{display:block;margin:20px auto 0;width:fit-content;cursor:pointer;font-family:inherit;
  border:none;border-radius:99px;padding:14px 38px;font-size:14.5px;font-weight:800;letter-spacing:.03em;
  color:var(--navy-deep);
  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)}
.airun:hover{filter:brightness(1.05)}
.airun:disabled{opacity:.55;cursor:default;filter:none}

.airesult{margin-top:20px;background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-radius:16px;padding:22px 24px;color:#fff}
.airesult .rlabel{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);text-align:center;margin-bottom:12px}
.airesult .rbody{font-size:14px;line-height:1.7;color:#EDEFF7;white-space:pre-wrap}
.airesult.idle .rbody{color:#8F97BC;text-align:center;font-size:13.5px;white-space:normal}
.airesult .rbody:empty::after{content:"\25CF\00a0\25CF\00a0\25CF";color:var(--gold);letter-spacing:.2em;
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.airesult .rfollow{margin-top:14px;padding-top:12px;border-top:1px solid rgba(202,162,95,.35);
  font-size:11.5px;color:#B9C0DA;line-height:1.55}

@media (prefers-reduced-motion: reduce){
  .airesult .rbody:empty::after{animation:none}
}

/* ============================================================
   THE VAULT — Royal Seals, the ladder, the pop
   The seal is the coin, shrunk: same gold, same light source.
   ============================================================ */
.seal,.vseal{border-radius:50%;flex:none;position:relative;display:inline-block;
  /* The seal IS the coin, shrunk — so it takes the coin's literal material,
     #c9a15f, not the brand token. (This used to read var(--gold) on the
     argument that the coin above used the token; the coin no longer does.) */
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%,
    #c9a15f 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{width:17px;height:17px}
.vseal{width:44px;height:44px}
.seal::after,.vseal::after{content:"";position:absolute;inset:22%;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55)}

/* the chip in the top strip */
/* min-height is the same 44px tap floor .back already buys three rules up, and
   it costs nothing here: .top is align-items:center and the back link is
   already 44px, so the strip does not move — the chip just stops being the one
   31px target on a phone, sitting alone in the corner where a near-miss hits
   nothing at all. It is the only door to the Vault. */
.sealchip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 9px;cursor:pointer;
  min-height:44px;
  font-family:inherit;box-shadow:0 2px 8px rgba(21,43,107,.08);transition:transform .16s,box-shadow .16s}
.sealchip:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(21,43,107,.14)}
.sealchip b{font-size:14px;color:var(--navy);font-weight:800;line-height:1}
.sealchip .rankname{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep)}
.sealchip.bump{animation:sealbump .5s cubic-bezier(.2,.9,.3,1)}
@keyframes sealbump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

/* the sheet */
/* 65 SITS ABOVE THE VEIL, AND IT HAS TO. app.js::openVault raises .veil (z 60)
   with this sheet, exactly like the tool sheet (70) and the ROVER sheet (80) do
   — but this one shipped at z-index 40, under its own scrim. The whole Vault
   painted through 45% navy, and because .veil is pointer-events:auto while
   shown and its click handler is closeVault, every tap aimed at a rank row
   landed on the scrim and shut the room instead. 65 clears the veil and the
   ask pill (55) and stays under both sheets that are allowed to cover it. */
.vsheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(560px,100%);
  background:var(--paper);border-radius:22px 22px 0 0;padding:24px 22px 30px;z-index:65;
  box-shadow:0 -14px 44px rgba(14,29,73,.3);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  max-height:88vh;overflow-y:auto}
.vsheet.show{transform:translate(-50%,0)}
.vsheet .close{position:absolute;top:2px;right:4px;background:none;border:none;font-size:22px;
  color:var(--muted);cursor:pointer;padding:10px 14px;line-height:1}
.vhead{text-align:center;padding-top:4px}
.vhead .vtitle{display:block;font-size:19px;color:var(--navy);letter-spacing:-.01em;margin-top:8px}
.vhead .vsub{margin:5px 0 0;font-size:12.5px;color:var(--muted);font-weight:600}

.vmeter{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:15px 18px;margin:18px 0 14px}
.vnum{text-align:center;flex:none}
.vnum b{display:block;font-size:26px;color:var(--navy);font-weight:800;line-height:1}
.vnum small{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.vbarwrap{flex:1;min-width:0}
.vrankrow{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:700;
  color:var(--muted);margin-bottom:7px}
.vrankrow span:first-child{color:var(--navy);font-weight:800;letter-spacing:.04em}
.vbar{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.vbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#e2c283,var(--gold));transition:width .6s cubic-bezier(.2,.8,.3,1)}

.vladder{display:flex;flex-direction:column;gap:9px}
.vrung{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px}
.vrung.got{border-color:var(--gold);background:#FDFAF3}
.vrung .rdot{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--line);color:var(--muted);font-size:10.5px;font-weight:800}
.vrung.got .rdot{background:radial-gradient(circle at 32% 26%,#f8ecc9,#d9b878 55%,#a5814a 100%);
  color:var(--navy-deep)}
.vrung .rtxt{min-width:0}
.vrung .rtxt b{display:block;font-size:13.5px;color:var(--navy);letter-spacing:.01em}
.vrung .rtxt small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
.vrung .rtxt em{font-style:normal;display:inline-block;font-size:9.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;margin-top:6px;padding:2px 8px;border-radius:99px;
  background:var(--greenbg);color:var(--green)}
.vrung .rtxt em.soon{background:rgba(202,162,95,.18);color:var(--gold-deep)}
.vrung .rtxt em.locked{background:var(--line);color:var(--muted)}

.vlog{margin-top:14px}
.vlog .vl{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);
  padding:7px 2px;border-bottom:1px dashed var(--line)}
.vlog .vl b{color:var(--navy);font-weight:700}
.vlog .vlhead{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 4px}
.vsheet .cta{margin:20px auto 0}
.vclaimline{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6;
  max-width:44ch;margin:10px auto 0}

/* the pop */
.sealpop{position:fixed;left:50%;bottom:150px;transform:translateX(-50%) translateY(10px) scale(.96);
  display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  padding:11px 20px 11px 15px;border-radius:99px;z-index:60;opacity:0;pointer-events:none;
  box-shadow:0 12px 30px rgba(14,29,73,.36);transition:opacity .25s,transform .25s}
.sealpop.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.sealpop .sptext b{display:block;font-size:13px;font-weight:800;line-height:1.2}
.sealpop .sptext small{font-size:11px;color:#C3C9E4}
.sealpop.rankup{background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.sealpop.rankup .sptext small{color:#FBF3E2}

@media (prefers-reduced-motion: reduce){
  .sealchip.bump{animation:none}
  .vbar i{transition:none}
}

/* THE ONE DOOR — the only application handoff on the site. Gold border like
   the app nudge, but the small print sits under the button, not above it. */
.appnudge.doorcard{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF8,#FDF7EC)}
.appnudge.doorcard small{display:block;margin-top:12px;font-size:10.5px;line-height:1.6;color:var(--muted)}
.appnudge.doorcard .cta{margin-top:14px}

/* ---- a door whose contents are still in the air ----
   The coins already on screen stay exactly where they are and dim slightly,
   and one gold thread breathes underneath. The wait reads as motion rather
   than a stall, and nothing moves position, so when the layer swaps there is
   no jump. */
.grid{position:relative}
.grid.waiting .cell{opacity:.55;pointer-events:none;transition:opacity .18s ease}
.grid.waiting::after{
  content:'';position:absolute;left:50%;bottom:-16px;
  width:36px;height:2px;transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
  animation:raiwait 1.1s ease-in-out infinite}
@keyframes raiwait{0%{opacity:.15}50%{opacity:1}100%{opacity:.15}}

/* ---- the one failure a visitor can see ---- */
.chunkfail{max-width:520px;margin:22px auto 0;padding:18px 20px;text-align:center;
  border:1px solid var(--line);border-radius:14px;background:var(--card)}
.chunkfail b{display:block;color:var(--navy);font-size:15px;margin-bottom:7px}
.chunkfail p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.chunkfail .cta{display:inline-block}

@media (prefers-reduced-motion: reduce){
  .grid.waiting::after{animation:none;opacity:.7}
  .grid.waiting .cell{transition:none}
}

/* ---------- the licensee line, inside the tool overlay ----------
   The tool screen is a full-viewport overlay, so it hides the page footer.
   Every room carries its own licensee line rather than relying on a footer
   the consumer cannot see. */
.tfoot{margin:14px auto 0;max-width:52ch;text-align:center;font-size:10.5px;
  color:var(--muted);line-height:1.6;padding-top:12px;border-top:1px solid var(--line)}
.tfoot b{color:var(--navy);font-weight:800}
.tfoot b i{font-style:italic;color:var(--gold-deep)}

/* quiz results render EVERY section, not just the first — the offsetting
   disclosure is never the one left off the screen */
.qq-sub{margin-top:18px !important;padding-top:14px;border-top:1px solid var(--line)}
.qbody{font-size:13.5px;color:var(--muted);line-height:1.65;text-align:center;margin:6px 0 0}

/* R6 — the deep-link chip under a live-engine answer. Renders only when the
   engine names a door (concierge answers never do), so the approved no-endpoint
   page never shows it. */
.rnav{display:inline-block;margin-top:12px;font-weight:700;font-size:.92em;color:var(--gold,#CBA260);text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:6px 14px}
.rnav:hover,.rnav:focus-visible{filter:brightness(1.12)}