/* ============================================================
   ROYAL REVERSE — royalreverse.ai
   The reverse mortgage division of Royal Mortgage.

   Same house as royalai.ai and royalmortgage.ai: same navy, same
   gold, same coin, same light source. Two things are different
   here, and both are deliberate.

   1. THE PAGE IS PURE WHITE. #FFFFFF, every page, no exceptions.
      The gold spheres float in midair against it.
   2. THE TYPE IS BIGGER AND SLOWER. This is the Kitchen Table
      surface. Body text never drops below 18px, line-height never
      below 1.6, and the reader can push it up two more steps with
      the A / A / A control. Nothing about this page hurries.
   ============================================================ */

:root{
  /* THE FILED BRAND HEXES. Navy #253069, gold #CBA260 — the guide wins.
     The older Royal Reverse brand kit drew a lighter, bluer navy. That is
     the drifted value, it is named nowhere in this tree, and it does not
     ship here. If you find one, correct it to the two hexes below. */
  --navy:#253069;
  --navy-deep:#1A2350;
  --ink:#1B2140;
  --gold:#CBA260;
  --gold-deep:#8A6F3F;      /* gold dark enough for text on white */
  --gold-text:#7A5E2A;      /* kickers and small caps on white */
  --gold-soft:#F4EADA;      /* the only tint used, and only as a hairline fill */
  --paper:#FFFFFF;          /* the page. Always. */
  --card:#FFFFFF;
  --muted:#5C6178;
  --line:#E4E1D8;
  --royal-font:'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* THE TEXT-SIZE CONTROL. Base is 18px so the smallest thing on the page
   is still readable across a kitchen table. .ts2 and .ts3 are the two
   larger steps; js/reverse.js sets them and remembers the choice. */
html{font-size:112.5%}
html.ts2{font-size:125%}
html.ts3{font-size:137.5%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--royal-font);
  font-size:1.06rem;
  line-height:1.7;
  font-weight:500;
  -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;
}

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

/* Focus is never invisible on this site. The audience tabs. */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;
  padding:14px 22px;z-index:200;font-weight:700;text-decoration:none;font-size:1rem}
.skip:focus{left:0}

/* ------------------------------------------------------------
   THE HEADER — the reflected home, the name, the nav.
   No navy band. The mark and the type sit on the white.
   ------------------------------------------------------------ */
.topbar{border-bottom:1px solid var(--line);background:var(--paper)}
.topbar .in{max-width:1240px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

.brandlink{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}
/* SUPERSEDED 8/2/2026 · THE HEADER LAW · WAVE 2.
   A descendant rule stood on this line, selecting any image inside a
   .brandlink and pinning it to a flat 46px wide with an automatic height,
   no flex growth and display:block. It was written when the only image
   that could sit inside a .brandlink was the old 46px square coin.

   WHY IT HAD TO GO, and it is the whole reason this pass touched this
   sheet at all. The header mark is now a raster - the brandmark image,
   577x192 - and it is a DIRECT CHILD of .brandlink on every page that
   loads this sheet. A class-plus-element selector outranks a bare class,
   so the old rule beat the brandmark rule outright and painted the
   lockup at 46 by 15 pixels on home, how-it-works, hecm and the 404. It
   also set a width, which H-7 forbids on its own terms: the height is
   set and the width follows, never the other way round.

   Nothing on this site needs it any more - the only image left inside a
   .brandlink anywhere in this tree IS the brandmark. It is archived
   verbatim, in the whole sheet as it stood before this pass, at
   _superseded/2026-08-02-header-law/css/royal.css. Nothing was deleted;
   it was moved. */

/* ------------------------------------------------------------
   THE FINAL LOCKUP (ruled 7/28/2026 — one logo, one family)

   The ROYAL Ai lockup is the header logo on every page of every site in
   the family. This hub's own ROYAL REVERSE wordmark is no longer the
   page-header mark; the division still names itself in the hero kicker,
   in the <title>, and in the footer entity line.

   SET THE HEIGHT, NEVER THE WIDTH. The viewBox is 146 450 694 128, so the
   aspect is fixed at 5.42:1 and the width follows. Give it a width and the
   navy castle R shears.

   It is INLINED, never <img>-ed — an <img> cannot inherit the page's
   self-hosted Montserrat or its colour, and the mark is a ten-stop glass
   gradient that no CSS filter can honestly recolour. Every page background
   here is #FFFFFF by law, so the navy-and-gold cut is correct everywhere
   and no reversed variant is needed or wanted.
   ------------------------------------------------------------ */
/* THE HEADER LAW · 8/2/2026 · WAVE 2.
   The mark is now the cut raster assets/header-lockup-mitre-v11.png (577x192), the
   same file and the same rule on every page of every site in the family.
   The inline <symbol id="royal-ai-lockup"> sprite it replaced is NOT
   deleted from any page — it stays in place, unreferenced, as the
   in-place archive, per the never-delete law.

   ONE HEIGHT RULE, TREE-WIDE. The declaration below is the only mark
   height in the family. THREE COMPETING RULES WERE SUPERSEDED HERE on
   8/2/2026 and they stood, in this order, immediately below this comment:
     · the base rule, a flat 38px with width:auto, display:block, flex:none
     · a .quiet-scoped override at 34px, for the 404's centred column
     · a max-width:640px query dropping the base to 32px and .quiet to 30px
   All three set a height, so all three competed. The clamp replaces all
   three and carries its own phone behaviour, so the 640px query is gone
   with them. The three are archived verbatim, in the whole sheet as it
   stood before this pass, at _superseded/2026-08-02-header-law/css/royal.css.
   Nothing was deleted; it was moved.

   SET THE HEIGHT, NEVER THE WIDTH — H-7. The width/height ATTRIBUTES on
   the <img> are the asset's true pixel size; they reserve space and stop
   the layout shift. They are not a size instruction. Nothing in CSS may
   set the width or the raster stretches. */
img.brandmark{height:clamp(70px,12.67vw,113px);width:auto;display:block;max-width:100%}
/* The topbar's .brandlink is a flex row (mark + the "Powered by" Royal
   Mortgage endorsement). flex-shrink would squeeze the raster and change
   its aspect, which H-7 forbids. flex:none pins the basis, not a width. */
.topbar .brandmark{flex:none}
.brandlink:focus-visible{outline:3px solid var(--gold,#CBA260);outline-offset:6px;border-radius:10px}
/* 404.html has no top bar to put a logo in, so the
   lockup becomes the first thing in the centred column, above the mark,
   linked home. Same logo, same law, quieter room. */
.quiet .quietbrand{margin-bottom:20px}
.brandlink .name{font-weight:800;color:var(--navy);letter-spacing:.04em;
  font-size:1.02rem;line-height:1.15;text-transform:uppercase}
.brandlink .name .rev{color:var(--gold-deep)}
.brandlink .powered{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-top:3px}

/* ------------------------------------------------------------
   THE ENDORSEMENT (7/29/2026)

   This line used to read "Powered by Royal Mortgage" in tracked caps —
   the parent company's name, set in normal type, directly beside a logo
   we paid to have drawn. Bryan's ruling ended that: the words "Powered
   by" stay words, because that is a sentence and not a name, and the
   name itself is now the Royal Mortgage lockup, inlined from
   _royal-system/marks/rm-lockup-tm.svg.

   SET THE HEIGHT, NEVER THE WIDTH — the same law the ROYAL Ai mark above
   runs on. The viewBox is 730.2 x 198.9, so the aspect is pinned at
   3.67:1 and the width follows. Give it a width and the castle R shears.

   NOTHING REFLOWS, AND IT WAS MEASURED, NOT ASSUMED. .brandlink is
   align-items:center and the ROYAL Ai brandmark beside it is 38px tall
   (32px under 640px), so an endorsement shorter than that cannot move the
   header's height at all. At 24px this lockup is 88px wide; the tracked
   caps it replaced ran 234px, so the row also got narrower.

   A/B'd against the old typed markup at 320, 375, 414, 640, 768, 1280 and
   1600px — same page, same fonts loaded, the old <span> put back in the
   DOM and re-measured:
       document scrollWidth   IDENTICAL at all seven widths (delta 0)
       header height          identical at 768 / 1280 / 1600
                              2 to 37px SHORTER at 320 / 375 / 414 / 640

   The phone rule below is why the narrow widths came out shorter rather
   than longer. The ROYAL Ai brandmark is flex:none with an 11.21:1 aspect,
   so at its 32px phone height it wants 359px of row on its own — more than
   a 375px phone has after the header's 24px side padding. Rather than
   squeeze the endorsement into what is left of that row, it drops to its
   own line under the mark. Nothing about the primary mark was touched;
   its behaviour at 320px is exactly what it was before this pass.

   READ THE NUMBERS ABOVE AS HISTORY, NOT AS THE CURRENT STATE - 8/2/2026,
   THE HEADER LAW, WAVE 2. Every measurement in this block was taken when
   the mark was the inline SVG lockup at a flat 38px (32px under 640px)
   and an aspect of 11.21:1. The mark is now the cut raster
   assets/header-lockup-mitre-v11.png, it clamps 40px to 64px, and its aspect is
   3.005:1 - so it is TALLER on a wide screen and far NARROWER at any
   height than the figure quoted above. The endorsement's own rules did
   not change and are still correct: it is still shorter than the mark, so
   it still cannot drive the header's height, and it still wraps to its
   own line on a phone. Only the arithmetic in the paragraphs above is
   stale. Nothing here was re-measured in this pass, and nothing here was
   changed - the note is added so the next reader does not trust a number
   that describes a mark this site no longer uses.
   ------------------------------------------------------------ */
.brandlink .endorse{display:flex;align-items:center;gap:8px;min-width:0}
.brandlink .endorse .powered{margin-top:0}
.brandlink .rmmark{height:24px;width:auto;flex:none;display:block}
@media (max-width:640px){
  .brandlink{flex-wrap:wrap}
  .brandlink .rmmark{height:20px}
}

/* The nav and the text-size control travel together as one right-hand
   cluster, so a narrow screen drops them onto a second line side by side
   instead of stacking three separate rows. */
.headright{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;
  justify-content:flex-end;flex:1 1 auto}
.topnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topnav a{color:var(--navy);text-decoration:none;font-weight:700;font-size:.82rem;
  padding:10px 14px;border-radius:999px;line-height:1.2}
.topnav a:hover{background:var(--gold-soft)}
.topnav a[aria-current="page"]{background:var(--navy);color:#fff}

/* the A / A / A control */
.textsize{display:flex;align-items:center;gap:6px}
.textsize .lbl{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-right:2px}
.textsize button{background:var(--paper);border:2px solid var(--line);color:var(--navy);
  border-radius:10px;cursor:pointer;font-family:inherit;font-weight:800;
  min-width:40px;min-height:40px;padding:0 8px;line-height:1}
.textsize button.t1{font-size:.78rem}
.textsize button.t2{font-size:.98rem}
.textsize button.t3{font-size:1.2rem}
.textsize button:hover{border-color:var(--gold)}
.textsize button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ------------------------------------------------------------
   THE COIN — canon block, pasted verbatim 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)}

/* Everything below only positions the canon coin — it never touches the
   gradient, the rims or the sheen. The inner disc is the canon 66%, and
   the mark is fitted inside 70% of it, exactly the way the spheres in
   assets/ were cut. */
.sunny{display:inline-flex;flex-direction:column;align-items:center;gap:13px;
  text-decoration:none;color:inherit}
.sunny .coin{display:grid;place-items:center}
/* 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 Bryan named on 7/28. The reference file is named in the
   internal build notes, not here - this stylesheet is public and its
   filename carries a product codename.
   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{max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.sunny .cap{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.4}
.sunny:hover .cap{color:var(--navy)}
/* size steps — diameter only */
.sunny.lg .coin{width:176px;height:176px}
.sunny.sm .coin{width:78px;height:78px}
@media (prefers-reduced-motion: reduce){
  .sunny .coin{transition:none}
  .sunny:hover .coin{transform:none}
}

/* ------------------------------------------------------------
   THE HERO
   ------------------------------------------------------------ */
.hero{padding:clamp(44px,7vw,84px) 24px clamp(36px,5vw,60px);text-align:center;background:var(--paper)}
.hero .in{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero .kicker{font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);margin:26px 0 16px}
.hero h1{font-size:clamp(1.75rem,4.4vw,2.7rem);font-weight:800;color:var(--navy);
  line-height:1.16;letter-spacing:-.015em;margin:0 0 22px;text-wrap:balance;max-width:20ch}
.hero .sub{font-size:1.06rem;max-width:60ch;margin:0 0 32px;color:var(--ink);line-height:1.75}
.hero .tagline{font-size:1.06rem;color:var(--gold-text);font-weight:700;font-style:italic;
  margin:28px 0 0;max-width:40ch}

.ctarow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.96rem;padding:17px 30px;line-height:1.25;
  border:3px solid transparent;transition:transform .14s ease,background .14s ease,color .14s ease;
  text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn-gold{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.btn-ghost{background:var(--paper);color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
@media (prefers-reduced-motion: reduce){.btn:hover{transform:none}}

/* ------------------------------------------------------------
   THE ASK BAR — the one assistant on the page. There is exactly one per
   page and the bar IS it; no second affordance, no floating avatar.
   Same 620px scope as every other Royal surface.
   ------------------------------------------------------------ */
.askwrap{width:min(620px,100%);margin:0 auto;text-align:left}
/* NOT uppercase, deliberately. ROYAL Ai is a lockup, not keyboard text —
   text-transform would turn the gold Ai into a flat "AI" and break the mark. */
.asklabel{display:block;text-align:center;font-size:.84rem;font-weight:800;letter-spacing:.05em;
  color:var(--gold-text);margin-bottom:12px}
.rai{font-weight:800;color:var(--navy);letter-spacing:.02em;white-space:nowrap}
.rai em{font-style:italic;color:var(--gold-deep);font-weight:800}
.searchbox{width:100%;position:relative;display:block}
.searchbox input{width:100%;border:2px solid var(--line);border-radius:999px;
  background:var(--card);padding:18px 62px 18px 26px;font-size:1rem;font-family:inherit;
  color:var(--ink);box-shadow:0 10px 30px rgba(37,48,105,.09);outline:none;
  transition:box-shadow .2s,border-color .2s}
.searchbox input::placeholder{color:var(--muted);opacity:1}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 12px 34px rgba(203,162,96,.28)}
.searchbox .go{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;padding:0;
  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 .go svg{width:18px;height:18px;stroke:var(--navy-deep);stroke-width:2.4;fill:none}
.searchbox .go:disabled{opacity:.6;cursor:default}

.answer{width:100%;background:var(--card);border:2px solid var(--line);border-radius:20px;
  margin-top:16px;padding:22px 26px;font-size:.96rem;line-height:1.7;color:var(--ink);
  box-shadow:0 10px 30px rgba(37,48,105,.07);display:none}
.answer.show{display:block}
.answer .q{color:var(--muted);font-size:.82rem;margin:0 0 10px;font-weight:700}
.answer .a{margin:0;white-space:pre-wrap}
.answer .a:empty::after{content:"…";color:var(--muted)}
.answer .hook{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);
  font-size:.78rem;color:var(--muted);line-height:1.6}
.asknote{text-align:center;font-size:.76rem;color:var(--muted);margin:12px 0 0;line-height:1.6}

/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */
main{flex:1}
section.band{padding:clamp(40px,6vw,72px) 24px;background:var(--paper)}
section.band + section.band{border-top:1px solid var(--line)}
.inner{max-width:780px;margin:0 auto}
.inner.wide{max-width:1040px}

h2{font-size:clamp(1.35rem,3.2vw,1.85rem);font-weight:800;color:var(--navy);
  line-height:1.22;margin:0;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:1.06rem;font-weight:800;color:var(--navy);margin:0 0 8px;line-height:1.35}
.kicker{font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;
  color:var(--gold-text);margin:0 0 12px}
.rule{width:84px;height:6px;background:var(--gold);border-radius:3px;margin:18px 0 28px}
section p{margin:0 0 1.1em}
section p:last-child{margin-bottom:0}
strong{font-weight:800;color:var(--navy)}
.lede{font-size:1.06rem;color:var(--ink)}

/* the opening paragraph gets a gold drop cap — a print-era beat, on purpose */
.dropcap::first-letter{font-weight:800;color:var(--gold-deep);float:left;
  font-size:3.9rem;line-height:.84;padding-right:.09em;padding-top:.06em}

/* ------------------------------------------------------------
   THE IS / ISN'T PAIR
   ------------------------------------------------------------ */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
@media (max-width:780px){.pair{grid-template-columns:1fr}}
.pcard{border-radius:18px;padding:30px 28px;border:2px solid var(--line);background:var(--card)}
.pcard.is{border-color:var(--navy)}
.pcard.isnt{border-color:var(--gold)}
.pcard h3{font-size:1.12rem;margin-bottom:18px}
.pcard.isnt h3{color:var(--gold-text)}
.biglist{list-style:none;margin:0;padding:0}
.biglist li{display:flex;gap:13px;margin-bottom:16px;align-items:flex-start;font-size:.96rem;
  line-height:1.65}
.biglist li:last-child{margin-bottom:0}
.biglist .mk{font-weight:800;font-size:1.05rem;line-height:1.5;flex:0 0 auto}
.pcard.is .mk{color:var(--navy)}
.pcard.isnt .mk{color:var(--gold-deep)}

/* ------------------------------------------------------------
   THE STEPS
   ------------------------------------------------------------ */
.steps{list-style:none;margin:32px 0 0;padding:0;counter-reset:step}
.steps li{display:flex;gap:22px;margin-bottom:30px;align-items:flex-start}
.steps li:last-child{margin-bottom:0}
.stepnum{flex:0 0 58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.6),inset 0 -4px 8px rgba(90,66,30,.42),
    0 6px 14px rgba(21,27,60,.18);
  color:var(--navy-deep);font-weight:800;font-size:1.28rem;
  display:grid;place-items:center}
.steps .body{min-width:0}
.steps p{font-size:.96rem;margin:0}

/* ------------------------------------------------------------
   THE CALLOUT — the block written to the adult children
   ------------------------------------------------------------ */
.callout{border-left:8px solid var(--gold);background:var(--gold-soft);
  padding:26px 30px;border-radius:0 14px 14px 0;margin-top:30px}
.callout .head{font-weight:800;color:var(--navy);font-size:1rem;margin-bottom:10px}
.callout p{font-size:.96rem}
.callout a{color:var(--navy);font-weight:800}

/* the quiet quote line */
.quoteline{text-align:center;max-width:34ch;margin:0 auto;font-style:italic;font-weight:700;
  color:var(--gold-text);font-size:1.1rem;line-height:1.55}

/* ------------------------------------------------------------
   THE PROMISES
   ------------------------------------------------------------ */
.promises{list-style:none;margin:28px 0 0;padding:0}
.promises li{display:flex;gap:15px;margin-bottom:18px;align-items:flex-start;font-size:.98rem;
  line-height:1.65}
.promises li:last-child{margin-bottom:0}
.promises .mk{color:var(--gold-deep);font-size:1.1rem;font-weight:800;line-height:1.5;flex:0 0 auto}

/* ------------------------------------------------------------
   THE COMPARISON — HELOC · HELOAN · HECM

   Six customer questions down the rows, three products across. The
   reader sees the difference for themselves instead of being told, and
   every obligation gets named on the way past.

   IT NEVER SCROLLS SIDEWAYS. A 62+ reader should not have to drag a
   table around with a finger to find the end of a sentence, so below
   840px the table stops being a table and becomes six cards, one per
   question, with each answer labelled by the product it belongs to.
   The markup is a real <table> either way, so a screen reader still
   gets headers and a printer still gets a grid.
   ------------------------------------------------------------ */
.compare{margin-top:32px}
.compare table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.6}
.compare caption{caption-side:top;text-align:left;font-size:.82rem;color:var(--muted);
  padding-bottom:12px}
.compare thead th{background:var(--navy);color:#fff;text-align:left;font-weight:800;
  padding:14px 16px;vertical-align:top;font-size:.86rem;letter-spacing:.02em;
  border:1px solid var(--navy)}
.compare thead th span{display:block;font-weight:600;font-size:.72rem;opacity:.85;
  letter-spacing:.04em;margin-top:3px;text-transform:none}
.compare tbody th{text-align:left;font-weight:800;color:var(--navy);padding:14px 16px;
  vertical-align:top;border:1px solid var(--line);background:var(--gold-soft);width:23%}
.compare tbody td{padding:14px 16px;vertical-align:top;border:1px solid var(--line)}
.compare tbody tr:nth-child(even) td{background:#FCFBF8}
.compare .hecm{background:#FBF7EF !important;box-shadow:inset 3px 0 0 var(--gold)}

@media (max-width:840px){
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .compare table,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tbody tr{border:2px solid var(--line);border-radius:16px;overflow:hidden;
    margin-bottom:20px}
  .compare tbody th{width:auto;border:none;font-size:1rem;padding:16px 18px}
  .compare tbody td{border:none;border-top:1px solid var(--line);padding:14px 18px;
    background:var(--card) !important}
  .compare .hecm{box-shadow:none !important;background:#FBF7EF !important}
  .compare tbody td::before{content:attr(data-col);display:block;font-weight:800;
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);
    margin-bottom:4px}
}

/* ------------------------------------------------------------
   THE PLAIN-FACT LIST — short sentences, one idea each
   ------------------------------------------------------------ */
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.facts li{border:2px solid var(--line);border-radius:14px;padding:18px 20px;
  font-size:.98rem;line-height:1.65}
.facts li b{display:block;color:var(--navy);font-weight:800;margin-bottom:4px}

/* THE REASSURANCE PANEL. Non-recourse is the single fact that most
   relieves the fear seniors and their children actually carry, so it is
   the loudest quiet thing on the page. */
.reassure{border:3px solid var(--gold);border-radius:20px;background:var(--gold-soft);
  padding:32px 30px;margin-top:32px}
.reassure h3{font-size:1.18rem;margin-bottom:12px}
.reassure p{font-size:1rem;margin:0 0 12px}
.reassure p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   THE MAIL-IN CARD
   ------------------------------------------------------------ */
.coupon{border:4px dashed var(--gold-deep);border-radius:6px;background:var(--card);
  padding:38px 34px;margin-top:40px;position:relative}
.coupon .scissors{position:absolute;top:-17px;left:30px;background:var(--paper);padding:0 10px;
  font-size:1.3rem;color:var(--gold-deep);line-height:1}
.coupon h3{font-size:1.2rem;margin-bottom:12px}
.coupon .younote{font-style:italic;color:var(--navy);font-weight:700;margin-bottom:14px}
.coupon .fill{border-bottom:2px solid var(--navy);height:2.2em;margin-bottom:18px;
  display:flex;align-items:flex-end;font-size:.82rem;color:var(--muted);font-weight:700}
.coupon .note{font-size:.88rem;font-style:italic;color:var(--ink);margin-top:6px}
.printrow{margin-top:24px;text-align:center}

/* ------------------------------------------------------------
   THE COIN ROW
   ------------------------------------------------------------ */
.coinrow{display:flex;gap:clamp(28px,6vw,64px);justify-content:center;flex-wrap:wrap;
  margin:8px 0 0}
/* A COIN THAT IS A DOOR. Every link we point toward goes through a golden
   circle — so when a deep page sends a reader somewhere, it sends them
   through the same ball the funnel uses, not through a word in a
   sentence. The cap under it is the name, and the focus ring is drawn on
   the ball itself because gold-on-gold is invisible. */
a.sunny{text-decoration:none;color:inherit}
a.sunny:focus-visible{outline:none}
a.sunny:focus-visible .coin{outline:3px solid var(--navy);outline-offset:5px}
a.sunny:focus-visible .cap{color:var(--navy)}

/* ------------------------------------------------------------
   THE FOOTER — the standard Royal footer, unchanged.
   ------------------------------------------------------------ */
footer{padding:30px 20px 42px;text-align:center;font-size:.72rem;color:var(--muted);
  line-height:1.75;border-top:1px solid var(--line);background:var(--paper)}
footer .in{max-width:840px;margin:0 auto}
footer b{color:var(--ink)}
footer a{color:var(--muted)}
footer .ehl{width:13px;height:13px;vertical-align:-2px;fill:currentColor}

/* ------------------------------------------------------------
   A CENTERED, QUIET PAGE — 404.html
   ------------------------------------------------------------ */
.quiet{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;gap:6px}
.quiet h1{font-size:clamp(1.4rem,3.6vw,2rem);font-weight:800;color:var(--navy);
  margin:28px 0 10px;letter-spacing:-.01em;max-width:22ch;line-height:1.2}
.quiet p{max-width:46ch;margin:0 0 26px;color:var(--ink);font-size:1rem;line-height:1.7}
.quiet .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ------------------------------------------------------------
   NARROW SCREENS — 375px is the floor and it must be comfortable.
   ------------------------------------------------------------ */
@media (max-width:640px){
  html{font-size:106.25%}
  html.ts2{font-size:118.75%}
  html.ts3{font-size:131.25%}
  .topbar .in{padding:14px 16px;gap:12px}
  /* THE NAV IS A THUMB TARGET HERE. Four pills wrap onto two rows on a
     phone, so a 34px pill four pixels from its neighbour is a mis-tap
     waiting to happen — and this audience taps with reading glasses on.
     Taller pill, wider gutter. Nothing else about the nav changes. */
  .topnav{width:100%;justify-content:flex-start;gap:8px}
  .topnav a{padding:13px 14px;font-size:.8rem}
  /* The line that tells a stranger who stands behind this name. It is the
     most trust-bearing six words in the header and it does not get to be
     the smallest thing on the page. */
  .brandlink .powered{font-size:.68rem}
  section.band{padding:36px 18px}
  .hero{padding:34px 18px 30px}
  .ctarow .btn{width:100%}
  .steps li{gap:16px}
  .stepnum{flex-basis:48px;height:48px;font-size:1.1rem}
  .coupon{padding:28px 20px}
  .callout{padding:22px 20px}
  .pcard{padding:24px 20px}
  /* THE DISCLOSURE IS NOT FINE PRINT HERE. The licence number, the Equal
     Housing line and "not a commitment to lend" were the smallest type on
     a page that promises print big enough to actually read. On a phone
     they come back up to something a sixty-two-year-old can read without
     pinching. Desktop is unchanged. */
  footer{font-size:.82rem}
}

/* ------------------------------------------------------------
   PRINT — this audience prints things. Everything important has to
   survive a black-and-white printer.
   ------------------------------------------------------------ */
@media print{
  .topnav,.textsize,.printrow,.askwrap,.skip,.ctarow{display:none !important}
  body{background:#fff !important;color:#000 !important;font-size:12pt}
  h1,h2,h3,.kicker,.hero h1,strong{color:#000 !important}
  .rule,.stepnum{background:#000 !important;color:#fff !important;box-shadow:none !important}
  .callout{background:#fff !important;border-left:6px solid #000}
  .pcard{border-color:#000 !important}
  .coupon{border-color:#000 !important}
  /* THIS AUDIENCE PRINTS THE COMPARISON AND TAKES IT TO THE TABLE.
     It prints as a real grid on paper at every screen width — the
     stacked-card layout is a small-screen affordance, not the document. */
  .compare thead{position:static !important;width:auto !important;height:auto !important;
    clip:auto !important;overflow:visible !important}
  .compare table{display:table !important}
  .compare thead{display:table-header-group !important}
  .compare tbody{display:table-row-group !important}
  .compare tr{display:table-row !important;border:none !important;margin:0 !important}
  .compare th,.compare td{display:table-cell !important;border:1px solid #000 !important;
    background:#fff !important;box-shadow:none !important;font-size:9.5pt;padding:7px 9px}
  .compare thead th{color:#000 !important;background:#fff !important;font-weight:800}
  .compare tbody td::before{display:none !important}
  .reassure{border:2px solid #000 !important;background:#fff !important}
  .facts li{border-color:#000 !important}
  section.band + section.band{border-top:1px solid #000}
  footer{border-top:1px solid #000;color:#000 !important}
  body.print-card *{visibility:hidden}
  body.print-card .coupon,body.print-card .coupon *{visibility:visible}
  body.print-card .coupon{position:absolute;top:0;left:0;right:0;margin:0}
}


/* 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}
}