/* THE TOOL PAGE, PREMIUM EDITION.

   Owner, 2026-09-12, after the one-screen version: *"I did not like any of
   these. your first design was far better... I want a premium professional
   dashboard. Leave off this one page setup and I give you full freedom."*

   So the viewport-height grid is gone. What a premium product looks like is not
   density, it is ROOM, restraint and precision:

   - **One accent, used sparingly.** The tool's hue appears on the headline
     figure, the lead rule, the active control and the first chart line. Panels
     are white, borders are hairlines. A page of saturated cards reads cheap.
   - **The figures lead.** A stat rail across the top carries the four numbers a
     person came for, at a size you can read across a desk, in tabular figures
     so columns line up to the digit.
   - **Hairlines, not boxes.** Separation by a 1px rule and by space, rather than
     by another border inside a border.
   - **Generous, consistent spacing.** 24px inside a card, 18px between cards,
     one rhythm down the page, everything aligned to the same left edge.
   - Plus Jakarta Sans throughout, his instruction: one font for the site.
*/

:root{
  --card-radius:20px;
  --hair:color-mix(in srgb, var(--ink) 9%, transparent);
  --hair-soft:color-mix(in srgb, var(--ink) 6%, transparent);
  --lift:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
         0 28px 56px -40px color-mix(in srgb, var(--ink) 40%, transparent);
}

/* ------------------------------------------------------------------- TITLE -*/

/* ONE LINE OF TITLE, THEN THE FIGURES. Owner, 2026-09-13, circling the heading
   band on the loan page: "can we just remove this section or show somewhere
   else", beside a screenshot starting at the stat rail, "wanted view, for all
   pages". The H1 stays (it is what the page ranks on and what a screen reader
   announces), as a single quiet line; the lead sentence opens the reading, and
   the four reasons sit beside it in the aside. The banner art is gone with the
   band, which also takes an image off the largest paint of every tool page. */
.tool-title{display:flex; flex-direction:column; gap:3px; margin-top:2px; scroll-margin-top:90px}
.tool-title .crumb{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-strong); text-decoration:none}
.tool-title .crumb:hover{text-decoration:underline}
.tool-title h1{font-size:clamp(21px,2.1vw,27px); line-height:1.18; letter-spacing:-.022em; font-weight:800; color:var(--ink)}
.tool-title + .stats, .tool-title + *{margin-top:14px}

/* ---------------------------------------------------------------- STAT RAIL */

/* The four figures the page exists to produce, across the top, hairline
   separated. This is the part that has to look expensive. */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius);
  margin-top:18px; overflow:hidden; box-shadow:var(--lift);
}
.stat{padding:20px 22px; border-left:1px solid var(--hair-soft); min-width:0}
.stat:first-child{border-left:0}
.stat .k{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.stat .v{
  font-size:clamp(24px,2.5vw,32px); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  margin-top:9px; font-variant-numeric:tabular-nums; color:var(--ink);
}
.stat .n{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.45}
.stat.lead{background:linear-gradient(180deg, var(--t-tint) 0%, var(--surface) 70%)}
.stat.lead .v{color:var(--t-strong)}
.stat.lead .k{color:var(--t-strong)}
@media (max-width:1000px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--hair-soft)} }
@media (max-width:560px){ .stats{grid-template-columns:minmax(0,1fr)}
  .stat{border-left:0; border-top:1px solid var(--hair-soft)} .stat:first-child{border-top:0} }

/* ------------------------------------------------------------------- CARDS -*/

.panel{
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius);
  padding:24px; box-shadow:var(--lift);
}
.panel > h2{
  font-size:17px; font-weight:700; letter-spacing:-.015em; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--hair-soft);
}
.panel.bare{background:transparent; border:0; padding:0; box-shadow:none}
.panel.quiet{box-shadow:none; background:var(--bg)}

.card-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--hair-soft)}
.card-head h2{font-size:17px; font-weight:700; letter-spacing:-.015em; margin:0; flex:1 1 auto}
.card-head .note{font-size:12.5px; color:var(--muted); flex:1 1 100%; margin:0; order:3}
.card-head .btn{margin:0}

.grid{display:grid; gap:18px; margin-top:18px; align-items:start}
/* Where two cards sit side by side and one is naturally much taller (a table
   beside a statement), the short one fills its height rather than leaving a
   block of empty colour: the note is pushed to the foot of the card. */
.grid.halves{align-items:stretch}
.grid.halves > .panel{display:flex; flex-direction:column}
.grid.halves > .panel > .quote{margin-top:auto}
.grid.split{grid-template-columns:minmax(340px,.86fr) minmax(0,1.14fr)}
.grid.halves{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.thirds{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){ .grid.split, .grid.halves, .grid.thirds{grid-template-columns:minmax(0,1fr)} }
.grid > *{min-width:0}

/* ------------------------------------------------------------------ INPUTS -*/

.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:520px){ .fields{grid-template-columns:minmax(0,1fr)} }
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .fields.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fields.three{grid-template-columns:minmax(0,1fr)} }
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field.wide{grid-column:1 / -1}
.field label{font-size:12.5px; color:var(--ink-2); font-weight:600}
.field .hint{font-size:11.5px; color:var(--muted); line-height:1.45}
.field input, .field select, .field textarea{
  font:inherit; font-size:15.5px; font-weight:600; padding:13px 14px; min-height:50px;
  border:1px solid var(--line-strong); border-radius:13px;
  background:var(--bg); color:var(--ink); width:100%;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field textarea{font-weight:500; line-height:1.6; min-height:200px; resize:vertical}
.field input:hover, .field select:hover, .field textarea:hover{border-color:color-mix(in srgb, var(--t) 55%, var(--line-strong))}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--t); background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 14%, transparent);
}
.field input::placeholder, .field textarea::placeholder{font-weight:500; color:var(--muted)}
.pair{display:flex; gap:10px}
.pair input{flex:1; min-width:0}
.pair select{width:118px; flex:0 0 118px}
.sr-lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* A number you can drag. */
.slide{-webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; margin:2px 0 0}
.slide::-webkit-slider-runnable-track{height:5px; border-radius:99px;
  background:linear-gradient(90deg, var(--t) var(--fill,40%), var(--line-strong) var(--fill,40%))}
.slide::-moz-range-track{height:5px; border-radius:99px; background:var(--line-strong)}
.slide::-moz-range-progress{height:5px; border-radius:99px; background:var(--t)}
.slide::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:19px; height:19px; margin-top:-7px;
  border-radius:50%; background:var(--surface); border:2.5px solid var(--t);
  box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 28%, transparent)}
.slide::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--surface);
  border:2.5px solid var(--t); box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 28%, transparent)}
.slide:focus-visible{outline:2px solid var(--t); outline-offset:4px}
.scale{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:2px}

.switch{display:flex; gap:13px; align-items:center; padding:13px 15px; border-radius:14px;
  background:var(--t-tint); border:1px solid var(--t-line); cursor:pointer}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .track{width:44px; height:25px; border-radius:99px; background:var(--line-strong); position:relative; flex:0 0 44px; transition:background .18s}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:#fff; transition:transform .2s cubic-bezier(.3,1.3,.5,1); box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .track{background:var(--t)}
.switch input:checked + .track::after{transform:translateX(19px)}
.switch input:focus-visible + .track{outline:2px solid var(--t); outline-offset:2px}
.switch span{font-size:13px; color:var(--t-ink); line-height:1.4; font-weight:600}

.actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.btn{
  font:inherit; font-size:14px; font-weight:700; letter-spacing:-.005em;
  padding:13px 22px; min-height:48px; border:0; border-radius:13px; cursor:pointer;
  background:var(--t-strong); color:var(--t-on);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
  transition:background .15s, transform .12s, box-shadow .15s;
}
.btn:hover{background:var(--t); box-shadow:0 6px 18px -8px var(--t-strong)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--t); outline-offset:3px}
.btn.ghost{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong); box-shadow:none}
.btn.ghost:hover{background:var(--t-tint); color:var(--t-ink); border-color:var(--t-line)}
.btn.ghost.light{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn.ghost.light:hover{background:rgba(255,255,255,.14); color:#fff; border-color:#fff}
.btn.small{font-size:12.5px; padding:9px 15px; min-height:40px; border-radius:11px}

.chips{display:flex; gap:9px; flex-wrap:wrap}
.chip{font:inherit; font-size:13.5px; font-weight:600; padding:10px 17px; min-height:44px; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:99px; background:var(--surface); color:var(--ink-2);
  transition:background .15s, color .15s, border-color .15s}
.chip:hover{background:var(--t-tint); color:var(--t-ink); border-color:var(--t-line)}
.chip.on{background:var(--t-strong); border-color:var(--t-strong); color:var(--t-on)}
.chip:focus-visible{outline:2px solid var(--t); outline-offset:2px}

.tabs{display:inline-flex; gap:2px; padding:4px; background:var(--sunk); border-radius:13px; margin-bottom:18px}
.tabs button{font:inherit; font-size:13px; font-weight:700; padding:10px 18px; border:0; border-radius:10px;
  background:transparent; color:var(--muted); cursor:pointer; transition:background .15s, color .15s}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--t-strong); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent)}
.pane{margin-top:0}
.pane-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.pane-head .hint{flex:1; min-width:0; margin:0}
.pane-head .btn{margin-left:auto}

/* ----------------------------------------------------------- THE BREAKDOWN -*/

.eyebrow-lbl{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.headline{font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.03em;
  color:var(--t-strong); font-variant-numeric:tabular-nums; margin-top:8px; line-height:1.05}
.headline-note{font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5}

.lines{margin-top:4px; display:flex; flex-direction:column}
.lines div{display:flex; align-items:baseline; gap:14px; padding:13px 0; border-top:1px solid var(--hair-soft); font-size:14px}
.lines div:first-child{border-top:0}
.lines div span{flex:1; color:var(--ink-2)}
.lines div b{font-variant-numeric:tabular-nums; font-weight:700}
.lines div b + b{margin-left:16px; color:var(--muted); font-weight:600; font-size:12.5px}
.lines div.hl{border-top-color:var(--line-strong)}
.lines div.hl span{color:var(--ink); font-weight:600}
.lines div.hl b{color:var(--t-strong); font-size:16px}
.lines .good b{color:var(--up)}

/* The dark statement card: a deep neutral, not a saturated brand block. A bank
   statement, not a poster. */
.panel.accent{
  background:linear-gradient(165deg, #17211C 0%, #101915 100%);
  border-color:transparent; color:#F3F7F4;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 30px 60px -42px rgba(0,0,0,.9);
}
/* A tint of the tool's colour on a near black card, mixed light enough to clear
   AA at EVERY hue: at 70% the indigo one measured 3.70:1. */
.panel.accent .eyebrow-lbl{color:color-mix(in srgb, var(--t2) 38%, #fff)}
.panel.accent .headline{color:#fff}
.panel.accent .headline-note{color:rgba(255,255,255,.72)}
.panel.accent .lines div{border-color:rgba(255,255,255,.12)}
.panel.accent .lines div span{color:rgba(255,255,255,.74)}
.panel.accent .lines div b{color:#fff}
.panel.accent .lines .good b{color:#8FE0B0}
.panel.accent .lines div.hl{border-top-color:rgba(255,255,255,.4)}
.panel.accent .lines div.hl span{color:#fff}
.panel.accent .lines div.hl b{color:color-mix(in srgb, var(--t2) 38%, #fff)}
.panel.accent > h2{border-bottom-color:rgba(255,255,255,.14)}
.panel.accent .tabs{background:rgba(255,255,255,.08)}
.panel.accent .tabs button{color:rgba(255,255,255,.7)}
.panel.accent .tabs button[aria-selected="true"]{background:rgba(255,255,255,.96); color:#12201A}
.panel.accent .quote{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.82)}

.means .m{display:flex; gap:14px; align-items:center; padding:14px 0; border-top:1px solid var(--hair-soft)}
.means .m:first-of-type{border-top:0}
.means .m img{width:38px; height:38px; flex:0 0 38px; padding:7px; border-radius:12px; background:var(--t-tint)}
.means b{display:block; font-size:18px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.means span{font-size:12px; color:var(--muted); line-height:1.45}
.quote{margin-top:16px; padding:15px 16px; border-radius:14px; background:var(--t-tint);
  border:1px solid var(--t-line); font-size:13.5px; color:var(--t-ink); line-height:1.6}
.notice{margin-top:18px; padding:15px 17px; border-radius:14px; background:var(--t-tint);
  border:1px solid var(--t-line); color:var(--t-ink); font-size:14.5px; line-height:1.6}
.notice:empty{display:none}
.sub-note{font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:16px; max-width:76ch}
.sub-head{font-size:15px; font-weight:700; margin:24px 0 12px}

/* ------------------------------------------------------- CHART AND TABLE ---*/

.legend{display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:14px; font-weight:600}
.legend i{width:16px; height:3px; border-radius:99px; display:inline-block; margin-right:7px; vertical-align:middle}
.legend i.s1{background:var(--c1)} .legend i.s2{background:var(--c2)} .legend i.s3{background:var(--c3)}
.chart-wrap{position:relative; overflow:visible}
.chart{display:block; width:100%; height:auto; overflow:visible}
.axis-note{font-size:11.5px; color:var(--muted); margin-top:12px}
.chart-tip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-120%);
  background:#151F1A; color:#fff; font-size:12px; line-height:1.5; font-weight:600;
  padding:10px 12px; border-radius:11px; white-space:nowrap; transition:opacity .12s;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7); z-index:3;
}
.chart-tip.on{opacity:1}
.chart-tip em{display:block; font-style:normal; font-weight:600; opacity:.66; margin-bottom:3px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}

.tablescroll{overflow:auto; max-height:min(64vh, 560px); border:1px solid var(--hair); border-radius:14px}
table.years{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%;
  font-size:13.5px; font-variant-numeric:tabular-nums}
table.years th, table.years td{padding:13px 16px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--hair-soft)}
table.years th:first-child, table.years td:first-child{text-align:left; font-weight:600}
table.years thead th{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700;
  background:var(--surface); position:sticky; top:0; z-index:2; border-bottom:1px solid var(--line-strong);
}
table.years tbody tr:hover td{background:var(--t-tint)}
table.years tbody tr:last-child td{border-bottom:0}
table.years td.good{color:var(--up); font-weight:600}
table.years td.warn{color:var(--down)}
table.years tr.best td{background:var(--t-tint); font-weight:700; color:var(--t-ink)}
.tag-best{display:inline-block; margin-left:9px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--t-strong); color:var(--t-on); border-radius:99px; padding:3px 9px; vertical-align:middle; font-weight:700}

.pay-order{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.pay-order li{display:flex; gap:15px; align-items:flex-start; padding:17px 18px; border:1px solid var(--hair);
  border-radius:16px; background:var(--bg)}
.po-n{flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--t-strong); color:var(--t-on);
  font-size:13.5px; font-weight:800; display:flex; align-items:center; justify-content:center}
.po-b{min-width:0; display:flex; flex-direction:column; gap:5px}
.po-b b{font-size:15.5px}
.po-why{font-size:13.5px; color:var(--ink-2); line-height:1.55}
.po-when{font-size:13px; color:var(--up); font-weight:700}
.po-hold{font-size:13px; color:var(--down); line-height:1.55}

.loan-card{margin-top:16px; padding:18px; border:1px solid var(--hair); border-radius:16px; background:var(--bg)}
.lc-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.lc-head .eyebrow-lbl{margin:0; flex:1}
.lc-x{font:inherit; font-size:12.5px; font-weight:600; color:var(--down); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:11px; padding:9px 14px; min-height:40px; cursor:pointer}
.lc-x:hover{border-color:var(--down)}
.lc-emi{font-size:16px; font-weight:700; padding:13px 14px; min-height:50px; border-radius:13px;
  background:var(--surface); border:1px solid var(--hair); font-variant-numeric:tabular-nums;
  display:flex; align-items:center; color:var(--t-strong)}

/* --------------------------------------------------------------- THE WORDS -*/

.reading{display:grid; grid-template-columns:minmax(0,76ch) minmax(300px,1fr); gap:22px;
  margin-top:34px; align-items:start}
/* The lead sentence the heading band used to carry now opens the reading. */
.prose > .lead{margin:0 0 4px; max-width:68ch; font-size:17.5px; line-height:1.7; color:var(--ink); font-weight:500}
.prose > .lead + h2{margin-top:30px}
@media (max-width:1080px){ .reading{grid-template-columns:minmax(0,1fr)} .aside{order:-1} }

.prose{background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius);
  padding:34px 38px; box-shadow:var(--lift)}
.prose h2{font-size:23px; font-weight:800; letter-spacing:-.025em; margin-top:38px; scroll-margin-top:84px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16.5px; font-weight:700; margin-top:28px; scroll-margin-top:84px}
.prose p, .prose li{color:var(--ink-2); font-size:16px; line-height:1.78; max-width:70ch}
.prose p{margin-top:14px}
.prose ul, .prose ol{margin-top:14px; padding-left:24px}
.prose li{margin-top:9px}
.prose a{color:var(--t-strong); text-underline-offset:3px}
.prose table{border-collapse:collapse; margin-top:18px; font-size:14.5px}
.prose th, .prose td{border:1px solid var(--hair); padding:11px 14px; text-align:left}
.prose .formula{margin-top:20px; padding:18px 20px; border-radius:14px; background:var(--t-tint);
  border:1px solid var(--t-line); font-size:15px; line-height:1.8; color:var(--t-ink); overflow-x:auto;
  font-variant-numeric:tabular-nums}
.prose .disclaimer{margin-top:26px; padding-top:20px; border-top:1px solid var(--hair-soft);
  font-size:13.5px; color:var(--muted); line-height:1.7}
.prose details{margin-top:12px; border-bottom:1px solid var(--hair-soft)}
.prose details:first-of-type{border-top:1px solid var(--hair-soft)}
.prose summary{cursor:pointer; padding:17px 2px; font-weight:700; font-size:15.5px; color:var(--ink);
  list-style:none; display:flex; gap:14px; align-items:center; min-height:48px}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:""; margin-left:auto; flex:0 0 9px; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .18s}
.prose details[open] summary{color:var(--t-strong)}
.prose details[open] summary::after{transform:rotate(-135deg); border-color:var(--t)}
.prose details p{margin:0 0 18px; max-width:none}

.aside{position:sticky; top:84px; container-type:inline-size}
.aside-grid{display:flex; flex-direction:column; gap:16px}
/* WHEN THE ASIDE IS WIDE, IT IS TWO COLUMNS. Owner, 2026-09-13, circling this
   area: "is this the best layout that can be made for this area in all pages".
   On a wide screen the single aside column stretched to 770px: a contents list
   and four related tools spread thin across the space. From 600px of aside the
   contents and the reasons stand on the left and the related tools on the right. */
@container (min-width:600px){
  .aside-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;
    grid-template-areas:"toc related" "why related"}
  .aside-grid > .toc-contents{grid-area:toc}
  .aside-grid > .why-card{grid-area:why}
  .aside-grid > .toc-related{grid-area:related}
}
.why-list{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.why-list li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start}
.why-list img{margin-top:1px}
.why-list span{font-size:13.5px; line-height:1.5; color:var(--t-ink)}
.why-list b{display:block; font-weight:700}
@media (max-width:1080px){ .aside{position:static} }
.toc{background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:20px}
.toc h2{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-weight:700}
.toc nav{display:flex; flex-direction:column; gap:1px; max-height:min(56vh,460px); overflow-y:auto}
.toc a{display:block; padding:8px 12px; border-radius:10px; font-size:13.5px; line-height:1.45; color:var(--ink-2);
  border-left:2px solid transparent; text-decoration:none}
.toc a:hover{background:var(--t-tint); color:var(--t-ink)}
.toc a.sub{padding-left:22px; font-size:12.5px; color:var(--muted)}
.toc a.here{background:var(--t-tint); color:var(--t-ink); border-left-color:var(--t); font-weight:700}
.aside-card{background:linear-gradient(165deg, var(--t-tint2), var(--t-tint));
  border:1px solid var(--t-line); border-radius:18px; padding:20px}
.aside-card h2{font-size:15px; font-weight:700; margin-bottom:10px; color:var(--t-ink)}
.aside-card p{font-size:13.5px; line-height:1.65; color:var(--t-ink); margin-top:10px}
.aside-card .btn{margin-top:16px; width:100%; justify-content:center; display:flex; align-items:center}

.tools.mini{display:flex; flex-direction:column; gap:9px}
/* display:flex was never set here, so on every tool page the icon, the name and
   the arrow stacked into a 93px column (found 2026-09-13). */
.tools.mini .tool{display:flex; flex-direction:row; align-items:center; gap:12px; min-height:0;
  padding:11px 13px; border-radius:13px; box-shadow:none; border-color:var(--hair)}
.tools.mini .tool h3{font-size:13.5px; padding-right:0; margin:0; flex:1; min-width:0}
.tools.mini .tool p{display:none}
.tools.mini .tool .tool-ico{width:32px; height:32px; flex:0 0 32px}
.tools.mini .tool .tool-ico img{width:32px; height:32px}
.tools.mini .tool .tool-ico:has(svg){width:34px; height:34px; border-radius:11px}
.tools.mini .tool .go{position:static; width:20px; height:20px; flex:0 0 20px; border:0; background:transparent}

.related{margin-top:30px}
.related h2{font-size:21px; font-weight:800; letter-spacing:-.02em; margin-bottom:16px}


/* ===========================================================================
   SIGNATURE PIECES, ONE ARRANGEMENT PER TOOL.

   Owner, 2026-09-12, approving the premium Loan and SIP pages: *"proceed like
   this for all the tools. Just remember that each tool in its own style and not
   similar."*

   So the SYSTEM is shared (the type scale, the hairlines, the 24px card and 18px
   gap, the dark neutral statement card, one accent used sparingly) and the
   ARRANGEMENT is not. Each page below leads with the thing that tool is about,
   in a form nobody would mistake for another tool from a thumbnail:

     income tax      a verdict band, then two regimes face to face
     GST             a printed tax invoice, amount in words, a strip of rates
     salary          the monthly figure beside ONE bar of the whole CTC, a payslip
     compound        the crossover year, then the same money three ways
     age             the age in numerals, a ring to the next birthday, a timeline
     date difference two dates with the gap between them, a calendar leaf
     word counter    the editor itself, meters against real limits
     unit converter  two big fields and a swap, every unit as a tile
     password        a vault card, strength in five segments, kinds as tiles
     percentage      each question written as a sentence you type into
     discount        a price tag
     tip             a seat per person, the common tips as columns
     break-even      the chart, full width, with the crossing marked
   =========================================================================== */

/* Shared by several pieces. */
.dk-figs{display:grid; margin:0}
.dk-figs div{padding:14px 0; border-top:1px solid rgba(255,255,255,.12); min-width:0}
.dk-figs div:first-child{border-top:0}
.dk-figs dt{font-size:12px; color:rgba(255,255,255,.74); line-height:1.45}
.dk-figs dd{margin:5px 0 0; font-size:22px; font-weight:800; letter-spacing:-.02em; color:#fff;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.btn.light{background:#fff; color:#12201A; box-shadow:none}
.btn.light:hover{background:color-mix(in srgb, var(--t2) 16%, #fff); color:#12201A; box-shadow:none}
.fields.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .fields.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .fields.four{grid-template-columns:minmax(0,1fr)} }
.field input.big-in{font-size:26px; font-weight:800; min-height:64px; letter-spacing:-.02em}
.stepper{flex:0 0 50px; width:50px; padding:0; font-size:20px; line-height:1; min-height:50px;
  display:flex; align-items:center; justify-content:center}
.seg{display:flex; gap:4px; padding:4px; background:var(--sunk); border-radius:14px; flex-wrap:wrap}
.seg button{flex:1 1 170px; font:inherit; font-size:13.5px; font-weight:700; min-height:44px; padding:10px 14px;
  border:0; border-radius:11px; background:transparent; color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface); color:var(--t-strong); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent)}
.seg button:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.seg.compact button{flex:1 1 60px; padding:10px 8px}
.panel.accent .eyebrow-lbl.plain{color:rgba(255,255,255,.74)}

/* ------------------------------------------------------------- INCOME TAX --*/

.verdict{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:30px; align-items:center;
  margin-top:18px; padding:30px 32px}
.vd-head{font-size:clamp(36px,4.2vw,52px); font-weight:800; letter-spacing:-.035em; color:#fff;
  margin-top:10px; line-height:1.02; font-variant-numeric:tabular-nums}
.vd-note{font-size:15px; color:rgba(255,255,255,.82); margin-top:12px; line-height:1.55; max-width:46ch}
.verdict .dk-figs{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px}
.verdict .dk-figs div{border-top:0; border-left:1px solid rgba(255,255,255,.14); padding:6px 0 6px 18px}
@media (max-width:1000px){
  .verdict{grid-template-columns:minmax(0,1fr); gap:20px; padding:26px 24px}
  .verdict .dk-figs{grid-template-columns:minmax(0,1fr)}
  .verdict .dk-figs div{border-left:0; border-top:1px solid rgba(255,255,255,.12); padding:12px 0}
}
.grid.it-main{grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr)}
@media (max-width:1320px){ .grid.it-main{grid-template-columns:minmax(0,1fr)} }

.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .duo{grid-template-columns:minmax(0,1fr)} }
.duo .side{position:relative; background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius);
  padding:24px; box-shadow:var(--lift); min-width:0; transition:border-color .2s, box-shadow .2s}
.duo .side.win{border-color:var(--t); background:linear-gradient(180deg, var(--t-tint) 0%, var(--surface) 34%);
  box-shadow:0 0 0 1px var(--t), 0 30px 60px -42px var(--t-strong)}
.duo .who{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.duo .who img{width:28px; height:28px; flex:0 0 28px}
.duo .who h3{font-size:15.5px; font-weight:700}
.duo .flag{margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t-on); background:var(--t-strong); border-radius:99px; padding:6px 11px; white-space:nowrap}
.duo .flag.more{background:var(--sunk); color:var(--ink-2)}
.duo .amt{font-size:clamp(28px,3vw,38px); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.05}
.duo .side.win .amt{color:var(--t-strong)}
.duo .side .sub{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5}
.duo .lines{margin-top:14px}
.duo .lines div{font-size:13.5px; padding:11px 0}

/* -------------------------------------------------------------------- GST --*/

.grid.gst-main{grid-template-columns:minmax(320px,.94fr) minmax(0,1.06fr)}
@media (max-width:1180px){ .grid.gst-main{grid-template-columns:minmax(0,1fr)} }
.rate-keys{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
@media (max-width:620px){ .rate-keys{grid-template-columns:repeat(4,minmax(0,1fr))} }
.rate-keys button{font:inherit; font-size:14px; font-weight:800; min-height:52px; padding:0 2px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); font-variant-numeric:tabular-nums;
  transition:background .15s, color .15s, border-color .15s}
.rate-keys button:hover{background:var(--t-tint); color:var(--t-ink); border-color:var(--t-line)}
.rate-keys button.on{background:var(--t-strong); color:var(--t-on); border-color:var(--t-strong)}
.rate-keys button:focus-visible{outline:2px solid var(--t); outline-offset:2px}

/* The invoice: paper, a coloured head rule, dashed lines where a printed
   invoice has them, and a total that looks like a total. */
.invoice{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--card-radius); padding:30px 30px 24px; box-shadow:var(--lift)}
.invoice::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg, var(--t-strong), var(--t2))}
.inv-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:2px solid var(--ink)}
.inv-head h2{font-size:20px; font-weight:800; letter-spacing:-.02em; flex:1; margin:0}
.inv-head span{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t-strong);
  background:var(--t-tint); border:1px solid var(--t-line); border-radius:99px; padding:5px 11px}
.inv-meta{display:flex; gap:10px 18px; flex-wrap:wrap; justify-content:space-between; font-size:12.5px; color:var(--muted); padding:12px 0 4px}
.inv-meta b{color:var(--t-strong); font-weight:800}
.inv-row, .inv-tax div{display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px dashed var(--line-strong)}
.inv-row span, .inv-tax div span{flex:1; min-width:0; color:var(--ink-2); font-size:14px}
.inv-row b, .inv-tax div b{font-variant-numeric:tabular-nums; font-weight:700; font-size:14.5px; text-align:right}
.inv-tax div{padding:11px 0 11px 18px}
.inv-tax div span{color:var(--muted); font-size:13.5px}
.inv-row.sub{border-bottom:0}
.inv-row.sub span{color:var(--ink); font-weight:700}
.inv-total{display:flex; align-items:baseline; gap:16px; padding:18px 0 4px; margin-top:10px; border-top:2px solid var(--ink)}
.inv-total span{flex:1; font-size:14px; font-weight:800}
.inv-total b{font-size:clamp(28px,3vw,36px); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--t-strong); text-align:right}
.inv-words{margin-top:16px; padding:13px 15px; border-radius:12px; background:var(--sunk); font-size:13.5px; color:var(--ink-2); line-height:1.55}
.inv-words b{color:var(--ink)}
.inv-note{font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.6}

.rate-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); gap:10px}
.rate-card{font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:16px; min-width:0;
  border-radius:16px; border:1px solid var(--hair); background:var(--bg); color:var(--ink); transition:border-color .15s, background .15s}
.rate-card:hover{border-color:var(--t-line); background:var(--t-tint)}
.rate-card.on{border-color:var(--t); background:var(--t-tint); box-shadow:inset 0 0 0 1px var(--t)}
.rate-card:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.rc-rate{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--t-strong); margin-bottom:6px}
.rc-k{font-size:11.5px; color:var(--muted); font-weight:600; margin-top:6px}
.rate-card b{font-size:14.5px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}

/* ----------------------------------------------------------------- SALARY --*/

.payday{display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); margin-top:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.pd-main{padding:28px 30px; background:linear-gradient(170deg, var(--t-tint2) 0%, var(--t-tint) 55%, var(--surface) 100%);
  border-right:1px solid var(--t-line); min-width:0}
.pd-main .eyebrow-lbl{color:var(--t-strong)}
.pd-head{font-size:clamp(40px,4.6vw,58px); font-weight:800; letter-spacing:-.04em; color:var(--t-strong); line-height:1; margin-top:10px; font-variant-numeric:tabular-nums}
.pd-note{font-size:13.5px; color:var(--t-ink); margin-top:12px; line-height:1.55}
.pd-figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--t-line)}
.pd-figs dt{font-size:12px; color:var(--t-ink); font-weight:600; line-height:1.4}
.pd-figs dd{margin:5px 0 0; font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.pd-flow{padding:28px 30px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.pd-flow h2{font-size:17px; font-weight:700; letter-spacing:-.015em; margin-bottom:20px}
@media (max-width:1000px){ .payday{grid-template-columns:minmax(0,1fr)} .pd-main{border-right:0; border-bottom:1px solid var(--t-line)} }
@media (max-width:560px){ .pd-main, .pd-flow{padding:22px 20px} }

.wf-bar{display:flex; height:58px; border-radius:14px; overflow:hidden; background:var(--sunk); gap:3px}
.wf-seg{min-width:4px; transition:width .3s ease}
.wf-seg.c1{background:var(--c1)} .wf-seg.c2{background:var(--c2)} .wf-seg.c3{background:var(--c3)}
.wf-key{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px}
@media (max-width:700px){ .wf-key{grid-template-columns:minmax(0,1fr)} }
.wf-key div{display:flex; flex-direction:column; gap:5px; padding-left:14px; border-left:3px solid var(--line); min-width:0}
.wf-key div.c1{border-left-color:var(--c1)} .wf-key div.c2{border-left-color:var(--c2)} .wf-key div.c3{border-left-color:var(--c3)}
.wf-key .k{font-size:12px; color:var(--ink-2); font-weight:600; line-height:1.4}
.wf-key .v{font-size:21px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.wf-key .n{font-size:12px; color:var(--muted)}

.payslip .slip-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.14)}
.payslip .slip-head h2{font-size:17px; font-weight:700; color:#fff; flex:1}
.payslip .slip-head span{font-size:12px; color:rgba(255,255,255,.74)}
.kbar{display:inline-block; width:84px; height:6px; border-radius:99px; background:var(--sunk); vertical-align:middle; margin-right:10px; overflow:hidden}
.kbar i{display:block; height:100%; background:var(--t); border-radius:99px}

/* --------------------------------------------------------------- COMPOUND --*/

.cross{display:grid; grid-template-columns:minmax(260px,.6fr) minmax(0,1.4fr); margin-top:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.cx-year{padding:28px 30px; background:linear-gradient(160deg, var(--t) 0%, var(--t-strong) 100%); color:var(--t-on); min-width:0}
.cx-year .eyebrow-lbl{color:var(--t-on)}
.cx-big{font-size:clamp(46px,5.4vw,70px); font-weight:800; letter-spacing:-.045em; line-height:1; margin-top:12px}
.cx-line{font-size:14px; line-height:1.6; margin-top:14px}
.cx-path{display:flex; align-items:center; gap:12px 16px; padding:26px 30px; flex-wrap:wrap; min-width:0}
.cx-step{flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:7px}
.cx-step span{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cx-step b{font-size:clamp(21px,2.2vw,27px); font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.cx-step.end{flex-basis:200px}
.cx-step.end b{font-size:clamp(28px,3.2vw,40px); color:var(--t-strong)}
.cx-step em{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.45}
.cx-op{flex:0 0 auto; font-size:22px; font-weight:700; color:var(--muted)}
@media (max-width:900px){ .cross{grid-template-columns:minmax(0,1fr)} .cx-op{display:none} .cx-year, .cx-path{padding:22px 20px} }

.versus{display:flex; flex-direction:column; gap:16px}
.vs-row{display:grid; grid-template-columns:minmax(170px,.9fr) minmax(0,2.4fr) minmax(120px,auto); gap:20px; align-items:center}
.vs-lbl b{display:block; font-size:14.5px; font-weight:700}
.vs-lbl span{font-size:12.5px; color:var(--muted)}
.vs-track{height:20px; border-radius:99px; background:var(--sunk); overflow:hidden}
.vs-fill{height:100%; border-radius:99px; background:var(--line-strong); transition:width .3s ease}
.vs-row.win .vs-fill{background:linear-gradient(90deg, var(--t) 0%, var(--t2) 100%)}
.vs-amt{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
.vs-row.win .vs-amt{color:var(--t-strong)}
@media (max-width:680px){ .vs-row{grid-template-columns:minmax(0,1fr) auto; gap:8px 14px} .vs-track{grid-column:1 / -1; grid-row:2} }
.vs-foot{display:flex; gap:14px 36px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--hair-soft)}
.vs-foot span{display:block; font-size:12px; color:var(--muted)}
.vs-foot b{font-size:21px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stack{display:inline-flex; width:130px; height:8px; border-radius:99px; overflow:hidden; background:var(--sunk); vertical-align:middle}
.stack i{height:100%} .stack .a{background:var(--c2)} .stack .b{background:var(--c1)}

/* -------------------------------------------------------------------- AGE --*/

.age-top{display:grid; grid-template-columns:minmax(280px,.66fr) minmax(0,1.34fr); margin-top:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.age-in{padding:26px; display:flex; flex-direction:column; gap:16px; background:var(--bg); border-right:1px solid var(--hair-soft); min-width:0}
.age-in .btn{align-self:flex-start}
.age-out{padding:30px 34px; display:flex; flex-direction:column; justify-content:center; min-width:0;
  background:radial-gradient(120% 150% at 100% 0%, var(--t-tint2) 0%, var(--surface) 60%)}
.age-out .eyebrow-lbl{color:var(--t-strong)}
.age-big{margin-top:12px; font-size:clamp(17px,1.9vw,24px); font-weight:700; color:var(--ink-2); line-height:1.15}
.age-big .n{font-size:clamp(50px,6.6vw,96px); font-weight:800; letter-spacing:-.05em; color:var(--t-strong);
  font-variant-numeric:tabular-nums; margin-right:4px}
.age-note{margin-top:14px; font-size:14px; color:var(--ink-2); line-height:1.55}
@media (max-width:860px){ .age-top{grid-template-columns:minmax(0,1fr)} .age-in{border-right:0; border-bottom:1px solid var(--hair-soft)} .age-out{padding:24px 20px} .age-in{padding:22px 20px} }

.odo{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.odo div{padding:18px 22px; display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:6px; min-width:0;
  border-left:1px solid var(--hair-soft); border-top:1px solid var(--hair-soft)}
.odo div:nth-child(3n+1){border-left:0}
.odo div:nth-child(-n+3){border-top:0}
.odo span{font-size:12px; color:var(--muted); font-weight:600}
.odo b{font-size:clamp(19px,1.9vw,24px); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
@media (min-width:1360px){
  .odo{grid-template-columns:repeat(6,minmax(0,1fr))}
  .odo div:nth-child(n){border-left:1px solid var(--hair-soft); border-top:0}
  .odo div:first-child{border-left:0}
}
@media (max-width:520px){
  .odo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .odo div:nth-child(n){border-left:0; border-top:1px solid var(--hair-soft)}
  .odo div:nth-child(2n){border-left:1px solid var(--hair-soft)}
  .odo div:nth-child(-n+2){border-top:0}
  .odo div{padding:16px}
}

.grid.age-lower{grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr)}
@media (max-width:1080px){ .grid.age-lower{grid-template-columns:minmax(0,1fr)} }
.ring-wrap{position:relative; width:190px; height:190px; margin:20px auto 8px}
.ring{width:100%; height:100%; display:block}
.ring-go{stroke:color-mix(in srgb, var(--t2) 42%, #fff); transition:stroke-dasharray .4s ease}
.ring-mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.ring-mid b{font-size:30px; font-weight:800; color:#fff; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ring-mid span{font-size:12px; color:rgba(255,255,255,.74); margin-top:2px}
.bd-what{text-align:center; font-size:14px; color:rgba(255,255,255,.86); margin:10px auto 16px; line-height:1.55; max-width:34ch}

.timeline{position:relative; margin:0; padding:0 0 0 28px; list-style:none}
.timeline::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line)}
.timeline li{position:relative; padding:0 0 22px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-26px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:2.5px solid var(--line-strong)}
.timeline li.past::before{background:var(--line-strong)}
.timeline li.next::before{border-color:var(--t); background:var(--t); box-shadow:0 0 0 5px var(--t-tint)}
.timeline .when{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.timeline .what{font-size:15.5px; font-weight:700; margin-top:4px}
.timeline .away{font-size:13px; color:var(--ink-2); margin-top:2px}
.timeline li.past .what{color:var(--ink-2); font-weight:600}
.timeline li.next .when{color:var(--t-strong)}
.timeline li.next .away{color:var(--t-strong); font-weight:700}

/* ---------------------------------------------------------- DATE DIFFERENCE */

.span-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,1.05fr) minmax(0,1fr); margin-top:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.sp-date{padding:28px 30px; display:flex; flex-direction:column; gap:10px; background:var(--bg); min-width:0}
.sp-date label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.sp-date input{font:inherit; font-size:20px; font-weight:800; padding:12px 14px; min-height:60px; width:100%; min-width:0;
  border:1px solid var(--line-strong); border-radius:13px; background:var(--surface); color:var(--ink)}
.sp-date input:hover{border-color:color-mix(in srgb, var(--t) 55%, var(--line-strong))}
.sp-date input:focus{outline:none; border-color:var(--t); box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 14%, transparent)}
.sp-day{font-size:14px; color:var(--ink-2); font-weight:600; min-height:21px}
.sp-gap{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 20px; text-align:center; min-width:0;
  background:radial-gradient(90% 130% at 50% 50%, var(--t-tint2) 0%, var(--surface) 78%)}
.sp-arrow{display:flex; align-items:center; width:100%}
.sp-arrow i{flex:1; height:2px; min-width:10px; background:var(--t)}
.sp-arrow i:last-child{position:relative}
.sp-arrow i:last-child::after{content:""; position:absolute; right:-2px; top:-5px; border:6px solid transparent; border-left:9px solid var(--t); border-right:0}
.sp-count{background:var(--t-strong); color:var(--t-on); border-radius:99px; padding:12px 24px; box-shadow:0 16px 30px -18px var(--t-strong)}
.sp-count b{font-size:clamp(24px,2.5vw,32px); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.sp-note{font-size:13px; color:var(--t-ink); margin-top:14px; line-height:1.55; max-width:36ch}
.sp-foot{grid-column:1 / -1; display:flex; gap:12px 22px; align-items:center; flex-wrap:wrap; padding:16px 30px; border-top:1px solid var(--hair-soft)}
.sp-foot .switch{padding:9px 14px}
@media (max-width:980px){
  .span-card{grid-template-columns:minmax(0,1fr)}
  .sp-date{padding:20px}
  .sp-arrow i{display:none}
  .sp-foot{padding:16px 20px}
}

.grid.date-lower{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr)}
@media (max-width:1080px){ .grid.date-lower{grid-template-columns:minmax(0,1fr)} }
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tiles div{padding:15px 16px; border-radius:14px; background:var(--bg); border:1px solid var(--hair-soft);
  display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:5px; min-width:0}
.tiles span{font-size:12px; color:var(--muted); line-height:1.4}
.tiles b{font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.weekbar{margin-top:20px}
.wb-bar{display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--sunk); gap:2px}
.wb-bar i{height:100%} .wb-bar .wd{background:var(--t)} .wb-bar .we{background:var(--c2)}
.wb-key{display:flex; gap:8px 20px; flex-wrap:wrap; margin-top:10px; font-size:13px; color:var(--ink-2)}
.wb-key i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; vertical-align:-1px}
.leaf-row{display:flex; gap:20px; align-items:center; margin-top:22px; flex-wrap:wrap}
.leaf{flex:0 0 150px; border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift); text-align:center}
.lf-month{background:var(--t-strong); color:var(--t-on); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:9px 6px}
.lf-day{font-size:56px; font-weight:800; letter-spacing:-.04em; line-height:1; padding:16px 0 4px; color:var(--ink); font-variant-numeric:tabular-nums}
.lf-wd{font-size:13px; font-weight:600; color:var(--ink-2); padding-bottom:14px}
.leaf-note{flex:1 1 200px; min-width:0; font-size:14px; line-height:1.65; color:var(--ink-2); margin:0}
.leaf-note b{color:var(--ink)}

/* ----------------------------------------------------------- WORD COUNTER --*/

.editor{margin-top:18px; overflow:hidden; background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.ed-bar{display:flex; flex-wrap:wrap; background:var(--bg); border-bottom:1px solid var(--hair)}
.ed-main{display:flex; align-items:baseline; gap:10px; padding:18px 28px; background:var(--t-strong); color:var(--t-on)}
.ed-main b{font-size:clamp(32px,3.6vw,44px); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1}
.ed-main span{font-size:13.5px; font-weight:700}
.ed-stats{display:flex; flex:1; min-width:0; flex-wrap:wrap}
.ed-stats div{flex:1 1 130px; display:flex; flex-direction:column-reverse; justify-content:center; gap:3px; padding:12px 18px; border-left:1px solid var(--hair-soft); min-width:0}
.ed-stats span{font-size:12px; color:var(--muted)}
.ed-stats b{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums}
.editor textarea{display:block; width:100%; min-height:340px; resize:vertical; border:0; padding:28px 32px; margin:0;
  font:inherit; font-size:17px; line-height:1.8; color:var(--ink); background:var(--surface)}
.editor textarea:focus{outline:none; box-shadow:inset 0 0 0 2px var(--t)}
.editor textarea::placeholder{color:var(--muted)}
.ed-foot{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:14px 28px; border-top:1px solid var(--hair-soft)}
.ed-foot p{flex:1 1 220px; margin:0; font-size:13.5px; color:var(--ink-2)}
.ed-actions{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:640px){ .ed-main{flex:1 1 100%; padding:16px 20px} .ed-stats div{flex-basis:45%} .editor textarea{padding:20px; min-height:260px} .ed-foot{padding:14px 20px} }

.meters{display:flex; flex-direction:column; gap:18px}
.meter .top{display:flex; align-items:baseline; gap:12px; font-size:13.5px; margin-bottom:8px; flex-wrap:wrap}
.meter .top span{flex:1; color:var(--ink-2); font-weight:600}
.meter .top b{font-variant-numeric:tabular-nums; font-weight:700}
.meter .bar{height:9px; border-radius:99px; background:var(--sunk); overflow:hidden}
.meter .fill{height:100%; border-radius:99px; background:var(--t); transition:width .25s}
.meter.over .fill{background:var(--down)}
.meter.over .top b{color:var(--down)}
.freq{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.freq li{display:grid; grid-template-columns:minmax(70px,1fr) minmax(0,1.2fr) 28px 46px; gap:12px; align-items:center; font-size:13.5px}
.freq .word{font-weight:700; overflow-wrap:anywhere; min-width:0}
.freq .wbar{height:8px; border-radius:99px; background:var(--sunk); overflow:hidden}
.freq .wbar i{display:block; height:100%; background:var(--t); border-radius:99px}
.freq b{text-align:right; font-variant-numeric:tabular-nums}
.freq .wpc{text-align:right; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.freq li.empty{display:block; color:var(--muted)}

/* --------------------------------------------------------- UNIT CONVERTER --*/

.conv{margin-top:18px; padding:26px 30px}
.unit-cats{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--hair-soft)}
.unit-cats button{font:inherit; font-size:13px; font-weight:600; min-height:40px; padding:8px 15px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); transition:background .15s, color .15s, border-color .15s}
.unit-cats button:hover{background:var(--t-tint); color:var(--t-ink); border-color:var(--t-line)}
.unit-cats button[aria-pressed="true"]{background:var(--t-strong); color:var(--t-on); border-color:var(--t-strong)}
.unit-cats button:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.swapper{display:grid; grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr); gap:16px; align-items:center}
.swapper .big{display:flex; flex-direction:column; gap:10px; min-width:0}
.swapper .big .lbl{font-size:12.5px; font-weight:600; color:var(--ink-2); min-height:19px}
.swapper .big input, .swapper .big select{font:inherit; width:100%; min-width:0; padding:12px 16px; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:13px; background:var(--bg)}
.swapper .big input{font-size:clamp(24px,2.6vw,32px); font-weight:800; min-height:74px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.swapper .big select{font-size:15px; font-weight:700; min-height:50px}
.swapper .big input:focus, .swapper .big select:focus{outline:none; border-color:var(--t); background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 14%, transparent)}
.swapper .out{display:flex; align-items:center; min-height:74px; padding:12px 18px; border-radius:13px;
  background:var(--t-tint); border:1px solid var(--t-line); color:var(--t-strong);
  font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0}
.swap-btn{width:56px; height:56px; margin-top:28px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--t-strong); cursor:pointer; display:flex; align-items:center; justify-content:center; justify-self:center;
  box-shadow:var(--lift); transition:background .15s, transform .25s}
.swap-btn:hover{background:var(--t-tint); transform:rotate(180deg)}
.swap-btn:focus-visible{outline:2px solid var(--t); outline-offset:3px}
@media (max-width:760px){
  .swapper{grid-template-columns:minmax(0,1fr); gap:12px}
  .swap-btn{margin:0; transform:rotate(90deg)}
  .swap-btn:hover{transform:rotate(270deg)}
  .conv{padding:22px 20px}
}
.conv-note{font-size:14px; color:var(--ink-2); margin-top:20px; line-height:1.55}
.conv-lines{margin-top:10px; flex-direction:row; flex-wrap:wrap; gap:0 28px}
.conv-lines div{flex:1 1 220px; border-top:1px solid var(--hair-soft)}
.conv-lines div:first-child{border-top:1px solid var(--hair-soft)}
.unit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:10px}
.unit{font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px; padding:14px 16px; min-width:0;
  border-radius:14px; border:1px solid var(--hair); background:var(--bg); color:var(--ink); transition:border-color .15s, background .15s}
.unit span{font-size:12px; color:var(--muted); font-weight:700}
.unit b{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.unit em{font-style:normal; font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.unit:hover{border-color:var(--t-line); background:var(--t-tint)}
.unit.on{border-color:var(--t); background:var(--t-tint); box-shadow:inset 0 0 0 1px var(--t)}
.unit:focus-visible{outline:2px solid var(--t); outline-offset:2px}

/* --------------------------------------------------------------- PASSWORD --*/

.vault{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.78fr); gap:34px; margin-top:18px; padding:32px 34px}
.vault .pw-out{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:clamp(22px,3vw,36px); font-weight:600;
  letter-spacing:.04em; line-height:1.35; margin-top:14px; padding:22px 24px; border-radius:16px; word-break:break-all; user-select:all;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff}
.strength{display:flex; gap:6px; margin-top:18px}
.strength i{flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.16); transition:background .2s}
.strength i.on{background:#8FE0B0}
.strength.weak i.on{background:#F09480}
.strength.fair i.on{background:#EFC06A}
.vt-meter{font-size:13.5px; color:rgba(255,255,255,.82); margin-top:10px}
.vt-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.vault .dk-figs{align-self:center}
@media (max-width:960px){ .vault{grid-template-columns:minmax(0,1fr); gap:18px; padding:24px 20px} }
.len-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; margin-bottom:24px}
.len-row label{font-size:13.5px; font-weight:700; color:var(--ink-2)}
.len-row output{font-size:15px; font-weight:800; color:var(--t-strong); font-variant-numeric:tabular-nums; min-width:118px; text-align:right}
@media (max-width:520px){ .len-row{grid-template-columns:minmax(0,1fr) auto} .len-row .slide{grid-column:1 / -1; grid-row:2} }
.kinds{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
@media (max-width:1180px){ .kinds{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .kinds{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kind{position:relative; display:flex; flex-direction:column; gap:3px; padding:16px 16px 15px; min-width:0; cursor:pointer;
  border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); transition:border-color .15s, background .15s}
.kind input{position:absolute; top:50%; left:50%; width:1px; height:1px; margin:0; opacity:0}
.kind .glyph{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:22px; font-weight:700; color:var(--ink-2); margin-bottom:10px}
.kind .kn{font-size:13.5px; font-weight:700; color:var(--ink)}
.kind .kd{font-size:12px; color:var(--muted); line-height:1.4}
.kind .tick{position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); background:var(--surface)}
.kind:hover{border-color:var(--t-line)}
.kind:has(input:checked){border-color:var(--t); background:var(--t-tint)}
.kind:has(input:checked) .glyph{color:var(--t-strong)}
.kind:has(input:checked) .kd{color:var(--t-ink)}
.kind:has(input:checked) .tick{background:var(--t-strong); border-color:var(--t-strong)}
.kind:has(input:checked) .tick::after{content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px;
  border:solid var(--t-on); border-width:0 2px 2px 0; transform:rotate(45deg)}
.kind:has(input:focus-visible){outline:2px solid var(--t); outline-offset:2px}

/* ------------------------------------------------------------- PERCENTAGE --*/

.asks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px}
@media (max-width:900px){ .asks{grid-template-columns:minmax(0,1fr)} }
.ask{position:relative; display:flex; flex-direction:column; overflow:hidden; min-width:0;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift); padding:24px 28px 22px 32px}
.ask::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--k)}
.ask.k1{--k:var(--c1)} .ask.k2{--k:var(--c2)} .ask.k3{--k:var(--c3)} .ask.k4{--k:var(--t)}
.ask-n{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ask-q{flex:1; margin-top:10px; font-size:clamp(19px,1.9vw,24px); font-weight:700; line-height:2.15; color:var(--ink); letter-spacing:-.01em}
.inl{font:inherit; font-weight:800; color:var(--t-strong); width:4.4ch; min-width:0; padding:0 8px; margin:0 5px; height:1.7em;
  border:0; border-bottom:2px solid var(--line-strong); border-radius:9px 9px 0 0; background:var(--sunk); text-align:center;
  font-variant-numeric:tabular-nums; vertical-align:baseline}
.inl.w{width:6.4ch}
.inl:hover{border-bottom-color:var(--t)}
.inl:focus{outline:none; border-bottom-color:var(--t); background:var(--t-tint)}
.ask-a{display:flex; align-items:baseline; gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--hair-soft)}
.ask-a span{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ask-a b{margin-left:auto; font-size:clamp(30px,3.4vw,42px); font-weight:800; letter-spacing:-.035em; color:var(--t-strong);
  font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; min-width:0; line-height:1.1}
.ask-a b.up{color:var(--up)} .ask-a b.down{color:var(--down)}
.ask-a.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.ask-a.two div{display:flex; flex-direction:column; gap:6px; min-width:0}
.ask-a.two b{margin-left:0; text-align:left}
.working{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.6; font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- DISCOUNT --*/

/* A flex item is blockified, so an inline-flex strip stretched the full width. */
.deal-tabs{margin:18px 0 0; width:max-content; max-width:100%; align-self:flex-start; flex-wrap:wrap}
.grid.deal{grid-template-columns:minmax(300px,1fr) minmax(0,1fr)}
@media (max-width:1000px){ .grid.deal{grid-template-columns:minmax(0,1fr)} }
.tagcard{display:flex; flex-direction:column; gap:18px; min-width:0}
.pricetag{position:relative; padding:30px 32px 30px 70px; border-radius:22px; color:var(--t-on);
  background:linear-gradient(150deg, var(--t) 0%, var(--t-strong) 100%);
  clip-path:polygon(38px 0, 100% 0, 100% 100%, 38px 100%, 0 50%);}
.pt-hole{position:absolute; left:28px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; background:var(--bg)}
.pt-off{display:inline-block; background:var(--t-on); color:var(--t-strong); font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 13px; border-radius:99px}
.pt-was{display:block; margin-top:16px; font-size:19px; font-weight:700; text-decoration-thickness:2px; font-variant-numeric:tabular-nums}
.pt-was.plain{text-decoration:none}
.pt-now{font-size:clamp(40px,4.6vw,60px); font-weight:800; letter-spacing:-.04em; line-height:1.02; margin-top:6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.pt-save{font-size:14.5px; line-height:1.55; margin-top:12px; max-width:42ch}
@media (max-width:520px){ .pricetag{padding:26px 22px 26px 56px; clip-path:polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%)} .pt-hole{left:20px} }
.receipt{background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:6px 22px; box-shadow:var(--lift); margin-top:0}
.receipt div.hl b{color:var(--t-strong)}

/* -------------------------------------------------------------------- TIP --*/

.grid.tip-main{grid-template-columns:minmax(320px,1fr) minmax(0,1fr)}
@media (max-width:1080px){ .grid.tip-main{grid-template-columns:minmax(0,1fr)} }
.diners{display:flex; flex-wrap:wrap; gap:14px 8px; margin:22px 0 8px}
.diner{display:flex; flex-direction:column; align-items:center; gap:7px; width:78px}
.diner i{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-weight:800; font-size:15px; color:#fff; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.26)}
.diner.hi i{border-color:color-mix(in srgb, var(--t2) 55%, #fff)}
.diner b{font-size:12.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.tipbars{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
@media (max-width:760px){ .tipbars{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tb{font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:16px 10px 14px; min-width:0; text-align:center;
  border-radius:16px; border:1px solid var(--hair); background:var(--bg); color:var(--ink); transition:border-color .15s, background .15s}
.tb:hover{border-color:var(--t-line)}
.tb.on{border-color:var(--t); background:var(--t-tint); box-shadow:inset 0 0 0 1px var(--t)}
.tb:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.tb-amt{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.tb-bar{height:110px; display:flex; align-items:flex-end; justify-content:center}
.tb-bar i{display:block; width:44%; min-width:22px; border-radius:10px 10px 4px 4px; background:var(--line-strong); transition:height .3s ease}
.tb.on .tb-bar i{background:linear-gradient(180deg, var(--t2), var(--t))}
.tb-pct{font-size:19px; font-weight:800; letter-spacing:-.02em}
.tb.on .tb-pct{color:var(--t-strong)}
.tb-each{font-size:12px; color:var(--muted); overflow-wrap:anywhere}

/* ------------------------------------------------------------- BREAK-EVEN --*/

.be-chart{margin-top:18px}
.grid.be-lower{grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr)}
@media (max-width:1180px){ .grid.be-lower{grid-template-columns:minmax(0,1fr)} }
.be-head{display:flex; gap:16px 24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--hair-soft)}
.be-big{font-size:clamp(36px,4.2vw,52px); font-weight:800; letter-spacing:-.035em; color:var(--t-strong); line-height:1.02; margin-top:8px; font-variant-numeric:tabular-nums}
.be-note{font-size:14px; color:var(--ink-2); margin-top:10px; max-width:62ch; line-height:1.55}
.be-head .legend{margin:0}
.us-cap{font-size:13.5px; color:var(--ink-2); margin-bottom:10px}
.us-bar{display:flex; height:44px; border-radius:12px; overflow:hidden; background:var(--sunk); gap:3px}
.us-bar i{height:100%} .us-bar .cost{background:var(--c2)} .us-bar .mine{background:var(--c1)}
.us-key{display:flex; justify-content:space-between; gap:8px 14px; margin-top:10px; font-size:13px; color:var(--ink-2); flex-wrap:wrap}
.us-key b{color:var(--ink); font-variant-numeric:tabular-nums}
.be-figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--hair-soft)}
.be-figs dt{font-size:12px; color:var(--muted); line-height:1.4}
.be-figs dd{margin:5px 0 0; font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ===========================================================================
   THE LIVE SITE'S OWN WIDGETS, RESTYLED.

   Twelve pages run the live scripts unchanged (see gt-compat.js), and those
   scripts write their own markup: `.r-row` result lines, the meeting planner's
   cells, the world clock's cards, the JSON status bar, the invoice preview. The
   classes are theirs; the look is the redesign's, in the tool's own colours.
   Everything is scoped under `.live` where a class name is generic enough to
   collide with the shell (`.good`, `.hint`, `.tbl`).
   =========================================================================== */

/* A SCROLL BOX MUST BE POSITIONED, or an absolutely positioned child escapes it.
   The invoice's line item table has a screen reader label (`.sr-lbl`, position
   absolute) in its last heading. With no positioned ancestor its containing
   block was the whole document, so it sat at its natural place, 751px across,
   outside the reach of the table's own overflow box, and every phone scrolled
   sideways by up to 431px. Measured, not guessed: a first guess (min-width on
   the wrapper) changed nothing. `position:relative` makes the scroll box its
   containing block, and the overflow clips it. */
.live .tbl-scroll, .tablescroll{position:relative}

:root{--mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}

.live .r-rows{display:flex; flex-direction:column}
.live .r-row{display:flex; align-items:baseline; gap:14px; padding:12px 0; border-top:1px solid var(--hair-soft); font-size:14px}
.live .r-row:first-child{border-top:0}
.live .r-row > span{flex:1; min-width:0; color:var(--ink-2)}
.live .r-row > b{font-variant-numeric:tabular-nums; font-weight:700; text-align:right}
.live .r-row > b + b{margin-left:18px; min-width:84px}
.live .r-row.head > span, .live .r-row.head > b{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.live .good{color:var(--up)}
.live .bad{color:var(--down)}
.live .mono, .live .r-row b.mono{font-family:var(--mono); font-size:12.5px; font-weight:600; overflow-wrap:anywhere; text-align:right}
.live .hashrow > span{flex:0 0 76px}
.live .hint{font-size:12px; color:var(--muted); line-height:1.5; font-weight:500}
.live label .hint{margin-left:6px}
.live .ck{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; min-height:44px}
.live .ck input{width:19px; height:19px; margin:0; flex:0 0 19px; accent-color:var(--t-strong)}
.live .btn-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px}
.live .btn-row .ck{margin-left:6px}
.live .notice{margin-top:14px}
.live .notice[hidden]{display:none}
.btn.ghost:disabled, .btn:disabled{background:var(--sunk); color:var(--muted); border:1px solid var(--line); box-shadow:none; cursor:not-allowed}
.live .field input[type=file]{font-size:13.5px; font-weight:500; padding:10px 12px}
.live .field input[type=color]{padding:5px; min-height:50px; cursor:pointer}
.privacy-pill{display:inline-flex; align-items:center; gap:9px; margin:0; background:var(--t-tint); color:var(--t-ink);
  border:1px solid var(--t-line); border-radius:99px; padding:8px 15px; font-size:13px; font-weight:600; line-height:1.4}
.privacy-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--t); flex:0 0 8px}
.live .tbl-scroll{overflow-x:auto; border:1px solid var(--hair); border-radius:14px}
.live .tbl{border-collapse:separate; border-spacing:0; width:100%; font-size:13.5px}
.live .tbl th{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; text-align:left;
  padding:12px 12px; background:var(--surface); border-bottom:1px solid var(--line-strong); white-space:nowrap}
.live .tbl td{padding:9px 12px; border-bottom:1px solid var(--hair-soft); vertical-align:middle}
.live .tbl tr:last-child td{border-bottom:0}
.live .tbl .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.live .tbl input, .live .tbl select{font:inherit; font-size:14px; font-weight:600; padding:9px 10px; min-height:42px; width:100%; min-width:70px;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--bg); color:var(--ink)}
.live .tbl input:focus, .live .tbl select:focus{outline:none; border-color:var(--t); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--t) 14%, transparent)}

/* Search popups (time zone planner, world clock). */
.search-pop, .wc-search{position:relative}
.search-list{position:absolute; top:100%; left:0; right:0; margin-top:6px; padding:6px; z-index:30; max-height:320px; overflow:auto;
  background:var(--surface); border:1px solid var(--hair); border-radius:14px; box-shadow:0 20px 44px -18px color-mix(in srgb, var(--ink) 40%, transparent)}
.search-list button{display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:100%; min-height:42px; padding:10px 12px;
  text-align:left; border:0; border-radius:10px; background:none; font:inherit; font-size:14px; color:var(--ink); cursor:pointer}
.search-list button:hover, .search-list button:focus-visible{background:var(--t-tint); outline:none}
.search-list b{font-weight:700}
.search-list span{font-family:var(--mono); font-size:11.5px; color:var(--muted); text-align:right; overflow-wrap:anywhere}
.search-list .s-sym{font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); text-align:left}

/* -------------------------------------------------------- TIME ZONE PLANNER */

.tz-bar{display:grid; grid-template-columns:minmax(240px,1fr) minmax(260px,1.2fr) auto; gap:16px 22px; align-items:end; margin-top:18px}
@media (max-width:1180px){ .tz-bar{grid-template-columns:minmax(0,1fr)} }
.tzb-now{margin-left:8px; font-weight:800; color:var(--t-strong)}
.tzb-time input[type=range]{width:100%; min-height:50px; margin:0; accent-color:var(--t-strong); cursor:pointer}
.tzb-side{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tzb-side .seg{flex:0 0 auto}
.tzb-side .seg button{flex:0 0 auto; min-width:58px}
.tzb-side input[type=date]{font:inherit; font-size:14px; font-weight:600; min-height:48px; padding:8px 12px; border:1px solid var(--line-strong);
  border-radius:12px; background:var(--bg); color:var(--ink)}
.tz-planner{margin-top:18px}
.meet-scroll{position:relative; overflow-x:auto; border:1px solid var(--hair); border-radius:16px; -webkit-overflow-scrolling:touch}
.meet-grid{--city:204px; border-collapse:collapse; table-layout:fixed; min-width:calc(var(--city) + 24 * var(--cell, 42px)); width:100%; user-select:none; -webkit-user-select:none; font-variant-numeric:tabular-nums}
.meet-grid td{width:var(--cell, 42px); min-width:36px; padding:24px 3px 9px; text-align:center; font-size:11px; font-weight:600; position:relative; cursor:pointer;
  color:var(--ink); border-left:1px solid color-mix(in srgb, var(--ink) 11%, transparent)}
.meet-grid tr + tr td, .meet-grid tr + tr th{border-top:1px solid var(--hair)}
.meet-grid .cell-h{white-space:nowrap}
.meet-grid .h-good{background:color-mix(in srgb, var(--t) 16%, var(--surface))}
.meet-grid .h-ok{background:#FBF1DC}
.meet-grid .h-bad{background:var(--sunk); color:var(--muted)}
.meet-grid .h-now{box-shadow:inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); font-weight:800}
.meet-grid .col-hl{box-shadow:inset 2px 0 0 var(--t-strong), inset -2px 0 0 var(--t-strong)}
.meet-grid td.in-sel{background-image:linear-gradient(color-mix(in srgb, var(--t) 12%, transparent), color-mix(in srgb, var(--t) 12%, transparent))}
.meet-grid.faded td:not(.in-sel){opacity:.36}
.meet-grid .day-start{border-left:2px solid var(--t-strong)}
.meet-grid .mg-day{position:absolute; top:0; left:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; padding:2px 5px;
  font-size:8.5px; line-height:1.2; font-weight:700; white-space:nowrap; color:var(--t-on); background:var(--t-strong); border-radius:0 0 6px 0}
.meet-grid .mg-day .d1{text-transform:uppercase}
.now-pulse{position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--t)}
.sel-box{position:absolute; z-index:3; pointer-events:none; border:2px solid var(--t-strong); border-radius:8px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 16%, transparent)}
.meet-grid .mg-city{position:sticky; left:0; z-index:4; width:204px; padding:10px 40px 10px 14px; text-align:left; vertical-align:top;
  background:var(--surface); border-right:2px solid var(--hair)}
.mg-city .c-name{font-weight:800; font-size:14.5px; line-height:1.25; color:var(--ink); overflow-wrap:anywhere}
.mg-city .c-now{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px; margin-top:4px}
.mg-city .c-time{font-weight:800; font-size:17px; color:var(--t-strong); font-variant-numeric:tabular-nums; white-space:nowrap}
.mg-city .c-abbr{font-family:var(--mono); font-size:10px; font-weight:700; color:var(--t-ink); background:var(--t-tint); border-radius:6px; padding:1px 6px}
.mg-city .c-date{font-size:11px; color:var(--muted)}
.mg-city .c-zone{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:3px; overflow-wrap:break-word}
.mg-city .c-off{white-space:nowrap}
.meet-grid .tz-del{position:absolute; top:3px; right:3px; min-width:34px; min-height:34px; border:0; border-radius:9px; background:none;
  color:var(--muted); font-size:18px; line-height:1; cursor:pointer}
.meet-grid .tz-del:hover{color:var(--down); background:color-mix(in srgb, var(--down) 8%, transparent)}
.meet-grid .c-move{position:absolute; right:3px; bottom:3px; display:flex; flex-direction:column}
.meet-grid .c-move button{min-width:34px; min-height:32px; border:0; border-radius:8px; background:none; color:var(--muted); font-size:11px; cursor:pointer}
.meet-grid .c-move button:hover:not(:disabled){color:var(--t-strong); background:var(--t-tint)}
/* The first city cannot move up and the last cannot move down. A faint arrow
   there measured 1.58:1 and did nothing, so it keeps its space and is not drawn. */
.meet-grid .c-move button:disabled{visibility:hidden}
.c-time .tick{animation:tzblink 1s steps(1,end) infinite}
@keyframes tzblink{50%{opacity:.25}}
.meet-readout{margin:0; font-size:13.5px; line-height:1.75; color:var(--t-ink)}
.meet-readout:not(:empty){margin-top:16px; padding:14px 16px; border-radius:14px; background:var(--t-tint); border:1px solid var(--t-line)}
.meet-readout .v-good{color:var(--up)} .meet-readout .v-ok{color:#855700} .meet-readout .v-bad{color:var(--down)}
.lnk{border:0; background:none; padding:0 0 0 8px; font:inherit; font-size:12.5px; font-weight:700; color:var(--t-strong); text-decoration:underline; cursor:pointer}
.plan-legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px}
.plan-legend .lg{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2)}
.plan-legend .lg::before{content:""; width:14px; height:14px; border-radius:4px; border:1px solid var(--hair)}
.plan-legend .lg-good::before{background:color-mix(in srgb, var(--t) 16%, var(--surface))}
.plan-legend .lg-ok::before{background:#FBF1DC}
.plan-legend .lg-bad::before{background:var(--sunk)}
.plan-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--hair-soft)}
.plan-actions .pa-lbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:6px}
.plan-actions .btn{text-decoration:none}
/* Waiting for a time to be picked: present, visibly asleep, still readable. */
.plan-actions.pa-off .btn{pointer-events:none; background:var(--sunk); color:var(--muted); border-color:var(--line)}

/* THE PHONE PLANNER. The strip is the tool, so the sticky city column gives it the
   room: 204px of a 330px card left three hour cells visible, where the live site
   before the redesign kept its city column narrow for exactly this reason. */
.tz-hint-touch{display:none}
@media (hover:none){ .tz-hint-mouse{display:none} .tz-hint-touch{display:inline} }
@media (max-width:640px){
  .meet-grid{--city:124px}
  .meet-grid .mg-city{width:124px; padding:8px 34px 8px 9px}
  .meet-grid td{padding-inline:2px; font-size:10.5px}
  .mg-city .c-name{font-size:13px}
  .mg-city .c-now{margin-top:2px}
  .mg-city .c-time{font-size:14px}
  .mg-city .c-abbr{font-size:9.5px; padding:1px 5px}
  .mg-city .c-date{font-size:10.5px}
  .mg-city .c-zone{font-size:10px}
  .meet-grid .tz-del{top:0; right:0}
  .meet-grid .c-move{right:0; bottom:0}
  .plan-actions .pa-lbl{flex:1 1 100%}
}
/* The smallest phones: at 320 the 124px column was still 52% of the card. */
@media (max-width:360px){
  .meet-grid{--city:112px}
  .meet-grid .mg-city{width:112px; padding:8px 32px 8px 8px}
  .mg-city .c-time{font-size:13.5px}
}

/* ------------------------------------------------------------- WORLD CLOCK */

.wc-bar{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-top:18px}
.wc-search{flex:1 1 300px}
.wc-bar .btn{margin:0}
.wc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px,100%),1fr)); gap:14px; margin-top:18px}
.wc-card{position:relative; min-width:0; padding:18px 20px 16px; border-radius:20px; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift)}
.wc-card.me{background:linear-gradient(165deg, var(--t-tint2) 0%, var(--surface) 70%); border-color:var(--t-line)}
.wc-card.night{background:linear-gradient(165deg, #1A2520 0%, #0F1814 100%); border-color:transparent; color:#F3F7F4}
.wc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.wc-city{font-weight:800; font-size:15px; line-height:1.3; overflow-wrap:anywhere}
.wc-del{min-width:36px; min-height:36px; margin:-9px -11px 0 0; border:0; border-radius:10px; background:none; color:var(--muted); font-size:21px; line-height:1; cursor:pointer}
.wc-del:hover{color:var(--down); background:color-mix(in srgb, var(--down) 8%, transparent)}
.wc-time{margin-top:10px; font-size:clamp(25px,2.3vw,31px); font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; white-space:nowrap}
.wc-date{margin-top:5px; font-size:13px; color:var(--ink-2)}
.wc-meta{display:flex; flex-direction:column; gap:3px; margin-top:14px; padding-top:12px; border-top:1px solid var(--hair-soft)}
.wc-off{font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--t-strong)}
.wc-rel{font-size:12.5px; color:var(--muted)}
/* YOUR OWN CARD IN DAYLIGHT. It sits on the tool's tint, where the grey labels
   measured 4.07:1. Found 2026-09-13 only because the sweep ran after sunrise
   where the test browser lives: the same card at night is dark and passes, so
   a daytime check had never happened. The suite now measures the page at noon
   and at midnight on purpose (tests/tools.browser.mjs, --tz). */
.wc-card.me:not(.night) .wc-date, .wc-card.me:not(.night) .wc-rel{color:var(--t-ink)}
.wc-card.night .wc-date, .wc-card.night .wc-rel{color:rgba(255,255,255,.76)}
.wc-card.night .wc-off{color:color-mix(in srgb, var(--t2) 38%, #fff)}
.wc-card.night .wc-meta{border-top-color:rgba(255,255,255,.14)}
.wc-card.night .wc-del{color:rgba(255,255,255,.76)}
.wc-note{margin-top:14px; font-size:12.5px; color:var(--muted)}

/* ----------------------------------------------------- COUNTDOWN AND TIMER */

.cd-tabs{margin-top:18px}
.cd-pane{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; margin-top:18px; align-items:stretch}
@media (max-width:1000px){ .cd-pane{grid-template-columns:minmax(0,1fr)} }
.cd-face{display:flex; flex-direction:column; justify-content:center; padding:34px 36px; min-height:320px}
.cd-face .big-clock{margin-top:14px; font-family:var(--mono); font-size:clamp(40px,6.2vw,88px); font-weight:700; letter-spacing:-.03em; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.cd-face .big-clock.done{color:#F09480}
.cd-sub{margin-top:16px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.78); max-width:60ch}
.cd-units{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14)}
@media (max-width:520px){ .cd-units{grid-template-columns:minmax(0,1fr)} .cd-face{padding:26px 22px} }
.cd-units span{display:block; font-size:12px; color:rgba(255,255,255,.74)}
.cd-units b{display:block; margin-top:4px; font-size:19px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.cd-go{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.cd-go .btn{margin:0; min-width:110px; justify-content:center}
.cd-laps .r-row{font-family:var(--mono); font-size:13.5px}

/* ------------------------------------------------------------ BUSINESS DAYS */

.bd-tabs{margin-top:18px}
.grid.bd-main{grid-template-columns:minmax(320px,1fr) minmax(0,1fr)}
@media (max-width:1000px){ .grid.bd-main{grid-template-columns:minmax(0,1fr)} }
/* The holiday list is written on ruled paper, with a margin line. */
.live .field textarea.notepad{font-family:var(--mono); font-size:14px; font-weight:500; line-height:30px; padding:6px 14px 6px 46px; min-height:230px;
  background-color:#FFFEF8;
  background-image:linear-gradient(90deg, transparent 32px, #F2B8AE 32px, #F2B8AE 34px, transparent 34px),
                   repeating-linear-gradient(180deg, transparent 0 29px, #E3E9E5 29px 30px);
  background-attachment:local; background-position:0 6px}
.bd-result{position:relative; padding:44px 30px 28px; border-radius:var(--card-radius); background:linear-gradient(180deg, var(--t-tint2), var(--surface) 55%);
  border:1px solid var(--t-line); box-shadow:var(--lift)}
.bd-rings{position:absolute; top:-9px; left:0; right:0; display:flex; justify-content:space-evenly; pointer-events:none}
.bd-rings i{width:12px; height:24px; border-radius:8px; background:linear-gradient(180deg, #CAD3CE, #F7F9F8 55%, #AEB9B3); box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bd-result .eyebrow-lbl{color:var(--t-strong)}
.bd-big{margin-top:10px; font-size:clamp(38px,4.6vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1.02; color:var(--t-strong); font-variant-numeric:tabular-nums}
.bd-big.small{font-size:clamp(24px,2.8vw,34px); letter-spacing:-.02em; line-height:1.2}
.bd-sub{margin-top:12px; font-size:14px; line-height:1.6; color:var(--t-ink)}
.bd-ledger{margin-top:18px; padding-top:6px; border-top:2px solid var(--t-line)}

/* ------------------------------------------------------------ WORKING HOURS */

.grid.wh-main{grid-template-columns:minmax(0,1.5fr) minmax(290px,.5fr); align-items:start}
@media (max-width:1180px){ .grid.wh-main{grid-template-columns:minmax(0,1fr)} }
.wh-tbl{min-width:600px}
.wh-tbl td.wh-tot{font-family:var(--mono); font-weight:700; white-space:nowrap; text-align:right}
.wh-tbl tr.off td{background:var(--sunk)}
.wh-tbl tr.off td.wh-tot{color:var(--muted); font-weight:500}
.wh-day{display:flex; align-items:center; gap:10px; margin:0; font-weight:700; white-space:nowrap; cursor:pointer; min-height:42px}
.live .wh-day input{width:19px; min-width:19px; height:19px; min-height:19px; margin:0; padding:0; accent-color:var(--t-strong)}
/* A punch card: a dark ticket with its row of holes along the top. */
.wh-card{position:relative; padding-top:42px; overflow:hidden}
.wh-holes{position:absolute; top:14px; left:24px; right:24px; height:10px;
  background:radial-gradient(circle at 5px 5px, rgba(255,255,255,.22) 3.5px, transparent 4px) 0 0 / 22px 10px repeat-x}
.wh-big{margin-top:10px; font-family:var(--mono); font-size:clamp(34px,3.6vw,46px); font-weight:700; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums}
.panel.accent .r-row{border-top-color:rgba(255,255,255,.12)}
.panel.accent .r-row > span{color:rgba(255,255,255,.76)}
.panel.accent .r-row > b{color:#fff}
.wh-card .r-rows{margin-top:16px}

/* ------------------------------------------------------------------------ QR */

.grid.qr-main{grid-template-columns:minmax(320px,1fr) minmax(0,.9fr); align-items:start}
@media (max-width:1000px){ .grid.qr-main{grid-template-columns:minmax(0,1fr)} }
.qr-main .qr-pane{margin-top:16px}
.qr-stage{position:sticky; top:84px; text-align:center; padding:28px; border-radius:var(--card-radius);
  background:radial-gradient(120% 90% at 50% 0%, var(--t-tint2) 0%, var(--surface) 70%); border:1px solid var(--t-line); box-shadow:var(--lift)}
@media (max-width:1000px){ .qr-stage{position:static} }
.qr-stage .eyebrow-lbl{color:var(--t-strong)}
/* The code sits inside a scanner's corner brackets. */
.qr-frame{position:relative; margin:20px auto 0; padding:26px; width:min(100%, 380px); border-radius:22px; background:#fff; box-shadow:0 20px 40px -30px rgba(0,0,0,.5)}
.qr-frame::before, .qr-frame::after{content:""; position:absolute; inset:8px; border-radius:16px; pointer-events:none;
  border:3px solid var(--t-strong);
  -webkit-mask:linear-gradient(#000,#000) top left / 34px 34px no-repeat, linear-gradient(#000,#000) top right / 34px 34px no-repeat,
               linear-gradient(#000,#000) bottom left / 34px 34px no-repeat, linear-gradient(#000,#000) bottom right / 34px 34px no-repeat;
          mask:linear-gradient(#000,#000) top left / 34px 34px no-repeat, linear-gradient(#000,#000) top right / 34px 34px no-repeat,
               linear-gradient(#000,#000) bottom left / 34px 34px no-repeat, linear-gradient(#000,#000) bottom right / 34px 34px no-repeat}
.qr-frame::after{display:none}
.qr-frame canvas{display:block; width:100%; height:auto; image-rendering:pixelated}
.qr-note{margin-top:12px; font-size:13.5px; color:var(--ink-2)}
.qr-note:empty{display:none}
.qr-dl{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.qr-dl .btn{margin:0}
.qr-dl .btn[aria-disabled="true"]{background:var(--sunk); color:var(--muted); border:1px solid var(--line); box-shadow:none; pointer-events:none}
.qr-meta{margin-top:14px; font-size:12px; color:var(--muted); line-height:1.6; font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- TEXT CASE */

.tc-bar{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; padding:12px 18px; background:var(--bg); border-bottom:1px solid var(--hair)}
.tc-actions{display:flex; gap:8px; flex-wrap:wrap}
.tc-actions .btn{margin:0}
.tc-editor textarea{min-height:280px}
.tc-note{margin:0 24px 14px}
.live .tc-stats{flex-direction:row; flex-wrap:wrap; border-top:1px solid var(--hair); background:var(--bg)}
.live .tc-stats .r-row{flex:1 1 130px; flex-direction:column-reverse; align-items:flex-start; gap:3px; padding:12px 18px; border-top:0; border-left:1px solid var(--hair-soft)}
.live .tc-stats .r-row:first-child{border-left:0}
.live .tc-stats .r-row > span{font-size:12px; color:var(--muted)}
.live .tc-stats .r-row > b{font-size:18px; font-weight:800; text-align:left}
.keys{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px}
@media (max-width:900px){ .keys{grid-template-columns:minmax(0,1fr)} }
.keygroup{padding:22px 24px; border-radius:var(--card-radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift); min-width:0}
.keygroup.wide{grid-column:1 / -1}
.keygroup h3{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.keycaps{display:flex; flex-wrap:wrap; gap:10px}
/* Keycaps: each operation is a key you press, and it shows its own result. */
.key{font-family:var(--mono); font-size:13.5px; font-weight:600; min-height:46px; padding:10px 15px; cursor:pointer; color:var(--ink);
  background:linear-gradient(180deg, var(--surface), var(--bg)); border:1px solid var(--line-strong); border-bottom-width:3px; border-radius:12px;
  transition:transform .08s, border-color .15s, background .15s}
.key:hover{border-color:var(--t-line); background:var(--t-tint); color:var(--t-ink)}
.key:active{transform:translateY(2px); border-bottom-width:1px; margin-bottom:2px}
.key:focus-visible{outline:2px solid var(--t); outline-offset:2px}

/* --------------------------------------------------- BASE64, HASH AND UUID */

.et-top{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.console{margin-top:18px; overflow:hidden; border-radius:var(--card-radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift)}
.console-bar{display:flex; align-items:center; gap:14px; padding:12px 18px; background:#141D19; color:#F3F7F4}
.console-bar b{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em}
.console-bar .dots{display:flex; gap:7px}
.console-bar .dots i{width:11px; height:11px; border-radius:50%; background:#F0776A}
.console-bar .dots i:nth-child(2){background:#EFC06A}
.console-bar .dots i:nth-child(3){background:#7FD6A5}
.console-body{padding:22px 24px 24px}
.io{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
@media (max-width:800px){ .io{grid-template-columns:minmax(0,1fr)} }
.live .field textarea.code{font-family:var(--mono); font-size:13.5px; font-weight:500; line-height:1.6; min-height:170px}
.live .field textarea.code.out{background:#101915; color:#D9F2E5; border-color:#101915}
.live .field textarea.code.out:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 22%, transparent)}
.opt-lbl{display:block; font-size:12.5px; color:var(--ink-2); font-weight:600; margin-bottom:1px}
.hash-out{margin-top:16px; padding:6px 18px; border-radius:14px; background:#101915}
.live .hash-out .r-row{border-top-color:rgba(255,255,255,.1)}
.live .hash-out .r-row > span{color:rgba(255,255,255,.72); font-family:var(--mono); font-size:12.5px}
.live .hash-out .r-row > b{color:#D9F2E5}
.jwt-out{margin:16px 0 0; padding:18px; border-radius:14px; background:#101915; color:#D9F2E5; font-family:var(--mono); font-size:13px; line-height:1.6;
  white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:auto}
.jwt-out:empty{display:none}

/* ------------------------------------------------------------------- JSON */

.ide{margin-top:18px; overflow:hidden; border-radius:var(--card-radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift)}
.ide-bar{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--bg); border-bottom:1px solid var(--hair)}
.ide-bar .btn-row{margin:0}
.ide-bar .btn-row .btn{margin:0}
.ide-opts{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.ide-opts > label:first-child{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.ide-opts select{font:inherit; font-size:13.5px; font-weight:600; min-height:42px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink)}
.jf-status{margin:0; padding:12px 18px; font-size:13.5px; border-bottom:1px solid var(--hair)}
.jf-status b{display:block; font-weight:700}
.jf-status span{display:block; margin-top:4px; font-size:12.5px; overflow-wrap:anywhere}
.jf-status.ok{background:var(--t-tint); color:var(--t-ink)}
.jf-status.bad{background:#FBEDEA; color:#8E2A20}
.jf-status.bad span{font-family:var(--mono)}
.ide-panes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .ide-panes{grid-template-columns:minmax(0,1fr)} }
.ide-pane{display:flex; flex-direction:column; min-width:0}
.ide-pane + .ide-pane{border-left:1px solid var(--hair)}
@media (max-width:900px){ .ide-pane + .ide-pane{border-left:0; border-top:1px solid var(--hair)} }
.ide-tab{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px 8px 18px; min-height:52px; border-bottom:1px solid var(--hair-soft)}
.ide-tab > span:first-child{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--t-strong); padding:4px 10px; border-radius:8px; background:var(--t-tint)}
.ide-tab-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.ide-tab-actions .btn{margin:0}
.ide-pane textarea{flex:1; display:block; width:100%; min-height:420px; margin:0; padding:18px 20px; border:0; resize:vertical;
  font-family:var(--mono); font-size:13.5px; line-height:1.65; color:var(--ink); background:var(--surface); tab-size:2}
.ide-pane textarea:focus{outline:none; box-shadow:inset 0 0 0 2px var(--t)}
.live .jf-stats{flex-direction:row; flex-wrap:wrap; border-top:1px solid var(--hair); background:var(--bg)}
.jf-stats:empty{display:none}
.live .jf-stats .r-row{flex:1 1 120px; flex-direction:column-reverse; align-items:flex-start; gap:3px; padding:11px 16px; border-top:0; border-left:1px solid var(--hair-soft)}
.live .jf-stats .r-row:first-child{border-left:0}
.live .jf-stats .r-row > span{font-size:11.5px; color:var(--muted)}
.live .jf-stats .r-row > b{font-size:16px; font-weight:800; text-align:left}

/* --------------------------------------------------------------- INSURANCE */

.grid.ins-main{grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr)}
@media (max-width:1080px){ .grid.ins-main{grid-template-columns:minmax(0,1fr)} }
/* A policy certificate: paper, a ruled double border, a seal. */
.certificate{padding:10px; border-radius:24px; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift)}
.cert-inner{position:relative; padding:34px 32px 28px; border-radius:17px; border:2px solid var(--t-line);
  background:radial-gradient(110% 80% at 100% 0%, var(--t-tint2) 0%, var(--surface) 60%);
  box-shadow:inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--t-line)}
.cert-seal{position:absolute; top:22px; right:22px; width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:2px dashed var(--t-line)}
.cert-inner .eyebrow-lbl{color:var(--t-strong)}
.cert-big{margin-top:10px; padding-right:70px; font-size:clamp(38px,4.6vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1.02; color:var(--t-strong); font-variant-numeric:tabular-nums}
.cert-rows{margin-top:22px}
.live .cert-rows .r-row > span{line-height:1.45}
.live .cert-rows .r-row:last-child{border-top:2px solid var(--t-line); margin-top:4px; padding-top:14px}
.live .cert-rows .r-row:last-child > b{color:var(--t-strong); font-size:17px}
.cert-note{margin-top:18px; padding:15px 16px; border-radius:14px; background:var(--t-tint); border:1px solid var(--t-line); color:var(--t-ink); font-size:14px; line-height:1.65}
.cert-note:empty{display:none}

/* ------------------------------------------------------ INVESTMENT RETURNS */

.rt-tabs{margin-top:18px}
.grid.rt-main{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)}
@media (max-width:1000px){ .grid.rt-main{grid-template-columns:minmax(0,1fr)} }
/* A report card: the grade, the working, the benchmark bars and the verdicts. */
.scorecard{position:relative; padding:28px 30px; border-radius:var(--card-radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift); overflow:hidden}
.scorecard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg, var(--t), var(--t2))}
.scorecard .r-main{margin-top:10px; font-size:clamp(34px,4vw,50px); font-weight:800; letter-spacing:-.035em; line-height:1.05; color:var(--t-strong); font-variant-numeric:tabular-nums}
.scorecard .r-main.good{color:var(--up)}
.scorecard .r-main.bad{color:var(--down)}
.scorecard .r-rows{margin-top:16px}
.sc-cap{margin-top:22px; margin-bottom:10px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.scorecard canvas{display:block}
.verdicts{margin-top:14px; font-size:13px; line-height:2.2; color:var(--muted)}
.verdicts span{display:inline-block; padding:3px 11px; border-radius:99px; font-weight:700; line-height:1.7}
.live .verdicts .good{background:color-mix(in srgb, var(--up) 11%, var(--surface)); color:var(--up)}
.live .verdicts .bad{background:color-mix(in srgb, var(--down) 10%, var(--surface)); color:var(--down)}
.verdicts.plain{line-height:1.65; color:var(--ink-2); font-size:14px}

/* ------------------------------------------------------------ GST INVOICE */

.gi-parties{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 34px}
@media (max-width:900px){ .gi-parties{grid-template-columns:minmax(0,1fr)} }
.gi-h{margin-top:0}
.live .bad-hint{color:var(--down); font-weight:600}
.gi-warn{background:#FBEDEA; border-color:#EBC3BB; color:#8E2A20}
.gi-items .tbl{min-width:760px}
.gi-items .tz-del{min-width:40px; min-height:40px; border:0; border-radius:10px; background:none; color:var(--muted); font-size:20px; cursor:pointer}
.gi-items .tz-del:hover{color:var(--down); background:color-mix(in srgb, var(--down) 8%, transparent)}
/* The invoice lies on a desk, as the paper it will print on. */
.gi-desk{margin-top:18px; padding:26px 18px 38px; border-radius:var(--card-radius); background:var(--sunk); border:1px solid var(--hair)}
.gi-desk-lbl{text-align:center; margin-bottom:16px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.invoice-print{max-width:820px; margin:0 auto; padding:52px 56px; background:#fff; color:#141A17; border-radius:4px; font-size:14px; line-height:1.55;
  box-shadow:0 1px 3px rgba(0,0,0,.08), 0 30px 60px -40px rgba(0,0,0,.45); overflow-wrap:anywhere}
@media (max-width:640px){ .invoice-print{padding:28px 20px} }
.invoice-print .eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#5E7168}
.invoice-print .tbl-scroll{overflow-x:auto}
.invoice-print .tbl{width:100%; border-collapse:collapse; font-size:13px}
.invoice-print .tbl th{text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#5E7168; padding:10px 8px; border-bottom:2px solid #141A17}
.invoice-print .tbl td{padding:10px 8px; border-bottom:1px solid #E3E9E5}
.invoice-print .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.invoice-print .r-row{display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid #E3E9E5; font-variant-numeric:tabular-nums}
.invoice-print .r-row:last-of-type{border-top:2px solid #141A17; font-size:16px}
.invoice-print .hint{font-size:13px; color:#5E7168}
.invoice-print hr{border-color:#E3E9E5 !important}

/* Only the invoice prints. */
@media print{
  .staging, .sidebar, .topbar, .tool-title, .reading, .hub, footer.site, .no-print, .gi-desk-lbl{display:none !important}
  .shell, .main, .page{display:block !important; margin:0 !important; padding:0 !important; max-width:none !important}
  .gi-desk{background:none; border:0; padding:0; margin:0}
  .invoice-print{box-shadow:none; max-width:none; padding:0; border-radius:0}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ------------------------------------------------------ THE LINK HUB (ALL) */

.hub{margin-top:30px; padding:28px 30px; border-radius:var(--card-radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift)}
.hub > h2{font-size:21px; font-weight:800; letter-spacing:-.02em}
.hub-groups{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:6px 30px}
.hub-groups.single{grid-template-columns:minmax(0,1fr); margin-top:16px}
.hub-group h3{margin:20px 0 10px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.hub-links{display:flex; flex-wrap:wrap; gap:8px}
.hub-links a{display:inline-flex; align-items:center; min-height:36px; padding:6px 13px; border-radius:99px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap}
.hub-links a:hover{background:var(--t-tint); color:var(--t-ink); border-color:var(--t-line)}
@media (max-width:560px){ .hub{padding:22px 18px} }

/* A short note box is a short box. The word counter's editor sets a 200px
   floor on .field textarea, which made a two line address field a page tall. */
.gi .field textarea, .qr .field textarea{min-height:88px}

/* ===========================================================================
   PDF TOOLS (2026-09-13). Six tools and their hub.

   The live pdf-tools/app.js runs unchanged and writes its own rows (.file,
   .fname, .fmove, .rrow), so those classes are the live script's and are scoped
   under `.pdf` here. Each tool then has a STAGE beside its controls that shows
   the document itself, and each stage is its own object: a before and after
   pair, a clipped stack, a cutting mat, a turntable, printed pages, a film strip.
   =========================================================================== */

.grid.pdf-main{grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr)}
@media (max-width:1000px){ .grid.pdf-main{grid-template-columns:minmax(0,1fr)} }
.pdf .pdf-work{position:relative; display:flex; flex-direction:column; gap:16px}
.pdf .privacy-pill{align-self:flex-start}

.pdf .drop{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:30px 20px 28px;
  border:2px dashed var(--t-line); border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg, var(--t-tint) 0%, var(--surface) 100%);
  transition:border-color .15s, background .15s, transform .12s}
.pdf .drop:hover, .pdf .drop.over{border-color:var(--t); background:var(--t-tint)}
.pdf .drop.over{transform:scale(1.01)}
.pdf .drop:has(+ .file-in:focus-visible){outline:2px solid var(--t); outline-offset:3px}
.pdf .drop-ico{width:64px; height:64px; margin-bottom:8px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); box-shadow:var(--lift)}
.pdf .drop .big{display:block; font-size:16.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.pdf .drop .small{display:block; font-size:13.5px; color:var(--ink-2)}
/* Out of sight but still reachable by keyboard: the label above shows its focus. */
.pdf .file-in{position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; overflow:hidden}

.pdf .files{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pdf .files:empty{display:none}
.pdf .file{display:flex; align-items:center; gap:8px; min-width:0; padding:8px 8px 8px 14px;
  border:1px solid var(--hair); border-radius:14px; background:var(--bg)}
.pdf .fname{flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.pdf .fsize{flex:0 0 auto; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pdf .fmove, .pdf .fdel{flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  font:inherit; font-size:14px; cursor:pointer; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:11px}
.pdf .fmove:hover:not(:disabled){background:var(--t-tint); color:var(--t-ink); border-color:var(--t-line)}
.pdf .fdel:hover{color:var(--down); border-color:var(--down)}
.pdf .fmove:focus-visible, .pdf .fdel:focus-visible{outline:2px solid var(--t); outline-offset:2px}
/* An arrow that cannot move anything keeps its place and is not drawn, as on
   the time zone planner: a faded arrow read as a button that did nothing. */
.pdf .fmove:disabled{visibility:hidden}
@media (max-width:560px){
  .pdf .file{flex-wrap:wrap}
  .pdf .file > .fname{flex:1 1 100%; order:-2}
  .pdf .file > .fsize{flex:1 1 auto; order:-1}
}
.pdf .imgrow{flex-wrap:wrap; padding-left:8px}
.pdf .imgrow .thumb{flex:0 0 52px; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; overflow:hidden; background:var(--sunk)}
.pdf .imgrow .thumb img{max-width:100%; max-height:100%; object-fit:contain; transition:transform .2s}
.pdf .imgrow .fmeta{flex:1 1 140px; min-width:0; display:flex; flex-direction:column; gap:2px}
.pdf .imgrow .fmeta .fsize{white-space:normal}
.pdf .imgrow .fbtns{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}

.pdf .opt-lbl{margin-bottom:4px}
.pdf .field .hint{font-size:12.5px; color:var(--ink-2); line-height:1.55}
.pdf .count{font-weight:600; color:var(--ink-2)}
.pdf .seg-eq button{flex:1 1 96px; display:flex; flex-direction:column; align-items:center; gap:2px}
.pdf .seg .subline{display:block; font-size:11.5px; font-weight:600; color:var(--ink-2)}
.pdf .seg button.on .subline{color:var(--t-ink)}
.pdf .seg-toggle{position:relative; width:100%; min-height:58px; margin-top:4px; padding:11px 16px 11px 64px; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  font:inherit; font-size:14px; font-weight:700; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:14px}
.pdf .seg-toggle::before{content:""; position:absolute; left:16px; top:50%; width:34px; height:20px; margin-top:-10px;
  border-radius:99px; background:var(--line-strong); transition:background .15s}
.pdf .seg-toggle::after{content:""; position:absolute; left:19px; top:50%; width:14px; height:14px; margin-top:-7px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .18s}
.pdf .seg-toggle.on{background:var(--t-tint); border-color:var(--t-line)}
.pdf .seg-toggle.on::before{background:var(--t-strong)}
.pdf .seg-toggle.on::after{transform:translateX(14px)}
.pdf .seg-toggle .subline{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.pdf .seg-toggle.on .subline{color:var(--t-ink)}
.pdf .seg-toggle:focus-visible{outline:2px solid var(--t); outline-offset:2px}

.pdf .btn-block{width:100%; display:flex; align-items:center; justify-content:center}
.pdf .bar{height:8px; border-radius:99px; background:var(--sunk); overflow:hidden}
.pdf .bar i{display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--t), var(--t2)); transition:width .2s}
.pdf .status{font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.pdf .status:empty{display:none}
.pdf .status.err{padding:12px 14px; border-radius:12px; font-weight:600; color:#8E2A20; background:#FBEDEA}

.pdf .result{margin-top:18px; padding-top:16px; border-top:1px solid var(--hair)}
.pdf .rrow{display:flex; align-items:baseline; gap:14px; padding:10px 0; font-size:14px}
.pdf .rrow + .rrow{border-top:1px solid var(--hair-soft)}
.pdf .rrow > span{flex:1; min-width:0; color:var(--ink-2)}
.pdf .rrow > b{font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.pdf .result .btn{margin-top:14px}
.pdf .res-big{display:flex; flex-direction:column; gap:6px; margin-bottom:6px; padding:18px 20px; border-radius:16px;
  background:linear-gradient(165deg, #17211C 0%, #101915 100%); color:#fff}
.pdf .res-big .eyebrow-lbl{color:color-mix(in srgb, var(--t2) 38%, #fff)}
.pdf .res-big b{font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- THE STAGE (ALL) */

.pdf .pdf-stage{position:relative; overflow:hidden; display:flex; flex-direction:column}
@media (min-width:1001px){ .pdf .pdf-stage{min-height:460px} }
.pdf .stage-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:18px}
.pdf .stage-head .eyebrow-lbl{flex:1 1 auto; color:var(--t-strong)}
.pdf .stage-count{font-size:13px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pdf .stage-note{margin-top:16px; max-width:54ch; font-size:14px; line-height:1.6; color:var(--ink-2)}
.pdf .stage-note:empty{display:none}
.pdf .paper{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:#fff; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.1), 0 18px 34px -22px rgba(0,0,0,.5)}
.pdf .paper canvas{display:block; max-width:100%; max-height:100%; width:auto; height:auto}
.pdf .paper-empty{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#5E7168; text-align:center; padding:0 6px}
.pdf .paper.loading::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;
  animation:pdf-sheen 1.1s infinite}
@keyframes pdf-sheen{to{background-position:250% 0}}
@media (prefers-reduced-motion:reduce){ .pdf .paper.loading::after{animation:none} }

/* COMPRESS: the page and its lighter copy, side by side, with the sizes to scale. */
.pdf .press{background:linear-gradient(180deg, var(--t-tint) 0%, var(--surface) 58%)}
.pdf .press-pair{display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:10px; align-items:center}
.pdf .press-sheet{margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.pdf .press-sheet .paper{width:100%; max-width:220px; aspect-ratio:1 / 1.414}
.pdf .press-sheet figcaption{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.pdf .press-sheet.now figcaption{color:var(--t-strong)}
.pdf .press-arrow{color:var(--t-strong); display:flex; justify-content:center}
.pdf .press-bars{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.pdf .pb{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center; font-size:13px; font-weight:600; color:var(--ink-2)}
.pdf .pb i{position:relative; height:12px; border-radius:99px; background:var(--sunk); overflow:hidden}
.pdf .pb i::after{content:""; position:absolute; top:0; bottom:0; left:0; width:var(--w,0%); border-radius:99px; background:#9AA8A1; transition:width .6s cubic-bezier(.2,.8,.2,1)}
.pdf .pb.now i::after{background:linear-gradient(90deg, var(--t), var(--t2))}

/* MERGE: the files as a stack of sheets under one clip, in the order they join. */
.pdf .binder{background:linear-gradient(160deg, var(--t-tint) 0%, var(--surface) 55%)}
.pdf .bind-stack{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.pdf .bind-stack:not(:empty)::before{content:""; position:relative; z-index:2; align-self:center; width:88px; height:24px; margin-bottom:-12px;
  border-radius:7px 7px 4px 4px; background:linear-gradient(180deg, #3A4640, #1B2420); box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.pdf .bind-sheet{position:relative; display:grid; grid-template-columns:34px 56px minmax(0,1fr); gap:14px; align-items:center;
  padding:12px 16px; background:#fff; border:1px solid var(--hair); border-radius:12px; box-shadow:0 12px 26px -22px rgba(0,0,0,.6)}
.pdf .bind-sheet + .bind-sheet{margin-top:-4px}
.pdf .bind-sheet:first-child{padding-top:20px}
.pdf .bs-n{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--t-strong); color:var(--t-on); font-size:13.5px; font-weight:800}
.pdf .bs-thumb{width:56px; height:74px; border-radius:3px; box-shadow:0 0 0 1px var(--hair)}
.pdf .bs-meta{min-width:0; display:flex; flex-direction:column; gap:3px}
.pdf .bs-meta b{font-size:14px; color:var(--ink); overflow-wrap:anywhere}
.pdf .bs-meta span{font-size:12.5px; color:var(--ink-2)}

/* SPLIT: every page laid out on a cutting mat; the ones kept are lifted off it. */
.pdf .pg-grid{position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:12px;
  padding:14px; border-radius:16px; max-height:600px; overflow:auto;
  background-color:var(--t-tint);
  background-image:linear-gradient(var(--t-line) 1px, transparent 1px), linear-gradient(90deg, var(--t-line) 1px, transparent 1px);
  background-size:26px 26px}
.pdf .pg-grid:empty{display:none}
.pdf .pg{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px 8px 9px; cursor:pointer;
  font:inherit; color:var(--ink); background:var(--surface); border:2px solid var(--hair); border-radius:12px;
  transition:border-color .15s, transform .15s, box-shadow .15s}
.pdf .pg .paper{width:100%; aspect-ratio:1 / 1.414; transition:opacity .15s, filter .15s}
.pdf .pg b{font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.pdf .pg[aria-pressed="true"]{border-color:var(--t-strong); box-shadow:0 10px 22px -16px var(--t-strong); transform:translateY(-2px)}
.pdf .pg[aria-pressed="true"] b{color:var(--t-strong)}
.pdf .pg[aria-pressed="false"] .paper{opacity:.4; filter:grayscale(1)}
.pdf .pg-tick{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:var(--t-strong); display:none}
.pdf .pg-tick::after{content:""; position:absolute; left:8px; top:4px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.pdf .pg[aria-pressed="true"] .pg-tick{display:block}
.pdf .pg:focus-visible{outline:2px solid var(--t); outline-offset:2px}

/* ROTATE: the first page on a turntable, turned the way every page will be. */
.pdf .turntable{background:radial-gradient(120% 90% at 50% 36%, var(--t-tint) 0%, var(--surface) 72%)}
.pdf .tt{position:relative; width:min(100%, 380px); aspect-ratio:1; margin:4px auto 0; display:flex; align-items:center; justify-content:center}
.pdf .tt-ring{position:absolute; inset:6px; border-radius:50%; border:2px dashed var(--t-line);
  background:radial-gradient(circle, var(--surface) 0 60%, transparent 61%)}
.pdf .tt-ring i{position:absolute; padding:2px 8px; font-style:normal; font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line-strong); border-radius:99px}
.pdf .tt-ring i[data-deg="0"]{top:-12px; left:50%; transform:translateX(-50%)}
.pdf .tt-ring i[data-deg="90"]{right:-6px; top:50%; transform:translateY(-50%)}
.pdf .tt-ring i[data-deg="180"]{bottom:-12px; left:50%; transform:translateX(-50%)}
.pdf .tt-ring i[data-deg="270"]{left:-6px; top:50%; transform:translateY(-50%)}
.pdf .tt-ring i.on{color:var(--t-on); background:var(--t-strong); border-color:var(--t-strong)}
.pdf .tt-page{width:50%; max-height:72%; aspect-ratio:1 / 1.414; transition:transform .55s cubic-bezier(.3,1.25,.4,1)}
@media (prefers-reduced-motion:reduce){ .pdf .tt-page{transition:none} }

/* IMAGES TO PDF: each image as the page it becomes, printed at its own shape. */
.pdf .contact{background:linear-gradient(170deg, var(--t-tint) 0%, var(--surface) 60%)}
.pdf .cs-badge{align-self:flex-start; margin:-6px 0 14px; padding:6px 12px; border-radius:99px; font-size:12.5px; font-weight:700;
  color:var(--t-ink); background:var(--t-tint); border:1px solid var(--t-line)}
.pdf .cs-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); gap:20px 16px}
.pdf .cs-grid:empty{display:none}
.pdf .cs-page{display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0}
.pdf .cs-box{position:relative; width:100%; height:168px; container-type:size}
.pdf .cs-frame{position:absolute; left:50%; top:50%; width:100cqw; height:100cqh; display:flex; align-items:center; justify-content:center;
  transform:translate(-50%, -50%) rotate(var(--rot, 0deg)); transition:transform .25s}
.pdf .cs-frame.turned{width:100cqh; height:100cqw}
.pdf .cs-frame img{display:block; max-width:100%; max-height:100%; object-fit:contain; background:#fff; border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 16px 30px -20px rgba(0,0,0,.55)}
.pdf .cs-page b{font-size:12.5px; font-weight:700; color:var(--ink-2)}

/* PDF TO IMAGES: the pages as frames on a strip of film, named as the ZIP names them. */
.pdf .film{background:linear-gradient(170deg, #1A221E 0%, #101614 100%); border-color:transparent; color:#F3F7F4}
.pdf .film .stage-head .eyebrow-lbl{color:color-mix(in srgb, var(--t2) 38%, #fff)}
.pdf .film .stage-count{color:rgba(255,255,255,.86)}
.pdf .film .stage-note{color:rgba(255,255,255,.8)}
.pdf .film .result{border-top-color:rgba(255,255,255,.16)}
.pdf .film .rrow > span{color:rgba(255,255,255,.8)}
.pdf .film .rrow > b{color:#fff}
.pdf .film-strip{position:relative; overflow-x:auto; padding:26px 0; border-radius:10px; background:#090C0B}
.pdf .film-strip:has(.frames:empty){display:none}
.pdf .film-strip::before, .pdf .film-strip::after{content:""; position:absolute; left:0; right:0; height:9px; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.82) 9px 21px, transparent 21px 30px)}
.pdf .film-strip::before{top:8px}
.pdf .film-strip::after{bottom:8px}
.pdf .frames{list-style:none; margin:0; padding:0 16px; display:flex; gap:14px; width:max-content}
.pdf .frame{width:120px; display:flex; flex-direction:column; align-items:center; gap:9px}
.pdf .frame .paper{width:120px; height:152px; border-radius:2px}
.pdf .frame code{max-width:120px; font-family:var(--mono); font-size:11px; line-height:1.4; text-align:center; color:rgba(255,255,255,.86); overflow-wrap:anywhere}

/* ------------------------------------------------------------ THE PDF HUB */

.grid.ph-main{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
@media (max-width:1080px){ .grid.ph-main{grid-template-columns:minmax(0,1fr)} }
.ph-side{display:flex; flex-direction:column; gap:18px; min-width:0}
.ph-mark{flex:0 0 46px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--t-tint)}
.ph-tools .card-head h2{font-size:19px}
.ph-find{flex:1 1 220px; max-width:320px; min-height:48px; display:flex; align-items:center; gap:10px; padding:0 14px;
  color:var(--ink-2); background:var(--bg); border:1px solid var(--line-strong); border-radius:13px}
.ph-find input{flex:1; min-width:0; min-height:46px; border:0; outline:none; background:transparent; font:inherit; font-size:14.5px; color:var(--ink)}
.ph-find input::placeholder{color:var(--muted)}
.ph-find:focus-within{background:var(--surface); border-color:var(--t); box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 14%, transparent)}
.pdf-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(250px,100%),1fr)); gap:14px}
.pdf-card{display:grid; grid-template-columns:58px minmax(0,1fr) 18px; gap:14px; align-items:center; padding:18px;
  text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:18px;
  transition:border-color .15s, box-shadow .15s, transform .15s}
.pdf-card:hover{border-color:var(--t-line); box-shadow:var(--lift); transform:translateY(-2px)}
.pdf-card:focus-visible{outline:2px solid var(--t); outline-offset:3px}
.pc-ico{width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:#FDECEC}
.pdf-card[href$="merge-pdf.html"] .pc-ico{background:#FCE8F0}
.pdf-card[href$="split-pdf.html"] .pc-ico{background:#E7F0FD}
.pdf-card[href$="compress-pdf.html"] .pc-ico{background:#E5F6EC}
.pdf-card[href$="rotate-pdf.html"] .pc-ico{background:#E2F5F4}
.pdf-card[href$="images-to-pdf.html"] .pc-ico{background:#FDF0E2}
.pdf-card[href$="pdf-to-images.html"] .pc-ico{background:#F0EAFC}
.pc-text{min-width:0; display:flex; flex-direction:column; gap:5px}
.pc-text b{font-size:16px; font-weight:800; letter-spacing:-.01em}
.pc-text span{font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.pc-go{color:var(--ink-2)}
.ph-empty{font-size:14px; line-height:1.6; color:var(--ink-2)}
.pdf-cards + .ph-empty{margin-top:6px}
.linkbtn{min-height:40px; padding:0 8px; font:inherit; font-size:13px; font-weight:700; color:var(--t-strong); background:none; border:0; border-radius:9px; cursor:pointer}
.linkbtn:hover{background:var(--t-tint)}
.linkbtn:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.recent{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.recent li + li{border-top:1px solid var(--hair-soft)}
.recent a{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 4px; text-decoration:none; color:var(--ink); border-radius:12px}
.recent a:hover{background:var(--t-tint)}
.recent img{flex:0 0 40px; width:40px; height:40px; padding:7px; border-radius:12px; background:var(--t-tint)}
.recent a > span{min-width:0; display:flex; flex-direction:column; gap:2px}
.recent b{font-size:14px}
.recent a > span > span{font-size:12.5px; color:var(--ink-2)}
.tips-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.tips-list li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start}
.tips-list img{width:40px; height:40px; padding:8px; border-radius:12px; background:var(--t-tint)}
.tips-list span{font-size:13px; line-height:1.55; color:var(--ink-2)}
.tips-list b{display:block; margin-bottom:2px; font-size:14px; color:var(--ink)}
.ph-suggest{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; padding:22px 26px;
  border-radius:var(--card-radius); border:1px solid var(--t-line);
  background:linear-gradient(115deg, var(--t-tint) 0%, var(--surface) 80%)}
.ph-bulb{flex:0 0 54px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:16px;
  color:var(--t-strong); background:var(--surface); box-shadow:var(--lift)}
.ph-suggest > div{flex:1 1 260px; min-width:0}
.ph-suggest h2{font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--t-ink)}
.ph-suggest p{margin-top:4px; font-size:14px; line-height:1.55; color:var(--t-ink)}
@media (max-width:560px){ .ph-suggest{padding:20px 18px} .ph-suggest .btn{width:100%; justify-content:center; display:flex} }

/* An empty stage is not a blank card. Until a file is chosen each stage shows the
   outline of what will appear there, and it goes as soon as the real thing does. */
.pdf .stage-ghost{display:flex; justify-content:center; align-items:flex-end; gap:14px; padding:26px 0 8px; pointer-events:none}
.pdf .stage-ghost i{width:92px; aspect-ratio:1 / 1.414; border-radius:5px; background:rgba(255,255,255,.7); border:2px dashed var(--t-line)}
.pdf .binder .stage-ghost{flex-direction:column; align-items:center; gap:0}
.pdf .binder .stage-ghost i{width:min(100%, 360px); aspect-ratio:auto; height:66px; margin-top:-8px}
.pdf .binder .stage-ghost i:nth-child(odd){transform:rotate(-.8deg)}
.pdf .cutmat .stage-ghost{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px,1fr)); padding:14px; border-radius:16px; background:var(--t-tint)}
.pdf .cutmat .stage-ghost i{width:100%}
.pdf .contact .stage-ghost i:nth-child(2){aspect-ratio:1.414 / 1; width:130px}
.pdf .contact .stage-ghost i:nth-child(4){display:none}
.pdf .film .stage-ghost{padding:26px 16px; border-radius:10px; background:#090C0B; justify-content:flex-start; overflow:hidden}
.pdf .film .stage-ghost i{flex:0 0 96px; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); border-radius:2px}
.pdf .binder:has(.bind-sheet) .stage-ghost, .pdf .cutmat:has(.pg) .stage-ghost,
.pdf .contact:has(.cs-page) .stage-ghost, .pdf .film:has(.frame) .stage-ghost{display:none}

/* Measured 2026-09-13: a hint paragraph carried a 12.5px margin and the button a
   20px one, on top of the panel's own 16px gap, so the space above a button was
   twice the space anywhere else in the panel. One rhythm: the gap. */
.pdf .field .hint{margin:0}
.pdf .pdf-work > .btn-block{margin-top:4px}
/* On a phone the page itself scrolls; a grid that scrolls inside it traps the thumb. */
@media (max-width:1000px){ .pdf .pg-grid{max-height:none; overflow:visible} }

/* ------------------------------------------------ BLANK SPACE BESIDE A TABLE */
/* Owner, 2026-09-13, circling the empty lower half of the dark statement card
   beside the year by year table: "do we need this much blank space". The table
   was setting the height of the row. With a zero flex basis it takes the height
   the card beside it needs and scrolls inside that, so neither card is emptier
   than the other. Desktop only: stacked on a phone, each card is its own height. */
@media (min-width:1081px){
  .grid.halves > .panel:has(> .tablescroll){display:flex; flex-direction:column}
  .grid.halves > .panel > .tablescroll{flex:1 1 0; min-height:280px; max-height:none}
}

/* ---------------------------------------------------- THE LOAN SPOTLIGHTS */
/* Owner, 2026-09-13: "become loan free sooner is our highlight which others do
   not have. no body knew this was there. can we show a pulsing or blinking
   button", and "I never knew add loan option existed until I scrolled to the
   end". They sit in the empty space under the loan's inputs, which he circled
   the same morning, carry the reader's own saving, and pulse until the section
   they point at has been seen (emi.js). The ring animates OPACITY on a pseudo
   element, never box-shadow or size, so it costs nothing and cannot push the
   page sideways on a phone. */
.grid.split:has(.spotlight){align-items:stretch}
.grid.split > .panel:has(.spotlight){display:flex; flex-direction:column}
.spotlight{margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:10px}
.spotlight .eyebrow-lbl{color:var(--t-strong)}
.spot{position:relative; display:grid; grid-template-columns:46px minmax(0,1fr) 18px; gap:14px; align-items:center;
  padding:14px 16px; border-radius:16px; text-decoration:none; color:var(--t-ink);
  background:linear-gradient(120deg, var(--t-tint2), var(--t-tint)); border:1px solid var(--t-line)}
.spot:hover{border-color:var(--t)}
.spot:focus-visible{outline:2px solid var(--t); outline-offset:3px}
.spot::after{content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 3px var(--t), 0 0 22px 4px color-mix(in srgb, var(--t) 45%, transparent);
  opacity:0; animation:spot-pulse 2.2s ease-in-out infinite}
.spot + .spot::after{animation-delay:1.1s}
@keyframes spot-pulse{0%, 100%{opacity:0} 45%{opacity:.9}}
.spot.seen::after{animation:none; opacity:0}
@media (prefers-reduced-motion:reduce){ .spot::after{animation:none; opacity:.55} .spot.seen::after{opacity:0} }
.spot-ico{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--surface)}
.spot-text{min-width:0; display:flex; flex-direction:column; gap:3px}
.spot-text b{font-size:15px; font-weight:800; color:var(--ink)}
.spot-text > span{font-size:13px; line-height:1.5}
.spot-go{color:var(--t-strong)}
.panel[id]{scroll-margin-top:90px}

/* -------------------------------------------------------------- HIGHLIGHTS */
/* The pills under each tool's title naming what it does that most do not
   (owner, 2026-09-13). The ring pulses on a pseudo element by OPACITY only, the
   same as the loan spotlights, and each pill is staggered so four do not blink
   in unison. On a phone they are one row that scrolls sideways, so four of them
   never push the figures below the fold. */
.spot-pills{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:3px 0 4px}
.sp-lbl{margin-right:4px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.spot-pill{position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:5px 14px 5px 6px;
  border-radius:99px; text-decoration:none; font-size:13px; font-weight:700; color:var(--t-ink);
  background:var(--t-tint); border:1px solid var(--t-line); transition:border-color .15s, background .15s}
.spot-pill:hover{border-color:var(--t); background:var(--t-tint2)}
.spot-pill:focus-visible{outline:2px solid var(--t); outline-offset:3px}
.spot-pill img{width:26px; height:26px; padding:2px; border-radius:50%; background:var(--surface)}
.spot-pill::after{content:""; position:absolute; inset:-1px; border-radius:99px; pointer-events:none;
  box-shadow:0 0 0 3px var(--t), 0 0 18px 3px color-mix(in srgb, var(--t) 40%, transparent);
  opacity:0; animation:spot-pulse 2.4s ease-in-out infinite}
.spot-pill:nth-of-type(2)::after{animation-delay:.6s}
.spot-pill:nth-of-type(3)::after{animation-delay:1.2s}
.spot-pill:nth-of-type(4)::after{animation-delay:1.8s}
.spot-pill.seen::after{animation:none; opacity:0}
@media (prefers-reduced-motion:reduce){ .spot-pill::after{animation:none; opacity:.5} .spot-pill.seen::after{opacity:0} }
@media (max-width:640px){
  .spot-pills{position:relative; flex-wrap:nowrap; overflow-x:auto; padding:5px 4px 8px; scrollbar-width:none}
  .spot-pills::-webkit-scrollbar{display:none}
  .sp-lbl{display:none}
}
/* Where a highlight lands, it lights for a moment. */
.spot-flash{animation:spot-flash 1.8s ease-out 1}
@keyframes spot-flash{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--t) 60%, transparent)}
  35%{box-shadow:0 0 0 7px color-mix(in srgb, var(--t) 30%, transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}
.page [id]{scroll-margin-top:90px}

/* ===========================================================================
   IMAGE TOOLS (2026-09-13). Six tools, five ready-made size pages, their hub.

   The live image-tools/app.js and adjust.js run unchanged and keep their own
   ids and classes (.imgt, .imgt-crop-stage, .size-chip, .imgt-spec). Each tool
   leads with its own stage: a checkerboard for resize, compress and convert, a
   dark light table for crop, a darkroom for brightness and contrast, a scanner
   for image to text, and a spec sheet for every ready-made size.
   =========================================================================== */

:is(.img, .img-hub) .drop{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:30px 20px 28px;
  border:2px dashed var(--t-line); border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg, var(--t-tint) 0%, var(--surface) 100%); transition:border-color .15s, background .15s}
:is(.img, .img-hub) .drop:hover, :is(.img, .img-hub) .drop.over{border-color:var(--t); background:var(--t-tint)}
:is(.img, .img-hub) .drop:has(+ .file-in:focus-visible){outline:2px solid var(--t); outline-offset:3px}
:is(.img, .img-hub) .drop-ico{width:64px; height:64px; margin-bottom:8px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--surface); box-shadow:var(--lift)}
:is(.img, .img-hub) .drop .big{display:block; font-size:16.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
:is(.img, .img-hub) .drop .small{display:block; font-size:13.5px; color:var(--ink-2)}
:is(.img, .img-hub) .file-in{position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; overflow:hidden}
.img .img-drop, .img-hub .ih-preview{position:relative}
.img .img-drop{display:flex; flex-direction:column; gap:14px}
.img .privacy-pill{align-self:flex-start}
.img .opt-lbl, .img-hub .opt-lbl{margin-bottom:4px}

/* Once a picture is in, the upload box steps back to one line. */
body.img-loaded .img .img-drop .drop{flex-direction:row; justify-content:center; gap:12px; padding:12px 16px}
body.img-loaded .img .img-drop .drop .drop-ico{width:42px; height:42px; margin:0; border-radius:12px}
body.img-loaded .img .img-drop .drop .drop-ico img{width:26px; height:26px}
body.img-loaded .img .img-drop .drop .small{display:none}
.img .img-drop:has(.drop[hidden]){display:none}

.img .img-work{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:18px; margin-top:18px; align-items:start}
@media (max-width:1000px){ .img .img-work{grid-template-columns:minmax(0,1fr)} }
/* Before a picture: the controls show, quiet and inert (image-stage.js). */
.live.img .img-work[hidden]{display:grid !important}
.img .img-work[hidden] .img-controls{opacity:.62}
.img .img-work[hidden] :is(.imgt-crop-wrap, .img-frame, .adj-actions, #crophint-resize){display:none}
.img .img-work:not([hidden]) .img-empty{display:none}
.img .img-empty{margin:0; padding:48px 20px; text-align:center; font-size:14px; line-height:1.6; color:var(--ink-2);
  border:2px dashed var(--t-line); border-radius:16px; background:var(--t-tint)}

.img .img-stage{position:relative; overflow:hidden; min-width:0}
.img .stage-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:16px}
.img .stage-head .eyebrow-lbl{flex:1 1 auto; color:var(--t-strong)}
.img .imgt-meta{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink-2); overflow-wrap:anywhere}
.img .img-frame{display:flex; align-items:center; justify-content:center; min-height:220px; padding:14px; border-radius:14px}
.img .img-frame img, .img .img-frame canvas{display:block; max-width:100%; max-height:480px; height:auto; border-radius:6px}
.img .img-stage .hint{margin-top:12px; font-size:13px; color:var(--ink-2); line-height:1.55}
.img .img-stage .hint:empty{display:none}

/* The checkerboard: transparency shows for what it is. */
.img .checker-stage .img-frame, .img .checker-stage .imgt-crop-stage, .img-hub .checker{
  background:conic-gradient(#E9EEEB 90deg, #fff 90deg 180deg, #E9EEEB 180deg 270deg, #fff 270deg) 0 0 / 22px 22px; border:1px solid var(--hair)}
/* Crop: a dark light table, so the frame is the brightest thing. */
.img .lighttable{background:linear-gradient(170deg, #1C2420 0%, #111714 100%); border-color:transparent; color:#F3F7F4}
/* Brightness and contrast: a darkroom, warm and dim. */
.img .darkroom{background:radial-gradient(120% 90% at 50% 18%, #2B2018 0%, #120D0A 72%); border-color:transparent; color:#F7F1EA}
.img .darkroom .img-frame{background:rgba(0,0,0,.28)}
:is(.img .lighttable, .img .darkroom) .stage-head .eyebrow-lbl{color:color-mix(in srgb, var(--t2) 38%, #fff)}
:is(.img .lighttable, .img .darkroom) .imgt-meta{color:rgba(255,255,255,.84)}
:is(.img .lighttable, .img .darkroom) .img-empty{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.86)}
.img .lighttable .hint{color:rgba(255,255,255,.84)}
.img .adj-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.img .adj-actions .btn{flex:1 1 200px; margin:0}
/* Image to text: a scanner bed with its light passing over. */
.img .scanner .img-frame{position:relative; background:repeating-linear-gradient(0deg, var(--t-tint) 0 2px, var(--surface) 2px 7px); border:1px solid var(--t-line)}
.img .scanner .img-frame::after{content:""; position:absolute; left:14px; right:14px; top:14px; height:2px; pointer-events:none;
  background:var(--t); box-shadow:0 0 14px 3px color-mix(in srgb, var(--t) 55%, transparent); opacity:.75; animation:img-scan 3.4s ease-in-out infinite}
@keyframes img-scan{0%, 100%{top:14px} 50%{top:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){ .img .scanner .img-frame::after{animation:none; opacity:0} }
.img .ocr-paper textarea{font-family:var(--mono); font-size:14px; line-height:1.75; min-height:240px; background:#FFFDF6; border-color:#E6DECB}

.img .img-controls{display:flex; flex-direction:column; gap:14px}
.img .img-controls > .btn-block{margin-top:4px}
.img .img-controls > .hint, .img .field .hint{margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.img .field label .hint{margin-left:6px; font-size:12.5px; font-weight:800; color:var(--t-strong)}
.img .imgt-dims{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.img .imgt-check{display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer}
.img .imgt-check input{width:19px; height:19px; margin:0; accent-color:var(--t-strong)}
.img .imgt-range{display:flex; align-items:center; gap:14px}
.img input[type=range]{width:100%; min-height:30px; accent-color:var(--t-strong); cursor:pointer}
.img .qval{min-width:50px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--t-strong)}
.img .seg-eq button{flex:1 1 96px; display:flex; flex-direction:column; align-items:center; gap:2px}
.img .seg.compact button{flex:1 1 56px}
.img .seg .subline{display:block; font-size:11.5px; font-weight:600; color:var(--ink-2)}
.img .seg button.on .subline{color:var(--t-ink)}
.img .fmt-tiles button{min-height:70px; flex:1 1 120px}
.img .btn-block{width:100%; display:flex; align-items:center; justify-content:center}
.img .bar{height:8px; border-radius:99px; background:var(--sunk); overflow:hidden}
.img .bar i{display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--t), var(--t2)); transition:width .25s}
.img .status{font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.img .status:empty{display:none}
.img .status.err{padding:12px 14px; border-radius:12px; font-weight:600; color:#8E2A20; background:#FBEDEA}
.img .result{margin-top:4px; padding-top:16px; border-top:1px solid var(--hair)}
.img .rrow{display:flex; align-items:baseline; gap:14px; padding:10px 0; font-size:14px}
.img .rrow + .rrow{border-top:1px solid var(--hair-soft)}
.img .rrow > span{flex:1; min-width:0; color:var(--ink-2)}
.img .rrow > b{font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.img .result > .btn, .img .result .field{margin-top:14px}
.img .res-big{display:flex; flex-direction:column; gap:6px; margin-bottom:6px; padding:18px 20px; border-radius:16px; background:linear-gradient(165deg, #17211C 0%, #101915 100%); color:#fff}
.img .res-big .eyebrow-lbl{color:color-mix(in srgb, var(--t2) 38%, #fff)}
.img .res-big b{font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.05}
.img .imgt-btn-pair{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.img .imgt-btn-pair .btn{display:flex; align-items:center; justify-content:center; margin:0}
@media (max-width:420px){ .img .imgt-btn-pair{grid-template-columns:1fr} }

/* The live crop stage. The box's position is measured off the preview's own
   width, so the stage carries no padding and the picture no border. */
.img .imgt-crop-wrap{text-align:center; line-height:0}
.img .imgt-crop-stage{position:relative; display:inline-block; max-width:100%; line-height:0; overflow:hidden; border-radius:8px;
  user-select:none; -webkit-user-select:none; touch-action:none}
.img .imgt-crop-stage img{display:block; max-width:100%; max-height:480px}
.img .imgt-crop-box{position:absolute; border:1.5px solid #fff; cursor:move;
  box-shadow:0 0 0 9999px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35)}
.img .imgt-crop-box::before, .img .imgt-crop-box::after{content:""; position:absolute; pointer-events:none}
.img .imgt-crop-box::before{left:33.33%; right:33.33%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.55); border-right:1px solid rgba(255,255,255,.55)}
.img .imgt-crop-box::after{top:33.33%; bottom:33.33%; left:0; right:0; border-top:1px solid rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.55)}
/* Handles sit just inside the corners: the stage clips, and a clipped half cannot be grabbed. */
.img .imgt-crop-h{position:absolute; width:18px; height:18px; background:#fff; border:2px solid var(--t-strong); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.4)}
.img .imgt-crop-h.nw{left:1px; top:1px; cursor:nwse-resize}
.img .imgt-crop-h.ne{right:1px; top:1px; cursor:nesw-resize}
.img .imgt-crop-h.sw{left:1px; bottom:1px; cursor:nesw-resize}
.img .imgt-crop-h.se{right:1px; bottom:1px; cursor:nwse-resize}

/* The ready-made sizes: a spec sheet, and on the passport page the country beside it. */
.grid.img-sheet-row{grid-template-columns:minmax(0,1fr)}
.grid.img-sheet-row.with-country{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}
@media (max-width:1000px){ .grid.img-sheet-row.with-country{grid-template-columns:minmax(0,1fr)} }
/* Hairlines drawn on each cell, not a 1px gap over a grey ground: with five
   facts in a grid of six, the gap showed the empty sixth slot as a grey block.
   Each cell's right and bottom rule is pulled 1px out, so the container clips
   the rules on its own outer edge. */
.img .imgt-spec{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(170px,100%),1fr)); gap:0; background:var(--surface); border:1px solid var(--hair); border-radius:14px; overflow:hidden}
.img .imgt-spec-row{min-width:0; padding:14px 16px; background:var(--surface); border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); margin:0 -1px -1px 0}
.img .imgt-spec-row span{display:block; margin-bottom:5px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.img .imgt-spec-row b{font-size:17px; font-weight:800; line-height:1.3; color:var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.img .imgt-spec-row[data-spec="px"] b{color:var(--t-strong)}
.img .imgt-country label{display:block; margin-bottom:7px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.img .imgt-country select{width:100%; min-height:50px; padding:13px 14px; font:inherit; font-size:15.5px; font-weight:600; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:13px}
.img .imgt-country select:focus{outline:none; border-color:var(--t); background:var(--surface); box-shadow:0 0 0 4px color-mix(in srgb, var(--t) 14%, transparent)}
.img .imgt-country .hint{display:block; margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--ink-2)}

/* The 21 ready-made sizes on the resize page, as a catalogue. */
.img .img-sizes{margin-top:18px}
.img .imgt-sizes .hub-sub{font-size:19px; font-weight:800; letter-spacing:-.015em}
.img .imgt-sizes-lead{margin:6px 0 4px; font-size:13.5px; color:var(--ink-2)}
.img .imgt-sizes-grp{margin-top:18px}
.img .imgt-sizes-grp h3{margin-bottom:10px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.img .chip-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px,100%),1fr)); gap:10px}
.img .size-chip{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:62px; padding:12px 14px; text-align:left; cursor:pointer;
  font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:14px; transition:border-color .15s, background .15s}
.img .size-chip b{font-size:13.5px; font-weight:700; line-height:1.3}
.img .size-chip span{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.img .size-chip:hover, .img .size-chip.on{border-color:var(--t); background:var(--t-tint)}
.img .size-chip:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.img .imgt-bycountry{margin-top:12px; font-size:13px; line-height:2; color:var(--ink-2)}
.img .imgt-bycountry a{margin-right:4px; font-weight:600; color:var(--t-strong)}

/* ------------------------------------------------------------ IMAGE HUB */
.img-hub .ih-sub{margin:28px 0 12px; font-size:15px; font-weight:800; letter-spacing:-.01em}
.img-hub .hub-lead{margin:-4px 0 12px; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
.img-hub .hub-lead a{font-weight:600; color:var(--t-strong)}
.img-hub .pc-ico{background:var(--t-tint)}
.pc-size{align-self:flex-start; margin-top:6px; padding:2px 9px; border-radius:99px; font-style:normal; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--t-ink); background:var(--t-tint)}
.img-hub .ih-preview .drop{padding:26px 16px 24px}
.img-hub .ih-chosen{display:flex; flex-direction:column; gap:12px}
.img-hub .ih-chosen .img-frame{display:flex; align-items:center; justify-content:center; min-height:160px; padding:10px; border-radius:12px}
.img-hub .ih-chosen .img-frame img{display:block; max-width:100%; max-height:230px; border-radius:4px}
.img-hub .imgt-meta{margin:0; font-family:var(--mono); font-size:12px; color:var(--ink-2); overflow-wrap:anywhere}
.img-hub .ih-go{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.img-hub .ih-go .btn{display:flex; align-items:center; gap:8px; margin:0; justify-content:flex-start}
.img-hub .ih-go .btn img{width:20px; height:20px}
.img-hub .ih-tip{background:linear-gradient(160deg, var(--t-tint2), var(--t-tint)); border-color:var(--t-line)}
.img-hub .ih-tip .card-head{margin-bottom:10px}
.img-hub .ih-tip p{font-size:13.5px; line-height:1.6; color:var(--t-ink)}
.img-hub .fmt-chips{display:flex; flex-wrap:wrap; gap:8px}
.img-hub .fmt-chips span{padding:8px 14px; border-radius:10px; font-size:13px; font-weight:800; letter-spacing:.02em}
.img-hub .f-jpg{background:#E7F0FD; color:#1B4A8C}
.img-hub .f-png{background:#FCE8F0; color:#8E1F4E}
.img-hub .f-webp{background:#E5F6EC; color:#16603A}
.img-hub .ih-formats .note{margin-top:12px; font-size:12.5px; color:var(--ink-2)}
.ih-band{margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:20px 22px;
  border-radius:var(--card-radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--lift)}
@media (max-width:860px){ .ih-band{grid-template-columns:minmax(0,1fr)} }
.ih-band > div{display:flex; gap:12px; align-items:flex-start; min-width:0}
.ih-band img{flex:0 0 34px}
.ih-band span{font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.ih-band b{display:block; font-size:14.5px; color:var(--ink)}

/* ===========================================================================
   LAUNCH ESSENTIALS (2026-09-13): the house ad slots, the consent notice and
   the footer's legal line, carried from the live site into the redesign.
   =========================================================================== */

/* HOUSE ADS. The live card, in the redesign's system: the brand colours are
   still written inline by the live ads generator (--hb, --hb-deep, --hb-tint),
   so a brand can be added or recoloured from the staff console with no CSS
   change. Raw brand colours never paint text: --hb-deep does, measured AA. */
.ad-wrap{margin-top:22px}
.ad-slot{text-align:left}
.ad-slot:empty{display:none}
.ad-slot::before{content:"Advertisement"; display:block; margin:0 0 6px 4px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.ad-slot:empty::before{display:none}
.house-ad{--hb:var(--brand); --hb-deep:var(--brand-deep); --hb-tint:var(--brand-tint);
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:18px 20px; border-radius:var(--card-radius); text-decoration:none; color:var(--ink);
  background:linear-gradient(135deg, var(--hb-tint), rgba(255,255,255,0) 62%), var(--surface);
  border:1px solid var(--hair); border-top:3px solid var(--hb); box-shadow:var(--lift);
  transition:transform .15s ease, border-color .15s ease}
.house-ad:hover{transform:translateY(-2px); border-color:var(--hb); color:var(--ink); text-decoration:none}
/* The breathing glow the owner asked to be obvious (2026-08-07), on opacity only. */
.house-ad::after{content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1.5px var(--hb), 0 0 26px -3px var(--hb); opacity:0; animation:house-glow 3.2s ease-in-out infinite}
@keyframes house-glow{0%, 100%{opacity:.14} 50%{opacity:.9}}
.house-ad:hover::after{animation:none; opacity:.72}
.house-ad:focus-visible{outline:2px solid var(--hb-deep); outline-offset:3px}
.house-ad .h-mark{width:56px; height:56px; border-radius:14px; padding:var(--hb-pad,6px); object-fit:contain; background:var(--hb-tint)}
.house-ad .h-body{min-width:0}
.house-ad .h-top{display:flex; align-items:center; flex-wrap:wrap; gap:9px}
.house-ad .h-name{font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--hb-deep)}
/* The offer chip is a SOLID white chip with the brand's deep colour, not the
   deep colour on the brand's own tint. Measured 2026-09-13: Flashpop's
   #C81861 on its 10% pink tint is 4.22:1 at 10.5px, under AA. The live ads
   generator checks each deep colour against white only, which is why the live
   card has the same fault. On white the deep colours are 5.59:1 and up. */
.house-ad .h-badge{padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--hb-deep); background:#fff; border:1px solid color-mix(in srgb, var(--hb-deep) 28%, #fff)}
.house-ad .h-pitch{display:block; margin-top:3px; font-size:14.5px; line-height:1.45; color:var(--ink)}
.house-ad .h-desc{display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.house-ad .h-cta{padding:11px 16px; border-radius:12px; font-size:13.5px; font-weight:700; white-space:nowrap; color:#fff; background:var(--hb-deep)}
.house-ad .h-cta .arr{display:inline-block; margin-left:6px; transition:transform .15s}
.house-ad:hover .h-cta .arr{transform:translateX(3px)}
@media (max-width:719px){
  .house-ad{grid-template-columns:auto minmax(0,1fr); align-items:start; gap:12px 14px; padding:15px 16px}
  .house-ad .h-cta{grid-column:1 / -1; justify-self:start}
}
@media (max-width:379px){
  .house-ad .h-mark{width:44px; height:44px; border-radius:11px}
  .house-ad .h-cta{width:100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){ .house-ad::after{animation:none; opacity:.22} .house-ad, .house-ad .h-cta .arr{transition:none} .house-ad:hover{transform:none} }

/* ---------------------------------------------------------- VARIANT PAGES */
/* What a variant page's article carries from the live page: tables worked out
   at build time, a formula line, and a row of related variants as small buttons.
   A scroll box is positioned, so nothing absolutely placed inside it escapes. */
.prose .tbl-scroll{position:relative; overflow-x:auto; margin-top:18px; border:1px solid var(--hair); border-radius:14px}
.prose .tbl-scroll table.tbl{margin:0; width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; font-variant-numeric:tabular-nums}
.prose .tbl th, .prose .tbl td{padding:11px 14px; border:0; border-bottom:1px solid var(--hair-soft); text-align:left; white-space:nowrap}
.prose .tbl tr:first-child th{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); background:var(--bg); border-bottom:1px solid var(--line-strong)}
.prose .tbl tr:last-child td{border-bottom:0}
.prose .tbl .num{text-align:right}
.prose .tbl tr:hover td{background:var(--t-tint)}
.prose p.formula{padding:16px 18px; border-radius:14px; background:var(--t-tint); border:1px solid var(--t-line); color:var(--t-ink); max-width:none}
.prose .btn-row{display:flex; flex-wrap:wrap; gap:8px; max-width:none}
.prose .btn-row .btn{display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border-radius:99px; font-size:13px; text-decoration:none}
.prose .btn-row .btn.ghost{color:var(--ink-2)}

/* ------------------------------------------------------ TIME ZONE PAIR PAGES */
/* The live pair block (two clocks, a converter for one time, a 24 hour table)
   in the redesign: the first clock on a dark card, the second on the tool's
   tint, the table beside them. The planner below is the converter's own. */
.tzpair .tzp-pair{margin-top:18px}
.tzpair .tool-cols{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:18px; align-items:start}
@media (max-width:900px){ .tzpair .tool-cols{grid-template-columns:minmax(0,1fr)} }
.tzpair .tool-cols > .panel, .tzpair .tool-cols > .readout{min-width:0; padding:22px 24px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--card-radius); box-shadow:var(--lift)}
.tzpair .grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:440px){ .tzpair .grid-2{grid-template-columns:minmax(0,1fr)} }
.tzpair .grid-2 .readout{min-width:0; padding:16px 18px; border-radius:16px; color:#fff; background:linear-gradient(165deg, #17211C 0%, #101915 100%)}
.tzpair .grid-2 .readout + .readout{color:var(--t-ink); background:linear-gradient(165deg, var(--t-tint2) 0%, var(--t-tint) 100%); border:1px solid var(--t-line)}
.tzpair .r-label{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.45; color:var(--ink-2)}
.tzpair .grid-2 .readout .r-label, .tzpair .grid-2 .readout .r-sub{color:rgba(255,255,255,.84)}
.tzpair .grid-2 .readout + .readout .r-label, .tzpair .grid-2 .readout + .readout .r-sub{color:var(--t-ink)}
.tzpair .r-main{margin-top:8px; font-size:clamp(28px,3.3vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.05; white-space:nowrap; font-variant-numeric:tabular-nums}
.tzpair .r-sub{margin-top:5px; font-size:13px}
.tzpair .tool-cols .hint{margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.tzpair .tool-cols .hint:empty{display:none}
.tzpair .tool-cols .field{margin-top:14px}
.tzpair .tool-cols .btn.sm{display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:10px 16px; font-size:13.5px; text-decoration:none}
.tzpair #tzpTable{position:relative; margin-top:10px; max-height:620px; overflow:auto}
.tzpair #tzpTable .r-row{padding:9px 6px}
.tzpair #tzpTable .r-row.tzp-now{background:var(--t-tint); border-radius:10px}
.live .warn{color:#8A5300}

/* ------------------------------------------------ CURRENCY AND LIVE MARKETS */
/* Both run the live scripts, which write their own rows, cards and chips. The
   converter's answer sits on the tool's tint beside the form; the markets page
   is a board of price cards, then the comparison and the what-if table. */
.grid.cx-main{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); align-items:start}
@media (max-width:1000px){ .grid.cx-main{grid-template-columns:minmax(0,1fr)} }
.cx .cx-form{display:flex; flex-direction:column; gap:16px}
.cx .cx-pair{display:grid; grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); gap:10px; align-items:end}
.cx .cx-swap{width:50px; height:50px; font-size:20px; cursor:pointer; color:var(--t-strong); background:var(--surface); border:1px solid var(--line-strong); border-radius:13px}
.cx .cx-swap:hover{background:var(--t-tint); border-color:var(--t-line)}
.cx .cx-swap:focus-visible{outline:2px solid var(--t); outline-offset:2px}
@media (max-width:460px){ .cx .cx-pair{grid-template-columns:minmax(0,1fr)} .cx .cx-swap{width:100%} }
:is(.cx .cx-err, .mkt .mkt-err){margin:0; background:#FBEDEA; border-color:#EBC3BB; color:#8E2A20}
.cx .cx-board{background:linear-gradient(165deg, var(--t-tint) 0%, var(--surface) 62%); border-color:var(--t-line)}
.cx .cx-board .eyebrow-lbl{color:var(--t-strong)}
.cx .cx-out{font-size:clamp(30px,4vw,48px); overflow-wrap:anywhere}
.cx :is(.cx-rate, .cx-stamp, .cx-hilo, .cx-trend){margin-top:6px; font-size:13px; line-height:1.55; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cx .cx-range-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:16px}
.cx .cx-hilo{margin-top:0}
.cx .cx-spark{margin-top:12px}
.cx #cxSpark{display:block; width:100%; height:150px}

.mkt .badge-live{padding:4px 10px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8E2A20; background:#FBEDEA}
.mkt .mkt-stamp{margin-left:auto; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.mkt .mkt-board{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(210px,100%),1fr)); gap:12px; margin-top:14px}
.mkt .mkt-card{min-width:0; padding:14px 16px; border-radius:16px; background:var(--bg); border:1px solid var(--hair)}
.mkt .m-name{font-size:12.5px; font-weight:800; letter-spacing:.02em; color:var(--ink)}
.mkt .m-sym{margin-top:2px; font-family:var(--mono); font-size:11.5px; color:var(--ink-2)}
.mkt .m-px{margin-top:10px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.mkt .m-chg{margin-top:4px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.mkt .up{color:var(--up)}
.mkt .down{color:var(--down)}
.mkt .m-live{font-size:10.5px; font-weight:800; white-space:nowrap; color:var(--up)}
.mkt .m-closed{font-size:10.5px; font-weight:600; text-align:right; color:var(--ink-2)}
.mkt .mkt-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.mkt .mkt-chips:empty{display:none}
.mkt .mkt-chips .chip{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:6px 10px 6px 12px; cursor:default}
.mkt .mkt-chips .chip .dot{width:10px; height:10px; border-radius:50%; flex:0 0 10px}
.mkt .mkt-chips .chip button{min-width:36px; min-height:36px; font-size:16px; line-height:1; cursor:pointer; color:var(--ink-2); background:var(--sunk); border:0; border-radius:9px}
.mkt .mkt-chart{margin-top:12px}
.mkt #cmpChart{display:block; width:100%; height:340px}
.mkt .search-list .s-sym{margin-right:8px; font-family:var(--mono); font-weight:700}
.mkt .search-list .s-exch{margin-left:auto; padding-left:8px; font-size:12px; color:var(--ink-2)}

/* ------------------------------------ VAT, US PAYCHECK AND US DEPRECIATION */
/* Three live scripts that write r-row lines into a readout. The form sits
   beside the answer, and the answer sits on the tool's tint, as on the
   currency converter. More Tools is the same card grid as the PDF hub. */
.grid.calc-main{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr); align-items:start}
@media (max-width:1000px){ .grid.calc-main{grid-template-columns:minmax(0,1fr)} }
.calc .calc-form{display:flex; flex-direction:column; gap:16px}
.calc .calc-two{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(190px,100%),1fr)); gap:14px}
.calc .seg-lbl{display:block; font-size:12.5px; color:var(--ink-2); font-weight:600; margin-bottom:6px}
.calc .calc-board{background:linear-gradient(165deg, var(--t-tint) 0%, var(--surface) 62%); border-color:var(--t-line)}
.calc .calc-board .eyebrow-lbl{color:var(--t-strong)}
.calc .calc-board .headline{overflow-wrap:anywhere}
.calc .calc-board .headline-note:empty{display:none}
.calc .calc-board .r-rows{margin-top:14px}
.calc .field .hint{display:block; margin-top:6px}
.calc .field input:disabled{background:var(--sunk); color:var(--ink-2); cursor:not-allowed}
.calc .ck{margin:0}
.calc .quote{margin:0}
.calc .quote:empty{display:none}
.calc .dp-chart{margin-top:16px}
.calc #dpChart{display:block; width:100%; height:170px}
.calc .calc-table{margin-top:18px}
.more-tools > h2{margin-bottom:16px}

/* ------------------------------------------ GUIDES, THE BLOG AND SITE PAGES */
/* The live words, read in the same column as a tool's article, with the byline
   under the title and the live page's own related list beside it. */
.page > .byline{margin:0 0 22px; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.page > .byline b{color:var(--ink); font-weight:700}
.guide-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); gap:14px; margin-bottom:26px}
.guide-card{display:flex; flex-direction:column; gap:8px; min-width:0; padding:20px; border-radius:18px; background:var(--surface);
  border:1px solid var(--hair); color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s}
.guide-card:hover{border-color:var(--t-line); box-shadow:var(--lift); transform:translateY(-2px)}
.guide-card:focus-visible{outline:2px solid var(--t); outline-offset:3px}
.guide-card .gc-kind{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--t-strong)}
.guide-card b{font-size:16.5px; line-height:1.35; letter-spacing:-.01em; color:var(--ink); overflow-wrap:anywhere}
.guide-card .gc-line{font-size:14px; line-height:1.55; color:var(--ink-2)}
.prose .lead:empty{display:none}
.prose-anchor{scroll-margin-top:84px}
.toc-related:has(#relatedGrid[data-static]:empty){display:none}

/* An address or a link with no spaces must still fit a 320px phone: the contact
   email at 20px, set nowrap by .num, widened the whole page by 29px. */
.prose a{overflow-wrap:anywhere}
.prose a.num{white-space:normal}

/* ------------------------------------------------------------ IMAGE BANNERS */
/* The owner's own artwork (2026-09-13): 3:1 on wider screens, 2:1 on phones,
   centred at no more than 960px so a 3:1 picture never towers over the tool.
   The text card stays in the markup underneath, hidden, and is what a phone
   shows for a brand that has no phone banner yet (.no-phone-banner). */
.house-ad .h-banner{display:none}
.house-ad.has-banner:not(.no-phone-banner){display:block; padding:0; border:0; background:none; max-width:960px; margin-inline:auto; line-height:0}
.house-ad.has-banner:not(.no-phone-banner) .h-banner{display:block}
.house-ad.has-banner:not(.no-phone-banner) :is(.h-mark, .h-body, .h-cta){display:none}
@media (min-width:641px){
  .house-ad.no-phone-banner{display:block; padding:0; border:0; background:none; max-width:960px; margin-inline:auto; line-height:0}
  .house-ad.no-phone-banner .h-banner{display:block}
  .house-ad.no-phone-banner :is(.h-mark, .h-body, .h-cta){display:none}
}
.house-ad .h-banner img{display:block; width:100%; height:auto; border-radius:var(--card-radius)}
.ad-slot:has(.has-banner:not(.no-phone-banner))::before{max-width:960px; margin-inline:auto; padding-left:4px}

/* THE LABEL AND THE EFFECTS, both set per brand in the staff console
   (2026-09-13). The label comes from js/house-ads.js as --ad-label; without the
   script it reads Advertisement. The effect is a class the generator writes,
   and its cycle is --fx-dur, clamped there to a safe range: blink never runs
   faster than 0.7s a cycle, well under three flashes a second. */
.ad-slot.house::before{content:var(--ad-label, "Advertisement")}
.house-ad.fx-glow::after{animation-duration:var(--fx-dur, 3.2s)}
.house-ad:is(.fx-none, .fx-blink, .fx-fade)::after{animation:none; opacity:0}
.house-ad.fx-blink{animation:house-blink var(--fx-dur, 1.2s) steps(1, end) infinite}
.house-ad.fx-blink:is(:hover, :focus-visible){animation:none}
@keyframes house-blink{0%{opacity:1} 50%{opacity:.5}}
.house-ad.fx-fade.fx-go{animation:house-fade var(--fx-dur, .8s) ease-out both}
@keyframes house-fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .house-ad.fx-blink, .house-ad.fx-fade.fx-go{animation:none; opacity:1; transform:none}
}
@media (min-width:641px){ .ad-slot:has(.no-phone-banner)::before{max-width:960px; margin-inline:auto; padding-left:4px} }