/* ============================================================
   ROYAL HELOC — royalheloc.ai
   Campaign: BEHIND YOUR OWN DOOR.  Master CTA: See where you stand.

   Sibling of royalai.ai / royalmortgage-ai / royalai.app — same
   Montserrat, same castle R, same gold coin, same light source.
   ONE difference, and it is deliberate: every background here is
   #FFFFFF. Pure white. The gold spheres float in midair against
   it. No paper tint, no navy fields, no gradients behind type.

   Brand law: navy #253069 · gold #CBA260 · Montserrat 400/700/800
   · always TM, never the registered symbol.
   ============================================================ */
:root{
  --navy:#253069; --navy-deep:#1A2450; --gold:#CBA260; --gold-deep:#8A6F3F;
  --gold-text:#7A5E2A;
  --paper:#FFFFFF; --card:#FFFFFF; --ink:#20264A; --muted:#5C6178; --line:#E7E4DB;
  /* PURE WHITE MEANS PURE WHITE. --wash was a #FBF9F4 paper tint, and it was
     painting the founder card and all six glossary cards off-white — which
     contradicts the one house rule this site does NOT inherit from its
     siblings, and contradicts this file's own header comment three lines
     above. The cards are separated by their 1.5px --line border and their
     radius, exactly the way .moment and .step already are. Never re-tint. */
  --wash:#FFFFFF;
  --royal-font:'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
/* PURE WHITE, everywhere. This is the one house rule this site does not
   inherit from its siblings — royalmortgage-ai runs a warm paper tone. */
body{background:#FFFFFF;color:var(--ink);
  font-family:var(--royal-font);
  -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;line-height:1.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--navy)}
img{max-width:100%}

/* Keyboard reachability is not optional on a lender's site. Every focusable
   thing gets the same gold ring, and it is never removed. */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* The skip link — first tab stop on every page. */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;z-index:200;
  text-decoration:none}
.skip:focus{left:0}

.wrap{width:min(1080px,100%);margin:0 auto;padding:0 clamp(18px,4vw,28px)}

/* ============================================================
   THE ROYAL HELOC LOCKUP
   Castle-R + ROYAL in navy, HELOC in gold with the padlock
   keyhole standing in for the O.
   Concept 3 (horizontal) = .lockup.wide     — the site header
   Concept 1 (stacked)    = .lockup.stack    — vertical spaces
   TM LAW: the trademark mark is anchored to the R and only to
   the R. HELOC never re-colors and never stands alone.
   ============================================================ */
/* THE CASTLE R IS A LETTER, NOT AN EMBLEM. It is the R in ROYAL — the word
   beside it is OYAL, exactly the way the house's own reveal film assembles
   the lockup (HELOC-Reveal_Scene.html: the R lands first, then O-Y-A-L
   extend out of it). So everything here is set against the TEXT BASELINE
   and against Montserrat 800's cap height, which measures .72em. */
.lockup{--lk:34px;font-size:var(--lk);line-height:1;text-decoration:none;
  display:inline-block;white-space:nowrap;color:var(--navy)}
.lockup .l1,.lockup .l2{display:inline}
.lockup.wide .l1{margin-right:.30em}
.lockup.stack{text-align:center}
.lockup.stack .l1,.lockup.stack .l2{display:block}
/* Stacked, the two rows read as one block. They need no width-matching hack:
   castle-R + OYAL and HELOC + keyhole set to within a few percent of each
   other at the same letter-spacing, which is what the canonical Concept 1
   art does too. */
.lockup.stack .l1{margin-right:0;margin-bottom:.16em}

/* line-height:0 with a block-level child means this box has no in-flow line
   box, so its baseline IS its bottom edge — which puts the R's feet exactly
   on the text baseline without a magic number. */
.lockup .rgroup{position:relative;display:inline-block;line-height:0;
  vertical-align:baseline;margin-right:.10em}
.lockup .castle{height:.755em;width:auto;display:block}
/* TM LAW: anchored to the R, always, and only to the R. Bottom-right of the
   turret, tucked just under the baseline — the placement the reveal film
   uses. Absolutely positioned so it never pushes the O away from the R. */
.lockup .tm{position:absolute;left:100%;top:100%;margin-top:.06em;
  font-size:.26em;font-weight:800;line-height:1;color:var(--navy);letter-spacing:0}

.lockup .royal{font-weight:800;color:var(--navy);letter-spacing:.055em}
.lockup .heloc{font-weight:800;color:var(--gold);letter-spacing:.055em}
/* The keyhole standing in for the O. A solid disc always reads smaller than
   the letters beside it, so like a real typeface's O it overshoots the cap
   line slightly and dips slightly below the baseline. Montserrat's own O
   runs .72em up and .02em down; this one runs a touch further both ways
   because the white negative space eats into its apparent mass. */
.lockup .keyo{display:inline-block;vertical-align:baseline;width:.78em;height:.78em;
  position:relative;top:.045em;margin:0 .05em}
.lockup .keyo svg{width:100%;height:100%;display:block}
/* On a navy field the navy R and navy ROYAL would vanish. Nothing on this
   site sits on navy today, but the rule ships with the lockup so the next
   surface that needs it does not invent its own. */
.lockup.onnavy,.lockup.onnavy .royal,.lockup.onnavy .tm{color:#fff}

/* ============================================================
   THE FINAL LOCKUP — ruled 7/28/2026 (evening). This is now the
   header logo on every page of every site in the family. One
   logo, one family. The .lockup rules above are NOT deleted:
   they still dress the ROYAL HELOC sitemark wherever it is
   wanted inside a page. They are simply no longer the page
   header, on any Royal surface.

   The mark is INLINED, never <img>-ed, and defined exactly ONCE
   per page inside a hidden <symbol id="royal-ai-lockup"> — its
   three gradient ids (gNavyR, gNavyO, gGoldO) collide if a page
   carries two copies.

   SET THE HEIGHT, NEVER THE WIDTH. The viewBox fixes the aspect
   at 5.42:1 and the width follows. Set a width as well and the
   mark distorts.

   NO REVERSED VARIANT, and do not fake one. The navy is a
   ten-stop glass GRADIENT, not a flat fill, so it cannot be
   recoloured white the way the flat Royal Mortgage lockup can.
   Every page background on this site is #FFFFFF by law, so the
   navy-gold cut is correct on every header here.

   NO TM ON IT. The trademark rides the castle R and nowhere
   else; this lockup's castle R lives inside the word ROYAL, and
   the master file carries no TM glyph. Never add one.
   ============================================================ */
.brand{display:inline-block;line-height:0;text-decoration:none}

/* ---------------- THE HEADER LAW, 2026-08-02 ----------------
   TWO HEADER-MARK HEIGHT RULES STOOD HERE AND BOTH ARE RETIRED:

       a BARE one of 30 / 4.6vw / 44
       a .solo-scoped one of 34 / 6vw / 52   (the 404 and offline rooms)

   Why they had to go. The tree carried three different header-mark
   heights at once - those two plus 40 / 7.2vw / 64 on the funnel
   pages - so the family mark rendered a different size room to
   room, and the .solo variant made the 404 a fourth. The Header
   Law is ONE height for the whole family and it is now declared,
   bare, in each page's own <style>:

       height:clamp(83px,14.96vw,133px);width:auto;display:block;max-width:100%

   Nothing here is deleted, only retired: this sheet exactly as it
   stood before the cut is archived verbatim at
   _superseded/2026-08-02-header-law/css/royal.css.

   NEVER RE-ADD A HEIGHT HERE. A bare .brandmark height in a shared
   sheet is what silently overrode the page rules on every page that
   had no .markwrap wrapper.

   AND NEVER SET A WIDTH (Bryan's H-7: preserve every logo's natural
   aspect ratio - no stretching, compression or cropping). Height is
   the only dimension anyone sets; the width follows on its own. The
   width/height ATTRIBUTES on the <img> are the asset's true pixel
   size and reserve its box against layout shift - they are not a
   size instruction.
   ------------------------------------------------------------- */

/* the endorser line — "a Royal company", the locked lockup partner */
.endorser{font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--muted);margin-top:.5em;text-align:center}

/* ============================================================
   HEADER
   ============================================================ */
header.site{padding:clamp(18px,3.4vh,30px) 0 0}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brandbar .lockup{--lk:clamp(24px,4.4vw,38px)}
.brandbar nav{display:flex;gap:clamp(14px,2.6vw,26px);font-size:14px;font-weight:700;
  align-items:center;flex-wrap:wrap}
.brandbar nav a{color:var(--navy);text-decoration:none;opacity:.85}
.brandbar nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.brandbar nav a.cta{background:var(--navy);color:#fff;border-radius:999px;
  padding:10px 20px;opacity:1;box-shadow:0 8px 20px rgba(37,48,105,.20)}
.brandbar nav a.cta:hover{text-decoration:none;transform:translateY(-1px)}

/* ============================================================
   THE CANON COIN
   Pasted verbatim from royalai.app-v2/index.html:143. THE COIN IS
   ONE COIN across every Royal surface. Do not re-mix the gold.
   ============================================================ */

/* THE COIN IS ONE COIN across every Royal surface — canon block from
   royalai.app-v2/index.html:143. Do not re-mix the gold. */
.sunny .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}
.sunny .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}
.sunny:hover .coin{transform:translateY(-4px) scale(1.04)}
/* --- end canon block. Everything below only sizes it or seats a mark
       inside it; the gold itself is never touched again. --- */

.sunny{display:inline-flex;flex-direction:column;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink)}
.sunny .coin{display:grid;place-items:center}
/* The canon seating: inner disc = 66% of the coin, mark = 70% of the disc.
   Same numbers royalmortgage-ai uses, so a Royal coin reads identically
   whichever site it is standing on. */
/* 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 file (the BuilderBee home-base button).
   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. */
.sunny .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);overflow:hidden}
.sunny .coin .inner img,.sunny .coin .inner svg{max-width:59%;max-height:59%;width:auto;height:auto;display:block}
/* size modifiers — diameter only */
.sunny.lg .coin{width:clamp(150px,30vw,208px);height:clamp(150px,30vw,208px)}
.sunny.sm .coin{width:64px;height:64px}
.sunny .cap{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;
  text-align:center;line-height:1.35;max-width:18ch}
.sunny:hover .cap{color:var(--navy)}

/* ============================================================
   HERO
   ============================================================ */
/* VERTICAL PADDING ONLY. The hero element also carries .wrap, and a
   `padding:` shorthand here would silently zero out .wrap's side gutters —
   which is exactly what it did until this was split apart. Anything that
   shares an element with .wrap must never use the shorthand. */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,56px);
  align-items:center;
  padding-top:clamp(34px,6.5vh,68px);padding-bottom:clamp(20px,4vh,40px)}
@media(max-width:880px){.hero{grid-template-columns:1fr;gap:34px;padding-top:30px}}
.kicker{color:var(--gold-text);font-size:11.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 14px}
h1{font-size:clamp(34px,6vw,62px);line-height:1.03;letter-spacing:-.025em;margin:0 0 18px;
  font-weight:800;color:var(--navy);text-wrap:balance}
h1 .gold{color:var(--gold-deep)}
.lede{font-size:clamp(16px,2.1vw,19px);color:var(--muted);max-width:54ch;margin:0 0 10px;
  font-weight:500}
.lede b{color:var(--ink);font-weight:700}
.leadin{font-size:clamp(15.5px,2vw,18px);color:var(--ink);max-width:54ch;margin:0 0 26px;
  font-weight:600}

/* THE ONE BUTTON. "See where you stand." is the master CTA and it is the
   only call to action on this page — every instance points at #stand. */
.stand{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;
  text-decoration:none;font-weight:800;font-size:clamp(16px,2vw,18px);border-radius:999px;
  padding:16px 30px 16px 32px;box-shadow:0 12px 30px rgba(37,48,105,.26);
  transition:transform .15s ease, box-shadow .15s ease;border:none;cursor:pointer;
  font-family:inherit;line-height:1.2}
.stand:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(37,48,105,.32)}
.stand .kh{width:22px;height:22px;flex:none;display:block}
.stand.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy);
  box-shadow:0 8px 22px rgba(37,48,105,.12)}

.heroart{display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;padding:clamp(10px,3vw,26px) 0}
/* The Keyhole Reveal, held as a still: gold light blooming out from behind
   the sphere. It blooms ONCE on arrival, then rests. Gold arrives with
   understanding — that is the rule of gold, and it is why nothing glows
   until the page has settled. */
.bloom{position:absolute;width:min(118%,520px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(203,162,96,.30) 0%,rgba(203,162,96,.14) 38%,rgba(203,162,96,0) 68%);
  pointer-events:none;opacity:0;animation:bloomin 1.5s cubic-bezier(.2,.7,.3,1) .25s forwards}
@keyframes bloomin{0%{opacity:0;transform:scale(.62)}60%{opacity:1}100%{opacity:.9;transform:scale(1)}}
/* The hero coin is THE CANON COIN, rendered live — not an image of it. This
   rule only sets its diameter and lifts it in; the gold above is untouched. */
.sunny.hero .coin{width:clamp(176px,25vw,248px);height:clamp(176px,25vw,248px)}
.herosphere{display:block;position:relative;
  animation:sphererise .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes sphererise{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
.heroart figcaption{position:relative;margin-top:18px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center}
@media(prefers-reduced-motion:reduce){
  .bloom{animation:none;opacity:.9;transform:none}
  .herosphere{animation:none}
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{scroll-margin-top:24px}
/* Vertical only — same reason as .hero. On how-it-works.html the intro
   section is <section class="wrap band plain">, and a shorthand here would
   flatten its gutters. */
.band{padding-top:clamp(34px,6vh,64px);padding-bottom:clamp(34px,6vh,64px);
  border-top:1px solid var(--line)}
.band.plain{border-top:none}
.eyebrow{color:var(--gold-text);font-size:11.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 12px}
h2{font-size:clamp(25px,3.8vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;
  font-weight:800;color:var(--navy);text-wrap:balance}
h3{font-size:clamp(17px,2.2vw,20px);margin:0 0 6px;font-weight:800;color:var(--navy);
  letter-spacing:-.01em}
.body{font-size:clamp(15.5px,1.9vw,17.5px);color:var(--muted);max-width:64ch;margin:0 0 14px;
  font-weight:500}
.body b{color:var(--ink);font-weight:700}
.center{text-align:center}
.center .body,.center .lede{margin-left:auto;margin-right:auto}

/* The door section — one keyhole beside the copy, the campaign image held
   still. The coin sits in the RIGHT column (order:2) so the headline starts
   on the same left edge as every other section's headline; a coin in the
   left column pushed this one heading out of alignment with the rest of
   the page. */
.doorrow{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,4vw,44px);align-items:center}
.doorrow>.sunny{order:2}
@media(max-width:720px){.doorrow{grid-template-columns:1fr;text-align:center;justify-items:center}
  .doorrow>.sunny{order:0}
  .doorrow .body{margin-left:auto;margin-right:auto}}

/* the four moments */
.moments{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.2vw,20px);
  margin-top:clamp(18px,3vh,28px)}
@media(max-width:720px){.moments{grid-template-columns:1fr}}
.moment{background:#FFFFFF;border:1.5px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.6vw,26px);transition:border-color .16s ease, transform .16s ease,
  box-shadow .16s ease}
.moment:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(37,48,105,.09)}
.moment .kh{width:28px;height:28px;display:block;margin-bottom:14px;flex:none}
.moment p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}
.moment .line{display:block;margin-top:12px;font-size:14px;font-weight:700;color:var(--navy);
  font-style:italic}

/* the three steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,22px);
  margin-top:clamp(18px,3vh,28px)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:#FFFFFF;border:1.5px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.6vw,26px);display:flex;flex-direction:column;gap:4px}
/* THE KEYHOLE-NUMBERED STEPS. The keyhole is the numbering device — it is
   the campaign's own shape doing structural work. The ordinal is spelled
   out rather than set as a digit, which is both the house voice and the
   simpler rule to hold across every surface. */
.step .numrow{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.step .numrow .kh{width:34px;height:34px;flex:none;display:block}
.step .stepno{font-size:10.5px;font-weight:800;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-text)}
.step p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}

/* the words people use, translated */
.terms{margin:clamp(18px,3vh,28px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.2vw,20px)}
@media(max-width:720px){.terms{grid-template-columns:1fr}}
.terms>div{background:var(--wash);border:1.5px solid var(--line);border-radius:16px;
  padding:clamp(18px,2.4vw,24px)}
.terms dt{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:0 0 6px}
.terms dd{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}

/* the founder note */
.founder{background:var(--wash);border:1.5px solid var(--line);border-radius:22px;
  padding:clamp(24px,4vw,42px);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,3.4vw,34px);align-items:start}
@media(max-width:720px){.founder{grid-template-columns:1fr;justify-items:center;text-align:center}}
.founder blockquote{margin:0;font-size:clamp(16.5px,2.2vw,20px);line-height:1.55;
  color:var(--ink);font-weight:600;max-width:56ch}
.founder blockquote p{margin:0 0 12px}
.founder blockquote p:last-of-type{margin-bottom:0}
.founder cite{display:block;margin-top:18px;font-style:normal;font-size:13px;font-weight:800;
  color:var(--navy);letter-spacing:.05em}
.founder cite small{display:block;font-weight:700;color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;font-size:10.5px;margin-top:4px}

/* ============================================================
   THE ASK BAR — ROYAL Ai
   Exactly one per page. This IS the assistant on this surface;
   there is no second avatar anywhere.
   ============================================================ */
.askwrap{display:flex;flex-direction:column;align-items:center;width:100%}
.searchbox{width:min(620px,100%);position:relative;display:block}
.searchbox input{width:100%;border:1.5px solid var(--line);border-radius:999px;
  background:#FFFFFF;padding:17px 58px 17px 26px;font-size:16.5px;font-family:inherit;
  color:var(--ink);box-shadow:0 10px 30px rgba(37,48,105,.10);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:focus-visible{outline:none}
.searchbox .btns{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px}
.searchbox button{width:40px;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 .go[disabled]{opacity:.6;cursor:progress}
.asklabel{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.answer{width:min(620px,100%);background:#FFFFFF;border:1.5px solid var(--line);
  border-radius:18px;margin-top:14px;padding:18px 22px;font-size:15px;line-height:1.62;
  color:var(--ink);box-shadow:0 10px 30px rgba(37,48,105,.08);display:none;text-align:left}
.answer.show{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.answer.show{animation:none}}
.answer .q{color:var(--muted);font-size:13px;margin:0 0 10px;font-weight:600}
.answer .a{margin:0;white-space:pre-wrap;min-height:1.6em}
.answer .fine{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.55}
.answer .fine:empty{display:none}
.dots{display:inline-flex;gap:5px;vertical-align:middle}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.4;
  animation:blink 1.1s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.8}}
/* ROYAL Ai written out: navy word, gold italic suffix. Never keyboard text. */
.rai{font-weight:800;color:var(--navy);letter-spacing:.01em;white-space:nowrap}
.rai em{font-style:italic;color:var(--gold-deep);font-weight:800}

/* ============================================================
   THE STAND SECTION — where every CTA on the page lands
   ============================================================ */
.standrow{display:flex;gap:clamp(14px,2.4vw,20px);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(20px,3vh,30px)}
.appbtn{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;
  text-decoration:none;border-radius:14px;padding:13px 24px 13px 20px;
  transition:transform .15s,box-shadow .15s;box-shadow:0 10px 26px rgba(37,48,105,.22)}
.appbtn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,48,105,.30)}
.appbtn svg{width:26px;height:26px;flex:none}
.appbtn .t{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.appbtn .t small{font-size:11px;opacity:.82;letter-spacing:.02em}
.appbtn .t b{font-size:17.5px;font-weight:700}

/* the trust row */
.trustrow{display:flex;gap:clamp(16px,3vw,34px);flex-wrap:wrap;justify-content:center;
  align-items:center;margin-top:clamp(24px,4vh,38px);font-size:12.5px;color:var(--muted);
  font-weight:700;letter-spacing:.04em;text-align:center}
.trustrow span{display:inline-flex;align-items:center;gap:8px}
.trustrow svg{width:16px;height:16px;fill:var(--gold-deep);flex:none}

/* ============================================================
   FOOTER — mirrors what royalmortgage-ai ships. Nothing added,
   nothing removed.
   ============================================================ */
footer{padding:26px 16px 40px;text-align:center;font-size:11.5px;color:var(--muted);
  line-height:1.7;border-top:1px solid var(--line);margin-top:auto}
footer b{color:var(--ink)}
footer a{color:var(--muted)}
.flinks{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;
  font-size:13.5px;font-weight:700}
.flinks a{color:var(--navy);text-decoration:none;opacity:.85}
.flinks a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   STANDALONE PAGES — offline.html and 404.html
   ============================================================ */
.solo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(40px,10vh,90px) 20px;gap:6px}
.solo h1{font-size:clamp(26px,4.4vw,42px);margin-bottom:10px}
.solo .body{margin-left:auto;margin-right:auto;text-align:center}
.solo .stand{margin-top:18px}

/* wide content never pushes the page sideways — it scrolls in its own box */
.scrollx{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:420px){
  .lockup{--lk:26px}
  .brandbar nav{gap:2px 12px;font-size:13px;width:100%}
  .brandbar nav a.cta{padding:9px 16px}

  /* THUMBS, NOT CURSORS. At 13px these nav words measure 21px tall, and on a
     phone a 21px target is missed about as often as it is hit — the finger
     lands in the gap between "How it works" and "Ask ROYAL Ai" and nothing
     happens. Padded to 39px they match the pill sitting beside them, which is
     what the row already looked like it was doing.
     VERTICAL ONLY. Horizontal padding would widen the row, and 404.html puts
     three items on one line with 18px of gutter left over — it would wrap the
     pill onto its own row for no reason. The pill keeps its own padding: the
     rule above it is the more specific one.
     The row-gap comes back down 12px → 2px so the two nav rows sit exactly
     where they sat before; the 9px of new padding replaces what was removed. */
  .brandbar nav a{padding-block:9px}

  /* Same again for the footer link row — 23px tall, four standalone links
     that wrap to two rows on index.html. gap and margin are pulled back by
     what the padding adds, so the footer measures the same as it always did. */
  .flinks{gap:6px 22px;margin-bottom:6px}
  .flinks a{padding-block:8px}
}

/* THE THREE-WAY ENDCAP — 2026-08-03. Every full Royal HELOC page ends
   with the same three choices: apply, home, and talk to ROVER. Home owns
   the middle seat and sits a touch lower so the way home is uniform. */
.wayhome.journey-actions{display:flex;justify-content:center;align-items:flex-end;
  flex-wrap:nowrap;gap:clamp(8px,4vw,32px);width:100%}
.wayhome.journey-actions .journey-link,
.wayhome.journey-actions .homebubble{display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:9px;
  width:clamp(78px,24vw,98px);color:var(--navy,#253069);text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.wayhome.journey-actions .journey-link .coin,
.wayhome.journey-actions .homebubble .coin{width:88px;height:88px;max-width:88px;flex:none}
.wayhome.journey-actions .journey-link .coin .inner img{display:block;
  width:61%;height:61%;object-fit:contain}
.wayhome.journey-actions .journey-link b,
.wayhome.journey-actions .homebubble b{font-size:10px;line-height:1.25;
  letter-spacing:.04em;text-align:center;color:var(--navy,#253069)}
.wayhome.journey-actions .homebubble{transform:translateY(12px)}
.wayhome.journey-actions a:focus-visible{outline:3px solid var(--gold,#CBA260);
  outline-offset:6px;border-radius:16px}
@media(max-width:390px){
  .wayhome.journey-actions .journey-link .coin{width:74px;height:74px;max-width:74px}
  .wayhome.journey-actions .homebubble .coin{width:84px;height:84px;max-width:84px}
  .wayhome.journey-actions .journey-link b,
  .wayhome.journey-actions .homebubble b{font-size:9px}
}


/* FINAL OWNER NAVIGATION LAW · 2026-08-03.
   Covers/funnel layers: Home only. True endpoints: one measured equilateral
   triangle whose centres are exactly 120px apart—bare 44px Sonny at (122,22),
   Home at (62,126), and Royal Mortgage at (182,126). */
.royal-home-only{display:flex;justify-content:center;width:100%;margin:48px auto 32px;padding:0 20px;box-sizing:border-box}
.royal-home-only .homebubble{display:block;text-decoration:none}
.royal-home-only .coin{width:88px!important;height:88px!important;max-width:88px!important}
.royal-endpoint-triangle{position:relative;width:244px;height:188px;margin:48px auto 32px;box-sizing:border-box}
.royal-endpoint-triangle *{box-sizing:border-box}
.royal-endpoint-triangle>a{position:absolute;display:block;text-decoration:none;-webkit-tap-highlight-color:transparent}
.royal-endpoint-rover{left:100px;top:0;width:44px;height:44px;border-radius:50%}
.royal-endpoint-sonny{display:block;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 22%,#d5b271 45%,#ab854a 70%,#7d6238 100%);
  box-shadow:0 5px 13px rgba(21,27,60,.23),inset 0 2px 5px rgba(255,255,255,.62),inset 0 -4px 9px rgba(90,66,30,.38);
  transition:transform .18s ease,background .18s ease}
.royal-endpoint-rover:hover .royal-endpoint-sonny,
.royal-endpoint-rover:focus-visible .royal-endpoint-sonny,
.royal-endpoint-rover:active .royal-endpoint-sonny{
  transform:scale(1.06);
  background:radial-gradient(circle at 32% 26%,#C6CAD8 0%,#6E78A6 10%,#394476 24%,#1C254F 48%,#171C3E 72%,#0E1024 100%)}
.royal-endpoint-home{left:18px;top:82px;width:88px;height:88px}
.royal-endpoint-royal{left:138px;top:82px;width:88px;height:88px}
.royal-endpoint-triangle .coin,
.royal-home-only .coin{position:relative;border-radius:50%;display:grid;place-items:center;
  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)}
.royal-endpoint-triangle .coin{width:88px!important;height:88px!important;max-width:88px!important}
.royal-endpoint-triangle .coin::after,.royal-home-only .coin::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;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%)}
.royal-endpoint-triangle .coin .inner,.royal-home-only .coin .inner{width:68%;height:68%;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:inset 0 1px 4px rgba(90,66,30,.35)}
.royal-endpoint-triangle .coin .inner img,.royal-home-only .coin .inner img{position:relative;z-index:1;max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.royal-endpoint-triangle>a:focus-visible,.royal-home-only a:focus-visible{outline:3px solid #CBA260;outline-offset:6px;border-radius:50%}
.royal-endpoint-triangle>a:hover .coin,.royal-home-only a:hover .coin{transform:translateY(-3px) scale(1.03)}
@media(prefers-reduced-motion:reduce){
  .royal-endpoint-triangle>a:hover .coin,.royal-home-only a:hover .coin,.royal-endpoint-sonny{transition:none;transform:none}
}