/* ============================================================================
   Telecaller24 — design system
   Implements PART A of telecaller24-master-design-prompt.md as plain CSS.
   No Tailwind: these pages are generated static HTML with no build step on the
   server, so the tokens are real custom properties and the component grammar
   is real classes.
   ========================================================================= */

/* --- fonts (self-hosted; a Google Fonts round trip is expensive on Indian
       mobile data, and the variable file is one 27 KB request) ------------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;
  font-display:swap;src:url(/site-assets/fonts/plus-jakarta-sans-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;
  font-display:swap;src:url(/site-assets/fonts/jetbrains-mono-var.woff2) format('woff2')}

/* --- A2 tokens ----------------------------------------------------------- */
:root{
  --primary:#2563EB; --primary-700:#1D4ED8; --primary-50:#EFF6FF;
  --success:#10B981; --success-600:#059669; --success-50:#ECFDF5;
  --loss:#E11D48;    --loss-50:#FFF1F2;
  --caution:#F59E0B; --caution-50:#FFFBEB;
  --ink:#0F172A; --ink-body:#475569; --ink-mute:#94A3B8; --ink-line:#E2E8F0;
  --page:#F8FAFC; --card:#FFFFFF; --deep:#020617;
  --wa:#25D366;

  --r-xl:.75rem; --r-2xl:1rem; --r-3xl:1.5rem;
  /* Depth ladder. Every elevated surface picks a rung; nothing invents its own
     shadow. rest = sitting on the page, lift = hover, xl = the anchor tile of a
     bento, frame/float = a device leaving the page entirely. */
  --sh-rest:0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.04);
  --sh-lift:0 20px 40px -20px rgba(37,99,235,.18), 0 0 0 1px rgba(226,232,240,1);
  --sh-xl:0 28px 56px -20px rgba(37,99,235,.16), 0 10px 24px -14px rgba(15,23,42,.10),
          0 0 0 1px rgba(226,232,240,.95);
  --sh-frame:0 40px 80px -32px rgba(15,23,42,.30);
  --sh-float:0 56px 88px -40px rgba(15,23,42,.42), 0 24px 44px -28px rgba(37,99,235,.20);

  /* The lit top edge is the whole difference between real glass and a
     translucent rectangle — it reads as thickness, which is what makes the
     card look like an object rather than a fill. */
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.80);
  --glass-edge-dark:inset 0 1px 0 rgba(255,255,255,.10);

  --tc-blur:blur(14px) saturate(165%);
  --tc-glass:rgba(255,255,255,.66);
  --tc-ease:cubic-bezier(.16,1,.3,1);
  --tc-mesh-a:radial-gradient(60% 60% at 20% 0%, rgba(37,99,235,.12), transparent 70%);
  --tc-mesh-b:radial-gradient(50% 50% at 85% 20%, rgba(99,102,241,.10), transparent 70%);
  --tc-mesh-c:radial-gradient(45% 45% at 50% 100%, rgba(16,185,129,.08), transparent 70%);

  --header-h:64px;
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* component rules below set display, and would win otherwise */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
::selection{background:#DBEAFE}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:12px 18px;
  border-radius:0 0 var(--r-xl) 0;font-weight:600;box-shadow:var(--sh-lift)}
.skip-link:focus{left:0}

/* --- A4 layout ----------------------------------------------------------- */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:32px}}
section{position:relative}
.band{padding-block:64px}
@media(min-width:768px){.band{padding-block:96px}}
.band--tight{padding-block:48px}
@media(min-width:768px){.band--tight{padding-block:64px}}
.band--white{background:var(--card)}
.band--page{background:var(--page)}
.band--deep{background:var(--deep);color:#E2E8F0}
.band--deep h2,.band--deep h3,.band--deep .metric{color:#fff}
.band--deep .lead,.band--deep p{color:#94A3B8}
.hero{padding-top:56px;padding-bottom:64px}
@media(min-width:768px){.hero{padding-top:96px;padding-bottom:112px}}

/* mesh: two blobs max per viewport, never behind body text */
.mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:blur(64px);overflow:hidden}
.mesh::before,.mesh::after{content:'';position:absolute;inset:0}
.mesh::before{background:var(--tc-mesh-a)}
.mesh::after{background:var(--tc-mesh-b)}
.mesh--warm::after{background:var(--tc-mesh-c)}
.band--deep .mesh{opacity:.55}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(min-width:768px){.bento{gap:20px}}
.s2,.s3,.s4,.s6{grid-column:span 6}
@media(min-width:860px){
  .s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* --- A3 type ------------------------------------------------------------- */
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--primary);margin-bottom:14px;display:block}
.band--deep .eyebrow{color:#93C5FD}
h1,.h1{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
h2,.h2{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
h3,.h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
@media(min-width:768px){
  h1,.h1{font-size:56px}h2,.h2{font-size:38px}h3,.h3{font-size:20px}
}
p{color:var(--ink-body)}
.lead{font-size:18px;line-height:1.55;color:var(--ink-body);max-width:62ch}
@media(min-width:768px){.lead{font-size:21px}}
.body{font-size:16px;line-height:1.65;color:var(--ink-body)}
@media(min-width:768px){.body{font-size:17px}}
.small{font-size:14px;line-height:1.6;color:var(--ink-body)}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;font-size:12px;
  letter-spacing:.02em;color:var(--ink-mute);text-transform:uppercase}
.micro{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-mute)}
.metric{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--ink)}
@media(min-width:768px){.metric{font-size:104px}}
.metric--md{font-size:44px;line-height:.95}
@media(min-width:768px){.metric--md{font-size:64px}}
.metric--sm{font-size:34px;line-height:1}
@media(min-width:768px){.metric--sm{font-size:44px}}
.is-gain{color:var(--success)}.is-loss{color:var(--loss)}.is-price{color:var(--primary)}
.tight{max-width:62ch}
.measure{max-width:68ch}

/* --- A5 · glass card ----------------------------------------------------- */
.card{border-radius:var(--r-2xl);border:1px solid var(--ink-line);
  background:var(--tc-glass);backdrop-filter:var(--tc-blur);-webkit-backdrop-filter:var(--tc-blur);
  padding:24px;box-shadow:var(--sh-rest),var(--glass-edge);
  transition:transform .2s var(--tc-ease),box-shadow .2s var(--tc-ease)}
@media(min-width:768px){.card{padding:28px}}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-xl),var(--glass-edge)}
/* the anchor tile of a bento sits one rung higher at rest, so the eye lands on
   it before it lands on the quiet tiles around it */
.card--anchor{box-shadow:var(--sh-xl),var(--glass-edge)}
.card--flat{background:var(--card);backdrop-filter:none;box-shadow:var(--sh-rest)}
.card--flat:hover{transform:none;box-shadow:var(--sh-rest);border-color:#CBD5E1}
.card--tinted{background:rgba(239,246,255,.7)}
.card--rail{border-top:2px solid var(--success)}
.band--deep .card{background:rgba(255,255,255,.05);border-color:rgba(148,163,184,.22);
  box-shadow:var(--glass-edge-dark)}
.band--deep .card:hover{box-shadow:0 28px 56px -22px rgba(0,0,0,.65),var(--glass-edge-dark)}
.band--deep .card--anchor{box-shadow:0 28px 56px -22px rgba(0,0,0,.5),var(--glass-edge-dark)}
.card h3{margin-bottom:8px}
.card p{font-size:15px;line-height:1.6}
.card__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-line)}

/* --- layered 3D depth ----------------------------------------------------
   Depth lives in exactly two places on this site, and nowhere else: .card--anchor
   (declared with the cards above) lifts the one tile a bento is built around,
   and .tilt-l / .tilt-r (declared with the mockups below) hang a device in a
   perspective scene over a contact shadow. There is no general-purpose .scene
   or .float utility, because nothing here would use it and unused CSS is weight
   on a mobile connection. Depth that is everywhere reads as noise, not depth. */

/* --- A5 · ledger rule (signature #1) ------------------------------------- */
.ledger{display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-mute)}
.ledger::before{content:'—';color:var(--ink-line)}
.ledger::after{content:'';flex:1;height:1px;background:var(--ink-line)}
.band--deep .ledger{color:#64748B}
.band--deep .ledger::after{background:rgba(148,163,184,.25)}
.ledger--emerald::after{background:linear-gradient(90deg,var(--success),var(--ink-line) 40%)}

/* --- A5 · straight-answer slab (signature #2) ---------------------------- */
.slab{background:var(--caution-50);border-left:2px solid var(--caution);
  border-radius:0 var(--r-xl) var(--r-xl) 0;padding:16px 20px;color:#78350F;
  font-size:15px;line-height:1.6}
.slab p+p{margin-top:10px}
.slab strong{color:#78350F}
.band--deep .slab{background:rgba(245,158,11,.10);color:#FCD34D}
.band--deep .slab strong{color:#FDE68A}

/* --- A5 · after-call card (signature #3) --------------------------------- */
.acc{width:100%;max-width:300px;background:#fff;border-radius:20px;
  box-shadow:var(--sh-frame);border:1px solid var(--ink-line);overflow:hidden;font-size:13px}
.acc__top{padding:14px 16px 10px;border-bottom:1px solid var(--ink-line)}
.acc__who{font-weight:700;font-size:15px;color:var(--ink)}
.acc__meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute);margin-top:3px}
.acc__body{padding:12px 16px 14px;display:flex;flex-direction:column;gap:9px}
.acc__chips{display:flex;flex-wrap:wrap;gap:6px}
.acc__chip{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;
  border:1px solid var(--ink-line);color:var(--ink-body);background:#fff}
.acc__chip--on{background:var(--success-50);border-color:#A7F3D0;color:var(--success-600)}
.acc__note{border:1px dashed var(--ink-line);border-radius:10px;padding:8px 10px;
  color:var(--ink-mute);font-size:12px}
.acc__cta{display:flex;gap:8px}
.acc__cta span{flex:1;text-align:center;padding:9px;border-radius:10px;font-weight:600;font-size:12.5px}
.acc__cta span:first-child{background:var(--primary);color:#fff}
.acc__cta span:last-child{background:#F1F5F9;color:var(--ink-body)}
.acc__timer{padding:0 16px 12px}
.acc__timer i{display:block;height:3px;border-radius:2px;background:var(--ink-line);overflow:hidden}
.acc__timer i::after{content:'';display:block;height:100%;width:62%;background:var(--primary)}

/* --- A5 · device mockups -------------------------------------------------- */
.frame{position:relative}
.frame figcaption{position:absolute;left:14px;bottom:12px;z-index:2}
.browser{border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-frame),inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid var(--ink-line)}
.browser__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F1F5F9;
  border-bottom:1px solid var(--ink-line)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1;display:block}
.browser__url{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--ink-mute);background:#fff;border-radius:6px;padding:3px 10px;border:1px solid var(--ink-line)}
.browser img{display:block;width:100%}
/* 8px bezel, a lit outer rim and a darker inner one — the two rims are what
   make it read as a moulded frame instead of a black rounded rectangle */
.phone{border-radius:28px;background:linear-gradient(160deg,#1E293B,#0F172A 46%,#020617);
  padding:8px;max-width:280px;position:relative;
  box-shadow:var(--sh-frame),inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 0 0 1px rgba(148,163,184,.18)}
.phone::after{content:'';position:absolute;inset:8px;border-radius:20px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 42%)}
.phone img{border-radius:20px;width:100%;display:block}
/* Home hero: the after-call card floats over the dashboard on desktop. Below
   768px it stops floating and stacks — overlapping it there put it on top of
   the trust chips and pushed it past the left edge of the container. */
.heroart{position:relative;padding-bottom:56px}
.heroart__acc{position:absolute;left:0;bottom:0;width:min(260px,62%)}
@media(max-width:767px){
  .heroart{padding-bottom:0;display:flex;flex-direction:column;align-items:center;gap:20px}
  .heroart__acc{position:static;width:100%;max-width:300px}
  .heroart .frame{width:100%}
}
/* The two site-wide float angles. Kept small (6°/2.5°) because past about 8°
   a screenshot stops being readable, and the point of the mockup is the data
   inside it. Killed entirely under prefers-reduced-motion, below. */
.tilt-l{transform:perspective(1600px) rotateY(6deg) rotateX(2.5deg) rotate(-2deg);
  transition:transform .45s var(--tc-ease)}
.tilt-r{transform:perspective(1600px) rotateY(-6deg) rotateX(2.5deg) rotate(3deg);
  transition:transform .45s var(--tc-ease)}
.tilt-l:hover{transform:perspective(1600px) rotateY(2deg) rotateX(1deg) rotate(-1deg)}
.tilt-r:hover{transform:perspective(1600px) rotateY(-2deg) rotateX(1deg) rotate(1deg)}
/* the contact shadow — what makes a floating device look lit rather than pasted */
.tilt-l,.tilt-r{position:relative}
.tilt-l::after,.tilt-r::after{content:'';position:absolute;left:9%;right:9%;bottom:-22px;height:30px;
  border-radius:50%;z-index:-1;pointer-events:none;filter:blur(10px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(15,23,42,.20),transparent 72%)}
/* a floating frame casts a deeper shadow than a flat one — the inner rims are
   restated so this rule deepens the drop without flattening the bezel */
.tilt-l .browser,.tilt-r .browser{box-shadow:var(--sh-float),inset 0 1px 0 rgba(255,255,255,.9)}
.tilt-l .phone,.tilt-r .phone{box-shadow:var(--sh-float),inset 0 1px 0 rgba(255,255,255,.22),
  inset 0 0 0 1px rgba(148,163,184,.18)}
.tilt-l .acc,.tilt-r .acc{box-shadow:var(--sh-float)}
.sample{display:inline-block;background:rgba(15,23,42,.72);color:#fff;border-radius:6px;
  padding:3px 8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em}
.shot{border-radius:var(--r-2xl);border:1px solid var(--ink-line);overflow:hidden;
  box-shadow:var(--sh-rest);background:#fff}
.shot img{width:100%;display:block}

/* --- A5 · buttons -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;
  padding:0 24px;border-radius:var(--r-xl);font-weight:600;font-size:15px;border:1px solid transparent;
  cursor:pointer;transition:background .18s var(--tc-ease),border-color .18s var(--tc-ease),
  transform .1s var(--tc-ease);text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-700)}
.btn--secondary{background:#fff;border-color:var(--ink-line);color:var(--ink)}
.btn--secondary:hover{border-color:#CBD5E1}
.band--deep .btn--secondary{background:transparent;border-color:rgba(148,163,184,.35);color:#fff}
.btn--wa{background:transparent;color:var(--success-600);border-color:transparent;
  padding-inline:0;height:auto;font-size:15px;
  /* .btn is nowrap; this one carries a whole sentence and clipped at 360px */
  white-space:normal;text-align:center;line-height:1.5;max-width:100%}
.btn--wa:hover{text-decoration:underline}
.band--deep .btn--wa{color:var(--success)}
.btn--block{width:100%}
@media(max-width:640px){.btn--stack{width:100%}}
.btn--sm{height:40px;padding:0 16px;font-size:14px}

/* --- chips --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:#fff;border:1px solid var(--ink-line);font-size:13px;font-weight:500;color:var(--ink-body)}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success);flex:none}
.chip--plain::before{display:none}
.band--deep .chip{background:rgba(255,255,255,.05);border-color:rgba(148,163,184,.22);color:#CBD5E1}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em}
.pill--primary{background:var(--primary-50);color:var(--primary-700)}
.pill--caution{background:var(--caution-50);color:#B45309}
.pill--success{background:var(--success-50);color:var(--success-600)}
.pill--mute{background:#F1F5F9;color:var(--ink-body)}

/* --- A5 · comparison table ----------------------------------------------- */
.tablewrap{border-radius:var(--r-2xl);border:1px solid var(--ink-line);overflow:hidden;background:#fff}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{min-width:640px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--ink-line)}
.cmp thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);
  font-weight:600;background:var(--page);white-space:nowrap}
.cmp tbody tr:nth-child(even){background:var(--page)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child,.cmp th:first-child{font-weight:600;color:var(--ink);position:sticky;left:0;
  background:inherit;min-width:170px}
.cmp thead th:first-child{background:var(--page)}
.cmp tbody tr:nth-child(odd) td:first-child{background:#fff}
.cmp .us{background:var(--primary-50)!important;color:var(--ink);font-weight:600}
.cmp thead .us{border-top:2px solid var(--primary);background:var(--primary-50)!important;
  color:var(--primary-700)}
.tick{color:var(--success);font-weight:700}
.cross{color:#CBD5E1;font-weight:700}
.band--deep .tablewrap{background:rgba(255,255,255,.03);border-color:rgba(148,163,184,.2)}
.band--deep .cmp th,.band--deep .cmp td{border-color:rgba(148,163,184,.14);color:#CBD5E1}
.band--deep .cmp thead th{background:rgba(255,255,255,.03);color:#64748B}
.band--deep .cmp tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.band--deep .cmp td:first-child{color:#fff}
.band--deep .cmp tbody tr:nth-child(odd) td:first-child{background:transparent}
.band--deep .cmp .us{background:rgba(37,99,235,.16)!important;color:#fff}
.band--deep .cmp thead .us{color:#BFDBFE}
.scrollhint{margin-top:10px}

/* --- A5 · FAQ ------------------------------------------------------------- */
.faq{border-top:1px solid var(--ink-line)}
.faq details{border-bottom:1px solid var(--ink-line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);
  transform:rotate(45deg);transition:transform .2s var(--tc-ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 0 22px;max-width:68ch;font-size:16px;line-height:1.65;color:var(--ink-body)}
.faq__a p+p{margin-top:12px}
.faq__a .slab{margin-top:12px}

/* --- A5 · forms ----------------------------------------------------------- */
.form{background:#fff;border:1px solid var(--ink-line);border-radius:var(--r-2xl);padding:24px}
@media(min-width:768px){.form{padding:32px}}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;height:48px;border-radius:var(--r-xl);
  border:1px solid var(--ink-line);background:#fff;padding:0 16px;font-size:16px;color:var(--ink)}
.field textarea{height:auto;padding:12px 16px;min-height:120px;line-height:1.55}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2394A3B8' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary);
  outline-offset:2px;border-color:var(--primary)}
.field .help{display:block;font-size:13px;color:var(--ink-mute);margin-top:6px}
.field--2{display:grid;gap:18px}
@media(min-width:640px){.field--2{grid-template-columns:1fr 1fr}}
.checkline{display:flex;gap:11px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--ink-line)}
.checkline input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--primary)}
.checkline label{font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.checkline .help{font-size:13px;color:var(--ink-mute);display:block;margin-top:2px}

/* segmented control */
.seg{display:inline-flex;padding:4px;background:#F1F5F9;border-radius:var(--r-xl);gap:2px;
  border:1px solid var(--ink-line);flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:10px;padding:9px 16px;font-size:14px;
  font-weight:600;color:var(--ink-body);cursor:pointer;transition:background .18s var(--tc-ease)}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:var(--sh-rest)}

/* sliders (solutions calculators) */
.slider label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.slider output{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  background:var(--primary-50);color:var(--primary-700);border-radius:999px;padding:3px 10px}
.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:999px;background:var(--ink-line);outline-offset:6px}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--primary);
  box-shadow:var(--sh-rest);cursor:pointer;margin-top:-9px}
.slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;
  border:2px solid var(--primary);box-shadow:var(--sh-rest);cursor:pointer}
.slider+.slider{margin-top:22px}

/* true-scale comparison bars */
.bars{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.bars__row{display:grid;grid-template-columns:1fr;gap:6px}
.bars__label{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-body)}
.bars__label b{color:var(--ink)}
.bars__track{height:12px;border-radius:999px;background:#F1F5F9;overflow:hidden}
.bars__fill{height:100%;border-radius:999px;background:var(--loss);min-width:2px}
.bars__fill--ok{background:var(--primary)}

/* --- header --------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);
  background:rgba(255,255,255,.86);backdrop-filter:var(--tc-blur);
  -webkit-backdrop-filter:var(--tc-blur);border-bottom:1px solid var(--ink-line);
  transition:box-shadow .2s var(--tc-ease)}
.hdr.is-scrolled{box-shadow:0 8px 24px -18px rgba(15,23,42,.4)}
.hdr__in{max-width:1200px;margin-inline:auto;padding-inline:20px;height:100%;display:flex;
  align-items:center;gap:8px}
@media(min-width:768px){.hdr__in{padding-inline:32px}}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;
  color:var(--ink);margin-right:auto}
.logo:hover{text-decoration:none}
.logo__mark{width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.nav{display:none;align-items:center;gap:2px}
@media(min-width:1024px){.nav{display:flex}}
.nav>li{position:relative}
.nav__link{display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--ink-body);background:transparent;border:0;
  cursor:pointer;font-family:inherit}
.nav__link:hover{background:#F1F5F9;color:var(--ink);text-decoration:none}
.nav__link[aria-expanded=true]{background:#F1F5F9;color:var(--ink)}
.nav__link svg{transition:transform .18s var(--tc-ease)}
.nav__link[aria-expanded=true] svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:320px;padding:10px;
  border-radius:var(--r-2xl);border:1px solid var(--ink-line);background:rgba(255,255,255,.94);
  backdrop-filter:var(--tc-blur);box-shadow:var(--sh-lift);display:none}
.drop[data-open]{display:block}
.drop--wide{min-width:min(620px,calc(100vw - 64px));display:none}
.drop--wide[data-open]{display:block}
.drop__grid{display:grid;gap:2px}
@media(min-width:768px){.drop--wide .drop__grid{grid-template-columns:1fr 1fr}}
.drop__item{display:block;padding:10px 12px;border-radius:10px;transition:background .15s var(--tc-ease)}
.drop__item:hover{background:var(--primary-50);text-decoration:none}
.drop__item b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.drop__item span{display:block;font-size:13px;color:var(--ink-mute);line-height:1.45;margin-top:1px}
.drop__all{margin-top:8px;padding-top:10px;border-top:1px solid var(--ink-line)}
.hdr__cta{display:none;align-items:center;gap:12px;margin-left:12px}
@media(min-width:1024px){.hdr__cta{display:flex}}
.hdr__login{font-size:14.5px;font-weight:500;color:var(--ink-body)}
.burger{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border:0;
  background:transparent;cursor:pointer;border-radius:10px}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;
  background:var(--ink);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:70;background:#fff;display:none;flex-direction:column}
.sheet[data-open]{display:flex}
.sheet__top{display:flex;align-items:center;height:var(--header-h);padding-inline:20px;
  border-bottom:1px solid var(--ink-line);flex:none}
.sheet__close{margin-left:auto;width:44px;height:44px;border:0;background:transparent;font-size:26px;
  line-height:1;color:var(--ink-body);cursor:pointer;border-radius:10px}
.sheet__body{flex:1;overflow-y:auto;padding:8px 20px 24px}
.sheet__body details{border-bottom:1px solid var(--ink-line)}
.sheet__body summary{list-style:none;cursor:pointer;padding:16px 0;font-size:16px;font-weight:600;
  position:relative}
.sheet__body summary::-webkit-details-marker{display:none}
.sheet__body summary::after{content:'';position:absolute;right:6px;top:22px;width:8px;height:8px;
  border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);transform:rotate(45deg)}
.sheet__body details[open] summary::after{transform:rotate(-135deg)}
.sheet__sub{padding:0 0 14px}
.sheet__sub a{display:block;padding:10px 12px;border-radius:10px;font-size:15px;color:var(--ink-body)}
.sheet__sub a:hover{background:var(--primary-50);text-decoration:none}
.sheet__flat{display:block;padding:16px 0;font-size:16px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink-line)}
.sheet__foot{flex:none;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ink-line);display:grid;gap:10px}

/* --- footer --------------------------------------------------------------- */
.ftr{background:var(--deep);color:#94A3B8;padding-block:56px 28px}
.ftr a{color:#CBD5E1;font-size:14.5px}
.ftr a:hover{color:#fff}
.ftr__grid{display:grid;gap:8px}
@media(min-width:860px){.ftr__grid{grid-template-columns:repeat(4,1fr);gap:32px}}
.ftr__col h4{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#64748B;
  font-weight:600;margin-bottom:16px}
.ftr__col li{margin-bottom:10px}
.ftr__col details summary{list-style:none;cursor:pointer;padding:16px 0;font-size:12px;
  text-transform:uppercase;letter-spacing:.14em;color:#64748B;font-weight:600;
  border-bottom:1px solid rgba(148,163,184,.15);position:relative}
.ftr__col details summary::-webkit-details-marker{display:none}
.ftr__col details summary::after{content:'+';position:absolute;right:2px;top:13px;font-size:18px;color:#64748B}
.ftr__col details[open] summary::after{content:'–'}
.ftr__col details ul{padding:14px 0 4px}
@media(min-width:860px){
  .ftr__col details summary{display:none}
  .ftr__col details ul{padding:0}
  .ftr__col details{border:0}
}
.ftr__addr{font-size:14.5px;line-height:1.7;color:#94A3B8}
.ftr__addr a{display:inline}
.ftr__bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(148,163,184,.15);
  font-size:13.5px;color:#64748B;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.ftr__badge{margin-top:14px;display:inline-block}
.ftr__badge img{height:44px;width:auto}

/* --- misc page furniture --------------------------------------------------- */
.kicker{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.kicker h2+p{max-width:62ch}
.quote{font-size:19px;font-weight:600;line-height:1.45;color:var(--ink);letter-spacing:-.01em}
@media(min-width:768px){.quote{font-size:21px}}
.pull{font-size:24px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--ink);
  max-width:24ch}
@media(min-width:768px){.pull{font-size:30px}}
.steps{counter-reset:step}
.step__n{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  color:var(--primary);font-weight:500;display:block;margin-bottom:12px}
.altrow{display:grid;gap:28px;align-items:center}
@media(min-width:900px){
  .altrow{grid-template-columns:1fr 1fr;gap:56px}
  .altrow--flip>*:first-child{order:2}
}
.dl{display:grid;gap:0}
.dl__row{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--ink-line)}
@media(min-width:640px){.dl__row{grid-template-columns:200px 1fr;gap:20px;align-items:baseline}}
.dl__row dt{font-weight:600;color:var(--ink);font-size:15px}
.dl__row dd{margin:0;color:var(--ink-body);font-size:15px}
.jumpbar{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:var(--tc-blur);border-bottom:1px solid var(--ink-line);overflow-x:auto}
.jumpbar ul{display:flex;gap:2px;padding:8px 20px;min-width:max-content}
.jumpbar a{font-size:13px;font-weight:500;color:var(--ink-body);padding:7px 11px;border-radius:8px;
  white-space:nowrap}
.jumpbar a:hover,.jumpbar a.is-active{background:var(--primary-50);color:var(--primary-700);
  text-decoration:none}

/* day-split bar, hour columns, geo band, route trail */
.split{display:flex;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--ink-line)}
.split div{display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff}
.splitkey{display:grid;gap:14px;margin-top:18px}
@media(min-width:640px){.splitkey{grid-template-columns:repeat(4,1fr)}}
.splitkey b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.splitkey span{font-size:13px;color:var(--ink-body)}
.hours{display:flex;align-items:flex-end;gap:5px;height:150px}
.hours div{flex:1;background:var(--primary);border-radius:4px 4px 0 0;min-height:4px;position:relative}
.hours div span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10px;
  color:var(--ink-mute);font-family:'JetBrains Mono',monospace}
.geoband{display:flex;height:44px;border-radius:10px;overflow:hidden;border:1px solid var(--ink-line);
  background:repeating-linear-gradient(45deg,#F1F5F9,#F1F5F9 6px,#E2E8F0 6px,#E2E8F0 12px)}
.geoband div{display:grid;place-items:center;font-size:11px;font-weight:600}
.geoband .on{background:var(--success-50);color:var(--success-600);border-inline:1px solid #A7F3D0}

/* stacked-planes diagram (follow-up page) */
.planes{display:grid;gap:14px}
.plane{border-radius:var(--r-2xl);border:1px solid var(--ink-line);background:var(--tc-glass);
  backdrop-filter:var(--tc-blur);padding:20px 22px;box-shadow:var(--sh-rest);position:relative}
.plane b{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:5px}
.plane p{font-size:14.5px}
.plane__n{position:absolute;top:18px;right:20px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-mute);letter-spacing:.14em}
@media(min-width:768px){
  .plane:nth-child(1){margin-right:48px}
  .plane:nth-child(2){margin-inline:24px}
  .plane:nth-child(3){margin-left:48px}
}

/* vendor-stack graphic (field / pricing) */
.stackcmp{display:grid;gap:20px;align-items:center}
@media(min-width:768px){.stackcmp{grid-template-columns:1fr auto 1fr}}
.slabpile{display:grid;gap:3px}
.slabpile div{background:#F1F5F9;border:1px solid var(--ink-line);padding:16px 18px;font-size:14px;
  color:var(--ink-body)}
.slabpile div:first-child{border-radius:var(--r-xl) var(--r-xl) 0 0}
.slabpile div:last-child{border-radius:0 0 var(--r-xl) var(--r-xl)}
.slabpile b{color:var(--ink);float:right;font-variant-numeric:tabular-nums}
.onetile{border-radius:var(--r-2xl);border:1px solid var(--primary);background:var(--primary-50);
  padding:26px 22px;text-align:center}
.vs{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-mute);text-align:center;
  letter-spacing:.14em}

/* dedupe graphic (features) */
.dedupe{display:grid;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px}
.dedupe span{border:1px dashed var(--ink-line);border-radius:10px;padding:10px 14px;color:var(--ink-body)}
.dedupe b{display:block;border:1px solid var(--success);background:var(--success-50);border-radius:10px;
  padding:12px 14px;color:var(--success-600);font-weight:600}

/* legal shell */
.legal{display:grid;gap:32px;align-items:start}
.legal>*{min-width:0}
@media(min-width:1000px){.legal{grid-template-columns:240px 1fr;gap:56px}}
.toc{position:sticky;top:88px;font-size:14px}
.toc__desk{border-radius:var(--r-2xl);border:1px solid var(--ink-line);
  background:var(--tc-glass);backdrop-filter:var(--tc-blur);-webkit-backdrop-filter:var(--tc-blur);
  box-shadow:var(--sh-rest),var(--glass-edge);padding:18px 14px}
.toc h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
  margin-bottom:12px;font-weight:600;padding-inline:10px}
.toc ol{counter-reset:toc;display:grid;gap:2px}
.toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--ink-body);font-size:13.5px;
  line-height:1.4}
.toc a:hover,.toc a.is-active{background:var(--primary-50);color:var(--primary-700);text-decoration:none}
.toc__mobile{display:block}
@media(min-width:1000px){.toc__mobile{display:none}}
.toc__desk{display:none}
@media(min-width:1000px){.toc__desk{display:block}}
.doc{max-width:70ch;font-size:17px;line-height:1.7;color:var(--ink-body)}
/* No glass on the document itself — see screens 22-27: these have to read as
   written by a lawyer, not by a marketing team, and a frosted panel under 70ch
   of contract text is exactly the tell. The sticky TOC beside it is navigation
   rather than document, which is why that one does take the glass. */
.doc h2{font-size:22px;line-height:1.3;margin:44px 0 14px;scroll-margin-top:96px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17px;margin:26px 0 10px}
.doc p{margin-bottom:14px}
.doc ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.doc ol{margin:0 0 16px;padding-left:22px;list-style:decimal}
.doc li{margin-bottom:8px}
.doc table{font-size:14.5px;margin-bottom:20px}
.doc table th,.doc table td{border:1px solid var(--ink-line);padding:11px 13px;text-align:left;
  vertical-align:top}
.doc table th{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-mute);font-weight:500;background:var(--page)}
.doc code{font-family:'JetBrains Mono',monospace;font-size:13px;background:#F1F5F9;padding:2px 6px;
  border-radius:5px;color:var(--ink)}
.doc .never{background:var(--caution-50)}
.doc hr{border:0;border-top:1px solid var(--ink-line);margin:40px 0}

/* consent template */
.tpl{background:#fff;border:1px solid var(--ink-line);border-radius:var(--r-2xl);position:relative;
  padding:28px 24px}
@media(min-width:768px){.tpl{padding:44px 48px}}
.tpl__tools{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.tok{background:#FEF3C7;border-bottom:1px solid var(--caution);border-radius:4px;padding:1px 6px;
  font-weight:600;color:#78350F;overflow-wrap:break-word;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* blog cards */
.postgrid{display:grid;gap:16px}
@media(min-width:700px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.postgrid{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;min-height:220px}
.post h3{margin:12px 0 auto;font-size:17px;line-height:1.35}
.post__foot{margin-top:18px}

/* --- A6 motion ------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .35s var(--tc-ease),
  transform .35s var(--tc-ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .card:hover{transform:none}
  .tilt-l,.tilt-r{transform:none}
}

/* --- print (legal pages must come out clean on A4) -------------------------- */
@media print{
  .hdr,.ftr,.jumpbar,.toc,.btn,.sheet,#tc24-widgets,.mesh{display:none!important}
  body{background:#fff;font-size:11pt}
  .band{padding-block:0}
  .doc{max-width:none;font-size:11pt;line-height:1.5}
  .doc h2{page-break-after:avoid;margin-top:18pt}
  .doc table,.slab,.tpl{page-break-inside:avoid}
  .card,.f-card,.f-panel,.plane{box-shadow:none;border:1px solid #ccc;background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  a[href^="/"]::after{content:" (telecaller24.com" attr(href) ")";font-size:9pt;color:#666}
}

/* ============================================================================
   /features — the dense inventory page (screen 8).
   Density is still the aesthetic here — tighter padding, smaller type, a count
   opening every section — but the surfaces are the site's glass, not the plain
   white they used to be, so this page reads as part of the same product as the
   marketing screens. The restraint moved from the material to the motion: these
   cards take a 1px lift on hover, not the 3px the marketing cards take. The
   `f-*` class vocabulary comes from features.tpl.html, which is hand-written
   content; this block re-expresses it in the design tokens.
   ========================================================================= */
.f-wrap{margin:0 auto;max-width:1200px;padding:0 20px}
@media(min-width:768px){.f-wrap{padding:0 32px}}
.f-sec{margin-top:64px;scroll-margin-top:120px}
@media(min-width:768px){.f-sec{margin-top:88px}}
.f-eyebrow{display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--primary)}
/* the oversized count that opens each of the nine sections. Slate, not blue:
   blue is for prices and actions, and these are facts about the page. */
.f-count{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.f-count b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:.85;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.f-count i{font-family:'JetBrains Mono',ui-monospace,monospace;font-style:normal;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute)}
@media(min-width:768px){.f-count b{font-size:64px}}
#recordings .f-count b{color:#B45309}
.f-h2{color:var(--ink);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  margin:14px 0 0}
@media(min-width:768px){.f-h2{font-size:34px}}
.f-h3{color:var(--ink);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0}
.f-lead{color:var(--ink-body);font-size:17px;line-height:1.6;margin:14px 0 0;max-width:70ch}
.f-fine{color:var(--ink-mute);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;margin:16px 0 0}
.f-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:28px}
@media(min-width:640px){.f-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
.f-grid.f-2{grid-template-columns:1fr}
@media(min-width:768px){.f-grid.f-2{grid-template-columns:1fr 1fr}}
.f-card{border-radius:var(--r-xl);border:1px solid var(--ink-line);border-top:2px solid var(--primary);
  background:var(--tc-glass);backdrop-filter:var(--tc-blur);-webkit-backdrop-filter:var(--tc-blur);
  padding:18px 18px 20px;box-shadow:var(--sh-rest),var(--glass-edge);
  transition:transform .18s var(--tc-ease),box-shadow .18s var(--tc-ease),
             border-color .18s var(--tc-ease)}
.f-card:hover{transform:translateY(-1px);border-color:#CBD5E1;border-top-color:var(--primary);
  box-shadow:var(--sh-lift),var(--glass-edge)}
.f-card h3{color:var(--ink);font-size:16px;font-weight:600;line-height:1.35;margin:0}
.f-card p{color:var(--ink-body);font-size:14.5px;line-height:1.6;margin:8px 0 0}
.f-panel{margin-top:28px;border-radius:var(--r-2xl);border:1px solid var(--ink-line);
  background:var(--tc-glass);backdrop-filter:var(--tc-blur);-webkit-backdrop-filter:var(--tc-blur);
  box-shadow:var(--sh-rest),var(--glass-edge);padding:24px 22px}
.f-panel.f-tint{background:rgba(239,246,255,.72);border-color:#BFDBFE}
.f-panel p{color:var(--ink-body);font-size:16px;line-height:1.65;margin:12px 0 0}
.f-panel p:first-child{margin-top:0}
.f-ol{margin:20px 0 0;padding:0;list-style:none;counter-reset:s}
.f-ol li{counter-increment:s;position:relative;padding:0 0 0 42px;margin-top:16px}
.f-ol li:first-child{margin-top:0}
.f-ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--primary)}
.f-ol strong{display:block;color:var(--ink);font-size:16px;font-weight:600;line-height:1.5}
.f-ol span{display:block;color:var(--ink-body);font-size:15px;line-height:1.6;margin-top:2px}
.f-ticks{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:768px){.f-ticks{grid-template-columns:1fr 1fr}}
.f-ticks li{position:relative;padding-left:22px;color:var(--ink-body);font-size:15px;line-height:1.6}
.f-ticks li::before{content:"";position:absolute;left:0;top:9px;height:6px;width:6px;border-radius:2px;
  background:var(--success)}
.f-ticks b{color:var(--ink);font-weight:600}
.f-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.f-chips li{border:1px solid var(--ink-line);border-radius:8px;background:var(--page);padding:6px 11px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--ink)}
.f-jump{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.93);
  backdrop-filter:var(--tc-blur);-webkit-backdrop-filter:var(--tc-blur);
  border-block:1px solid var(--ink-line);margin-top:56px}
.f-jump ul{display:flex;gap:2px;margin:0;padding:0 20px;list-style:none;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.f-jump ul::-webkit-scrollbar{display:none}
.f-jump a{display:block;white-space:nowrap;padding:13px 11px;font-size:13.5px;font-weight:500;
  color:var(--ink-body);border-bottom:2px solid transparent}
.f-jump a:hover,.f-jump a.is-active{color:var(--primary-700);border-bottom-color:var(--primary);
  text-decoration:none}
.f-hero{position:relative;overflow:hidden;padding-top:48px}
@media(min-width:768px){.f-hero{padding-top:72px}}
.f-blob{display:none}   /* the mesh layer replaces the old gradient blobs */
.f-shot{margin-top:28px;position:relative;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--ink-line);box-shadow:var(--sh-xl);background:#fff}
.f-shot img{display:block;width:100%;height:auto}
.f-shot span{position:absolute;left:12px;bottom:12px;background:rgba(15,23,42,.72);color:#fff;
  border-radius:6px;padding:3px 8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.16em}
.f-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.f-honest{margin-top:24px;background:var(--caution-50);border-left:2px solid var(--caution);
  border-radius:0 var(--r-xl) var(--r-xl) 0;padding:16px 20px;color:#78350F;font-size:15px;
  line-height:1.6}
.f-honest strong{color:#78350F}
.primary-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;
  border-radius:var(--r-xl);background:var(--primary);color:#fff;font-weight:600;font-size:15px}
.primary-btn:hover{background:var(--primary-700);text-decoration:none}
.secondary-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;
  border-radius:var(--r-xl);background:#fff;border:1px solid var(--ink-line);color:var(--ink);
  font-weight:600;font-size:15px}
.secondary-btn:hover{border-color:#CBD5E1;text-decoration:none}
.heading1{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
@media(min-width:768px){.heading1{font-size:52px}}

/* Section ⑦ is the qualifying section. It gets caution-tinted chrome so it
   cannot be mistaken for the rest of the page, and it stays where it is. */
#recordings .f-card{border-top-color:var(--caution)}
#recordings .f-eyebrow{color:#B45309}
#recordings .f-panel.f-tint{background:var(--caution-50);border-color:#FDE68A}
#recordings .f-ticks li::before{background:var(--caution)}
#recordings .f-ol li::before{color:#B45309}

/* The page's one `surface.deep` band (A4). /features writes its own closing
   CTA instead of calling block_final_cta(), so the deep close is expressed
   here in the f-* vocabulary. .f-sec spaces itself with margin rather than
   padding, so this variant has to supply the band's vertical rhythm. */
.f-sec--deep{margin-top:64px;padding-block:64px;background:var(--deep);color:#E2E8F0}
@media(min-width:768px){.f-sec--deep{margin-top:88px;padding-block:96px}}
.f-sec--deep .f-panel{margin-top:0}
.f-sec--deep .f-panel.f-tint{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.22)}
.f-sec--deep .f-h2{color:#fff}
.f-sec--deep .f-lead,.f-sec--deep .f-panel p{color:#94A3B8}
.f-sec--deep .f-fine{color:#64748B}
.f-sec--deep .secondary-btn{background:transparent;border-color:rgba(148,163,184,.35);color:#fff}
.f-sec--deep .secondary-btn:hover{border-color:rgba(148,163,184,.6)}