/* Royal HELOC endpoint alignment - 2026-08-03.
   Canonical colors: Royal Navy #253069 / Royal Gold #CBA260.
   Brings the new educational destinations back to the approved family shell
   while preserving their calculators, comparisons, and source-backed copy. */

.he-subnav{border:0;background:#fff}
.he-subnav-row{position:relative;min-height:52px;justify-content:center}
.he-back{justify-content:center}
.he-crumbs{position:absolute;right:0}
.he-header{border:0;background:#fff}
.he-header-row{min-height:126px}
.he-brand{display:flex;align-items:center;width:max-content;max-width:100%;flex:none}
.he-brand img{height:clamp(76px,13.69vw,122px);width:auto;max-width:100%}
.he-nav{font-size:13px;font-weight:700}
.he-nav .he-nav-cta{background:var(--he-navy);color:#fff}
.he-hero{background:#fff}
.he-hero-grid{padding-top:clamp(38px,6vw,68px)}
.he-product-state{background:var(--he-ivory)}
.he-product-state [data-product-status]::before{content:"Terms vary"}

/* The endpoint uses the exact approved three-bubble footer. */
.he-endcap{padding:48px 20px 34px;background:#fff}
.he-endcap.wayhome{margin:0 auto}
.wayhome.journey-actions .coin{position:relative;display:grid;place-items:center;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: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}
.wayhome.journey-actions .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}
.wayhome.journey-actions .coin .inner{width:68%;height:68%;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.92);box-shadow:inset 0 1px 4px rgba(90,66,30,.35)}
.wayhome.journey-actions .coin .inner img,
.wayhome.journey-actions .coin .inner svg{position:relative;z-index:1;max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.wayhome.journey-actions .coin .inner svg{fill:var(--he-navy,#253069)}
.wayhome.journey-actions .coin .inner svg .gold{fill:var(--he-gold,#CBA260)}
.wayhome.journey-actions a:hover .coin{transform:translateY(-4px) scale(1.04)}

@media(max-width:760px){
  .he-subnav-row{width:100%;padding-inline:16px}
  .he-crumbs{display:none}
  .he-header-row{min-height:0;flex-direction:column;justify-content:center;gap:8px;padding:10px 16px 20px}
  .he-brand img{height:76px}
  .he-nav{justify-content:center;gap:4px 16px}
  .he-nav .he-nav-cta{flex-basis:100%;max-width:330px}
}
@media(prefers-reduced-motion:reduce){.wayhome.journey-actions a:hover .coin{transform:none}}

/* ============================================================================
   THE ENDCAP TRAVELS — 2026-08-03 (FE-6). ADDITIVE ONLY; nothing above this
   line was changed.

   🔴 THE DEFECT THIS CLOSES. Seven pages in this tree — index · door · dsx ·
   home-value · ready · stand · start — already carried the three-way endcap
   MARKUP, and had for a while, but they load _royal-system/royal-system.css
   and _royal-system/front-door/front-door.css and NOT css/royal.css. The only
   copy of the .wayhome.journey-actions layout in the tree lives at
   css/royal.css:487-511, so on those seven pages the row was rendering
   half-dressed: no column stack, no 88px cap on the coins, no 10px label type,
   no gap. Verified on disk, not assumed — grep for "journey" in
   royalheloc.ai/index.html returns three hits and all three are markup.

   The block below is BYTE-COPIED from css/royal.css:487-511, the approved
   original, so the pages that already load royal.css compute identical values
   and do not move; the seven that were missing it now match them exactly.
   R-5: "same order, SAME COORDINATES, every page, every site."

   The .wayhome base is restated too (margins, centring, gutter) because those
   seven pages each spell it in their own inline <style> and 404.html gets it
   from royal.css — the one line here makes every page agree without editing
   seven inline sheets. */
.wayhome.journey-actions{margin-left:auto;margin-right:auto;padding:0 20px;
  box-sizing:border-box}
.wayhome.journey-actions *{box-sizing:border-box}
.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}
}