/* ROYAL AGENT.ai 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 A PREFERENCE. Five of the ten
   pages on this site (404, home, reel-ideas, tools, treatment) load only
   css/font.css + css/royal.css, and royal.css declares the coin as `.sunny .coin`
   — there is NO bare `.coin{}` rule on those pages at all. The other five load
   _royal-system/front-door/front-door.css, which does have one. So a skin that
   leaned on the base sheet would paint a gold coin on half the site and a naked
   navy glyph on the other half. Everything the endcap needs is restated here,
   scoped under .wayhome.journey-actions so it can never leak onto the 23 seated
   coins on the front door.

   🚨 LINK THIS SHEET LAST IN <head>. Every page in this tree carries an inline
   <style> block AFTER its <link> tags, and that block already declares
   `.wayhome .homebubble .coin`. Source order is the tiebreak on the rules that
   match at equal specificity, so this file has to come after it. On index.html
   that means after grid-law.css as well.

   🚫 DO NOT LINK grid-law.css INTO A CONTENT PAGE TO GET THIS. grid-law.css pins
   bubble children three per row with column D reserved; it describes a FRONT
   DOOR, and the endcap is a row of three at the bottom of a content page. */

.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}
.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}

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

/* ==========================================================================
   FE-12 · THE TOOLS LAYER SLATE — the four bubbles behind 1C.
   Scoped to nav.toolslate so it cannot reach the 23 coins on the front door
   or the 13 .sunny tool-card glyphs further down tools.html.
   Bryan's rule for this pass: picture + title only. Nothing else rides a
   bubble — no counts, no status word, no second line.
   ========================================================================== */
.toolslate{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:clamp(14px,4vw,34px);width:100%;max-width:620px;margin:0 auto;padding:0}
.toolslate .bubble{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:11px;width:clamp(86px,22vw,120px);text-decoration:none;-webkit-tap-highlight-color:transparent}
.toolslate .bubble .coin{position:relative;display:grid;place-items:center;width:100%;max-width:108px;height:auto;aspect-ratio:1;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}
.toolslate .bubble .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}
.toolslate .bubble .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)}
.toolslate .bubble .coin .inner img{position:relative;z-index:1;max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.toolslate .bubble b{font-size:clamp(11px,1.5vw,12.5px);font-weight:800;color:var(--navy,#253069);text-align:center;text-transform:uppercase;letter-spacing:.11em;line-height:1.35}
.toolslate .bubble:hover .coin{transform:translateY(-4px) scale(1.04)}
.toolslate .bubble:hover b{color:var(--gold-deep,#8A6F3F)}
.toolslate .bubble:focus-visible{outline:3px solid var(--gold,#CBA260);outline-offset:6px;border-radius:16px}
@media(prefers-reduced-motion:reduce){.toolslate .bubble: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}
}
