:root{
  --calc-navy:#253069;
  --calc-navy-deep:#171f44;
  --calc-gold:#cba260;
  --calc-gold-dark:#8a6f3f;
  --calc-ink:#20264a;
  --calc-muted:#62677d;
  --calc-line:#e6e3da;
  --calc-soft:#f8f6f1;
  --calc-white:#fff;
}

html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:#fff;color:var(--calc-ink);font-family:Montserrat,Arial,sans-serif}
button,input{font:inherit}
main{width:min(1160px,calc(100% - 40px));margin:0 auto}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--calc-navy);color:#fff;padding:12px 18px;border-radius:999px}
.skip:focus{top:16px}

.calculator-header{width:min(1160px,calc(100% - 40px));margin:0 auto;min-height:102px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--calc-line)}
.calculator-brand{display:inline-flex;align-items:center;min-height:52px}
.calculator-brand img{display:block;width:auto;height:clamp(72px,9vw,98px)}
.library-link{color:var(--calc-navy);font-size:13px;font-weight:800;letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--calc-gold);padding:8px 0}

.calculator-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:56px;align-items:center;padding:64px 0 42px}
.eyebrow,.step{margin:0 0 10px;color:var(--calc-gold-dark);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.calculator-hero h1{margin:0;color:var(--calc-navy);font-size:clamp(42px,6.7vw,76px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.calculator-hero h1 span{color:var(--calc-gold-dark)}
.hero-lede{max-width:690px;margin:23px 0 0;color:var(--calc-muted);font-size:clamp(16px,2vw,20px);line-height:1.65}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hero-trust span{border:1px solid var(--calc-line);background:var(--calc-soft);border-radius:999px;padding:8px 13px;font-size:11px;font-weight:800;color:var(--calc-navy)}
.calculator-coin{width:216px;height:216px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,#fff9e9 0%,#f5e2b4 17%,#dfbd77 39%,#c69b55 58%,#8f6b36 82%,#604721 100%);box-shadow:0 26px 55px rgba(28,34,75,.24),inset 0 4px 8px rgba(255,255,255,.75),inset 0 -10px 18px rgba(67,45,14,.35)}
.calculator-coin>span{width:66%;height:66%;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 3px 10px rgba(22,29,66,.13)}
.calculator-coin img{display:block;width:62%;height:auto}

.product-tabs{position:sticky;top:12px;z-index:20;width:min(620px,100%);margin:0 auto 26px;padding:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border:1px solid var(--calc-line);border-radius:999px;box-shadow:0 12px 36px rgba(30,37,79,.12);box-sizing:border-box}
.product-tabs button{min-width:0;min-height:50px;border:0;border-radius:999px;background:transparent;color:var(--calc-navy);font-size:13px;font-weight:900;letter-spacing:.04em;cursor:pointer}
.product-tabs button[aria-selected="true"]{background:var(--calc-navy);color:#fff;box-shadow:0 7px 18px rgba(37,48,105,.26)}
.product-tabs button:focus-visible{outline:3px solid var(--calc-gold);outline-offset:2px}

/* FE-17 (b)+(c), 2026-08-03 - THE PRODUCT MARK RIDES IN THE TAB.
   The mark sits in its own white medallion instead of being painted onto the
   pill. The selected pill is solid navy and these marks are navy-and-gold, so
   without the seat the navy half of every mark would disappear the moment you
   selected it - and a CSS filter would have flattened the gold away, which RAIL
   E forbids as surely as redrawing would. The medallion is the same answer the
   coin uses everywhere else: the mark keeps its own two colours, untouched, in
   both the selected and the unselected state. */
.product-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;padding:0 10px}
.tab-mark{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;
  display:grid;place-items:center;border:1px solid var(--calc-line);
  box-shadow:inset 0 1px 3px rgba(90,66,30,.2);transition:border-color .15s}
.tab-mark img{display:block;width:66%;height:66%;object-fit:contain}
.product-tabs button[aria-selected="true"] .tab-mark{border-color:var(--calc-gold)}
.tab-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.calculator-shell{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);border:1px solid var(--calc-line);border-radius:30px;overflow:hidden;box-shadow:0 28px 80px rgba(31,38,80,.12);scroll-margin-top:96px}
.inputs-panel,.results-panel{padding:clamp(28px,4vw,48px)}
.inputs-panel{background:var(--calc-soft);border-right:1px solid var(--calc-line)}
.results-panel{background:#fff}
.panel-heading h2{margin:0;color:var(--calc-navy);font-size:clamp(28px,3.8vw,42px);letter-spacing:-.035em;line-height:1.05}
.panel-heading>p:last-child{margin:10px 0 0;color:var(--calc-muted);font-size:13px;line-height:1.55}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.field-card{display:block;background:#fff;border:1px solid var(--calc-line);border-radius:15px;padding:14px 15px}
.field-card>span:first-child,.rate-heading label{display:block;color:var(--calc-muted);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.money-input,.percent-input{display:flex;align-items:center;margin-top:7px;color:var(--calc-gold-dark)}
.money-input b,.percent-input b{font-size:18px}
.money-input input,.percent-input input{width:100%;min-width:0;border:0;background:transparent;color:var(--calc-navy);font-size:20px;font-weight:800;outline:none;padding:0 0 0 5px}
.field-card:focus-within{border-color:var(--calc-gold);box-shadow:0 0 0 3px rgba(203,162,96,.15)}

.rate-control{margin-top:22px;background:#fff;border:1px solid var(--calc-line);border-radius:17px;padding:18px}
.rate-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}
.percent-input{margin:0;width:96px;border:1px solid var(--calc-line);border-radius:10px;padding:8px 9px}
.percent-input input{font-size:17px;text-align:right;padding:0}
#rate-slider{width:100%;height:24px;margin:17px 0 2px;accent-color:var(--calc-navy);cursor:pointer}
.range-labels{display:flex;justify-content:space-between;color:var(--calc-muted);font-size:10px;font-weight:700}
#rate-note{margin:13px 0 0;color:var(--calc-muted);font-size:11px;line-height:1.55}

.terms-grid{display:grid;gap:14px;margin-top:18px}
fieldset{min-width:0;margin:0;border:0;padding:0}
legend{margin:0 0 8px;color:var(--calc-muted);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.term-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.term-options label{cursor:pointer}
.term-options input{position:absolute;opacity:0;pointer-events:none}
.term-options span{display:grid;place-items:center;min-height:42px;background:#fff;border:1px solid var(--calc-line);border-radius:11px;color:var(--calc-navy);font-size:12px;font-weight:800}
.term-options input:checked+span{background:var(--calc-navy);border-color:var(--calc-navy);color:#fff}
.term-options input:focus-visible+span{outline:3px solid var(--calc-gold);outline-offset:2px}
.reset-button{width:100%;min-height:46px;margin-top:20px;border:1px solid var(--calc-line);border-radius:999px;background:transparent;color:var(--calc-navy);font-size:12px;font-weight:800;cursor:pointer}
.reset-button:hover{border-color:var(--calc-gold);background:#fff}

.results-heading{padding-bottom:20px}
.result-cards{display:grid;gap:12px}
.result-card{border:1px solid var(--calc-line);border-radius:18px;padding:20px;transition:border-color .2s,box-shadow .2s,transform .2s}
.result-card.selected{border-color:var(--calc-gold);box-shadow:0 12px 35px rgba(203,162,96,.2);transform:translateY(-2px)}
.result-top{display:flex;justify-content:space-between;gap:16px;align-items:center}
.result-top span{color:var(--calc-muted);font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.result-top b{color:var(--calc-navy);font-size:12px;letter-spacing:.08em}
.payment{display:flex;align-items:baseline;gap:8px;margin:15px 0 2px}
.payment strong{color:var(--calc-navy);font-size:clamp(29px,4vw,40px);letter-spacing:-.035em}
.payment span{color:var(--calc-muted);font-size:11px;font-weight:700}
.payment-label{margin:0;color:var(--calc-muted);font-size:11px}
.payment-bar{height:5px;margin:15px 0;background:#efede7;border-radius:99px;overflow:hidden}
.payment-bar i{display:block;width:20%;height:100%;background:linear-gradient(90deg,var(--calc-gold-dark),var(--calc-gold));border-radius:inherit;transition:width .25s ease}
.result-card dl{display:grid;gap:7px;margin:0}
.result-card dl div{display:flex;justify-content:space-between;gap:14px;padding-top:7px;border-top:1px dashed var(--calc-line)}
.result-card dt{color:var(--calc-muted);font-size:10px;line-height:1.45}
.result-card dd{margin:0;color:var(--calc-ink);font-size:10px;font-weight:800;text-align:right}

.equity-readout{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.equity-readout div{background:var(--calc-soft);border-radius:14px;padding:15px}
.equity-readout span{display:block;color:var(--calc-muted);font-size:9px;font-weight:800;line-height:1.45;text-transform:uppercase;letter-spacing:.05em}
.equity-readout strong{display:block;margin-top:7px;color:var(--calc-navy);font-size:18px}
.plain-read{margin-top:12px;background:linear-gradient(150deg,var(--calc-navy),var(--calc-navy-deep));border-radius:18px;padding:22px;color:#fff}
.plain-read .step{color:var(--calc-gold)}
.plain-read h3{margin:0;font-size:20px;line-height:1.25}
.plain-read>p:last-child{margin:10px 0 0;color:#d9dcee;font-size:12px;line-height:1.65}
.math-note{margin:15px 0 0;color:var(--calc-muted);font-size:10px;line-height:1.65}
.math-note.warning{color:#793b2a;font-weight:700}

.product-guide,.calculator-library,.next-step{padding:clamp(70px,9vw,110px) 0 0}
.product-guide>h2,.calculator-library h2,.next-step h2{margin:0;color:var(--calc-navy);font-size:clamp(32px,5vw,54px);line-height:1.04;letter-spacing:-.035em}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.guide-grid article{border:1px solid var(--calc-line);border-radius:20px;padding:24px}
.guide-grid article>span{color:var(--calc-gold-dark);font-size:10px;font-weight:900;letter-spacing:.12em}
.guide-grid h3{margin:9px 0 8px;color:var(--calc-navy);font-size:21px}
.guide-grid p{margin:0;color:var(--calc-muted);font-size:13px;line-height:1.7}

.calculator-library{display:grid;grid-template-columns:.72fr 1.28fr;gap:46px;align-items:start}
.calculator-library>div:first-child>p:last-child{color:var(--calc-muted);font-size:14px;line-height:1.65}
.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.library-card{min-height:118px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--calc-line);border-radius:17px;padding:20px;text-decoration:none;background:#fff;transition:transform .15s,border-color .15s,box-shadow .15s}
.library-card:hover{transform:translateY(-2px);border-color:var(--calc-gold);box-shadow:0 10px 25px rgba(34,41,84,.1)}
.library-card span{color:var(--calc-gold-dark);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.library-card strong{margin-top:6px;color:var(--calc-navy);font-size:16px}
.library-card small{margin-top:4px;color:var(--calc-muted);font-size:11px;line-height:1.45}
.library-card.live{background:var(--calc-soft);border-color:var(--calc-gold)}

/* FE-17 (a)+(b), 2026-08-03 - EVERY CALCULATOR IN THE SUITE WEARS ITS PRODUCT'S
   MARK. The card is already a flex column, so the mark simply becomes its first
   row and nothing below it moves sideways.

   .library-card .library-mark is two classes and therefore outranks the
   .library-card span rule that paints the Live / Next / Open state pill - the
   mark is a seat, not a pill, and must not inherit the pill's uppercase gold
   micro-type.

   IT IS A REAL COIN, NOT A GOLD DISC WITH A PICTURE ON IT. Gold sphere, white
   medallion at 68%, mark capped at 59% of the medallion - THE SEATING LAW,
   0.68 x 0.59 = 40.1%, the same ratio the whole family uses. The white
   medallion is not decoration: assets/navy/coins.png and assets/navy/refi.png
   are 100% navy and assets/coin_goldX.png is 100% gold, so a mark painted
   straight onto the sphere would either fight it or vanish into it. Seated on
   white, every one of them reads, and not one of them had to be recoloured. */
.library-card .library-mark{width:54px;height:54px;flex:none;border-radius:50%;
  display:grid;place-items:center;margin:0 0 14px;font-size:0;letter-spacing:normal;
  text-transform:none;
  background:radial-gradient(circle at 32% 24%,#fff9e9 0%,#f5e2b4 17%,#dfbd77 39%,#c69b55 58%,#8f6b36 82%,#604721 100%);
  box-shadow:0 7px 16px rgba(28,34,75,.2),inset 0 2px 5px rgba(255,255,255,.72),inset 0 -4px 9px rgba(67,45,14,.32)}
.library-card .library-mark>span{width:68%;height:68%;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:inset 0 1px 3px rgba(90,66,30,.3)}
.library-card .library-mark img{display:block;width:59%;height:59%;object-fit:contain}
.library-card:hover .library-mark{box-shadow:0 11px 22px rgba(28,34,75,.26),inset 0 2px 5px rgba(255,255,255,.72),inset 0 -4px 9px rgba(67,45,14,.32)}

.next-step{text-align:center;padding-bottom:76px}
.next-step>p:not(.eyebrow){max-width:620px;margin:16px auto 0;color:var(--calc-muted);line-height:1.65}
/* ---------------------------------------------------------------------------
   THE ENDCAP'S PRIVATE GEOMETRY IS RETIRED - FE-6, 2026-08-03.

   Bryan's R-5: "a fixed footer row of three at the bottom of every page, same
   order, SAME COORDINATES, every page, every site." calculators.html was the
   only page in either tree that drew the three with its own class names and its
   own coin sizes - 118px, and 132px for home - so it was the only page whose
   endcap did not line up with its neighbours. Its markup now uses the family's
   .wayhome.journey-actions, styled by css/royal.css:487-511, and these rules no
   longer have anything to match.

   KEPT, COMMENTED, NEVER DELETED, per THE NEVER-DELETE LAW - the same treatment
   index.html:537 gives the retired house SVG. The whole prior file is filed at
   _superseded\2026-08-03-fe17-calculator-suite\css\calculators-BEFORE.css.

.journey-actions{max-width:560px;margin:38px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:end}
.journey-action{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--calc-navy);text-decoration:none;font-size:11px;text-align:center}
.action-coin{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,#fff9e9 0%,#f5e2b4 17%,#dfbd77 39%,#c69b55 58%,#8f6b36 82%,#604721 100%);box-shadow:0 15px 34px rgba(27,34,73,.2),inset 0 3px 6px rgba(255,255,255,.75),inset 0 -8px 14px rgba(67,45,14,.34);transition:transform .16s,box-shadow .16s}
.action-coin>span{width:63%;height:63%;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.action-coin img{display:block;max-width:64%;max-height:64%;object-fit:contain}
.rover-action .action-coin img{max-width:68%;max-height:68%}
.journey-action:hover .action-coin{transform:translateY(-4px);box-shadow:0 21px 42px rgba(27,34,73,.25),inset 0 3px 6px rgba(255,255,255,.75),inset 0 -8px 14px rgba(67,45,14,.34)}
.journey-action:focus-visible{outline:3px solid var(--calc-gold);outline-offset:8px;border-radius:18px}
.home-action{transform:translateY(18px)}
.home-action .action-coin{width:132px;height:132px}
   --------------------------------------------------------------------------- */
/* The endcap keeps only the air around it here; every coordinate inside it now
   comes from the one shared block in css/royal.css. */
.next-step .wayhome.journey-actions{margin-top:38px}

footer{padding:30px 20px 38px;border-top:1px solid var(--calc-line);text-align:center;color:var(--calc-muted);font-size:10px;line-height:1.75}
footer b{color:var(--calc-navy)}
footer em{color:var(--calc-gold-dark)}
footer a{color:inherit}

@media(max-width:920px){
  .calculator-shell{grid-template-columns:1fr}
  .inputs-panel{border-right:0;border-bottom:1px solid var(--calc-line)}
  .calculator-library{grid-template-columns:1fr;gap:28px}
}
@media(max-width:700px){
  main,.calculator-header{width:min(100% - 28px,1160px)}
  .calculator-header{min-height:84px}
  .calculator-brand img{height:64px}
  .library-link{font-size:11px}
  .calculator-hero{grid-template-columns:1fr;padding:44px 0 30px;gap:26px}
  .calculator-coin{width:146px;height:146px;margin:0 auto}
  .guide-grid{grid-template-columns:1fr}
  /* RETIRED 2026-08-03 with the block above - the endcap's phone sizes now come
     from css/royal.css's own @media(max-width:390px) rule, so every page in the
     tree shrinks it the same way. Kept, never deleted.
  .journey-actions{gap:10px}
  .action-coin{width:88px;height:88px}
  .home-action .action-coin{width:100px;height:100px}
  .journey-action{font-size:9px}
  */
}
@media(max-width:480px){
  .calculator-header{justify-content:center}
  .library-link{display:none}
  .calculator-brand img{height:58px}
  .product-tabs{top:8px;margin-bottom:16px}
  .product-tabs button{min-height:44px;font-size:11px}
  .inputs-panel,.results-panel{padding:24px 18px}
  .calculator-shell{border-radius:22px}
  .field-grid,.equity-readout,.library-grid{grid-template-columns:1fr}
  .field-card{padding:13px 14px}
  .term-options{gap:5px}
  .term-options span{font-size:10px}
  .result-card{padding:17px}
  .payment strong{font-size:31px}
  /* RETIRED 2026-08-03 with the block above. The -4px pull was the one rule that
     put this page's endcap 4px left of every other page's on a small phone -
     precisely what R-5's "same coordinates" forbids. Kept, never deleted.
  .journey-actions{width:calc(100% + 8px);margin-left:-4px}
  .action-coin{width:76px;height:76px}
  .home-action .action-coin{width:88px;height:88px}
  */
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.calculator-header,.product-tabs,.next-step,.reset-button{display:none}.calculator-shell{box-shadow:none}.product-guide,.calculator-library{padding-top:36px}.result-card{break-inside:avoid}}