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

/* =====================================================================
   THE 9 AM PASS - 2026-09-13. Bryan: "i really like what we did with the
   calculators and i think we could even expand on the calculators and throw
   in a bunch of really good graphics of animations or something." Everything
   above this line is as it shipped. Everything below is new and dated.
   ===================================================================== */

/* THE .step COLLISION, FIXED 2026-09-13. css/royal.css:335 paints .step as a
   bordered white card (the keyhole-numbered steps on home.html) and this page
   only restated its type, so every eyebrow inside the shell inherited the
   card: "YOUR HYPOTHETICAL" and "SIDE-BY-SIDE" sat in white boxes and "HOW TO
   READ THE HELOC" covered its own headline. Two classes outrank one; the box
   is taken back off and the eyebrow is an eyebrow again. */
.calculator-shell .step{background:transparent;border:0;border-radius:0;padding:0;display:block;gap:0}
/* And the headline under it: royal.css paints every h3 navy, which beat the
   white this navy card inherits, so "Lower at the start does not mean paid
   off." was navy on navy. White, as the card always meant. */
.plain-read h3{color:#fff}

/* (a) THE EQUITY RING. One inline SVG donut, no library. Cream is the whole
   home value, gold everything owed once the cash is out, navy the first
   mortgage alone, CLTV in the centre. The two arcs share one circumference
   (2 x pi x 46 = 289.03) and only stroke-dashoffset moves, so every keystroke
   redraws the ring as one sweep. The reduced-motion block above already
   silences the transition. */
.calc-ring{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;align-items:center;margin-top:12px;padding:18px;border:1px solid var(--calc-line);border-radius:18px;background:#fff}
.calc-ring-svg{display:block;width:132px;height:132px;overflow:visible}
.calc-ring-svg circle{fill:none;stroke-width:13}
.ring-equity{stroke:#f1e8d3}
.ring-cash,.ring-first{stroke-dasharray:289.03;stroke-dashoffset:289.03;transition:stroke-dashoffset .6s cubic-bezier(.22,.8,.3,1)}
.ring-cash{stroke:var(--calc-gold)}
.ring-first{stroke:var(--calc-navy)}
.ring-value{font-size:18px;font-weight:900;fill:var(--calc-navy);letter-spacing:-.03em}
.ring-caption{font-size:7px;font-weight:900;letter-spacing:.2em;fill:var(--calc-gold-dark)}
.calc-ring.over-value .ring-value{fill:#793b2a}
.calc-ring-legend,.calc-picture-legend{display:grid;gap:9px;margin:0}
.calc-ring-legend div,.calc-picture-legend div{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-left:18px}
.calc-ring-legend div::before,.calc-picture-legend div::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;box-sizing:border-box}
.calc-ring-legend dt,.calc-picture-legend dt{color:var(--calc-muted);font-size:10px;font-weight:700;line-height:1.4}
.calc-ring-legend dd,.calc-picture-legend dd{margin:0;color:var(--calc-navy);font-size:13px;font-weight:800;text-align:right;white-space:nowrap}
.swatch-first::before{background:var(--calc-navy)}
.swatch-cash::before{background:var(--calc-gold)}
.swatch-equity::before{background:#f1e8d3;border:1px solid var(--calc-line)}

/* (c) THE 10-YEAR PICTURE. Percent of each loan's own starting balance still
   owed, so three different loan sizes sit on one scale: HELOC gold and flat
   (interest-only), HELOAN navy, refinance navy dashed. The selected product's
   line thickens so the picture follows the tabs. */
.calc-picture{margin-top:12px;padding:18px;border:1px solid var(--calc-line);border-radius:18px;background:#fff}
.calc-picture-head h3{margin:0 0 14px;color:var(--calc-navy);font-size:17px;line-height:1.25;letter-spacing:-.02em}
.calc-picture-svg{display:block;width:100%;height:auto;overflow:visible}
.picture-grid line{stroke:var(--calc-line);stroke-width:1;stroke-dasharray:2 3}
.picture-axis text{font-size:8.5px;font-weight:800;fill:var(--calc-muted);letter-spacing:.05em}
.calc-picture-svg polyline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .25s,opacity .25s}
.line-heloc{stroke:var(--calc-gold)}
.line-heloan{stroke:var(--calc-navy)}
.line-refi{stroke:var(--calc-navy);stroke-dasharray:5 4;opacity:.5}
.calc-picture[data-focus="heloc"] .line-heloc,
.calc-picture[data-focus="heloan"] .line-heloan{stroke-width:4.5}
.calc-picture[data-focus="refinance"] .line-refi{stroke-width:4;opacity:.85}
.calc-picture-legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.calc-picture-legend div{flex-direction:column;align-items:flex-start;gap:2px}
.calc-picture-legend div::before{top:6px;margin-top:0}
.calc-picture-legend dd{text-align:left}
.swatch-heloc::before{background:var(--calc-gold)}
.swatch-heloan::before{background:var(--calc-navy)}
.swatch-refi::before{background:#fff;border:2px dashed var(--calc-navy)}
.calc-picture-note{margin:12px 0 0;color:var(--calc-muted);font-size:10px;line-height:1.6}

/* (d) the chosen card glows gold once when the product tab changes. */
@keyframes royalGlow{0%{box-shadow:0 0 0 0 rgba(203,162,96,.6),0 12px 35px rgba(203,162,96,.2)}100%{box-shadow:0 0 0 20px rgba(203,162,96,0),0 12px 35px rgba(203,162,96,.2)}}
.result-card.pulse{animation:royalGlow .9s ease-out}
@media(prefers-reduced-motion:reduce){.result-card.pulse{animation:none}}

/* THE SUITE, COMPLETE - 2026-09-13. Nine cards, every one live, three across
   on a wide screen so nine sit as three rows and not four-and-a-half. The title
   is navy plus gold - css/royal-labels.css paints .library-card strong b/em -
   so every calculator name reads the way the words under every bubble read. */
.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.library-card{padding:18px 16px}
.library-card strong{font-size:15px;line-height:1.25}
.library-card strong em{font-style:normal}
.library-note{grid-column:1 / -1;margin:6px 0 0;color:var(--calc-muted);font-size:11px;line-height:1.6}

/* YOUR NEXT MOVE - 2026-09-13. Bryan: "the more app downloads we get the more
   leads we get." The app is the door on this page too. The two buttons are the
   .appbtn markup and SVGs from home.html verbatim, restated here so this page
   does not lean on royal.css for its own strip. No phone number, no timing
   claim, the secure portal beside them. */
.next-move{max-width:660px;margin:26px auto 0;padding:26px 22px;border:1px solid var(--calc-line);border-radius:22px;background:var(--calc-soft)}
.next-move-line{margin:0;color:var(--calc-navy);font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.5}
.next-move-line b{color:var(--calc-gold-dark);letter-spacing:.02em}
.next-move .standrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.next-move .appbtn{display:inline-flex;align-items:center;gap:12px;background:var(--calc-navy);color:#fff;text-decoration:none;border-radius:14px;padding:13px 24px 13px 20px;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 26px rgba(37,48,105,.22)}
.next-move .appbtn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,48,105,.3)}
.next-move .appbtn:focus-visible{outline:3px solid var(--calc-gold);outline-offset:3px}
.next-move .appbtn svg{width:26px;height:26px;flex:none}
.next-move .appbtn .t{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.next-move .appbtn .t small{font-size:11px;opacity:.82;letter-spacing:.02em}
.next-move .appbtn .t b{font-size:17.5px;font-weight:700;color:#fff}
.secure-link{display:inline-block;margin-top:18px;color:var(--calc-navy);font-size:13px;font-weight:800;letter-spacing:.03em;text-decoration:none;border-bottom:2px solid var(--calc-gold);padding-bottom:3px}
.secure-link:hover{color:var(--calc-gold-dark)}

@media(max-width:700px){
  .library-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  /* the tab pill had 59px of mark and padding before a single letter; the
     names were eliding to "HELO..." on a 375 phone. Same mark, less air. */
  .product-tabs button{padding:0 4px;gap:5px;letter-spacing:0;font-size:10.5px}
  .tab-mark{width:26px;height:26px}
  .calc-ring{grid-template-columns:1fr;justify-items:center;gap:14px;padding:16px}
  .calc-ring-legend{width:100%}
  .calc-picture{padding:16px 14px}
  .calc-picture-legend{grid-template-columns:1fr;gap:8px}
  .calc-picture-legend div{flex-direction:row;align-items:center;justify-content:space-between}
  .calc-picture-legend div::before{top:50%;margin-top:-5px}
  .calc-picture-legend dd{text-align:right}
  .library-grid{grid-template-columns:1fr}
  .next-move{padding:22px 16px}
  .next-move .appbtn{padding:12px 18px 12px 16px}
}