/* Shtil Group: the mortgage calculators (calculators.html). Loaded after site.css.
   The hero is the film's finished home drawn as a plan, white on the brand green, and measured in mortgage terms: the
   price along the top with the down payment and the loan above it, the term up the side, the rate as the roof's pitch.
   It plots itself in from left to right, then the measurements open out. Below it, the four calculators: each one's
   fields on the program pages' paper sheet, its answer on a green card beside it (the footer's green), and the
   payment's schedule under them as a chart and a table. The glass is the approved revision 2026-10-20.1, unchanged;
   opacity is never put on glass or its parents. Charts: thin marks, hairline grid, a 2 px gap between stacked parts,
   colours checked for colour-blind readers (interest #0B6B3A and the loan's share in leaf green, 26 apart). */

/* ---------- the hero: the drawing fills the room above the title, which sits centred under it ---------- */
.chero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(88px,11vh,116px);overflow:hidden;color:#fff;background:radial-gradient(64% 56% at 50% 34%,rgba(100,190,102,.14),rgba(100,190,102,0) 72%),linear-gradient(180deg,#0a4a28 0%,#0b3b22 56%,#0c2617 100%) #0b3b22}
/* drafting paper: a faint grid that fades toward the edges */
.chero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;background-position:50% 0;-webkit-mask-image:radial-gradient(78% 66% at 50% 38%,#000 25%,transparent 100%);mask-image:radial-gradient(78% 66% at 50% 38%,#000 25%,transparent 100%)}
.plan{position:relative;flex:1 1 auto;min-height:200px;width:min(1320px,calc(100% - 40px));margin:0 auto;pointer-events:none}
.plan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plan .tall{display:none}
.plan image{opacity:.94}
.plan svg:not(.go) image{opacity:0}
/* plotting in: a soft edge sweeps across the drawing (the mask's rect); its resting place shows all of it */
.plan .sweep{transform:translateX(var(--run))}
.plan .go .sweep{animation:plot 2.8s cubic-bezier(.45,.05,.25,1) .1s both}
@keyframes plot{from{transform:none}}
.dims .ext{stroke:rgba(255,255,255,.24)}
.dims path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.dims .tk{stroke:rgba(255,255,255,.9);stroke-width:1.6}
.dims text{font:600 30px/1 var(--sans);letter-spacing:.26em;fill:var(--leaf);text-anchor:middle}
.plan .tall .dims text{font-size:40px}
/* the measurements open out from their middles once the drawing is in, one after another */
.dims .ln{transform-box:fill-box;transform-origin:50% 50%}
.dims .ln,.dims text,.dims .ext{opacity:0}
.go .dims .ln{animation:dimOpen 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(1.7s + var(--d) * .22s)}
.go .dims .ln.v{animation-name:dimOpenV}
.go .dims text{animation:dimText .8s ease both;animation-delay:calc(2.2s + var(--d) * .22s)}
.go .dims .ext{animation:dimText 1.2s ease 1.6s both}
@keyframes dimOpen{from{opacity:0;transform:scaleX(.08)}to{opacity:1;transform:none}}
@keyframes dimOpenV{from{opacity:0;transform:scaleY(.08)}to{opacity:1;transform:none}}
@keyframes dimText{from{opacity:0}to{opacity:1}}
.htitle{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(18px,3vh,34px) 0 clamp(40px,7vh,76px)}
.htitle .eyebrow{color:rgba(255,255,255,.88)}
.htitle h1{margin:18px 0 0;font:500 clamp(42px,min(6.4vw,9.5vh),100px)/.95 var(--display);letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 34px rgba(0,22,10,.32)}
.htitle h1 em{font-style:normal}
.htitle .lede{margin:18px 0 0;max-width:54ch;font:400 clamp(16px,1.3vw,19px)/1.5 var(--sans);color:rgba(255,255,255,.9);text-wrap:balance}
.htitle .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
@media (max-aspect-ratio:17/20){
  .plan .wide{display:none}
  .plan .tall{display:block}
}

/* ---------- the four, in a row under the hero (the bottom strip of the drawing's title block) ---------- */
.cindex{position:relative;background:#0c2617;color:#fff;border-top:1px solid rgba(255,255,255,.12)}
.cindex ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cindex li{border-left:1px solid rgba(255,255,255,.12)}
.cindex li:first-child{border-left:0}
.cindex a{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);align-content:start;column-gap:10px;row-gap:6px;height:100%;padding:30px 26px 32px;color:inherit;text-decoration:none;transition:background .3s ease}
.cindex li:first-child a{padding-left:0}
.cindex a:hover,.cindex a:focus-visible{background:rgba(255,255,255,.05);outline:none}
.cindex a:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.cindex i{grid-row:1/3;font:600 11px/1.95 var(--sans);font-style:normal;letter-spacing:.08em;opacity:.55;font-variant-numeric:tabular-nums}
.cindex b{font:600 18px/1.3 var(--display);letter-spacing:-.01em;padding-right:30px}
.cindex span{grid-column:2;font:400 14px/1.45 var(--sans);opacity:.78;text-wrap:pretty}
.cindex a::after{content:"";position:absolute;right:22px;top:36px;width:22px;height:10px;opacity:0;transform:translateX(-6px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h34M30.5 1 35 5l-4.5 4'/%3E%3C/svg%3E") right center/36px 10px no-repeat;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1)}
.cindex a:hover::after,.cindex a:focus-visible::after{opacity:1;transform:none;width:30px}

/* ---------- a calculator: its head, then the fields beside the answer ---------- */
.calc{padding:clamp(88px,11vw,150px) 0;background:#fff}
.calc.alt{background:var(--paper)}
.chead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px clamp(32px,6vw,96px);align-items:end}
.chead h2{margin:16px 0 0;font:500 clamp(36px,4.6vw,64px)/1 var(--display);letter-spacing:-.035em;color:var(--green);max-width:17ch;text-wrap:balance}
.chead h2 em{font-style:normal}
.chead p{margin:0 0 4px;max-width:46ch;color:var(--soft);font-size:18px;text-wrap:pretty}
.cgrid{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:24px;align-items:start;margin-top:clamp(44px,5.5vw,72px)}

/* the fields: the program pages' sheet (paper, a title block head, a dimension line), each field a ruled row */
.cin{margin:0;border-radius:30px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(9,90,49,.16);padding:26px 28px 12px}
.calc.alt .cin{background:#fff}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.shead span{font:600 10.5px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.shead b{font:600 46px/.85 var(--display);letter-spacing:-.04em;color:var(--green);font-variant-numeric:tabular-nums}
.shead b small{font-size:.42em;letter-spacing:0;opacity:.6;margin-left:4px}
.cin .sdim{display:block;height:9px;margin:20px 0 4px;border:solid rgba(9,90,49,.42);border-width:0 1px}
.cin .sdim::before{content:"";display:block;margin-top:4px;height:1px;background:rgba(9,90,49,.42)}
.f{margin:0;padding:15px 0 16px;border:0;border-top:1px solid rgba(9,90,49,.12);min-width:0}
.cin .sdim+.f,.more summary+.f{border-top:0}
.f>label,.f>legend{display:block;float:left;width:100%;padding:0;font:600 10px/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.f>label{float:none}
.box{display:flex;align-items:baseline;gap:8px;margin-top:4px;padding-bottom:7px;border-bottom:1px solid rgba(9,90,49,.26);transition:border-color .25s,box-shadow .25s}
.box:focus-within{border-bottom-color:var(--green);box-shadow:0 1px 0 0 var(--green)}
.box input{flex:1;min-width:0;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:600 26px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.box input::placeholder{color:rgba(78,99,87,.4);opacity:1}
.box .u{flex:none;font:600 15px/1 var(--sans);color:var(--soft)}
.box .per{font:500 13px/1 var(--sans);letter-spacing:.01em}
.box:not([data-u="$"]) .pre{display:none}
.f.bad .box{border-bottom-color:#a4471b;box-shadow:0 1px 0 0 #a4471b}
.hint{display:block;clear:both;margin-top:9px;max-width:46ch;font:400 13px/1.45 var(--sans);color:var(--soft);text-wrap:pretty}
.f.bad .hint.warn{color:#8f3c15}
/* % or $ for a down payment */
.unit{flex:none;align-self:center;display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(9,90,49,.2)}
.unit button{border:0;border-radius:999px;background:transparent;padding:7px 11px;font:600 12px/1 var(--sans);color:var(--soft);cursor:pointer;transition:background .2s,color .2s}
.unit button[aria-pressed="true"]{background:var(--green);color:#fff}
.unit button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* the term: pills, one chosen */
.chips{display:flex;flex-wrap:wrap;gap:6px;clear:both;padding-top:10px}
.chips label{position:relative;display:block}
.chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chips span{display:flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green);box-shadow:inset 0 0 0 1px rgba(9,90,49,.26);transition:background .2s,color .2s,box-shadow .2s}
.chips label:hover span{box-shadow:inset 0 0 0 1px var(--green)}
.chips input:checked+span{background:var(--green);color:#fff;box-shadow:inset 0 0 0 1px var(--green)}
.chips input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
/* a slider, its value beside it */
.rng{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:6px}
.rng output{min-width:4.6ch;text-align:right;font:600 26px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.rng input{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
.rng input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green) var(--p,50%),rgba(9,90,49,.18) var(--p,50%))}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--green),0 2px 8px -2px rgba(9,40,20,.45)}
.rng input::-moz-range-track{height:2px;border-radius:2px;background:rgba(9,90,49,.18)}
.rng input::-moz-range-progress{height:2px;border-radius:2px;background:var(--green)}
.rng input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--green),0 2px 8px -2px rgba(9,40,20,.45)}
.rng input:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
/* more fields, folded away */
.more{border-top:1px solid rgba(9,90,49,.12)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;cursor:pointer;list-style:none;font:600 10.5px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(9,90,49,.3);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23095A31' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M5 1v8M1 5h8'/%3E%3C/svg%3E") center/10px no-repeat;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .2s}
.more summary:hover::after{background-color:rgba(9,90,49,.06)}
.more[open] summary::after{transform:rotate(45deg)}
.more summary:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}
.more[open]{padding-bottom:4px}

/* the answer: a green card, as the footer is green. Beside a long form on a wide screen it stays in view. */
.cout{position:relative;border-radius:30px;padding:30px 32px 30px;color:#fff;background:radial-gradient(110% 80% at 88% 0%,#0b6a3a 0%,rgba(9,90,49,0) 60%),#0c2617;box-shadow:0 34px 60px -44px rgba(4,30,15,.7)}
.olabel{font:600 10.5px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:6px;margin-top:12px}
.big b{font:600 clamp(52px,6vw,90px)/.95 var(--display);letter-spacing:-.045em;white-space:nowrap}
.big small{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cout:not(.ready) .big b{color:rgba(255,255,255,.28)}
.wait{margin:14px 0 0;max-width:38ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,.8)}
.cout.ready .wait{display:none}
.cout .sub{margin:12px 0 0;max-width:46ch;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88);text-wrap:pretty}
.cout .sub:empty,.cout .note:empty{display:none}
.cout:not(.ready) .sub,.cout:not(.ready) .rows,.cout:not(.ready) .two{display:none}
.cout .dim{display:block;height:9px;margin:24px 0 6px;border:solid rgba(255,255,255,.42);border-width:0 1px}
.cout .dim::before{content:"";display:block;margin-top:4px;height:1px;background:rgba(255,255,255,.42)}
.rows{margin:0}
.rows>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(255,255,255,.13)}
.rows>div:first-child{border-top:0}
.rows dt{font:500 15px/1.4 var(--sans);color:rgba(255,255,255,.84)}
.rows dd{margin:0;font:600 17px/1.3 var(--display);letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums}
.rows .in dt{padding-left:16px;font-size:14px;color:rgba(255,255,255,.7)}
.rows .in dd{font-size:15px;font-weight:500;color:rgba(255,255,255,.86)}
.rows .tot dt{font:600 10.5px/1.9 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.rows .tot dd{font-size:20px}
.facts{margin-top:18px;padding-top:6px;border-top:1px solid rgba(255,255,255,.3)}
.facts:empty{display:none}
.cout .note{margin:18px 0 0;max-width:60ch;font-size:13px;line-height:1.55;color:rgba(255,255,255,.66)}
.cout .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* rent or buy: the two paths side by side */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.two>div{display:flex;flex-direction:column}
.two .rows{flex:1;display:flex;flex-direction:column}
.two .rows .tot{margin-top:auto}   /* both net costs on one line */
.two h4{margin:6px 0 2px;font:600 10.5px/1.9 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}

/* ---------- charts ---------- */
.cchart{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.3)}
.clabel{font:600 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.chart{position:relative;margin-top:14px;touch-action:pan-y}
.chart svg{display:block;overflow:visible;outline:none}
.chart .grid line{stroke:rgba(9,90,49,.12);stroke-width:1}
.chart .base{stroke:rgba(9,90,49,.45);stroke-width:1}
.chart text{font:500 11px/1 var(--sans);fill:var(--soft);font-variant-numeric:tabular-nums}
.chart .b-int{fill:#0B6B3A}
.chart .b-prin{fill:var(--leaf)}
.chart .col{transition:opacity .2s}
.chart.hover .col:not(.on){opacity:.42}
.chart .crossline{stroke:rgba(9,90,49,.45);stroke-width:1}
.chart .crosslabel{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;fill:var(--green)}
.chart svg:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:6px}
/* on the green card */
.chart.dark .grid line{stroke:rgba(255,255,255,.12)}
.chart.dark .base{stroke:rgba(255,255,255,.5)}
.chart.dark text{fill:rgba(255,255,255,.68)}
.chart.dark .zone{font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;fill:rgba(255,255,255,.55)}
.chart .line{fill:none;stroke:var(--leaf);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .wash{fill:rgba(100,190,102,.12)}
.chart .hair{stroke:rgba(255,255,255,.55);stroke-width:1}
.chart .dot{fill:var(--leaf);stroke:#0c2617;stroke-width:2}
.chart .marklabel{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;fill:#fff}
.chart.dark svg:focus-visible{outline-color:rgba(255,255,255,.7)}
/* the readout: values lead, names follow */
.tip{position:absolute;z-index:5;top:0;left:0;min-width:168px;padding:10px 12px 11px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 14px 34px -14px rgba(9,40,20,.5),inset 0 0 0 1px rgba(9,90,49,.12);pointer-events:none;opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip .th{font:600 10px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.tip .tr{display:grid;grid-template-columns:12px auto minmax(0,1fr);column-gap:8px;align-items:center;margin-top:4px;white-space:nowrap}
.tip .tr i{height:2px;border-radius:2px;background:currentColor}
.tip .tr b{font:600 14px/1.3 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tip .tr span{font:500 12.5px/1.3 var(--sans);color:var(--soft)}

/* ---------- the payment's schedule ---------- */
.amort{margin-top:24px;border-radius:30px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(9,90,49,.16);padding:30px 32px 28px}
.ahead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 28px}
.ahead h3{margin:0;font:600 clamp(24px,2.4vw,32px)/1.1 var(--display);letter-spacing:-.025em;color:var(--green)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0;font:500 13px/1 var(--sans);color:var(--soft)}
.legend li{display:flex;align-items:center;gap:8px}
.legend .sw{width:12px;height:12px;border-radius:3px}
.sw.int{background:#0B6B3A}
.sw.prin{background:var(--leaf)}
.anote{margin:10px 0 0;max-width:70ch;color:var(--soft);font-size:15px;line-height:1.5}
.anote:empty{display:none}
.tbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(9,90,49,.12)}
.tlabel{font:600 10.5px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.seg{display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(9,90,49,.2)}
.seg button{border:0;border-radius:999px;background:transparent;padding:9px 15px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--green);color:#fff}
.seg button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.tscroll{margin-top:14px;max-height:460px;overflow:auto;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(9,90,49,.1);overscroll-behavior:contain}
.tscroll:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font:500 14px/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.tbl th{position:sticky;top:0;z-index:1;padding:13px 16px 11px;background:#fff;text-align:right;font:600 10px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid rgba(9,90,49,.18);white-space:nowrap}
.tbl td{padding:10px 16px;text-align:right;border-bottom:1px solid rgba(9,90,49,.07);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td:first-child small{margin-left:8px;font-size:12px;color:var(--soft)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(9,90,49,.035)}
.tbl tr.hl td{background:rgba(100,190,102,.13)}
/* tables on the green card */
.tview{margin-top:14px}
.tview summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font:600 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.tview summary::-webkit-details-marker{display:none}
.tview summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.4px 1.4px 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.tview[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.tview summary:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;border-radius:6px}
.tscroll.dark{max-height:300px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tscroll.dark .tbl{color:#fff}
.tscroll.dark .tbl th{background:#0f2c1b;color:rgba(255,255,255,.7);border-bottom-color:rgba(255,255,255,.18)}
.tscroll.dark .tbl td{border-bottom-color:rgba(255,255,255,.08)}
.tscroll.dark .tbl tbody tr:hover td{background:rgba(255,255,255,.05)}
.tscroll.dark .tbl tr.hl td{background:rgba(100,190,102,.16)}
.tscroll.dark .tbl td:first-child small{color:rgba(255,255,255,.6)}

/* the small print, at the foot of the contact section (as on the program pages) */
.foot .fine{margin:22px 0 0;max-width:110ch;font-size:12px;line-height:1.6;color:rgba(255,255,255,.66)}

@media (min-width:901px){
  .cout.stick{position:sticky;top:96px}   /* only when it fits on the screen whole (calc.js) */
}
@media (max-width:1100px){
  .cindex a{padding:26px 18px 28px}
  .cindex b{font-size:17px}
}
@media (max-width:900px){
  .cindex ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cindex li:nth-child(3){border-left:0}
  .cindex li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .cindex li:nth-child(3) a{padding-left:0}
  .chead{grid-template-columns:minmax(0,1fr)}
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .cin{max-width:620px}
}
@media (max-width:560px){
  .cindex a{grid-template-columns:minmax(0,1fr);padding:22px 14px 24px 16px}
  .cindex li:nth-child(odd) a{padding-left:0}
  .cindex i{grid-row:auto}
  .cindex span{grid-column:1;font-size:13px}
  .cindex b{padding-right:0;font-size:16px}
  .cindex a::after{display:none}
  .cin{padding:22px 20px 10px}
  .cout{padding:26px 22px 26px;border-radius:26px}
  .amort{padding:24px 18px 22px;border-radius:26px}
  .box input{font-size:24px}
  .two{grid-template-columns:minmax(0,1fr)}
  .two>div+div{margin-top:10px}
  .tbl th,.tbl td{padding-left:8px;padding-right:8px}
  .tbl th:first-child,.tbl td:first-child{padding-left:12px}
  .tbl th:last-child,.tbl td:last-child{padding-right:12px}
  .tbl th{white-space:normal;vertical-align:bottom;letter-spacing:.12em;font-size:9.5px;line-height:1.35}
  .tbl td{font-size:13px}
  .tbl td:first-child small{display:none}   /* the calendar year: the year number is enough here */
  .tbl.by-month th:nth-child(2),.tbl.by-month td:nth-child(2){display:none}   /* the payment: the card above shows it */
  .tbl td.who span{display:block}   /* rent vs. buy: "Renting by" above the amount */
  @media (max-width:400px){
    .tbl th,.tbl td{padding-left:5px;padding-right:5px}
    .tbl th:first-child,.tbl td:first-child{padding-left:10px}
    .tbl th:last-child,.tbl td:last-child{padding-right:10px}
    .tbl td{font-size:12px}
  }
}
@media (prefers-reduced-motion:reduce){
  .plan .go .sweep,.go .dims .ln,.go .dims text,.go .dims .ext{animation:none}
  .dims .ln,.dims text,.dims .ext{opacity:1}
  .chart .col{transition:none}
}

/* ---------- type: B · Architect (in use) and A · Private bank, as on the program pages ---------- */
html[data-type="b"] .htitle h1{font-weight:600;font-stretch:118%}
html[data-type="b"] .htitle h1 em{font:italic 300 1em var(--serif);font-stretch:118%;letter-spacing:-.04em}
html[data-type="b"] .chead h2{font-weight:600;font-stretch:115%;letter-spacing:-.04em}
html[data-type="b"] .chead h2 em{font:italic 300 1em var(--serif);font-stretch:115%;letter-spacing:-.04em}
html[data-type="b"] .shead b,html[data-type="b"] .big b{font-stretch:118%}
html[data-type="b"] .box input,html[data-type="b"] .rng output,html[data-type="b"] .cindex b,html[data-type="b"] .ahead h3,html[data-type="b"] .rows dd{font-stretch:110%}
html[data-type="a"] .htitle h1{font-weight:400;letter-spacing:-.03em}
html[data-type="a"] .htitle h1 em{font:italic 300 1em var(--serif);letter-spacing:-.02em}
html[data-type="a"] .chead h2{font-weight:400;letter-spacing:-.025em}
html[data-type="a"] .chead h2 em{font:italic 300 1em var(--serif)}
html[data-type="a"] .shead b,html[data-type="a"] .big b{font-family:var(--sans);font-weight:500;letter-spacing:-.03em}
html[data-type="a"] .box input,html[data-type="a"] .rng output,html[data-type="a"] .rows dd{font-family:var(--sans);font-weight:500;letter-spacing:0}