/* ROYAL BUILDER endpoint standard - 2026-08-03.
   Canonical colors: Royal Navy #253069 / Royal Gold #CBA260.
   THE THREE-WAY ENDCAP, copied byte-for-byte from the approved royalai.ai and
   Royal HELOC pages. Geometry, seating and middle-seat home treatment are
   imported, never re-derived.

   WHY THIS SHEET IS SELF-CONTAINED, and it is not belt-and-braces.
   Six of this site's eleven pages (404, apex-plan, command-board, home,
   portal, tools) load css/builder.css + css/royal-system.css and NOT
   css/front-door.css. Neither of those two sheets carries a `.coin .inner`
   rule at all - royal-system.css writes THE SEATING LAW against `.coin-inner`,
   a DIFFERENT class. So on those six pages the endcap's white medallion had
   nothing to paint it and the mark sat straight on the gold. Everything the
   endcap needs is therefore stated here, scoped under .wayhome.journey-actions
   so it can never leak onto the bubble slate or the header. */

.wayhome{display:flex;justify-content:center;align-items:center;width:100%;margin:44px auto 32px;padding:0 20px}
.homebubble{display:inline-flex;align-items:center;justify-content:center;width:var(--hb,56px);text-decoration:none;-webkit-tap-highlight-color:transparent}
.homebubble .coin{max-width:var(--hb,56px)}
.homebubble:hover .coin{transform:translateY(-4px) scale(1.05)}
.homebubble:focus-visible{outline:3px solid var(--gold,#CBA260);outline-offset:6px;border-radius:50%}

.wayhome.journey-actions{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;gap:clamp(8px,4vw,32px);width:100%;margin-top:48px}
.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}
/* 🚨 NO 61% RULE HERE, AND ITS ABSENCE IS THE DECISION.
   royalai.ai's skin seats the two journey-link marks with width:61%;height:61%
   and leans on object-fit:contain to keep them honest. That works there because
   its 59% cap lives in a DIFFERENT, earlier sheet. Merged into one
   self-contained file the two rules land at equal specificity, source order
   decides, and the result was a SQUARE 35.3x35.3 box holding matte_R.png, which
   is natively 470x512 - an 8.9% wider box than the ink, saved from visible
   distortion only by object-fit. That is a rescue, not a seat.
   royalheloc.ai's own 2026-08-03 skin - the peer sub-portal with this exact
   merge problem - ships NO 61% rule either and seats every endcap mark at the
   59% cap below. THE SEATING LAW (Bryan, 7/28): medallion 68% of the coin,
   mark capped at 59% of the medallion. Measured after: 32.4 x 35.3, the R's
   own aspect, and the same seat every other coin on this site already uses.
   Do not re-add width/height percentages here. */
.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}

/* Self-contained coin so the endcap renders no matter which base sheet the
   page loads. THE CANON COIN GRADIENT IS LITERAL: the 52% stop is #c9a15f,
   the coin's own material, and it never rides --gold.
   THE SEATING LAW: medallion 68% of the coin, mark 59% of the medallion. */
.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(--navy,#253069)}
.wayhome.journey-actions .coin .inner svg .gold{fill:var(--gold,#CBA260)}
.wayhome.journey-actions a:hover .coin{transform:translateY(-4px) scale(1.04)}

@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}
}
@media(prefers-reduced-motion:reduce){
  .wayhome.journey-actions a:hover .coin{transform:none}
  .homebubble:hover .coin{transform:none}
}


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