/* ============================================================
   ROYAL AGENT.ai — the shared sheet
   Same room, different door. Tokens, coin and footer are the
   house standard; everything below the coin block is layout
   that belongs to this surface alone.

   BRAND LAW (the filed guide wins):
     navy #253069 · gold #CBA260 · Montserrat 400/700/800
     EVERY page background is #FFFFFF. Pure white. The gold
     spheres float in midair against it.
   ============================================================ */

:root{
  --navy:#253069;
  --navy-deep:#1A2450;
  --gold:#CBA260;
  --gold-deep:#8A6F3F;
  --paper:#FFFFFF;      /* pure white. never tinted. */
  --card:#FFFFFF;
  --ink:#1B2140;
  --muted:#5C6178;
  --line:#E7E4DB;
  --line-soft:#F0EEE8;
}

*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* 2026-07-31 standard-property fallback, Phase 1 browser-agnostic pass */
body{
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-family:var(--royal-font,'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
  /* The page body never scrolls sideways. Wide things scroll inside
     their own container instead — see .scroller. */
  overflow-x:hidden;
}
img{max-width:100%;height:auto}

/* Every page ships viewport-fit=cover, so the column has to clear the notch
   itself — on a notched iPhone in landscape a flat 24px runs the type under
   the sensor housing. env() is 0px everywhere else, so this is invisible on
   any device that does not have the problem. */
.wrap{max-width:1120px;margin:0 auto;
  padding-left:max(24px, env(safe-area-inset-left));
  padding-right:max(24px, env(safe-area-inset-right))}
@media(max-width:420px){
  .wrap{padding-left:max(18px, env(safe-area-inset-left));
        padding-right:max(18px, env(safe-area-inset-right))}
}

/* Anything wider than the column gets its own scroll box, so the page
   itself stays put at 375px. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Skip link — the first thing a keyboard lands on. */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;z-index:100}
.skip:focus{left:0}

/* ---------- focus, everywhere, always visible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ============================================================
   THE SITE MARK
   ============================================================ */
header.site{padding:24px 0 6px}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.sitemark{display:flex;align-items:center;gap:12px;text-decoration:none}
.sitemark .castle{height:44px;width:auto;display:block;flex:none}
.sitemark .words{font-weight:800;color:var(--navy);letter-spacing:.06em;
  font-size:clamp(15px,2.6vw,19px);text-transform:uppercase;line-height:1}
.sitemark .words em{font-style:italic;color:var(--gold-deep);text-transform:none;letter-spacing:0}

.brandbar nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;font-weight:700}
/* The gold rule is reserved on the resting state, not added on hover — a
   border that appears on hover makes every link 2px taller and jogs the whole
   bar as the pointer crosses it. */
.brandbar nav a{color:var(--navy);text-decoration:none;opacity:.85;padding:4px 0;
  border-bottom:2px solid transparent}
.brandbar nav a:hover{opacity:1;border-bottom-color:var(--gold)}
@media(max-width:560px){
  .brandbar{gap:14px}
  .brandbar nav{gap:14px;font-size:13px}
  /* On a phone the bar wraps to two rows and each link is only 31px tall —
     a thumb miss. The padding takes the target to ~41px; the 14px row gap
     still holds the two rows apart. */
  .brandbar nav a{padding:9px 0}
}

/* the ROYAL Ai wordmark, inline, wherever it appears in running text */
.rword{text-transform:none;white-space:nowrap}
.rword b{color:var(--navy);font-weight:800}
.rword em{color:var(--gold-deep);font-style:italic;font-weight:800}

/* ============================================================
   TYPE
   ============================================================ */
.kicker{color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:14px}
h1{font-size:clamp(32px,5.2vw,56px);line-height:1.06;letter-spacing:-.02em;margin:0 0 18px;
  font-weight:800;color:var(--navy);text-wrap:balance}
h1 .gold{color:var(--gold-deep)}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.015em;margin:0 0 10px;
  font-weight:800;color:var(--navy);text-wrap:balance}
h3{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 6px;line-height:1.3}
.lede{font-size:clamp(16.5px,2vw,19px);color:var(--muted);max-width:56ch;margin:0 0 22px}
.sec-sub{margin:0 0 26px;color:var(--muted);font-size:16.5px;max-width:64ch}
.section{padding:clamp(46px,7vw,78px) 0;border-top:1px solid var(--line-soft)}
.section:first-of-type{border-top:0}
.section-head{margin-bottom:clamp(24px,4vw,38px)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;
  font-size:15px;letter-spacing:.02em;border-radius:12px;padding:14px 26px;border:0;cursor:pointer;
  font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn.primary{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(37,48,105,.22)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,48,105,.30)}
.btn.gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 8px 22px rgba(203,162,96,.30)}
.btn.gold:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}

/* ============================================================
   THE COIN
   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)}

/* --- everything below EXTENDS the canon block; it never re-mixes it --- */

/* The ivory inner disc, at rgba(255,255,255,.92) so 8% of the gold bleeds
   through and it reads ivory rather than white. */
/* 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 he named.
   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{position:absolute;left:16%;top:16%;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}
/* The mark fits inside 59% of the inner disc. Both axes are pinned, not just
   the width — the castle mark's viewBox is taller than it is wide, so
   height:auto let it grow past the disc and .inner's overflow:hidden clipped
   the base off. preserveAspectRatio does the letterboxing.
   This rule carries 23 of the 23 seated coins on the royalagent.ai front door,
   so it is the one that has to move, not just the img rule below it. */
.sunny .coin .inner svg{width:59%;height:59%;display:block;fill:var(--navy)}
/* THE ANSWER KEYS, 1 Aug 2026. Coins on this site were navy-only, so a mark
   carrying a class="gold" accent rendered its gold parts navy — the gold-off
   state, permanently. This is the same rule royalai.ai/css/royal.css line 139
   has always had; the agent portal simply never needed it until Seller Net.
   Scoped to svg INSIDE a coin, so the four existing class="gold" uses on this
   site — all of them <h1> spans — are untouched. Verified before adding.
   Pre-change original archived at
   _superseded\2026-08-01-answer-keys\royalagent.ai\css\royal.css */
.sunny .coin .inner svg .gold{fill:var(--gold)}
.sunny .coin .inner img{max-width:59%;max-height:59%;display:block}

/* A coin that has to live in a fluid grid. The canon 108px stays the ceiling. */
.sunny.fluid .coin{width:100%;height:auto;max-width:108px;aspect-ratio:1}
/* The three pillars carry the big coin. */
.sunny.big .coin{width:128px;height:128px}

.sunny{display:flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);min-width:0}
.sunny .label{font-size:clamp(11px,1.5vw,12.5px);font-weight:800;color:var(--navy);
  text-align:center;text-transform:uppercase;letter-spacing:.11em;line-height:1.35}
.sunny:hover .label{color:var(--gold-deep)}
.sunny:focus-visible{outline-offset:6px}

/* The widget-bubble grid — four across, then two, then two. Never three:
   thirteen over three columns leaves a ragged last row. */
.bubbles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,30px);
  margin:0;padding:0;list-style:none}
@media(max-width:860px){.bubbles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.bubbles{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ============================================================
   THE ASK BAR — ROYAL Ai. Exactly one per page.
   ============================================================ */
.ask{width:100%;max-width:640px;margin-top:8px}
.askbar{position:relative;display:block}
.askbar input{width:100%;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  padding:17px 62px 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}
.askbar input:focus{border-color:var(--gold);box-shadow:0 12px 34px rgba(203,162,96,.28)}
.askbar button{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;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)}
.askbar button svg{width:17px;height:17px;stroke:var(--navy-deep);stroke-width:2.4;fill:none}
.askbar button:hover{filter:brightness(1.05)}

.answer{background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:14px;
  padding:18px 22px;font-size:15px;line-height:1.65;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}
  .sunny:hover .coin{transform:none}
  .btn:hover{transform:none}
}
.answer .q{color:var(--muted);font-size:13px;margin:0 0 8px;font-weight:700}
.answer .a{margin:0;white-space:pre-wrap}
.answer .fine{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.asknote{font-size:12.5px;color:var(--muted);margin:10px 0 0;max-width:60ch}

/* ============================================================
   CARDS
   ============================================================ */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  box-shadow:0 6px 18px rgba(37,48,105,.06)}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .tag{color:var(--gold-deep);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:9px}
.card .ic{width:38px;height:38px;margin-bottom:14px;display:block;fill:var(--navy)}

/* the checklist look — a gold rule, then plain readable rows */
.ticks{list-style:none;margin:14px 0 0;padding:0}
.ticks li{position:relative;padding:0 0 0 28px;margin:0 0 11px;font-size:15px;color:var(--muted)}
.ticks li:last-child{margin-bottom:0}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;
  border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(-45deg)}
.ticks li b{color:var(--ink);font-weight:800}

/* the navy band — used once per page at most */
.band{background:var(--navy);color:#fff;border-radius:22px;padding:clamp(28px,4vw,44px) clamp(24px,4vw,40px)}
.band h2{color:#fff;margin-bottom:12px}
.band p{color:#C7CBE0;font-size:16.5px;max-width:60ch;margin:0}
.band .ticks li{color:#C7CBE0}
.band .ticks li b{color:#fff}
.band .ticks li::before{border-color:var(--gold)}

/* the pull quote */
.pull{border-left:4px solid var(--gold);padding:6px 0 6px 24px;margin:0;
  font-size:clamp(18px,2.5vw,23px);font-weight:700;color:var(--navy);line-height:1.45;max-width:70ch}
.pull cite{display:block;margin-top:12px;font-size:13px;font-weight:700;font-style:normal;
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* three pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);
  align-items:start;text-align:center}
@media(max-width:780px){.pillars{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.pillar h3{font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin-top:18px}
.pillar .sub{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 10px}
.pillar p{margin:0;color:var(--muted);font-size:15px}
.pillar-line{text-align:center;font-weight:800;color:var(--navy);letter-spacing:.16em;
  text-transform:uppercase;font-size:clamp(13px,1.9vw,17px);margin:clamp(26px,4vw,40px) 0 0}

/* the numbered rows (the timeline of a file) */
.rows{display:grid;gap:14px;margin-top:8px}
.row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.row .n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.row p{margin:0;color:var(--muted);font-size:15px}

/* the form */
form.royalform{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;margin-top:22px}
@media(max-width:680px){form.royalform{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.field input,.field select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--gold)}
form.royalform .btn{grid-column:1/-1;justify-self:start}
.formerr{display:none;grid-column:1/-1;margin:0;font-size:13.5px;font-weight:700;color:var(--navy)}
.formerr.show{display:block}
.formdone{display:none;margin-top:20px;border-top:1px solid var(--line);padding-top:22px}
.formdone.show{display:block}
.formdone h3{font-size:20px;margin-bottom:8px}
.formdone p{margin:0 0 14px;color:var(--muted);font-size:15.5px;max-width:60ch}

/* ============================================================
   THE TOOL GALLERY (tools.html)
   ============================================================ */
.tool{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:0 6px 18px rgba(37,48,105,.06)}
@media(max-width:560px){.tool{grid-template-columns:1fr;justify-items:center;text-align:center}}
.tool .num{font-size:11.5px;font-weight:800;letter-spacing:.18em;color:var(--gold-deep);
  text-transform:uppercase;margin:0 0 6px}
.tool h3{font-size:19px;margin-bottom:8px}
.tool p{margin:0 0 14px;color:var(--muted);font-size:15px}
.tool .open{font-size:13.5px;font-weight:800;color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:2px}
.tool .open:hover{color:var(--gold-deep)}
/* The one control in each of the thirteen cards, and the border-bottom left it
   20px tall on a phone. The rule moves to text-decoration so the padding can
   take the target to ~44px without pushing the gold line off the words. Below
   the base rule on purpose — same specificity, so order decides. */
@media(max-width:560px){
  .tool .open{display:inline-block;border-bottom:0;padding:11px 8px;
    text-decoration:underline;text-decoration-color:var(--gold);
    text-decoration-thickness:2px;text-underline-offset:5px}
}
.toolgrid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.toolgrid{grid-template-columns:1fr}}

/* ============================================================
   TOAST + FOOTER
   ============================================================ */
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(16px);
  background:var(--navy);color:#fff;font-size:14px;font-weight:700;padding:11px 22px;
  border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

footer.site{border-top:1px solid var(--line);margin-top:20px;
  padding:28px 0 calc(60px + env(safe-area-inset-bottom,0px));
  text-align:center;font-size:12px;color:var(--muted);line-height:1.7}
/* index.html and tools.html carry the footer INSIDE .wrap, so it already has
   the column gutter. offline.html and 404.html hang it straight off <body> —
   there the text ran to within 7px of the screen edge at 375. This gutter is
   scoped to exactly that case so the nested footers are not double-padded. */
body > footer.site{
  padding-left:max(24px, env(safe-area-inset-left));
  padding-right:max(24px, env(safe-area-inset-right))}
@media(max-width:420px){
  body > footer.site{
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right))}
}
footer.site b{color:var(--ink)}
footer.site a{color:inherit}
.flinks{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;
  font-size:14px;font-weight:700}
.flinks a{color:var(--navy);text-decoration:none;opacity:.85}
.flinks a:hover{opacity:1}
/* At the bottom of a 13,500px page this row is the only way back, and at
   14px/1.7 each link is a 24px-tall target. Phones only — a pointer does not
   need the extra 16px. */
@media(max-width:560px){
  .flinks a{display:inline-block;padding:9px 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}
}