/* ==========================================================================
   adjustingtools.com — core stylesheet
   Direction: modern, high-contrast, legible. Weight instead of hairlines.
   Palette  ink / deep / slate / stock / white / brass / oxide
   Type     Schibsted Grotesk (display + text) · IBM Plex Mono (data, labels)
   ========================================================================== */

:root{
  /* One palette for the whole product. The tools set it; the site follows, because
     a visitor who crosses from the pitch into Zestymate must not feel the brand
     change under them. */
  --ink:#1a1f29;
  --ink-deep:#162A45;
  --navy:#1F3A5F;
  --slate:#6B7280;
  --line:#E7E2D8;
  --line-2:#F0ECE3;
  --stock:#FBFAF7;
  --paper:#FBFAF7;
  --white:#FFFFFF;
  --brass:#C9A24B;
  --brass-deep:#1F3A5F;
  --hi-soft:#EEF3FA;
  --r:12px;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--stock);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--white)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:800px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  margin:0 0 18px;display:block;
}
.eyebrow.brass{color:var(--brass-deep)}
h1,h2{margin:0;font-family:var(--display);font-weight:600;line-height:1.05;
  letter-spacing:-.005em}
h3,h4{margin:0;font-weight:700;letter-spacing:-.024em;line-height:1.2}
h1{font-size:clamp(42px,7.4vw,82px);letter-spacing:-.012em}
h2{font-size:clamp(31px,4.6vw,54px);letter-spacing:-.008em}
.cap-foot .big,.flow-value{font-family:var(--display);font-weight:600}
.drop h3{font-family:var(--display);font-weight:600}

h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.015em;line-height:1.25}
h1 em,h2 em{font-style:italic;font-weight:600}
h1 em,h2 em,h3 em{font-style:normal;color:var(--brass-deep)}
.band.ink h1 em,.band.ink h2 em,.band.ink h3 em{color:var(--brass)}
.lede{font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:var(--deep);max-width:54ch;font-weight:400}
p{margin:0 0 1.05em}
strong{font-weight:600}
.fine{font-size:15px;color:var(--slate);line-height:1.6}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:14px 24px;border:1.5px solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:var(--white);text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.btn:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:rgba(15,23,32,.05);color:var(--ink);border-color:var(--ink)}
.btn.onink{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn.onink:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn.onink.ghost{background:transparent;color:var(--white)}
.btn.onink.ghost:hover{background:rgba(255,255,255,.12);color:var(--white);border-color:var(--white)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
:focus-visible{outline:2.5px solid var(--brass-deep);outline-offset:3px}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:60;background:rgba(237,239,238,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.wordmark b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.wordmark span{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-deep);border-left:1px solid var(--line);padding-left:10px}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--deep);
  padding:3px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--brass)}
.nav a.enter{color:var(--white);background:var(--ink);border:none;padding:10px 18px;
  border-radius:var(--r);font-weight:600}
.nav a.enter:hover{background:var(--deep);color:var(--white)}
.burger{display:none;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
  padding:10px 14px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer}
@media(max-width:900px){
  .nav{position:fixed;inset:70px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--stock);border-bottom:1px solid var(--line);padding:6px var(--gut) 24px;display:none}
  .nav.open{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:17px}
  .nav a.enter{margin-top:16px;text-align:center;padding:15px}
  .burger{display:block;flex-shrink:0}
}
@media(max-width:540px){
  .wordmark span{display:none}
}

/* ---------- sections ---------- */
.band{padding:clamp(60px,8vw,112px) 0;border-top:1px solid var(--line)}
.band.first{border-top:none}
.band.ink{background:var(--ink);color:var(--white);border-top:none}
.band.ink .lede,.band.ink p{color:rgba(255,255,255,.84)}
.band.ink .eyebrow{color:var(--brass)}
.band.ink .fine{color:rgba(255,255,255,.68)}
.band.white{background:var(--white)}
.hero{padding:clamp(48px,7vw,84px) 0 clamp(52px,7vw,84px)}
.hero h1{max-width:19ch}
.hero .lede{margin-top:24px}
.sechead{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,58px)}
@media(min-width:920px){.sechead{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:56px;align-items:end}}
.kicker{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep);
  border:1px solid rgba(133,96,36,.35);border-radius:100px;padding:7px 14px;margin-bottom:26px}
.band.ink .kicker{color:var(--brass);border-color:rgba(201,154,69,.45)}

/* ---------- signature: the capacity panel ----------
   No comparison bars. Manual effort on top, what it becomes underneath, an arrow
   between them, and a figure group for the capacity claim. */
.cap{margin-top:clamp(44px,6vw,68px);background:var(--white);border:1px solid var(--line);
  border-radius:calc(var(--r) * 2);padding:clamp(24px,3.4vw,40px);
  box-shadow:0 24px 60px -40px rgba(15,23,32,.55)}
.cap-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
  padding-bottom:22px;margin-bottom:clamp(22px,3vw,30px);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate)}

.flow{display:grid;justify-items:start;gap:0}
.flow-step{display:grid;gap:5px}
.flow-label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate)}
.flow-value{font-size:clamp(26px,4.2vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.flow-step.is-now .flow-label{color:var(--brass-deep)}
.flow-step.is-now .flow-value{color:var(--brass-deep)}
.flow-arrow{display:block;margin:14px 0 14px 2px;color:var(--brass);flex-shrink:0}
.flow-arrow svg{display:block}
.flow-note{margin:10px 0 0;font-size:15.5px;color:var(--slate);max-width:44ch}

.cap-foot{display:grid;gap:22px;align-items:center;
  margin-top:clamp(26px,3.4vw,34px);padding-top:clamp(24px,3vw,30px);border-top:2px solid var(--ink)}
@media(min-width:720px){.cap-foot{grid-template-columns:auto minmax(0,1fr);gap:32px}}
.cap-foot .big{font-size:clamp(28px,4.2vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.04}
.cap-foot .big em{font-style:normal;color:var(--brass-deep)}
.cap-foot p{margin:10px 0 0;max-width:46ch;font-size:15.5px;color:var(--slate)}

/* The capacity claim stands on the sentence. An illustration here — three
   suited silhouettes was the previous attempt — is the visual vocabulary of a
   consulting deck, and it was artwork nobody had verified on a real screen.
   Restraint is the safer and better answer in front of buyers. */
.cap-foot{display:block}
.cap-foot .big{display:block;max-width:24ch}
.cap-foot p{margin-top:14px}

/* Zestymate: the carrier's page becomes a page you can work in */
.glyph{display:block}
.glyph .sheet-back{fill:var(--stock);stroke:var(--line)}
.glyph .sheet-front{fill:var(--white);stroke:var(--ink);stroke-width:1.5}
.glyph .row-dead{fill:#C6CDD2}
.glyph .row-live{fill:var(--brass)}
.glyph .caret{fill:var(--ink)}
.glyph .row-live{opacity:0}
.glyph.in .row-live{opacity:1;transition:opacity .5s ease}
.glyph.in .row-live:nth-of-type(2){transition-delay:.1s}
.glyph.in .row-live:nth-of-type(3){transition-delay:.2s}

/* Contents Captain: an inventory of many lines, reviewed in one pass */
.grid-glyph{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;max-width:340px}
.grid-glyph i{display:block;aspect-ratio:1;border-radius:2px;background:#D3D9DD}
.grid-glyph i.on{background:var(--brass)}
.grid-glyph i.on{opacity:0}
.grid-glyph.in i.on{opacity:1;transition:opacity .5s ease}

@media(prefers-reduced-motion:reduce){
}

/* ---------- tool buttons ---------- */
.tools-grid{display:grid;gap:16px}
@media(min-width:820px){.tools-grid{grid-template-columns:1fr 1fr}}
a.tool{display:flex;flex-direction:column;background:var(--white);
  border:2px solid var(--ink);border-radius:calc(var(--r) * 2);
  padding:clamp(22px,2.4vw,28px);text-decoration:none;
  box-shadow:4px 4px 0 0 rgba(15,23,32,.12);
  transition:transform .16s ease,box-shadow .16s ease}
a.tool:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 rgba(15,23,32,.18)}
a.tool:active{transform:translate(1px,1px);box-shadow:2px 2px 0 0 rgba(15,23,32,.18)}
a.tool .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
a.tool .nm{font-size:clamp(21px,2.2vw,25px);font-weight:700;letter-spacing:-.03em}
a.tool .pr{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--slate);white-space:nowrap}
a.tool .dk{margin:0;font-size:16.5px;line-height:1.45;color:var(--deep)}
a.tool .gain{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep)}
a.tool .cta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:22px;padding:13px 18px;background:var(--ink);color:var(--white);
  border-radius:var(--r);font-size:15px;font-weight:600;transition:background .16s ease}
a.tool .cta i{font-style:normal;font-size:18px;line-height:1}
a.tool:hover .cta{background:var(--brass-deep)}

/* ---------- notes ---------- */
.cols{display:grid;gap:30px}
@media(min-width:760px){.cols.two{grid-template-columns:1fr 1fr;gap:48px}}
@media(min-width:920px){.cols.three{grid-template-columns:repeat(3,1fr);gap:40px}}
.note{border-top:3px solid var(--ink);padding-top:20px}
.band.ink .note{border-top-color:var(--brass)}
.note h3{margin-bottom:10px}
.note p{margin:0;font-size:16px;color:var(--slate)}
.band.ink .note p{color:rgba(255,255,255,.78)}

/* ---------- spec list ---------- */
.spec{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.spec li{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:720px){.spec li{grid-template-columns:230px minmax(0,1fr);gap:36px}}
.spec b{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass-deep);padding-top:2px}
.spec span{font-size:16.5px;color:var(--deep)}
.band.ink .spec{border-top-color:var(--line-dark)}
.band.ink .spec li{border-bottom-color:var(--line-dark)}
.band.ink .spec span{color:rgba(255,255,255,.86)}
.band.ink .spec b{color:var(--brass)}

/* ---------- pricing ---------- */
.plans{display:grid;gap:16px;margin-top:clamp(38px,5vw,60px)}
@media(min-width:980px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{background:var(--white);border:1px solid var(--line);border-radius:calc(var(--r) * 2);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column}
.plan.feature{background:var(--ink);color:var(--white);border-color:var(--ink)}
@media(min-width:980px){.plan.feature{grid-column:1 / -1}}
.plan .hdr{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 20px}
.plan .nm{font-size:22px;font-weight:700;letter-spacing:-.028em}
.plan .amt{font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.plan .amt em{font-style:normal;font-size:13px;font-weight:500;color:var(--slate)}
.plan.feature .amt em{color:rgba(255,255,255,.7)}
.plan .dk{margin:14px 0 0;font-size:16px;color:var(--slate)}
.plan.feature .dk{color:rgba(255,255,255,.82)}
.inc{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.plan.feature .inc{border-top-color:var(--line-dark)}
.inc li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;color:var(--deep)}
.plan.feature .inc li{color:rgba(255,255,255,.86)}
.inc li i{font-style:normal;color:var(--brass-deep);font-weight:700}
.plan.feature .inc li i{color:var(--brass)}
.inc .q{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- credits table ---------- */
.grid-t{width:100%;border-collapse:collapse;font-size:16px}
.grid-t th{text-align:left;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
  padding:0 14px 14px 0;border-bottom:2px solid var(--ink)}
.grid-t td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.grid-t .r{text-align:right;padding-right:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:500;white-space:nowrap}
.grid-t tbody tr:last-child td{border-bottom:none}
.band.ink .grid-t th{color:rgba(255,255,255,.7);border-bottom-color:var(--brass)}
.band.ink .grid-t td{border-bottom-color:var(--line-dark);color:rgba(255,255,255,.88)}

/* ---------- checkout picker ---------- */
.pick{display:grid;gap:10px;margin:0 0 24px}
.pick label{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:18px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:border-color .15s ease}
.pick label:hover{border-color:var(--slate)}
.pick input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.pick .nm{font-size:16.5px;font-weight:600}
.pick .dk{display:block;font-size:14.5px;color:var(--slate);font-weight:400;margin-top:2px}
.pick .pr{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pick label.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.seats{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px;background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:24px}
.seats .lab{font-size:16.5px;font-weight:600;flex:1;min-width:180px}
.seats .lab span{display:block;font-size:14.5px;font-weight:400;color:var(--slate);margin-top:2px}
.stepper{display:flex;align-items:center;gap:0}
.stepper button{width:44px;height:44px;font-size:20px;font-weight:600;background:var(--stock);
  border:1px solid var(--line);cursor:pointer;font-family:var(--sans);color:var(--ink)}
.stepper button:first-child{border-radius:var(--r) 0 0 var(--r)}
.stepper button:last-child{border-radius:0 var(--r) var(--r) 0}
.stepper button:hover{background:var(--ink);color:var(--white)}
.stepper output{min-width:54px;text-align:center;font-family:var(--mono);font-size:17px;font-weight:600;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:44px;line-height:44px}
.sum{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 0 24px}
.sum span{font-size:15.5px;color:var(--slate)}
.sum b{font-family:var(--mono);font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:20px}
.field > span{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.field input{width:100%;padding:15px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--white);font-family:var(--sans);font-size:16.5px;color:var(--ink)}
.field input:focus{border-color:var(--ink);outline:none}
.field input.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
.msg{font-size:15px;line-height:1.5;padding:14px 16px;border-radius:var(--r);margin-bottom:20px}
.msg.err{background:rgba(138,62,51,.08);color:#6E2E25;border:1px solid rgba(138,62,51,.3)}
.msg.ok{background:rgba(31,107,74,.08);color:#155238;border:1px solid rgba(31,107,74,.3)}
.msg[hidden]{display:none}

/* ---------- credential card ---------- */
.cred{background:var(--white);border:1.5px solid var(--ink);border-radius:calc(var(--r) * 2);
  padding:28px;margin:30px 0}
.cred .k{font-family:var(--mono);font-size:clamp(24px,3.6vw,34px);letter-spacing:.18em;
  font-weight:600;word-break:break-all}

/* ---------- workspace ---------- */
.ws{display:grid;min-height:calc(100vh - 70px)}
@media(min-width:940px){.ws{grid-template-columns:300px minmax(0,1fr)}}
.rail{border-right:1px solid var(--line);padding:30px var(--gut);background:var(--white)}
@media(min-width:940px){.rail{padding:30px 26px}}
.rail .who{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.rail .who b{display:block;font-size:16px;font-weight:600;word-break:break-all}
.rail .who span{font-size:14px;color:var(--slate)}
.tools{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tools button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:1px solid transparent;border-radius:var(--r);padding:14px;text-align:left;
  cursor:pointer;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink);
  transition:background .15s ease}
.tools button:hover{background:var(--stock)}
.tools button[aria-selected=true]{background:var(--ink);color:var(--white);font-weight:600}
.tools button[aria-selected=true] .st{color:var(--brass)}
.tools .st{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.tools button.locked{color:var(--slate)}
.meter{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.meter h4{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);margin:0 0 14px}
.meter .row{display:flex;justify-content:space-between;gap:10px;font-size:15px;padding:7px 0}
.meter .row b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.meter .bal{margin-top:14px;padding:14px;background:var(--stock);border-radius:var(--r);
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;font-weight:600}
.stage{display:flex;flex-direction:column;min-height:60vh}
.stage iframe{width:100%;flex:1;border:none;min-height:calc(100vh - 70px)}
.slot{padding:clamp(32px,5vw,64px) var(--gut);max-width:760px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(48px,6vw,76px) 0 32px;font-size:16px}
.foot a{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--white);border-bottom-color:var(--brass)}
.foot-grid{display:grid;gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
@media(min-width:840px){.foot-grid{grid-template-columns:minmax(0,1.6fr) 1fr 1fr;gap:48px}}
.foot .foot-h{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot .mark{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--white);margin-bottom:12px}
.foot .base{padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:14.5px}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.rise.in{opacity:1;transform:none;transition:none}
  .fill{transition:none}
  .btn:hover,.inst a:hover{transform:none}
}

/* ==========================================================================
   THE HERO: the carrier's estimate, and the same estimate inside Zestymate.
   Driven by a button, never by scroll position, and the conversion is staged so
   it can be watched: pages read, then rows arriving, then a figure being edited.
   The right-hand state is styled to match the actual tool — navy, gold,
   Cormorant Garamond, white line-item cards — not an invented interface.
   ========================================================================== */
.morph{position:relative;margin-top:clamp(30px,4vw,46px)}
.morph-frame{position:relative;border-radius:calc(var(--r) * 2);overflow:hidden;
  aspect-ratio:16/11;background:#FBFAF7;
  box-shadow:0 40px 90px -50px rgba(10,16,22,.55);border:1px solid var(--line)}
@media(max-width:720px){.morph-frame{aspect-ratio:3/4}}
.morph-layer{position:absolute;inset:0;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.3,1),filter .55s ease}

/* --- their document --- */
.paper-doc{background:#FBFAF7;padding:clamp(14px,2.3vw,28px);
  font-family:'Times New Roman',Times,serif;color:#14181C;overflow:hidden}
.morph.is-live .paper-doc{opacity:0;transform:scale(.97) translateY(-10px);filter:blur(2.5px);pointer-events:none}
.paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  border-bottom:1.5px solid #14181C;padding-bottom:8px;margin-bottom:12px}
.paper-firm{font-weight:700;font-size:clamp(11px,1.4vw,16px);display:flex;align-items:center;gap:8px}
.paper-kicker{font-family:var(--mono);font-size:clamp(7.5px,.85vw,10px);letter-spacing:.16em;
  text-transform:uppercase;color:#5A6169;display:block;margin-bottom:5px;font-weight:400}
.paper-meta{font-size:clamp(7.5px,.9vw,10.5px);text-align:right;color:#3A424A;line-height:1.55}
.paper-grid{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
  font-size:clamp(7.5px,.9vw,11px);margin-bottom:11px}
.paper-grid dt{color:#5A6169}
.paper-grid dd{margin:0;font-weight:600}
.paper-room{display:flex;justify-content:space-between;font-weight:700;
  font-size:clamp(8.5px,1vw,12px);margin-bottom:6px}
.redact{display:inline-block;background:#0A1016;border-radius:1px;height:.94em;
  vertical-align:-.14em;min-width:2.2em}
.redact.w1{width:7.4em}.redact.w2{width:5.6em}.redact.w3{width:9.4em}
.redact.w4{width:4.4em}.redact.w5{width:11em}
.paper-table{width:100%;border-collapse:collapse;font-size:clamp(7px,.85vw,10.5px)}
.paper-table th{text-align:right;font-weight:700;border-bottom:1px solid #14181C;
  padding:3px;font-size:clamp(6px,.72vw,9px);letter-spacing:.05em}
.paper-table th:first-child{text-align:left}
.paper-table td{padding:2.5px 3px;text-align:right;border-bottom:.5px solid #DCD9D2}
.paper-table td:first-child{text-align:left}
.paper-foot{display:flex;justify-content:space-between;margin-top:9px;
  font-size:clamp(6.5px,.82vw,10px);color:#5A6169;border-top:1px solid #14181C;padding-top:6px}

/* --- the same estimate in Zestymate --- */
.app-doc{background:#FBFAF7;color:#1a1f29;opacity:0;transform:scale(1.015);
  display:flex;flex-direction:column;font-family:var(--sans);pointer-events:none}
.morph.is-live .app-doc{opacity:1;transform:none}
.zt-bar{display:flex;align-items:center;gap:9px;padding:clamp(9px,1.4vw,14px) clamp(12px,2vw,20px);
  background:#fff;border-bottom:1px solid #E7E2D8;flex-shrink:0}
.zt-dot{width:7px;height:7px;border-radius:7px;background:#C9A24B;flex-shrink:0}
.zt-name{font-family:var(--display);font-weight:600;
  font-size:clamp(13px,1.7vw,21px);color:#162A45;line-height:1}
.zt-save{margin-left:auto;font-family:var(--mono);font-size:clamp(7.5px,.85vw,10px);
  letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
.zt-tabs{display:flex;gap:2px;background:#fff;border-bottom:1px solid #E7E2D8;
  padding:0 clamp(6px,1.4vw,14px);flex-shrink:0;overflow:hidden}
.zt-tab{padding:clamp(7px,1.1vw,12px) clamp(7px,1.2vw,15px);font-size:clamp(8px,.95vw,12.5px);
  font-weight:500;color:#6B7280;border-bottom:2.5px solid transparent;white-space:nowrap}
.zt-tab.on{color:#1F3A5F;border-bottom-color:#C9A24B;font-weight:600}
.zt-body{flex:1;padding:clamp(10px,1.7vw,20px);overflow:hidden;display:flex;flex-direction:column}
.zt-h{font-family:var(--display);font-size:clamp(12px,1.6vw,20px);color:#1F3A5F;
  font-weight:600;line-height:1.1}
.zt-sub{font-size:clamp(7.5px,.88vw,11px);color:#6B7280;margin:3px 0 clamp(8px,1.2vw,14px)}
.zt-rows{display:flex;flex-direction:column;gap:clamp(3px,.5vw,6px);flex:1}
.zt-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:clamp(5px,.9vw,11px);
  align-items:center;padding:clamp(5px,.8vw,9px) clamp(6px,1vw,11px);background:#fff;
  border:1px solid #E7E2D8;border-left:3px solid #C9C3B6;border-radius:9px;
  font-size:clamp(7.5px,.92vw,13px);opacity:0;transform:translateY(6px)}
.zt-row.in{opacity:1;transform:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1)}
.zt-code{font-family:var(--mono);font-size:clamp(7px,.8vw,11px);color:#555B64;
  background:#F4F1EA;border-radius:4px;padding:1px 5px;white-space:nowrap}
.zt-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zt-q,.zt-p{font-size:clamp(6.5px,.8vw,11px);color:#6B7280;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.zt-t{font-weight:600;color:#162A45;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:clamp(7.5px,.9vw,12.5px)}
.zt-row.editing{border-left-color:#C9A24B;box-shadow:0 0 0 2px rgba(201,162,75,.24)}
.zt-row.editing .zt-p{color:#1F3A5F;font-weight:600;border:1px solid #1F3A5F;
  border-radius:5px;padding:0 3px;background:#fff;position:relative}
.zt-row.editing .zt-p::after{content:'';position:absolute;right:-2px;top:12%;width:1.5px;height:76%;
  background:#1F3A5F;animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}
.zt-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-shrink:0;
  margin-top:clamp(8px,1.2vw,14px);padding-top:clamp(8px,1.1vw,12px);border-top:1.5px solid #162A45}
.zt-foot .lab{font-family:var(--mono);font-size:clamp(6.5px,.78vw,10px);letter-spacing:.12em;
  text-transform:uppercase;color:#6B7280}
.zt-foot .amt{font-family:var(--mono);font-size:clamp(11px,1.7vw,22px);font-weight:600;
  color:#162A45;font-variant-numeric:tabular-nums}

/* --- the control strip --- */
.morph-cap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.morph-go{font-family:var(--sans);font-size:16px;font-weight:600;padding:14px 24px;
  border-radius:var(--r);border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;transition:transform .16s,background .16s}
.morph-go:hover{transform:translateY(-1px);background:#1B2733}
.morph-go[disabled]{opacity:.55;cursor:default;transform:none}
.morph-state{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);min-height:1.2em}
.morph-state b{color:var(--brass-deep);font-weight:500}
.morph-reset{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);background:none;border:1px solid var(--line);
  border-radius:100px;padding:8px 15px;cursor:pointer}
.morph-reset:hover{border-color:var(--ink);color:var(--ink)}
.morph-reset[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .morph-layer,.zt-row{transition:none}
  .zt-row.editing .zt-p::after{animation:none}
}

/* ==========================================================================
   THE PARSER: dark instrument set into the paper page. A visitor drops a real
   carrier PDF and it is read here, in their browser, and never uploaded.
   ========================================================================== */
.instr{background:var(--ink-deep);color:#E8EDF2;border-radius:calc(var(--r) * 2);
  padding:clamp(22px,3.2vw,40px);box-shadow:0 40px 90px -55px rgba(10,16,22,.85)}
.instr-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
  padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:clamp(20px,2.6vw,28px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.instr-top b{color:var(--brass);font-weight:500}
.drop{border:1.5px dashed rgba(201,154,69,.55);border-radius:var(--r);
  padding:clamp(26px,4vw,46px) clamp(18px,3vw,32px);text-align:center;transition:background .18s,border-color .18s}
.drop.over{background:rgba(201,154,69,.1);border-color:var(--brass)}
.drop h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,30px);
  letter-spacing:-.015em;color:#fff;margin-bottom:8px}
.drop p{color:rgba(255,255,255,.66);font-size:15.5px;max-width:52ch;margin:0 auto 20px}
.drop .privacy{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
  border:1px solid rgba(201,154,69,.4);border-radius:100px;padding:6px 13px;margin-top:16px}
.drop-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn-instr{font-family:var(--sans);font-size:15px;font-weight:600;padding:13px 22px;
  border-radius:var(--r);border:1.5px solid var(--brass);background:var(--brass);color:var(--ink-deep);
  cursor:pointer;transition:background .16s,transform .16s}
.btn-instr:hover{background:#D9A94E;transform:translateY(-1px)}
.btn-instr.ghost{background:transparent;color:var(--brass)}
.btn-instr.ghost:hover{background:rgba(201,154,69,.12)}

.readout{display:none;gap:clamp(18px,2.4vw,26px)}
.readout.on{display:grid}
.readout-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.readout-stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:2px solid rgba(201,154,69,.55);padding-top:12px}
.stat b{display:block;font-family:var(--mono);font-size:clamp(20px,2.8vw,32px);font-weight:600;
  color:#fff;font-variant-numeric:tabular-nums;line-height:1.05}
.stat span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.stat.money b{color:var(--brass)}
.feed{font-family:var(--mono);font-size:clamp(9.5px,1.05vw,12.5px);max-height:260px;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.14)}
.feed-row{display:grid;grid-template-columns:1.9fr .5fr .5fr .62fr;gap:8px;padding:5px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(4px)}
.feed-row.in{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.feed-row span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8)}
.feed-row .rm{color:var(--brass)}
.feed-row.hd{color:rgba(255,255,255,.45);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:1;transform:none;border-bottom-color:rgba(255,255,255,.2)}
.instr-note{font-size:14.5px;color:rgba(255,255,255,.6);margin:0}
.instr-note b{color:var(--brass);font-weight:500}
.instr-err{font-family:var(--mono);font-size:12.5px;color:#FF8F86;margin:14px 0 0;line-height:1.5}

/* Policy Examiner: a term, and the page it came from */
.glyph .cite{fill:var(--brass);opacity:0}
.glyph.in .cite{opacity:1;transition:opacity .45s ease}
.glyph.in .cite:nth-of-type(2){transition-delay:.12s}
.glyph.in .cite:nth-of-type(3){transition-delay:.24s}
.glyph .redact-bar{fill:var(--ink)}

/* Field Report: plates, captioned, one carrying its coordinates */
.glyph .plate rect:first-child{fill:#D3D9DD}
.glyph .plate .capbar{fill:#AEB7BE}
.glyph .plate .capbar.live{fill:var(--brass);opacity:0}
.glyph.in .plate .capbar.live{opacity:1;transition:opacity .45s ease}
.glyph.in .plate:nth-of-type(5) .capbar.live{transition-delay:.12s}
.glyph.in .plate:nth-of-type(6) .capbar.live{transition-delay:.24s}
.glyph .plate.on rect:first-child{fill:var(--ink)}
.glyph .pin{fill:var(--brass);opacity:0}
.glyph.in .pin{opacity:1;transition:opacity .5s ease .3s}
@media(prefers-reduced-motion:reduce){
  .glyph .cite,.glyph .capbar.live,.glyph .pin{opacity:1;transition:none}
}

/* ==========================================================================
   Keyboard and assistive use. Previously unaudited, which for a professional
   audience is a functional defect and not a nicety: a firm owner tabbing
   through a pricing page should always be able to see where they are.
   ========================================================================== */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--navy);
  outline-offset:2px;
  border-radius:4px;
}
/* Never remove the ring without replacing it. */
:where(a,button):focus:not(:focus-visible){outline:none}

.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0;
  font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none}
.skip:focus,.skip:focus-visible{left:0;outline:3px solid var(--brass);outline-offset:-3px}

/* A visible ring needs somewhere to sit: the dark bands invert it. */
.band.ink :where(a,button):focus-visible,
.instr :where(a,button,input):focus-visible{outline-color:var(--brass)}

/* ==========================================================================
   Contents Captain: a schedule arriving as quantity and description, and the
   same schedule priced. Same machinery as the Zestymate conversion — one frame,
   two states, button-driven — with the tool's own review screen on the far side.
   ========================================================================== */
.cc-paper td:first-child{width:3em;text-align:left}
.cc-paper td:last-child{text-align:left}

.cc-rows{display:flex;flex-direction:column;gap:clamp(3px,.5vw,6px);flex:1}
.cc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;
  gap:clamp(5px,.9vw,11px);align-items:center;background:#fff;
  border:1px solid #E7E2D8;border-left:3px solid #C9C3B6;border-radius:9px;
  padding:clamp(5px,.8vw,9px) clamp(6px,1vw,11px);
  font-size:clamp(7.5px,.92vw,13px);opacity:0;transform:translateY(6px)}
.cc-row.in{opacity:1;transform:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1),border-left-color .3s ease}
.cc-row.in{border-left-color:#2f7d52}
.cc-q{font-family:var(--mono);font-size:clamp(7px,.82vw,11px);color:#555B64;
  background:#F4F1EA;border-radius:4px;padding:1px 5px;white-space:nowrap}
.cc-d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-src{font-size:clamp(6.5px,.78vw,10.5px);color:#6B7280;white-space:nowrap}
.cc-p{font-family:var(--mono);font-weight:600;color:#162A45;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:clamp(7.5px,.9vw,12.5px)}
.cc-conf{font-family:var(--mono);font-size:clamp(6px,.72vw,9.5px);letter-spacing:.08em;
  text-transform:uppercase;color:#1D4B28;background:#E7F1E9;border:1px solid #BFDcc7;
  border-radius:100px;padding:1px 6px;white-space:nowrap}
.cc-src,.cc-p,.cc-conf{opacity:0}
.cc-row.priced .cc-src,.cc-row.priced .cc-p,.cc-row.priced .cc-conf{
  opacity:1;transition:opacity .28s ease}

@media (max-width:640px){
  .cc-row{grid-template-columns:auto minmax(0,1fr) auto}
  .cc-src{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cc-row,.cc-src,.cc-p,.cc-conf{transition:none}
}

/* ==========================================================================
   TOUCH AND DISTANCE
   --------------------------------------------------------------------------
   This site is demonstrated on a touch screen at a trade booth, standing, by
   people who are not being careful, and read by a second and third person over
   their shoulder. Apple's 44px minimum is a phone-in-hand figure; a booth needs
   more. Every control below clears 56px in its smallest dimension and no
   interactive label sits under 15px.

   Nothing here changes a colour or a typeface — the identity is already set.
   It changes only what a finger has to hit and what an eye has to resolve.
   ========================================================================== */
:root{ --hit:56px }

.btn{ min-height:var(--hit); padding:0 26px; font-size:16px }
.btn.sm{ min-height:48px; padding:0 18px }
.btn-instr{ min-height:var(--hit); padding:0 24px; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center }

.nav{ gap:8px }
.nav a{
  min-height:var(--hit); display:inline-flex; align-items:center;
  padding:0 14px; font-size:16px; border-bottom:0;
  border-radius:var(--r); position:relative;
}
/* the brass underline was a 2px border on a 21px target; it becomes a rule
   under a control tall enough to hit */
.nav a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:10px; height:2px;
  background:transparent; border-radius:1px;
}
.nav a:hover::after,.nav a[aria-current]::after{ background:var(--brass) }
.nav a.enter{ padding:0 22px; min-height:var(--hit) }
.nav a.enter::after{ display:none }
.burger{ min-width:var(--hit); min-height:var(--hit) }
a.wordmark{ min-height:48px; display:inline-flex; align-items:center }

/* a whole tool card is the target, not the link inside it */
a.tool{ min-height:var(--hit) }
a.tool .cta{ min-height:48px; display:inline-flex; align-items:center; gap:.5em }
a.tool .gain{ font-size:13px }
a.tool .pr{ font-size:15px }

/* form controls anywhere in the shell */
input[type=text],input[type=email],input[type=password],input[type=number],
select,textarea,button{ font-size:16px }
input[type=text],input[type=email],input[type=password],input[type=number],select{
  min-height:var(--hit); padding:0 14px;
}
textarea{ padding:12px 14px }
label{ font-size:15px }

/* pricing and plan pickers are tapped, not clicked */
.plan,.pick{ }
.pick label,.plan label{ min-height:var(--hit); display:flex; align-items:center; gap:12px }
.pick input[type=checkbox],.pick input[type=radio],
.plan input[type=checkbox],.plan input[type=radio]{ width:24px; height:24px; accent-color:var(--ink) }

.foot a{ min-height:48px; display:inline-flex; align-items:center }

/* the seat stepper is the one control on the pricing page a finger has to
   land on repeatedly, so it gets the full booth target */
.stepper button{ width:var(--hit); height:var(--hit); font-size:24px }
.stepper input{ min-height:var(--hit); font-size:18px }

/* Nav and footer links resolve at 48px rather than 56. That is deliberate:
   they are navigation, not the controls a demo runs on, and a 56px footer of
   tool links pushes the page's actual content off a tablet screen. 48 clears
   the platform minimum with room to spare. */

/* Hover is the only affordance on several controls, and a touch screen has no
   hover. Where a device cannot hover, show the resting state as the affordance
   and drop the lift, which on touch just looks like a rendering glitch. */
@media (hover:none){
  .btn:hover,.btn-instr:hover{ transform:none }
  a.tool:hover{ transform:none }
  .nav a[aria-current]::after{ background:var(--brass) }
}

/* ==========================================================================
   THE HERO: PHOTOGRAPH TO ESTIMATE
   --------------------------------------------------------------------------
   A passer-by at a trade booth gives this five seconds. So the hero is not a
   claim about speed, it is the transformation running in front of them: a real
   photograph of one room, the counts that came out of it crossing the gap, and
   the carrier-format estimate assembling on the right. Every number is the
   real output of the sample room, not a mock-up.

   One 15s cycle drives everything, with each element offset inside it by its
   own delay. There is no JavaScript timer to drift, and the whole thing stops
   dead and shows its finished state for anyone who asked for less motion.
   ========================================================================== */
/* The copy and the transformation sit side by side, so the thing itself is
   level with the headline rather than 600px below it. On a landscape tablet
   the old stacked arrangement put two thirds of the stage under the fold,
   which is the one place a hero cannot afford to be. */
.hero .wrap{
  display:grid; grid-template-columns:minmax(300px,34%) minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:center;
}
.hero-copy{min-width:0}
.hero-stage{min-width:0}
@media(max-width:1040px){
  .hero .wrap{grid-template-columns:1fr; gap:32px}
}

.xform{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1.25fr);
  align-items:stretch; gap:0; margin:0; padding:0; position:relative;
}
@media(max-width:900px){
  .xform{grid-template-columns:1fr; gap:18px}
}

/* ---- the photograph ---- */
.xf-shot{
  position:relative; overflow:hidden; border-radius:var(--r) 0 0 var(--r);
  background:#1B2733; box-shadow:0 18px 44px rgba(15,23,32,.22);
  aspect-ratio:3/4; height:clamp(300px,42vh,430px); z-index:2;
}
@media(max-width:900px){
  .xf-shot{aspect-ratio:4/3; height:auto; max-height:280px; border-radius:var(--r)}
}
.xf-shot img{width:100%; height:100%; object-fit:cover; display:block}
.xf-frame{
  position:absolute; left:12px; bottom:12px; z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:rgba(18,35,58,.82);
  padding:6px 10px; border-radius:2px;
}
/* the reading pass, as a single sweep down the frame */
.xf-sweep{
  position:absolute; left:0; right:0; height:34%; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(201,162,75,0) 0%, rgba(201,162,75,.16) 62%, rgba(201,162,75,.9) 98%);
  border-bottom:1.5px solid var(--brass);
  animation:xf-sweep 15s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes xf-sweep{
  0%,4%   { transform:translateY(-40%); opacity:0 }
  8%      { opacity:1 }
  30%     { transform:translateY(300%); opacity:1 }
  34%,100%{ transform:translateY(300%); opacity:0 }
}

/* ---- the counts crossing the gap ---- */
.xf-gap{
  position:absolute; left:0; top:0; bottom:0; width:100%; z-index:5;
  pointer-events:none;
}
@media(max-width:900px){
  .xf-gap{position:static; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:auto}
}
.xf-chip{
  position:absolute; left:var(--seam,32%); white-space:nowrap; z-index:4;
  transform:translate(-50%,0) scale(.9); opacity:0;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.02em;
  color:var(--ink); background:#fff; border:1px solid var(--brass);
  padding:6px 11px; border-radius:100px;
  box-shadow:0 4px 14px rgba(15,23,32,.16);
  animation:xf-chip 15s ease-in-out infinite;
}
@media(max-width:900px){
  .xf-chip{position:static; transform:none; opacity:1; animation:none}
}
.xf-chip.c1{top:8%;  animation-delay:.9s}
.xf-chip.c2{top:24%; animation-delay:1.7s}
.xf-chip.c3{top:40%; animation-delay:2.5s}
.xf-chip.c4{top:56%; animation-delay:3.3s}
.xf-chip.c5{top:72%; animation-delay:4.1s}
@keyframes xf-chip{
  0%      { opacity:0; transform:translate(-90%,0) scale(.86) }
  6%      { opacity:1; transform:translate(-50%,0) scale(1) }
  40%     { opacity:1; transform:translate(-50%,0) scale(1) }
  48%     { opacity:0; transform:translate(10%,0) scale(.92) }
  100%    { opacity:0; transform:translate(10%,0) scale(.92) }
}

/* ---- the estimate ---- */
.xf-sheet{
  background:#fff; border:1px solid var(--line); border-radius:0 var(--r) var(--r) 0;
  box-shadow:0 18px 44px rgba(15,23,32,.16);
  padding:18px 20px 14px; display:flex; flex-direction:column;
  font-family:'Times New Roman',Times,serif; color:#111; overflow:hidden;
}
.xf-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  border-bottom:.7px solid #111; padding-bottom:6px;
}
.xf-firm{font-size:16px; font-weight:700}
.xf-meta{font-size:10px; line-height:1.5; text-align:right; color:#3A424A}
.xf-grp{font-size:12px; font-weight:700; margin:14px 0 4px}
.xf-tbl{width:100%; border-collapse:collapse; table-layout:auto}
.xf-tbl td{
  font-size:11.5px; padding:3.5px 0; border-bottom:.5px solid #E7E3DA;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.xf-tbl td.q,.xf-tbl td.u,.xf-tbl td.n{
  text-align:right; padding-left:10px; font-variant-numeric:tabular-nums; width:1%;
}
.xf-tbl td.u{text-align:left; padding-left:5px; color:#3A424A}
.xf-tbl tr{opacity:0; animation:xf-row 15s ease-out infinite}
.xf-tbl tr.r1{animation-delay:4.6s}
.xf-tbl tr.r2{animation-delay:5.0s}
.xf-tbl tr.r3{animation-delay:5.4s}
.xf-tbl tr.r4{animation-delay:5.8s}
.xf-tbl tr.r5{animation-delay:6.2s}
.xf-tbl tr.r6{animation-delay:6.6s}
@keyframes xf-row{
  0%   { opacity:0; transform:translateY(5px) }
  3%   { opacity:1; transform:translateY(0) }
  86%  { opacity:1; transform:translateY(0) }
  94%,100%{ opacity:0; transform:translateY(0) }
}
.xf-tot{
  margin-top:auto; padding-top:10px; border-top:.7px solid #111;
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-size:13px; opacity:0; animation:xf-row 15s ease-out infinite;
  animation-delay:7.2s;
}
.xf-num{
  font-size:21px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.xf-cap{
  margin:14px 0 0; max-width:58ch; font-size:14.5px; line-height:1.55;
  color:var(--slate);
}
.xf-cap b{color:var(--ink)}

/* Anyone who has asked for less motion gets the finished state, which is the
   informative one anyway: the photograph, its counts, and the estimate. */
@media (prefers-reduced-motion:reduce){
  .xf-sweep{display:none}
  .xf-chip,.xf-tbl tr,.xf-tot{animation:none; opacity:1; transform:translate(-50%,0)}
  .xf-chip{position:static; transform:none; display:inline-block; margin:0 0 8px}
  .xf-gap{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px}
}