/* Roughneck site v1.2 · 19 Sep 2026 · tokens from Brand Brief v1 §6 and §10.
   Contrast ratios measured 16 Sep 2026 are noted beside each pair used. */

:root{
  --crude:#14161A; --caliche:#EDE6D8; --bone:#FAF7F0; --flare:#F5B400; --flare-dark:#7E5A00;
  --iron:#2B3440; --casing:#5C6B7A; --casing-light:#94A3B1;
  /* Mud (the print tan) is deliberately absent: it fails the brief's own hue rule (37°, 35%). Print-only tone; logged 19 Sep 2026. */
  --mesquite:#4E6B3F; --signal:#D2372F; --sky:#2F6A9A; --border:#D8D0C0;

  --bg:var(--caliche);            /* page */
  --surf:var(--bone);             /* cards */
  --ink:var(--crude);             /* Crude on Caliche 14.6, on Bone 16.9 */
  --mute:var(--casing);           /* Casing on Bone 5.1, on Caliche 4.4 (large or 500 weight only) */
  --mute-strong:#566470;          /* 4.9 on Caliche, 5.7 on Bone */
  --accent:var(--flare);
  --accent-txt:var(--flare-dark); /* 5.1 on Bone */
  --ok:var(--mesquite); --bad:var(--signal); --info:var(--sky);
  --line:var(--border);
  --dark-bg:var(--crude); --dark-surf:var(--iron); --dark-ink:var(--bone); --dark-mute:var(--casing-light);

  --display:"Barlow Semi Condensed",Impact,"Arial Narrow",sans-serif;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wash:#F3EFE6;                /* a tint of the page, for quiet panels */
  --panel:var(--crude);          /* the receipt panel: dark in BOTH themes */
  --panel-ink:#FAF7F0; --panel-mute:#8E8981;
  --shadow:20 22 26; --shadow-a:.13;   /* rgb triplet so opacity can vary by theme */
  --r-card:12px; --r-btn:8px; --r-chip:999px; --tap:48px; --gutter:16px; --max:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--crude); --surf:var(--iron); --ink:var(--bone); --mute:var(--casing-light); --mute-strong:var(--casing-light);
    --accent-txt:var(--flare); --ok:#8DB37A; --bad:#F0655B; --info:#7FB2E0; --line:#3A4550; --wash:#232B35; --shadow:0 0 0; --shadow-a:.5;
  }
}
:root[data-theme="dark"]{
  --bg:var(--crude); --surf:var(--iron); --ink:var(--bone); --mute:var(--casing-light); --mute-strong:var(--casing-light);
  --accent-txt:var(--flare); --ok:#8DB37A; --bad:#F0655B; --info:#7FB2E0; --line:#3A4550; --wash:#232B35; --shadow:0 0 0; --shadow-a:.5;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4;
  font-variant-numeric:tabular-nums;overflow-x:hidden}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:var(--info);text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.015em;line-height:1.05;margin:0}
h1{font-size:clamp(40px,9vw,76px)}
h2{font-size:clamp(30px,5.4vw,48px)}
h3{font-size:clamp(22px,3.2vw,28px);font-weight:700}
p{margin:0}
.lede{font-size:clamp(18px,2.4vw,22px);line-height:1.45;color:var(--ink)}
.mute{color:var(--mute-strong)}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:56px 0}
@media(min-width:768px){.section{padding:88px 0}}
.dark{background:var(--crude);color:var(--bone)}
.dark .mute{color:var(--casing-light)}   /* 7.0 on Crude */
.dark a{color:#4F86B5}
.dark .card{background:var(--iron);border-color:#3A4550}
.dark .btn-ink{background:var(--bone);color:var(--crude);border-color:var(--bone)}
.dark .btn-ghost{color:var(--bone);border-color:#3A4550}

/* buttons: the Flare one is the only Flare fill on a screen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:12px 20px;
  border-radius:var(--r-btn);font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;font-family:var(--font);line-height:1.2;white-space:nowrap}
.btn-flare{background:var(--flare);color:var(--crude);border-color:var(--crude)} /* Crude on Flare 9.8; hairline because Flare on Bone is 1.7 as a component */
.btn-flare:hover{filter:brightness(.96)}
.btn-ink{background:var(--crude);color:var(--bone);border-color:var(--crude)}    /* Bone on Crude 16.9 */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-lg{padding:16px 26px;font-size:18px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:26px;width:auto;transition:transform .2s cubic-bezier(.2,.7,.2,1),opacity .2s}
.brand:hover img{transform:translateX(2px)}
.brand:active img{transform:translateX(0)}
.brand .light{display:block}.brand .darkmark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .light{display:none}:root:not([data-theme="light"]) .brand .darkmark{display:block}}
:root[data-theme="dark"] .brand .light{display:none}:root[data-theme="dark"] .brand .darkmark{display:block}
.nav{display:none;align-items:center;gap:22px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.hdr-cta{display:flex;align-items:center;gap:8px}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--line);
  border-radius:var(--r-btn);background:transparent;color:var(--ink);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.menu-btn{transition:background .16s,border-color .16s,transform .16s}
.menu-btn:hover{background:var(--wash);border-color:var(--ink);transform:translateY(-1px)}
.menu-btn:active{transform:translateY(0)}
@media(min-width:900px){.nav{display:flex}.menu-btn{display:none}.brand img{height:30px}}
.sheet{display:none;border-top:1px solid var(--line);background:var(--bg)}
.sheet[open]{display:block}
.sheet a{display:block;padding:14px var(--gutter);color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--line);min-height:var(--tap);
  transition:background .14s,padding-left .14s}
.sheet a:hover,.sheet a:focus-visible{background:var(--wash);padding-left:calc(var(--gutter) + 6px)}
.theme{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--line);
  border-radius:var(--r-btn);background:transparent;color:var(--ink);cursor:pointer}
.theme svg{width:20px;height:20px}
.theme{transition:background .16s,border-color .16s,transform .16s}
.theme:hover{background:var(--wash);border-color:var(--ink);transform:translateY(-1px)}
.theme:hover svg{transform:rotate(-18deg);transition:transform .25s cubic-bezier(.3,1.2,.5,1)}
.theme:active{transform:translateY(0)}

/* hero */
.hero{padding:48px 0 40px}
@media(min-width:900px){.hero{padding:96px 0 72px}.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}}
.hero h1{max-width:12ch}
.hero .lede{margin:20px 0 28px;max-width:34ch}
.kicker{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-strong);margin-bottom:14px}

/* phone frame with a briefing card */
.phone{margin:40px auto 0;width:min(390px,100%);border:1px solid var(--line);border-radius:28px;background:var(--surf);padding:14px;box-shadow:none}
@media(min-width:900px){.phone{margin:0 0 0 auto}}
.phone-bar{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--mute-strong);padding:0 6px 10px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.card + .card{margin-top:10px}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-strong);margin-bottom:8px}
.card h3{font-size:22px;line-height:1.1}
.card .fact{margin:8px 0 0;font-size:15px;line-height:1.4}
.card .who{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:15px}
.card .who .num{font-family:var(--mono);color:var(--ink)}
.card .say{margin-top:12px;padding:12px;background:var(--bg);border-radius:var(--r-btn);font-size:15px;line-height:1.45}
.card .src{display:block;margin-top:10px;font-size:13px;color:var(--info);text-decoration:underline}
.card .act{margin-top:12px;display:flex;gap:8px}
.card .act span{flex:1;text-align:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-btn);border:1px solid var(--line);font-weight:600;font-size:15px}
.card .act .call{background:var(--crude);color:var(--bone);border-color:var(--crude)} /* in the app this is Flare; on the site the one Flare action is Request access */
.card .due{font-size:13px;color:var(--mute-strong);margin-top:10px}

/* beats */
.beats{display:grid;gap:14px;margin-top:32px}
@media(min-width:768px){.beats{grid-template-columns:repeat(3,1fr);gap:20px}}
.beat{padding:22px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card)}
.beat h3{margin-bottom:8px}
.beat p{color:var(--ink);font-size:16px;line-height:1.5}
.beat .n{font-family:var(--mono);font-size:13px;color:var(--mute-strong);margin-bottom:10px}

/* product page rows */
.row{padding:56px 0}
@media(min-width:900px){.row{padding:80px 0}.row .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.row.flip .wrap>:first-child{order:2}}
.row h2{margin-bottom:14px}
.row p{font-size:18px;line-height:1.5;max-width:44ch}
.row .why{margin-top:16px;padding-left:14px;border-left:3px solid var(--accent);font-size:16px;color:var(--mute-strong)}
/* a beat that is bought on top of the app, said where he reads about it */
.row .onTop{margin-top:14px;display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;color:var(--mute-strong);background:var(--wash)}
.row .onTop b{color:var(--ink)}
/* the feature index: the whole product on one screen */
.feat{display:grid;grid-template-columns:1fr;gap:30px;margin-top:26px}
@media(min-width:820px){.feat{grid-template-columns:1.15fr .85fr;gap:44px}}
.feat h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 12px}
.feat ul{list-style:none;padding:0;margin:0}
/* 1 Oct 2026: the hover used to widen the row with padding and negative margin. The
   text re-wrapped on every frame of the transition, the row grew a line, and the
   cards below jumped: the doubled text in Brandon's video. Nothing on hover may
   change layout now. The highlight is a pseudo-element; the movement is a transform. */
.feat li{position:relative;padding:13px 0;border-top:1px solid #3A4550;font-size:15.5px;line-height:1.55}
.feat li::before{content:"";position:absolute;inset:0 -12px;border-radius:10px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(245 180 0 / .10),rgba(255,255,255,.03) 60%);
  box-shadow:inset 3px 0 0 var(--flare);opacity:0;transform:scaleX(.97);transform-origin:left;
  transition:opacity .25s,transform .35s cubic-bezier(.2,.75,.2,1)}
.feat ul{position:relative;z-index:0}
.feat li>b{transition:transform .3s cubic-bezier(.2,.75,.2,1),color .2s}
@media (hover:hover){.feat li:hover::before{opacity:1;transform:none}
  .feat li:hover>b{transform:translateX(6px);color:var(--flare)}}
.feat li:first-child{border-top:0}
.feat li em{font-style:normal;color:var(--casing-light)}
/* The name of the thing carries the eye down the list; the sentence under it is
   the explanation. They were the same size, so the list read as a wall. */
.feat li>b{display:block;font-family:var(--display);font-weight:800;font-size:21px;
  line-height:1.15;letter-spacing:-.005em;margin-bottom:5px;color:var(--bone)}
.feat li>b .chip{display:inline-block;vertical-align:3px;margin-left:9px;padding:3px 8px;
  border:1px solid #7A6A38;border-radius:999px;background:rgba(245,180,0,.09);
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--flare)}
@media(min-width:820px){.feat li>b{font-size:23px}}
/* the language switch, beside the dark-mode button */
/* language selector · 25 Sep 2026. A <details> so it opens with no script,
   a pill in the header, a row of pills in the phone sheet. Each name is set in
   its own script, so the menu reads right from any page. */
.lang-pick{position:relative}
.lang-pick summary{list-style:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer;user-select:none;transition:background .18s,border-color .18s,transform .18s}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary svg{width:16px;height:16px;flex:none}
.lang-pick summary .chev{width:13px;height:13px;transition:transform .2s}
.lang-pick summary:hover,.lang-pick[open] summary{background:var(--wash);border-color:var(--ink)}
.lang-pick[open] summary .chev{transform:rotate(180deg)}
.lang-pick ul{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:196px;margin:0;padding:6px;list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(20,22,26,.16);z-index:30;animation:pick-in .18s cubic-bezier(.2,.7,.2,1)}
@keyframes pick-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-pick li a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;line-height:1.2}
.lang-pick li a:hover,.lang-pick li a:focus-visible{background:var(--wash)}
.lang-pick li a[aria-current]{font-weight:700}
.lang-pick li a .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mute-strong)}
.lang-pick li a[aria-current] .k{color:var(--accent)}
.lang-pick li a[lang="ar"] span:first-child{font-family:"IBM Plex Sans Arabic","Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif}
.lang-pick li a[lang="zh-Hans"] span:first-child{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif}
.sheet .lang-row{display:flex;flex-wrap:wrap;gap:8px;padding:14px var(--gutter) 16px}
.sheet .lang-row a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.sheet .lang-row a[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:860px){.hdr-cta .lang-pick{display:none}}
.row.dark .onTop{color:var(--casing-light);border-color:#3A4550;background:transparent}
.row.dark .onTop b{color:var(--bone)}
.row.dark .why{color:var(--casing-light)}
.row.dark .kicker{color:var(--casing-light)}

/* strips */
.strip{padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.strip p{font-size:clamp(20px,3vw,28px);font-family:var(--display);font-weight:700;line-height:1.15;max-width:26ch}

/* document pages (trust, pricing, legal, verify-adjacent) */
.doc{max-width:760px;margin:0 auto;padding:48px var(--gutter) 80px}
.doc .rule{height:6px;background:var(--flare);border-radius:2px;margin-bottom:28px;width:120px}
.doc h1{font-size:clamp(34px,6vw,56px);margin-bottom:10px}
.doc h2{font-size:clamp(24px,4vw,32px);margin:36px 0 12px}
.doc p{font-size:17px;line-height:1.55;margin:0 0 14px}
.doc .box{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;margin:18px 0}
.doc .box h3{font-size:18px;margin-bottom:8px;font-family:var(--font);font-weight:600}
.doc .box p{font-size:16px;margin:0}
.banner{background:var(--surf);border:1px dashed var(--mute-strong);border-radius:var(--r-btn);padding:12px 14px;font-size:14px;color:var(--mute-strong);margin-bottom:24px}
.meta{font-family:var(--mono);font-size:13px;color:var(--mute-strong);margin-bottom:18px}

/* pricing table */
.plans{width:100%;border-collapse:collapse;margin:24px 0 10px;font-size:15px}
.plans th,.plans td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.plans th{font-family:var(--display);font-size:20px;font-weight:800}
.plans th:first-child{font-family:var(--font);font-size:13px;font-weight:500;color:var(--mute-strong);text-transform:uppercase;letter-spacing:.05em}
.plans td:first-child{color:var(--mute-strong);width:40%}
.plans .yes{color:var(--ok);font-weight:600}
.plans .no{color:var(--mute-strong)}
@media(max-width:600px){.plans{font-size:14px}.plans th,.plans td{padding:10px 6px}}

/* form */
.form{max-width:520px;margin:0 auto;padding:40px var(--gutter) 80px}
.form h1{font-size:clamp(32px,6vw,48px);margin-bottom:8px}
.form .lede{margin-bottom:28px;font-size:17px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.field .hint{display:block;font-size:13px;color:var(--mute-strong);margin-top:6px}
.field input,.field select{width:100%;min-height:var(--tap);padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r-btn)}
.field input:invalid:not(:placeholder-shown){border-color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surf);font-weight:500;font-size:15px;cursor:pointer;margin:0}
.chips input{width:18px;height:18px;min-height:0;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%}
.form .after{font-size:14px;color:var(--mute-strong);margin-top:14px;line-height:1.5}
.msg{display:none;padding:16px;border-radius:var(--r-card);margin-top:18px;font-weight:500}
.msg.ok{display:block;background:var(--surf);border:1px solid var(--ok);color:var(--ink)}
.msg.bad{display:block;background:var(--surf);border:1px solid var(--bad);color:var(--ink)}

/* the pricing picker. Same chips as the request form, so a man who has already
   chosen on this page recognises the form he lands on. It prices nothing. */
.chips-label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.doc .pick{margin:22px 0 8px;padding:22px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card)}
.doc .pick .field{margin-bottom:20px}
.doc .pick .field:last-of-type{margin-bottom:0}
.btn.is-off{opacity:.55;pointer-events:none}

/* Pick cards. The add-ons were three bare checkboxes labelled in our own jargon,
   which asked a buyer to want something nobody had explained. A card carries the
   plain name, one line of what it does, and a state you can see from across the
   room. No price: none is public until three written quotes have gone out. */
.picks{display:grid;gap:10px;margin-top:4px}
@media(min-width:720px){.picks{grid-template-columns:1fr 1fr}}
.pick-card{position:relative;display:block;padding:16px 16px 16px 50px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--surf);cursor:pointer;margin:0;
  transition:border-color .18s,background .18s,transform .18s cubic-bezier(.2,.7,.2,1)}
.pick-card:hover{border-color:var(--mute-strong);transform:translateY(-1px)}
.pick-card input{position:absolute;opacity:0;width:0;height:0}
.pick-card .tick{position:absolute;left:16px;top:17px;width:22px;height:22px;border-radius:6px;
  border:1.5px solid var(--mute-strong);background:transparent;transition:all .18s}
.pick-card .tick::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.pick-card b{display:block;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em}
.pick-card span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--mute-strong)}
.pick-card em{display:block;margin-top:7px;font-style:normal;font-family:var(--display);font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute-strong)}
.pick-card:has(input:checked){border-color:var(--ink);background:var(--bg)}
.pick-card:has(input:checked) .tick{background:var(--flare);border-color:var(--flare)}
.pick-card:has(input:checked) .tick::after{transform:rotate(45deg) scale(1)}
.pick-card:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pick-note{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--mute-strong)}

/* The running total of what they have built. No money in it, so it shows the
   shape of the shop back to them instead. */
/* The same dark receipt panel in both themes. It used to take its
   background from --ink, which flips to near-white in dark mode while the
   text below stayed hardcoded white. */
.tally{margin:26px 0 22px;padding:16px 18px;border-radius:var(--r-card);
  background:var(--panel);color:var(--panel-ink);border:1px solid var(--line)}
.tally b{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--panel-mute);margin-bottom:7px}
.tally p{margin:0;font-size:16px;line-height:1.55;color:var(--panel-ink)}
.tally p .sep{color:#6E6A63;padding:0 6px}

/* footer */
.ftr{border-top:1px solid var(--line);padding:40px 0 48px;font-size:14px;color:var(--mute-strong)}
.ftr .wrap{display:grid;gap:22px}
@media(min-width:768px){.ftr .wrap{grid-template-columns:1fr auto;align-items:start}}
.ftr img{height:20px;width:auto;margin-bottom:12px}
.ftr nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr nav a{color:var(--ink);text-decoration:none;position:relative;
  transition:color .16s}
.ftr nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.75,.2,1)}
.ftr nav a:hover::after,.ftr nav a:focus-visible::after{transform:scaleX(1)}
.ftr .legal{margin-top:10px;line-height:1.6}
.ftr .legal a{color:var(--mute-strong);transition:color .16s}
.ftr .legal a:hover{color:var(--ink)}

/* 404 */
.nf{text-align:center;padding:80px var(--gutter)}
.nf svg{width:160px;height:auto;margin:0 auto 28px}
.nf h1{font-size:clamp(34px,6vw,56px)}
.nf p{margin:12px 0 28px;color:var(--mute-strong)}

@media print{.hdr,.ftr,.btn{display:none}body{background:#fff;color:#000}}


/* ============================================================
   v1.1 · 19 Sep 2026 · motion and hover system
   Rules: one Flare action per screen (unchanged); hovers are physical (lift, tilt, pull),
   never a colour change to Flare; edges are shear lines; everything below is off under reduced motion.
   ============================================================ */

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
/* v1.7 · a repeat showing in the same tab: no staggered delays, short fades */
[data-quick] [data-reveal]{transition-duration:.25s;transition-delay:0ms}
[data-quick] .words .w{transition-duration:.2s}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="scale"]{transform:scale(.96) translateY(12px)}

/* headline words */
.words .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(1.5deg);transform-origin:0 100%;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.words.in .w{opacity:1;transform:none}

/* header: blur when scrolled, thin Crude progress hairline */
.hdr{transition:box-shadow .3s,background-color .3s}
.hdr.scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 1px 0 var(--line)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink);transition:width .12s linear}

.nav a{position:relative;padding-bottom:4px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{text-decoration:none}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--accent)}

/* buttons: magnetic pull, press, arrow slide */
.btn{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background-color .2s,color .2s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn-flare:hover{box-shadow:0 8px 24px -12px rgba(20,22,26,.55)}
.btn-ink:hover{box-shadow:0 10px 26px -14px rgba(20,22,26,.7)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .ar{display:inline-block;width:0;overflow:hidden;transition:width .3s cubic-bezier(.2,.7,.2,1),margin .3s;white-space:nowrap}
.btn:hover .ar,.btn:focus-visible .ar{width:1.1em;margin-left:2px}

/* cards: lift and tilt */
.beat{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .45s;position:relative}
.beat:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 22px 40px -30px rgba(20,22,26,.6)}
.beat .n{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.beat:hover .n{transform:translateX(4px)}
.beat::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.beat:hover::after{transform:scaleX(1)}
.tilt{transform-style:flat;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;backface-visibility:hidden}
/* 29 Sep 2026: preserve-3d put every layer of the card on the same plane as the frame, and when the
   frame tilted under the mouse the browser could not tell which was in front, so parts of the card
   blinked out (worst in Firefox). Flat keeps the tilt and draws the card as one picture. */
.tilt.live{transition:transform .08s linear}
.phone{box-shadow:0 30px 60px -40px rgba(20,22,26,.55)}

/* the typed opening line */
.say .caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.card .act .call.ready{animation:ready .9s cubic-bezier(.2,.7,.2,1) 1}
@keyframes ready{0%{box-shadow:0 0 0 0 rgba(20,22,26,.45)}100%{box-shadow:0 0 0 14px rgba(20,22,26,0)}}
.dark .card .act .call.ready{animation-name:readyd}
@keyframes readyd{0%{box-shadow:0 0 0 0 rgba(250,247,240,.5)}100%{box-shadow:0 0 0 14px rgba(250,247,240,0)}}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:1px;position:relative}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:0;animation:ping 2.2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* hero map: real Oklahoma counties behind the card */
.hero{position:relative;overflow:hidden}
.hero-map{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end}
.hero-map svg{height:150%;width:auto;max-width:none;opacity:.55;transform:translate(10%,-6%)}
@media(max-width:899px){.hero-map svg{height:110%;transform:translate(22%,4%);opacity:.4}}
.hero .wrap{position:relative;z-index:1}
.co{fill:transparent;stroke:var(--casing);stroke-width:.9;stroke-opacity:.45;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:fill .45s}
.map-in .co{animation:draw 1.6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 12ms)}
@keyframes draw{to{stroke-dashoffset:0}}
.co.scan{fill:rgba(20,22,26,.10)}
:root[data-theme="dark"] .co.scan,:root:not([data-theme="light"]) .dark .co.scan{fill:rgba(250,247,240,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .co.scan{fill:rgba(250,247,240,.12)}}

/* the tape: what the nightly pull reads, categorical, nothing invented */
.tape{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--surf);padding:12px 0}
.tape-in{display:flex;width:max-content;gap:0;animation:tape 48s linear infinite}
.tape:hover .tape-in{animation-play-state:paused}
.tape span{display:inline-flex;align-items:center;gap:12px;padding:0 26px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-strong);white-space:nowrap}
.tape span::before{content:"";width:6px;height:6px;background:var(--ink);transform:rotate(45deg);opacity:.5}
@keyframes tape{to{transform:translateX(-50%)}}

/* measured strip */
.stats{display:grid;gap:18px;margin-top:36px}
@media(min-width:768px){.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.stat{padding:22px 0 0;border-top:2px solid var(--ink)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat b small{font-size:.45em;font-weight:700;letter-spacing:0;margin-left:2px}
.stat span{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--mute-strong)}
.dark .stat{border-top-color:var(--bone)}
/* Inside a document column there is not room for four 64px numerals side by side:
   they collide before the page scrolls, so BENCH sees nothing wrong. Two up, and
   the numeral is sized to the column rather than the viewport. */
.doc .stats{margin-top:28px}
@media(min-width:620px){.doc .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.doc .stat b{font-size:clamp(34px,4.4vw,46px)}
.dark .stat span{color:var(--casing-light)}

/* shear edges on dark sections: the tool-joint cut, never a curve */
.shear{position:relative;clip-path:polygon(0 0,100% 2.2vw,100% 100%,0 100%);padding-top:calc(56px + 2.2vw)}
.shear.bottom{clip-path:polygon(0 0,100% 2.2vw,100% calc(100% - 2.2vw),0 100%);padding-bottom:calc(56px + 2.2vw)}
@media(min-width:768px){.shear{padding-top:calc(88px + 2.2vw)}.shear.bottom{padding-bottom:calc(88px + 2.2vw)}}

/* where it works · v1.6 · 20 Sep 2026 · the whole country, our states by status.
   Geometry: assets/map.json, Albers USA 975x610, one projection for the map and the hero. */
.where{margin-top:32px;display:grid;gap:26px}
.where .map{width:100%}
.where svg{width:100%;height:auto;max-height:none;display:block}
.us{fill:var(--surf);stroke:var(--line);stroke-width:.6;opacity:.45}
.us-live{fill:var(--ink);stroke:var(--ink);stroke-width:1;opacity:1}
.us-wired{fill:var(--surf);stroke:var(--ink);stroke-width:1;opacity:1;transition:fill .25s}
.us-wired:hover{fill:var(--bg)}
.us-waiting{fill:none;stroke:var(--mute-strong);stroke-width:1;stroke-dasharray:4 3;opacity:.9}
.us-next{fill:none;stroke:var(--casing);stroke-width:.8;stroke-dasharray:3 4;opacity:.6}
.us-lbl{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.04em;fill:var(--ink)}
.us-lbl-live{fill:var(--bone)}
.us-lbl-waiting,.us-lbl-next{fill:var(--mute-strong);font-size:14px}
@media(max-width:899px){.us-lbl{font-size:22px}.us-lbl-waiting,.us-lbl-next{font-size:19px}}
.dark .us,:root[data-theme="dark"] .us{fill:var(--iron);stroke:#3A4550}
:root[data-theme="dark"] .us-live{fill:var(--bone);stroke:var(--bone)}
:root[data-theme="dark"] .us-lbl-live{fill:var(--crude)}
:root[data-theme="dark"] .us-wired{fill:var(--iron);stroke:var(--bone)}
:root[data-theme="dark"] .us-wired:hover{fill:#3A4550}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .us-live{fill:var(--bone);stroke:var(--bone)}
  :root:not([data-theme="light"]) .us-lbl-live{fill:var(--crude)}
  :root:not([data-theme="light"]) .us-wired{fill:var(--iron);stroke:var(--bone)}
}
.legend{display:grid;gap:14px}
.legend div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.legend div>i{flex:none;width:18px;height:18px;border:1px solid var(--ink);background:var(--surf);margin-top:2px}
.legend strong .live-dot{width:8px;height:8px;border:0;background:var(--ok);margin:0 8px 0 0}
.legend div>i.next{border:1px dashed var(--casing);background:transparent}
/* v1.4 · the roster: every state with a record, and where each one stands */
.roster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.roster li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surf);transition:border-color .25s,transform .25s}
.roster li:hover{border-color:var(--ink);transform:translateX(3px)}
.roster b{font-family:var(--display);font-size:17px;font-weight:700}
.roster .st{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute-strong);white-space:nowrap;align-self:center}
.roster .st .live-dot{width:7px;height:7px;margin-right:6px}
.roster .st-live .st{color:var(--ok);font-weight:600}
.roster .st-live{border-color:var(--ink)}
.roster .st-next,.roster .st-waiting{opacity:.72}
.roster .src{grid-column:1/-1;font-size:13px;color:var(--mute-strong);line-height:1.35}
@media(max-width:899px){.roster{grid-template-columns:1fr 1fr}.roster .src{display:none}}
@media(max-width:520px){.roster{grid-template-columns:1fr}}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:6px;transform:translate(-50%,-140%);opacity:0;transition:opacity .15s;white-space:nowrap;z-index:5}
.tip.on{opacity:1}

/* product row micro-animations */
.sig{display:block;width:100%;height:auto;max-width:260px;margin-top:10px}
.sig path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900}
.dark .sig path{stroke:var(--bone)}
.in .sig path{animation:sign 2.4s cubic-bezier(.4,0,.2,1) .4s forwards}
@keyframes sign{to{stroke-dashoffset:0}}
.code b{display:inline-block;min-width:.66em;text-align:center}
.card .act span{transition:transform .25s,background-color .25s,color .25s,border-color .25s}
.card .act span.hot{background:var(--ink);color:var(--bone);border-color:var(--ink);transform:translateY(-2px)}
.dark .card .act span.hot{background:var(--bone);color:var(--crude);border-color:var(--bone)}
.rate{display:inline-block;min-width:4.5ch}
.rate .caret{animation:blink 1s steps(1) infinite;border-left:2px solid var(--ink);margin-left:2px}
.dark .rate .caret{border-left-color:var(--bone)}
.bar{height:6px;background:var(--line);border-radius:3px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ok);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.in .bar i{width:var(--w,70%)}

/* pricing table rows */
.plans tbody tr{transition:background-color .2s}
.plans tbody tr:hover{background:var(--surf)}
.plans td.yes{position:relative}
.plans td.yes::before{content:"";display:inline-block;width:7px;height:12px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg);margin-right:8px;vertical-align:-1px}

/* footer wordmark breath */
.ftr img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ftr img:hover{transform:translateX(3px)}

/* dark surfaces */
.dark .beat{background:var(--iron);border-color:#3A4550}
.dark .beat:hover{border-color:var(--bone);box-shadow:0 22px 40px -30px rgba(0,0,0,.9)}
.dark .beat::after{background:var(--bone)}

/* v1.2 · comparison: the CRM you have, against Roughneck */
.cmp{margin-top:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surf);overflow:hidden}
.cmp-h,.cmp-r{display:grid;grid-template-columns:1fr}
.cmp-h{display:none}
.cmp-r{border-top:1px solid var(--line);transition:background .25s}
.cmp-r:first-of-type{border-top:0}
.cmp-r:hover{background:var(--bg)}
.cmp-r span{display:block;padding:14px 18px;font-size:16px;line-height:1.5}
.cmp-r span::before{display:block;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--mute-strong)}
.cmp-r span:first-child{color:var(--mute-strong);padding-bottom:6px}
.cmp-r span:first-child::before{content:"The CRM you have"}
.cmp-r span:last-child{font-weight:600;padding-top:6px}
.cmp-r span:last-child::before{content:"Roughneck";color:var(--ink)}
html[lang="es"] .cmp-r span:first-child::before{content:"El CRM que usted tiene"}
html[lang="ar"] .cmp-r span:first-child::before{content:"نظام CRM التقليدي"}
html[lang="zh-Hans"] .cmp-r span:first-child::before{content:"您现有的 CRM"}
@media(min-width:720px){
  .cmp-h,.cmp-r{grid-template-columns:1fr 1fr}
  .cmp-h{display:grid}
  .cmp-h span{padding:12px 20px;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-strong);border-bottom:1px solid var(--line)}
  .cmp-h span:last-child{color:var(--ink);border-left:1px solid var(--line)}
  .cmp-r span{padding:18px 20px}
  .cmp-r span::before{display:none}
  .cmp-r span:first-child,.cmp-r span:last-child{padding:18px 20px}
  .cmp-r span:last-child{border-left:1px solid var(--line);position:relative}
  .cmp-r span:last-child::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .cmp-r:hover span:last-child::after{transform:scaleY(1)}
}

/* v1.2 · the close rail: each step lights in order once the section is in view */
/* The chain. Five steps that run one after another, on a loop, because the
   argument of this section is that they are one unbroken run and a still
   picture of five boxes does not make that argument. The loop is 6s: a step
   lights every 0.55s, the wire between them flares just before each one, and
   for about a second in the middle all five are lit at once. That moment is
   the point of the whole animation. It only runs once the strip is on screen
   (.rail.in) and not at all under prefers-reduced-motion. */
.rail{list-style:none;display:grid;gap:10px;margin:28px 0 0;padding:0}
.rail li{position:relative;overflow:hidden;padding:14px 16px;border:1px solid #3A4550;
  border-radius:var(--r-card);background:var(--iron);opacity:.34;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s;
  transition-delay:calc(var(--d,0ms) + 300ms)}
.rail.in li{opacity:1;transform:none;border-color:#566470;
  animation:railstep 6s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay:calc(var(--i,0) * .55s + .35s)}
@keyframes railstep{
  0%,4%   {opacity:.34;border-color:#3A4550;background:var(--iron);transform:translateY(0) scale(1)}
  11%     {opacity:1;  border-color:var(--flare);background:#20262E;transform:translateY(-3px) scale(1.018)}
  18%     {opacity:1;  border-color:#7A6A38;background:#1C222A;transform:translateY(0) scale(1)}
  74%     {opacity:1;  border-color:#566470;background:var(--iron);transform:translateY(0) scale(1)}
  86%,100%{opacity:.34;border-color:#3A4550;background:var(--iron);transform:translateY(0) scale(1)}
}
/* the sheen that crosses a card at the instant it takes the signal */
.rail.in li::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(245,180,0,.16) 50%,transparent 62%);
  background-size:260% 100%;background-position:130% 0;
  animation:railsheen 6s ease-out infinite;animation-delay:calc(var(--i,0) * .55s + .35s)}
@keyframes railsheen{0%,4%{background-position:130% 0}22%{background-position:-60% 0}100%{background-position:-60% 0}}

.rail .k{font-family:var(--mono);font-size:12px;color:var(--casing-light)}
.rail b{display:block;font-family:var(--display);font-size:22px;font-weight:800;line-height:1.1;margin-top:4px;color:var(--bone)}
.rail em{display:inline-block;margin-top:8px;font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#8DB37A}
.rail.in em{animation:railword 6s ease-out infinite;animation-delay:calc(var(--i,0) * .55s + .35s)}
@keyframes railword{0%,6%{opacity:0;transform:translateY(3px)}14%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.rail em::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#8DB37A;margin-right:7px;vertical-align:1px;transform:scale(0);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--d,0ms) + 600ms)}
.rail.in em::before{transform:scale(1);
  animation:raildot 6s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--i,0) * .55s + .35s)}
@keyframes raildot{
  0%,6%{transform:scale(0);box-shadow:0 0 0 0 rgba(141,179,122,.55)}
  13%  {transform:scale(1.45);box-shadow:0 0 0 5px rgba(141,179,122,0)}
  20%,84%{transform:scale(1);box-shadow:0 0 0 0 rgba(141,179,122,0)}
  94%,100%{transform:scale(0);box-shadow:0 0 0 0 rgba(141,179,122,0)}
}
/* mobile keeps the chain: the wire runs down the left instead of across */
@media(max-width:719px){
  .rail li+li::before{content:"";position:absolute;left:18px;top:-10px;width:2px;height:10px;
    background:linear-gradient(180deg,var(--flare) 0 50%,#566470 50%);background-size:100% 200%;
    background-position:0 100%;animation:railwire-v 6s linear infinite;
    animation-delay:calc(var(--i,0) * .55s + .1s)}
  @keyframes railwire-v{0%,5%{background-position:0 100%}13%,76%{background-position:0 0}86%,100%{background-position:0 100%}}
}
@media(min-width:720px){
  .rail{grid-template-columns:repeat(5,1fr);gap:14px}
  .rail li+li::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;
    margin-top:-1px;background:#566470}
  .rail.in li+li::before{
    background:linear-gradient(90deg,var(--flare) 0 50%,#566470 50%);background-size:200% 100%;
    background-position:100% 0;animation:railwire 6s linear infinite;
    animation-delay:calc(var(--i,0) * .55s + .1s)}
  @keyframes railwire{0%,5%{background-position:100% 0}13%,76%{background-position:0 0}86%,100%{background-position:100% 0}}
}
/* the line under the chain, which only means anything once the chain has run */
.rail-say{margin:20px 0 0;max-width:58ch;font-size:15px;line-height:1.65;color:var(--dark-mute)}
.rail-say b{color:var(--bone);font-weight:600}
.opt{font-weight:500;color:var(--mute-strong);font-size:13px;margin-left:6px}
/* the signing page's payment block */
.wire #paybtn{width:100%;justify-content:center;margin-top:14px}
.wire .paid-ok{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:rgba(78,107,63,.1);
  border:1px solid rgba(78,107,63,.35);color:#3D5531;font-size:14px;font-weight:600}
.dark .wire .paid-ok{background:rgba(141,179,122,.12);border-color:rgba(141,179,122,.4);color:#B6D3A3}
.wire .a-note.bad{margin:10px 0 0;font-size:13.5px;color:#D2372F}

@media (prefers-reduced-motion:reduce){
  [data-reveal],.words .w{opacity:1;transform:none;transition:none}
  .co{stroke-dashoffset:0;animation:none}
  .map-in .co{animation:none}
  .tape-in{animation:none}
  .btn,.beat,.tilt,.phone{transition:none}
  .say .caret,.live-dot::after,.rate .caret{animation:none}
  .sig path{stroke-dashoffset:0;animation:none}
  .bar i{transition:none;width:var(--w,70%)}
  .rail li,.rail em::before,.cmp-r span:last-child::after{transition:none}
  .rail li{opacity:1;transform:none}
  .rail em::before{transform:scale(1)}
  .rail.in li,.rail.in li::after,.rail.in em,.rail.in em::before,.rail.in li+li::before{animation:none}
  .rail.in li{opacity:1;border-color:#566470}
  .rail.in em{opacity:1}
  .rail.in em::before{transform:scale(1)}
  .rail.in li::after{display:none}
}

@media(max-width:899px){.theme{display:none}.hdr .btn-ink{padding:12px 14px}}

section,main,.where,.row{overflow-x:clip}

/* dark rows: the phone is dark too, and every box inside it stays readable */
.dark .phone{background:var(--iron);border-color:#3A4550;box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.dark .phone-bar{color:var(--casing-light)}
.dark .card{background:var(--crude);border-color:#3A4550;color:var(--bone)}
.dark .card .say{background:var(--iron);color:var(--bone)}
.dark .card .tag,.dark .card .due{color:var(--casing-light)}
.dark .card .who{border-top-color:#3A4550}
.dark .card .who .num{color:var(--bone)}
.dark .card .act span{border-color:#3A4550;color:var(--bone)}
.dark .card .act .call{background:var(--bone);color:var(--crude);border-color:var(--bone)}
.dark .card .src{color:var(--info)}
.dark .rate .caret{border-left-color:var(--bone)}
.dark .say .caret{background:var(--bone)}
.dark .bar{background:#3A4550}
/* hero map dissolves before it reaches the headline */
.hero-map{-webkit-mask-image:linear-gradient(to right,transparent 0,transparent 28%,#000 55%);mask-image:linear-gradient(to right,transparent 0,transparent 28%,#000 55%)}
@media(max-width:899px){.hero-map{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}}

/* v1.5 · 20 Sep 2026 · product beats, the rules, the operators page, the pulls line */
.finds{display:grid;gap:8px;margin-top:10px}
.find{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.4;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--bg)}
.find .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;margin-top:1px}
.find .k.open{background:var(--surf);color:var(--accent-txt);border-color:var(--accent-txt)}
.find .k.link{background:#E2F0E8;color:#1F6B47;border-color:transparent}
.find .k.warn{background:#F4E7CD;color:#7A5A0B;border-color:transparent}
.dark .find{background:var(--crude);border-color:#3A4550;color:var(--bone)}
.dark .find .k.open{background:var(--iron);color:var(--flare);border-color:var(--flare)}
.card .say.dark-say{background:var(--crude);color:var(--bone);border:1px solid var(--crude)}
.dark .card .say.dark-say{background:var(--bone);color:var(--crude);border-color:var(--bone)}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 4px}
.tiles3 div{padding:10px 8px;border:1px solid var(--line);border-radius:var(--r-btn);text-align:center;background:var(--bg)}
.tiles3 b{display:block;font-family:var(--display);font-size:26px;line-height:1;font-weight:800}
.tiles3 span{display:block;font-size:12px;color:var(--mute-strong);margin-top:4px}
.dark .tiles3 div{background:var(--iron);border-color:#3A4550;color:var(--bone)}
.dark .tiles3 span{color:var(--casing-light)}
.rules{margin:16px 0 8px;padding-left:34px;display:grid;gap:12px}
.rules li{font-size:17px;line-height:1.55;padding-left:4px}
.rules li::marker{font-family:var(--mono);font-weight:500;color:var(--mute-strong)}
.rules b{font-weight:600}
.disclaimer{font-size:14px;color:var(--mute-strong);margin-top:12px}
.disclaimer a{color:var(--mute-strong)}
.pulls{margin-top:40px;font-size:11.5px;letter-spacing:.02em;color:var(--mute-strong);opacity:.8;line-height:1.7}
.pulls a{color:var(--mute-strong)}
.doc h1.words{max-width:none}
.card .who .num{white-space:nowrap}

/* the number on screen at registration · 20 Sep 2026 */
.quote-lede{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 10px}
.quote-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;text-align:left}
.quote-row:last-of-type{border-bottom:0}
.quote-row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.quote-row.tot{font-weight:600}
.quote-note{font-size:13px;color:var(--mute);margin:10px 0 0;text-align:left;line-height:1.5}
/* hover for a second and it explains itself */
.tipword{border-bottom:1px dotted var(--mute);cursor:help}
#tipbox{position:fixed;z-index:99;max-width:300px;background:var(--ink);color:var(--bg);padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.28);pointer-events:none}

/* ── build your shop ──────────────────────────────────────────────────────
   The picker on /pricing.

   EVERY colour here is a token. The first version used hardcoded #fff panels
   with var(--ink) text, which is correct in light mode and invisible in dark,
   because --ink flips to near-white. Do not put a literal background colour
   in this file: --surf is a card, --wash is a quiet panel, --panel is the
   dark receipt that stays dark in both themes.

   The movement exists to make the thing feel like it is answering him. It is
   all transform and opacity, so it costs nothing to paint, and all of it is
   off under prefers-reduced-motion. */
.shop{position:relative;display:grid;gap:26px;margin:22px 0 6px;padding-left:22px}
@media(min-width:900px){.shop{grid-template-columns:1fr 310px;align-items:start;column-gap:34px}
  .shop .q{grid-column:1} .shop .tally2{grid-column:2;grid-row:1/6;position:sticky;top:88px;max-height:calc(100vh - 104px);display:flex;flex-direction:column}
  .shop .tally2 ul{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .shop .tally2 > :not(ul){flex:none}}
/* 28 Sep 2026: the sticky header is 65px tall, so the box sticks below it (it sat under it at 22px), and when the list grows past the screen, the list scrolls and the number and the button stay in view. */
.shop .rail{position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--line);
  border-radius:2px;overflow:hidden}
.shop .rail i{display:block;width:100%;height:0;background:var(--accent);border-radius:2px;
  transition:height .45s cubic-bezier(.2,.75,.2,1)}
.shop .q{opacity:0;transform:translateY(10px);animation:qrise .5s cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay:calc(var(--qi,0)*90ms)}
@keyframes qrise{to{opacity:1;transform:none}}
.shop .q h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:20px}
.shop .qn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;
  border-radius:50%;background:var(--ink);color:var(--bg);font-size:13px;font-weight:700;
  transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.shop .q:hover .qn{transform:rotate(-8deg) scale(1.08)}
.shop .qh{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--mute-strong);max-width:62ch}
.shop .not-sold{border-left:3px solid var(--line);padding-left:12px;margin-top:14px}

.sellers{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sellers .step{width:44px;height:44px;border:1px solid var(--line);background:var(--surf);border-radius:10px;
  font-size:22px;line-height:1;cursor:pointer;color:var(--ink);
  transition:border-color .2s,background .2s,transform .12s}
.sellers .step:hover{border-color:var(--ink);background:var(--wash)}
.sellers .step:active{transform:scale(.92)}
.sellers input{width:96px;height:44px;text-align:center;font:700 22px/1 var(--display);
  border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--ink);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.sellers input::-webkit-outer-spin-button,.sellers input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sellers input.bump{animation:bump .34s cubic-bezier(.3,1.5,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.sellers .band{margin-left:6px;padding:7px 15px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line)}
.sellers .band.flip{animation:flip .42s cubic-bezier(.3,1.3,.4,1)}
@keyframes flip{0%{transform:rotateX(0) scale(1)}45%{transform:rotateX(-70deg) scale(1.04)}100%{transform:none}}
.sellers .band b{display:block;font:700 17px/1.15 var(--display);color:var(--accent)}
.sellers .band span{display:block;font-size:11.5px;color:var(--panel-mute)}

.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:9px}
.pst{position:relative;cursor:pointer}
.pst input{position:absolute;opacity:0;width:1px;height:1px}
.pst-in{position:relative;display:block;height:100%;padding:13px;border:1px solid var(--line);
  border-radius:11px;background:var(--surf);overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.75,.2,1),border-color .2s,box-shadow .22s}
.pst-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.75,.2,1)}
.pst:hover .pst-in{transform:translateY(-3px);border-color:var(--ink);
  box-shadow:0 12px 28px rgb(var(--shadow)/var(--shadow-a))}
.pst:hover .pst-in::after{transform:scaleX(1)}
.pst input:focus-visible+.pst-in{outline:2px solid var(--accent);outline-offset:2px}
.pst input:checked+.pst-in{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
  animation:pick .38s cubic-bezier(.3,1.4,.4,1)}
.pst input:checked+.pst-in::after{transform:scaleX(1)}
@keyframes pick{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:none}}
.pst-in b{display:block;font:700 16px/1.2 var(--display);color:var(--ink)}
.pst-in em{display:inline-block;margin-top:5px;font-style:normal;font:700 9.5px/1 var(--display);
  letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:4px;
  color:var(--ink);background:var(--wash);transition:transform .25s cubic-bezier(.3,1.4,.4,1)}
.pst:hover .pst-in em{transform:translateY(-1px) scale(1.04)}
.pst[data-tier="premium"] .pst-in em{background:var(--accent);color:var(--crude)}
.pst[data-tier="anchor"] .pst-in em{background:var(--ink);color:var(--bg)}
.pst-why{display:block;margin-top:8px;font-style:normal;font-size:12px;line-height:1.45;color:var(--mute-strong)}
.pst-now{display:block;margin-top:7px;font-style:normal;font:600 11px/1.3 var(--display);
  letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}

.adds{display:grid;gap:9px}
@media(min-width:620px){.adds{grid-template-columns:1fr 1fr}}
.ad{position:relative;display:block;padding:14px 15px 14px 40px;border:1px solid var(--line);
  border-radius:11px;background:var(--surf);cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.75,.2,1),border-color .2s,box-shadow .22s}
.ad:hover{transform:translateY(-3px);border-color:var(--ink);
  box-shadow:0 12px 28px rgb(var(--shadow)/var(--shadow-a))}
.ad input{position:absolute;opacity:0;width:1px;height:1px}
.ad .tick{position:absolute;left:14px;top:16px;width:17px;height:17px;border:1px solid var(--mute);
  border-radius:5px;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.5,.4,1)}
.ad input:checked~.tick{background:var(--ink);border-color:var(--ink);transform:scale(1.08)}
.ad input:checked~.tick::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:2px solid var(--bg);border-top:0;border-left:0;transform:rotate(42deg)}
.ad:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ad input:focus-visible~.tick{outline:2px solid var(--accent);outline-offset:2px}
.ad b{display:block;font:700 16px/1.25 var(--display);color:var(--ink)}
.ad span{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:var(--mute-strong)}
.ad em{display:block;margin-top:7px;font-style:normal;font-size:12px;line-height:1.5;color:var(--mute)}
.soon-tag{display:inline-block;margin-top:5px;font:700 9.5px/1 var(--display);letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:4px 7px;border-radius:4px;
  background:var(--wash);color:var(--mute-strong)}
.ad.soon{border-style:dashed}

.terms{display:grid;gap:9px}
@media(min-width:620px){.terms{grid-template-columns:1fr 1fr}}
.tm{position:relative;display:block;padding:15px;border:1px solid var(--line);border-radius:11px;
  background:var(--surf);cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.75,.2,1),border-color .2s,box-shadow .22s}
.tm:hover{transform:translateY(-3px);border-color:var(--ink);
  box-shadow:0 12px 28px rgb(var(--shadow)/var(--shadow-a))}
.tm input{position:absolute;opacity:0;width:1px;height:1px}
.tm:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tm:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.tm b{display:block;font:700 15.5px/1.25 var(--display);color:var(--ink)}
.tm span{display:block;margin-top:5px;font-size:13px;color:var(--mute-strong)}

.tally2{padding:18px 18px 20px;border:1px solid var(--line);border-radius:13px;background:var(--wash)}
.tally2 h4{margin:0 0 12px;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute-strong)}
.tally2 ul{list-style:none;margin:0;padding:0}
.tally2 li{padding:9px 0;border-bottom:1px solid var(--line);animation:slidein .34s cubic-bezier(.2,.75,.2,1)}
.tally2 li:last-child{border-bottom:0}
@keyframes slidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.tally2 li em{display:block;font-style:normal;font:700 9.5px/1 var(--display);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.tally2 li b{display:block;font:700 15px/1.25 var(--display);color:var(--ink)}
.tally2 li span{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--mute-strong)}
.tally2 .clock{margin:14px 0;padding:13px 14px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line)}
.tally2 .clock em{display:block;font-style:normal;font:700 9.5px/1 var(--display);letter-spacing:.1em;
  text-transform:uppercase;color:var(--panel-mute)}
.tally2 .clock b{display:block;margin-top:6px;font:800 21px/1.15 var(--display);color:var(--accent);
  letter-spacing:-.01em}
.tally2 .clock b.tick{animation:ticked .5s cubic-bezier(.3,1.4,.4,1)}
@keyframes ticked{0%{opacity:.35;transform:translateY(3px)}100%{opacity:1;transform:none}}
.tally2 .clock span{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--panel-mute)}
.tally2 .btn{width:100%;justify-content:center;position:relative;overflow:hidden}
.tally2 .btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.tally2 .btn:not(.is-off):hover::after{animation:sheen .7s ease-out}
@keyframes sheen{to{transform:translateX(120%) skewX(-18deg)}}
.tally2 .btn.is-off{pointer-events:none;opacity:.42}
.tally2 .fine{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--mute)}

/* ── the signing page ──────────────────────────────────────────────────── */
.sign{max-width:640px;margin:0 auto;padding:26px 16px 60px}
.sign .doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.sign .face{font:800 22px/1 var(--display);color:var(--ink);letter-spacing:.02em}
.sign .no{font:600 12px/1.4 var(--display);letter-spacing:.06em;color:var(--mute-strong);text-align:right}
.sign .ln{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.sign .ln b{display:block;font:600 15.5px/1.3 var(--display);color:var(--ink)}
.sign .ln p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--mute-strong);max-width:44ch}
.sign .ln i{font-style:normal;font:600 16px/1.3 var(--display);white-space:nowrap;color:var(--ink)}
.sign .ln i.open{color:var(--mute-strong);font-weight:500}
.sign .due{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;
  padding:16px 18px;border-radius:11px;background:var(--wash);border:1px solid var(--line)}
.sign .due b{font:700 16px/1 var(--display);color:var(--ink)}
.sign .due i{font-style:normal;font:800 25px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
/* the pad stays white in both themes: you sign in dark ink, on paper */
.sign .pad{width:100%;height:150px;border:1px dashed var(--mute);border-radius:11px;background:#FFFFFF;
  touch-action:none;display:block}
.sign .padrow{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.sign .padrow span{font-size:12px;color:var(--mute)}
.sign .padrow button{background:none;border:0;font-size:12.5px;color:var(--mute-strong);
  text-decoration:underline;cursor:pointer}
.sign .fld{margin-top:14px}
.sign .fld label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.sign .fld input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:16px;background:var(--surf);color:var(--ink)}
.sign .wire{margin-top:22px;padding:18px;border-radius:12px;border:1px solid var(--line);background:var(--surf)}
.sign .wire h3{margin:0 0 4px;font-size:17px;color:var(--ink)}
.sign .wire dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.sign .wire dt{font-weight:600;color:var(--ink)}
.sign .wire dd{margin:0;color:var(--mute-strong);line-height:1.55}
.sign .done{padding:20px;border-radius:12px;background:var(--panel);color:var(--panel-ink);
  margin-bottom:20px;border:1px solid var(--line)}
.sign .done b{display:block;font:800 21px/1.2 var(--display);color:var(--accent)}
.sign .done p{margin:8px 0 0;color:var(--panel-mute);font-size:14px;line-height:1.6}
.sign .warn{padding:14px 16px;border-radius:10px;background:var(--surf);border:1px solid var(--bad);
  font-size:14px;line-height:1.55;color:var(--ink);margin:14px 0}

@media (prefers-reduced-motion:reduce){
  .shop .q,.sellers input.bump,.sellers .band.flip,.pst input:checked+.pst-in,
  .tally2 li,.tally2 .clock b.tick,.tally2 .btn::after{animation:none}
  .shop .q{opacity:1;transform:none}
  .pst:hover .pst-in,.ad:hover,.tm:hover,.shop .q:hover .qn{transform:none}
}

/* ── the dots ─────────────────────────────────────────────────────────────
   Three dots that breathe in sequence, for anything the reader is waiting
   on. Flare, not the warm grey Claude uses, because on this site the accent
   is the thing that means "working".

   Two rules kept them from looking cheap: the dots never travel, they only
   change size and weight, and they never go fully out. A dot that vanishes
   reads as a fault. */
.dots{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:2px}
.dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);
  opacity:.28;transform:scale(.72);
  animation:dot 1.25s cubic-bezier(.45,0,.55,1) infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,72%,100%{opacity:.28;transform:scale(.72)}30%{opacity:1;transform:scale(1)}}
.dots.lg i{width:10px;height:10px}
.dots.lg{gap:7px}
/* on a flare button the dots have to be the ink, not the accent */
.btn-flare .dots i{background:var(--crude)}

@media (prefers-reduced-motion:reduce){
  .dots i{animation:none;opacity:.7;transform:none}
}


/* ---------- Arabic and Chinese · 25 Sep 2026 ---------- */
/* Arabic. Plex Sans Arabic for everything, including the places the Latin
   site sets in Barlow or Plex Mono: neither has an Arabic glyph. Letter-spacing
   is zero everywhere because spacing breaks the joins between letters. Text
   runs larger and looser than the Latin, which is how Arabic is set. */
html[lang="ar"]{--display:"IBM Plex Sans Arabic","Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;--font:"IBM Plex Sans Arabic","Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;--mono:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;--sans:var(--font)}
html[lang="ar"] body{font-size:17px;line-height:1.6}
html[lang="ar"] *{letter-spacing:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-weight:700;line-height:1.25}
html[lang="ar"] h1{font-size:clamp(36px,7.6vw,66px)}
html[lang="ar"] h2{font-size:clamp(27px,4.8vw,42px)}
html[lang="ar"] .hero h1{max-width:16ch}
html[lang="ar"] .hero .lede{max-width:40ch}
html[lang="ar"] .lede{line-height:1.7}
html[lang="ar"] .kicker,html[lang="ar"] .tag,html[lang="ar"] .tape span,html[lang="ar"] .roster .st,html[lang="ar"] .cmp-h span,html[lang="ar"] .cmp-r span::before,html[lang="ar"] .tip{text-transform:none;font-weight:600}
html[lang="ar"] .tape span{font-size:14px}
html[lang="ar"] .roster li{grid-template-columns:1fr}
html[lang="ar"] .roster .st{white-space:normal;line-height:1.5;font-size:12.5px}
[dir="rtl"] .roster .st .live-dot{margin-right:0;margin-left:6px}
html[lang="ar"] .stat b,html[lang="ar"] .beat .n,html[lang="ar"] .rail .k{font-family:"Barlow Semi Condensed","Inter",sans-serif}
html[lang="ar"] .stat b{letter-spacing:-.02em}
html[lang="ar"] .card .say{font-size:15.5px;line-height:1.6}
/* Right to left: everything that leaned left now leans right. */
[dir="rtl"] .brand:hover img,[dir="rtl"] .ftr img:hover{transform:translateX(-2px)}
[dir="rtl"] .roster li:hover{transform:translateX(-3px)}
[dir="rtl"] .beat:hover .n{transform:translateX(-4px)}
[dir="rtl"] .nav a::after,[dir="rtl"] .beat::after{transform-origin:right}
[dir="rtl"] .sheet a:hover,[dir="rtl"] .sheet a:focus-visible{padding-left:var(--gutter);padding-right:calc(var(--gutter) + 6px)}
[dir="rtl"] [data-reveal="left"]{transform:translateX(26px)}
[dir="rtl"] [data-reveal="right"]{transform:translateX(-26px)}
[dir="rtl"] .words .w{transform-origin:100% 100%}
[dir="rtl"] .btn:hover .ar,[dir="rtl"] .btn:focus-visible .ar{margin-left:0;margin-right:2px}
[dir="rtl"] .stat b small{margin-left:0;margin-right:2px}
[dir="rtl"] .hero-map{justify-content:flex-start;-webkit-mask-image:linear-gradient(to left,transparent 0,transparent 28%,#000 55%);mask-image:linear-gradient(to left,transparent 0,transparent 28%,#000 55%)}
[dir="rtl"] .hero-map svg{transform:translate(-10%,-6%)}
@keyframes tape-rtl{to{transform:translateX(50%)}}
[dir="rtl"] .tape-in{animation-name:tape-rtl}
[dir="rtl"] .cmp-r span:last-child::after{left:auto;right:0}
[dir="rtl"] .lang-pick summary{padding:0 10px 0 12px}
@media(min-width:720px){[dir="rtl"] .rail li+li::before{left:auto;right:-14px}}
@media(max-width:719px){[dir="rtl"] .rail li+li::before{left:auto;right:18px}}
/* Chinese. System CJK faces, no web font: fonts.googleapis.com does not answer
   from the mainland and a stylesheet that never arrives holds the page. */
html[lang="zh-Hans"]{--display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;--mono:"IBM Plex Mono","PingFang SC","Microsoft YaHei",monospace}
html[lang="zh-Hans"] body{line-height:1.6}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3{font-weight:700;letter-spacing:.01em;line-height:1.2}
html[lang="zh-Hans"] h1{font-size:clamp(32px,5.8vw,56px)}
html[lang="zh-Hans"] h2{font-size:clamp(26px,4.6vw,40px)}
html[lang="zh-Hans"] .hero h1{max-width:12em}
html[lang="zh-Hans"] .hero .lede{max-width:22em}
html[lang="zh-Hans"] .lede{line-height:1.7}
html[lang="zh-Hans"] .kicker,html[lang="zh-Hans"] .tag,html[lang="zh-Hans"] .tape span,html[lang="zh-Hans"] .roster .st,html[lang="zh-Hans"] .cmp-h span,html[lang="zh-Hans"] .cmp-r span::before,html[lang="zh-Hans"] .tip{letter-spacing:.06em;font-family:var(--font);font-weight:600}
html[lang="zh-Hans"] .stat b,html[lang="zh-Hans"] .beat .n,html[lang="zh-Hans"] .rail .k{font-family:"Barlow Semi Condensed","Inter",sans-serif}
html[lang="zh-Hans"] .strip p{max-width:22em}

/* ============================================================
   v3.1 · 26 Sep 2026 · the product page: polish and motion
   Brandon: the buttons looked off, the page needed to move like a company
   that means it, and every card had to fit the words beside it.
   Everything here is off under prefers-reduced-motion (block at the end).
   ============================================================ */

/* the pair of buttons: same size, arrow always shown, stacked full width on a phone */
.cta-pair{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px;max-width:480px}
@media(min-width:520px){.cta-pair{grid-template-columns:1fr 1fr}}
.cta-pair .btn{width:100%;min-height:58px;border-radius:14px;font-size:17px;padding:14px 20px;gap:10px}
.cta-pair .btn .ar,.pp-strip .btn .ar,.pp-whole .btn .ar{width:1.1em;margin-left:0}
.btn .ar{transition:width .3s cubic-bezier(.2,.7,.2,1),margin .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.cta-pair .btn:hover .ar,.pp-strip .btn:hover .ar,.pp-whole .btn:hover .ar{transform:translateX(4px)}
.pp-shine.btn-flare{border-color:rgba(20,22,26,.28);box-shadow:0 14px 30px -16px rgba(245,180,0,.95),inset 0 -2px 0 rgba(20,22,26,.14)}
.cta-pair .btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:color-mix(in srgb,var(--surf) 55%,transparent)}
.cta-pair .btn-ghost:hover{background:var(--ink);color:var(--bg)}
.pp-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);
  animation:ppshine 5s cubic-bezier(.4,0,.2,1) 1.4s infinite}
@keyframes ppshine{0%{left:-60%}26%,100%{left:130%}}
.pp-strip .btn{border-radius:14px;min-height:58px}

/* hero: a live grid, three slow lights, the morning feed */
.pp-hero{position:relative;overflow:hidden;padding-bottom:36px}
.pp-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pp-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 72% 30%,#000 15%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 65% at 72% 30%,#000 15%,transparent 72%);
  animation:ppgrid 28s linear infinite}
@keyframes ppgrid{to{background-position:56px 56px,56px 56px}}
.pp-bg i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.6;animation:pporb 18s ease-in-out infinite alternate}
.pp-bg i:nth-child(1){width:540px;height:540px;right:-140px;top:-180px;background:radial-gradient(circle,rgba(245,180,0,.55),transparent 65%)}
.pp-bg i:nth-child(2){width:440px;height:440px;left:-160px;bottom:-220px;background:radial-gradient(circle,rgba(47,106,154,.30),transparent 65%);animation-duration:23s}
.pp-bg i:nth-child(3){width:320px;height:320px;right:32%;top:42%;background:radial-gradient(circle,rgba(78,107,63,.26),transparent 65%);animation-duration:27s}
@keyframes pporb{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-44px,30px) scale(1.08)}100%{transform:translate(30px,-22px) scale(.94)}}
.pp-hero .wrap,.pp-final .wrap{position:relative;z-index:1}
.pp-hero-in{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.pp-hero-in{grid-template-columns:1.12fr .88fr;gap:52px}}
.pp-kick{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--surf) 72%,transparent)}
.pp-kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 3px rgba(245,180,0,.25)}
.row.dark .pp-kick{background:transparent;border-color:#3A4550}

.pp-feed{position:relative;width:100%;max-width:420px;justify-self:center;padding:14px;border:1px solid var(--line);border-radius:24px;
  background:color-mix(in srgb,var(--surf) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 44px 80px -48px rgba(20,22,26,.65)}
.pp-feed.in{animation:ppbob 7s ease-in-out 1s infinite}
@keyframes ppbob{50%{transform:translateY(-9px)}}
.fd-bar{display:flex;align-items:center;padding:2px 4px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-strong)}
.fd-win{height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.fd-in{display:grid;gap:10px;animation:ppfeed 22s linear infinite}
.pp-feed:hover .fd-in{animation-play-state:paused}
@keyframes ppfeed{to{transform:translateY(calc(-50% - 5px))}}
.fd{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.fd-dot{width:10px;height:10px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 4px rgba(245,180,0,.2)}
.fd:nth-child(5n+2) .fd-dot{background:var(--ok);box-shadow:0 0 0 4px rgba(78,107,63,.2)}
.fd:nth-child(5n+4) .fd-dot{background:var(--info);box-shadow:0 0 0 4px rgba(47,106,154,.2)}
.fd-tx{min-width:0}
.fd-tx b{display:block;font-family:var(--display);font-size:18px;font-weight:800;line-height:1.1}
.fd-tx i{display:block;margin-top:2px;font-style:normal;font-size:13px;color:var(--mute-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--bg)}

/* the nine steps, a light running down the chain */
.pp-chain{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:48px 0 0;padding:0}
.pp-chain li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--line);border-radius:999px;
  color:var(--mute-strong);background:color-mix(in srgb,var(--surf) 70%,transparent)}
.pp-chain.in li{animation:ppchain 7.2s ease-in-out infinite;animation-delay:calc(var(--i) * .6s + .6s)}
@keyframes ppchain{0%,3%{border-color:var(--line);color:var(--mute-strong);transform:none;box-shadow:none}
  8%{border-color:var(--flare);color:var(--ink);transform:translateY(-3px);box-shadow:0 8px 18px -10px rgba(245,180,0,.9)}
  16%,100%{border-color:var(--line);color:var(--mute-strong);transform:none;box-shadow:none}}

/* the step rail on a wide screen */
.pp-nav{display:none}
@media(min-width:1280px){
  .pp-nav{display:flex;flex-direction:column;gap:6px;position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:40;
    opacity:0;pointer-events:none;transition:opacity .4s}
  .pp-nav.show{opacity:1;pointer-events:auto}
  .pp-nav a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mute-strong)}
  .pp-nav i{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:var(--bg);
    font-style:normal;font-family:var(--mono);font-size:11px;transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s,color .3s}
  .pp-nav span{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;white-space:nowrap;font-size:13px;font-weight:600;
    padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surf);color:var(--ink)}
  .pp-nav:hover span{opacity:1;transform:none}
  .pp-nav a.on i{background:var(--flare);border-color:var(--flare);color:var(--crude);transform:scale(1.14)}
  .pp-nav a:hover i{border-color:var(--ink)}
}

/* rows: a big step number drifting behind, a glow turning behind the phone */
.pp-row{position:relative}
.pp-row .wrap{position:relative;z-index:1}
.pp-num{position:absolute;right:3%;top:18px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:800;font-size:clamp(110px,19vw,260px);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px var(--line);opacity:.85}
.pp-row.flip .pp-num{right:auto;left:3%}
.pp-row.dark .pp-num{-webkit-text-stroke-color:#3A4550}
@media(max-width:899px){.pp-num{font-size:120px;top:8px;opacity:.55}}
@supports (animation-timeline:view()){
  .pp-num{animation:ppnum linear both;animation-timeline:view()}
  @keyframes ppnum{from{transform:translateY(100px)}to{transform:translateY(-100px)}}
}
.pp-vis{position:relative}
.pp-vis .phone{position:relative;z-index:1}
.pp-glow{position:absolute;left:50%;top:50%;width:115%;height:88%;border-radius:50%;pointer-events:none;opacity:.75;filter:blur(54px);
  background:conic-gradient(from 0deg,rgba(245,180,0,0),rgba(245,180,0,.38),rgba(47,106,154,.2),rgba(245,180,0,0),rgba(78,107,63,.22),rgba(245,180,0,0));
  transform:translate(-50%,-50%);animation:ppspin 18s linear infinite}
@keyframes ppspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.row.dark .pp-glow{opacity:.5}
@media(min-width:900px){.pp-vis{animation:ppfloat 9s ease-in-out infinite}}
@keyframes ppfloat{50%{transform:translateY(-10px)}}

/* each card builds itself, line by line, when it comes into view */
.phone .stag>*{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.phone.in .stag>*{opacity:1;transform:none}
.phone.in .stag>*:nth-child(2){transition-delay:.12s}.phone.in .stag>*:nth-child(3){transition-delay:.24s}
.phone.in .stag>*:nth-child(4){transition-delay:.36s}.phone.in .stag>*:nth-child(5){transition-delay:.48s}
.phone.in .stag>*:nth-child(6){transition-delay:.6s}.phone.in .stag>*:nth-child(7){transition-delay:.72s}
.phone.in .stag>*:nth-child(8){transition-delay:.84s}.phone.in .stag>*:nth-child(9){transition-delay:.96s}
.phone.in .stag>*:nth-child(10){transition-delay:1.08s}.phone.in .stag>*:nth-child(11){transition-delay:1.2s}

/* Value: one line, labeled, not a footnote */
.pp-row .val{display:flex;gap:10px;align-items:baseline;margin-top:22px;padding:14px 16px;border-radius:14px;max-width:44ch;
  font-size:17px;line-height:1.45;color:var(--ink);
  background:color-mix(in srgb,var(--flare) 12%,transparent);border:1px solid color-mix(in srgb,var(--flare) 45%,transparent)}
.pp-row .val b{flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--flare);color:var(--crude)}
.pp-row.dark .val{color:var(--bone);background:rgba(245,180,0,.10);border-color:rgba(245,180,0,.35)}

/* the add-on box (Sales IQ, The Handshake): a name and what it does */
.addon{position:relative;overflow:hidden;display:flex;gap:14px;align-items:flex-start;margin-top:20px;padding:16px 18px 16px 20px;max-width:44ch;
  border:1px solid var(--line);border-radius:16px;background:var(--surf);box-shadow:0 18px 36px -28px rgba(20,22,26,.5)}
.addon::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--flare)}
.addon-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--crude);color:var(--flare)}
.addon-ic svg{width:18px;height:18px;fill:currentColor}
.addon-tx{display:grid;gap:4px;min-width:0}
.addon-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.addon-h b{font-family:var(--display);font-size:21px;font-weight:800;line-height:1.1}
.addon-h em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--mute-strong)}
.addon-d{font-size:15px;line-height:1.45;color:var(--mute-strong)}
.row .addon p,.row .addon-d{max-width:none}
.row.dark .addon{background:var(--iron);border-color:#3A4550;box-shadow:none}
.row.dark .addon-d,.row.dark .addon-h em{color:var(--casing-light)}
.row.dark .addon-h em{border-color:#3A4550}

/* card parts */
.card .say.dark-say{background:var(--ink);color:var(--bg)}
.dark .card .say.dark-say{background:var(--bone);color:var(--crude)}
.card .say.big{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.15;padding:16px}
.imp{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.imp .t{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 7px;border-radius:999px;white-space:nowrap}
.imp .t.ok{background:#E2F0E8;color:#1F6B47}
.imp .t.new{background:var(--wash);color:var(--mute-strong);border:1px solid var(--line)}
.imp .c{display:grid;min-width:0}
.imp b{font-weight:650;font-size:15px}
.imp i{font-style:normal;font-size:12.5px;color:var(--mute-strong)}
.dark .imp{border-top-color:#3A4550}
.dark .imp .t.ok{background:rgba(141,179,122,.16);color:#B6D3A3}
.dark .imp .t.new{background:transparent;color:var(--casing-light);border-color:#3A4550}
.dark .imp i{color:var(--casing-light)}
.rd-top{display:flex;gap:14px;align-items:center;margin:4px 0 8px}
.ring{position:relative;flex:none;width:80px;height:80px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.4}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1) .4s}
.phone.in .ring .fg{stroke-dashoffset:calc(100 - var(--p))}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px}
.rd{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.rd .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:3px 6px;border-radius:999px}
.rd .m.for{background:#E2F0E8;color:#1F6B47}
.rd .m.not{background:#F4E7CD;color:#7A5A0B}
.rd .m.ag{background:#F6DEDC;color:#9B2C25}
.callcyc{position:relative;min-height:284px;overflow:hidden}
.cc-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute-strong)}
.cc-tabs span{text-align:center;padding:2px 0 10px}
.cc-tabs i{position:absolute;left:0;bottom:-1px;width:33.333%;height:2px;background:var(--flare);animation:pptab 10.5s cubic-bezier(.7,0,.2,1) infinite}
@keyframes pptab{0%,30%{transform:translateX(0)}33.3%,63%{transform:translateX(100%)}66.6%,96%{transform:translateX(200%)}100%{transform:translateX(0)}}
.cc-p{position:absolute;left:16px;right:16px;top:56px;opacity:0;animation:ppcc 10.5s infinite}
.cc-p.p2{animation-delay:3.5s}.cc-p.p3{animation-delay:7s}
@keyframes ppcc{0%{opacity:0;transform:translateX(26px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateX(-26px)}}
.dark .cc-tabs{border-bottom-color:#3A4550;color:var(--casing-light)}
.chips3{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.chips3 span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600}
.chips3 .on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dark .chips3 span{border-color:#3A4550}
.dark .chips3 .on{background:var(--bone);color:var(--crude);border-color:var(--bone)}
.card .fact.okl{color:var(--ok);font-weight:700}
.dark .card .fact.okl{color:#8DB37A}
.q-brand{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.q-brand .logo{padding:8px 10px;border:1.5px dashed var(--mute-strong);border-radius:8px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--mute-strong)}
.q-st{display:flex;gap:4px}
.q-st em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:999px;
  border:1px solid var(--line);color:var(--mute-strong);animation:ppq 6s infinite}
.q-st em:nth-child(2){animation-delay:2s}.q-st em:nth-child(3){animation-delay:4s}
@keyframes ppq{0%,2%{background:transparent;color:var(--mute-strong);border-color:var(--line)}6%,30%{background:var(--flare);color:var(--crude);border-color:var(--flare)}34%,100%{background:transparent;color:var(--mute-strong);border-color:var(--line)}}
.dark .q-brand{border-bottom-color:#3A4550}.dark .q-brand .logo{border-color:var(--casing-light);color:var(--casing-light)}
.dark .q-st em{border-color:#3A4550;color:var(--casing-light)}
.card .who.tot{font-weight:700}
.steps3{display:grid;gap:8px;margin:12px 0 4px}
.steps3 span{position:relative;padding:9px 12px 9px 38px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--bg)}
.steps3 span::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid var(--line);
  box-sizing:border-box;transition:background-color .35s,border-color .35s}
.steps3 span::after{content:"";position:absolute;left:18px;top:50%;width:4px;height:8px;margin-top:-6px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.phone.in .steps3 span::before{background:var(--ok);border-color:var(--ok)}
.phone.in .steps3 span::after{transform:rotate(45deg) scale(1)}
.phone.in .steps3 span:nth-child(1)::before,.phone.in .steps3 span:nth-child(1)::after{transition-delay:.7s}
.phone.in .steps3 span:nth-child(2)::before,.phone.in .steps3 span:nth-child(2)::after{transition-delay:1.3s}
.phone.in .steps3 span:nth-child(3)::before,.phone.in .steps3 span:nth-child(3)::after{transition-delay:1.9s}
.tgc .tg-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.tg-kind{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tg-kind svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.tg-org{font-size:13px;font-weight:600;color:var(--mute-strong)}
.tg-title{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.1}
.tg-when{margin-top:6px;font-weight:700;color:var(--accent-txt)}
.tg-where{font-size:13.5px;color:var(--mute-strong)}
.tg-price{display:inline-block;margin-top:8px;padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:var(--wash);font-family:var(--mono);font-size:13px}
.tg-who{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.tg-name{display:inline-block;padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-weight:600}
.tg-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:12.5px;color:var(--mute-strong)}
.tg-foot span:last-child{font-weight:600}

/* the closes in the middle, a slow wash of light across */
.pp-strip{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--bg) 20%,color-mix(in srgb,var(--flare) 14%,var(--bg)) 50%,var(--bg) 80%);
  background-size:220% 100%;animation:ppwash 11s ease-in-out infinite alternate}
@keyframes ppwash{from{background-position:0 0}to{background-position:100% 0}}
.pp-final{position:relative;overflow:hidden}
.pp-final h2.words{font-size:clamp(46px,8vw,96px)}

@media (prefers-reduced-motion:reduce){
  .pp-bg::before,.pp-bg i,.pp-feed.in,.fd-in,.pp-chain.in li,.pp-glow,.pp-vis,.pp-shine::after,.cc-tabs i,.q-st em,.pp-strip,.pp-num{animation:none!important}
  .pp-shine::after{display:none}
  .phone .stag>*{opacity:1;transform:none;transition:none}
  .ring .fg{transition:none;stroke-dashoffset:calc(100 - var(--p))}
  .steps3 span::before{background:var(--ok);border-color:var(--ok);transition:none}
  .steps3 span::after{transform:rotate(45deg) scale(1);transition:none}
  .callcyc{min-height:0}
  .cc-p{animation:none;position:static;display:none;opacity:1}
  .cc-p.p2{display:block}
  .cc-tabs i{transform:translateX(100%)}
}
.pp-whole a.btn-flare,.pp-whole a.btn-flare:visited{color:var(--crude)}
.callcyc{min-height:262px}

/* ============================================================
   v3.2 · 26 Sep 2026 · trust and pricing in the product page's language
   ============================================================ */
.tr-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--crude);color:var(--flare)}
.tr-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dark .tr-ic{background:rgba(245,180,0,.12);color:var(--flare)}
.tr-grid{display:grid;gap:14px;margin-top:30px}
@media(min-width:680px){.tr-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tr-grid{grid-template-columns:repeat(3,1fr)}}
.tr-tile{position:relative;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surf);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s}
.tr-tile:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 26px 44px -30px rgba(20,22,26,.6)}
.tr-tile::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;background:var(--flare);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tr-tile:hover::after{transform:scaleX(1)}
.tr-tile h3{margin:16px 0 8px;font-size:22px}
.tr-tile p{margin:0;font-size:15.5px;line-height:1.55;color:var(--mute-strong)}
.dark .tr-tile{background:var(--iron);border-color:#3A4550}
.dark .tr-tile:hover{border-color:var(--bone)}
.dark .tr-tile p{color:var(--casing-light)}
.tr-band p{max-width:34ch}
.vf-url{margin:2px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-family:var(--mono);font-size:13px;color:var(--mute-strong)}
.vf-url::before{content:"";display:inline-block;width:8px;height:10px;margin-right:8px;border:1.6px solid currentColor;border-radius:2px;vertical-align:-1px}
.vf-ok{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:12px;border-radius:12px;background:#E2F0E8;color:#1F6B47}
.vf-ok svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone.in .vf-ok{animation:vfpop .6s cubic-bezier(.3,1.4,.5,1) 1.8s both}
@keyframes vfpop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.hs .lede{color:var(--casing-light)}
.hs-rail{margin-top:34px}
.hs-feat{display:grid;gap:14px;margin-top:34px}
@media(min-width:720px){.hs-feat{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.hs-feat{grid-template-columns:repeat(3,1fr)}}
.hs-f{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid #3A4550;border-radius:16px;background:var(--iron);transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s}
.hs-f:hover{transform:translateY(-4px);border-color:var(--flare)}
.hs-f h3{font-size:20px;color:var(--bone);margin:2px 0 6px}
.hs-f p{margin:0;font-size:15px;line-height:1.5;color:var(--casing-light)}
.hs-cmp{margin-top:34px;background:var(--iron);border-color:#3A4550}
.hs-cmp .cmp-h span,.hs-cmp .cmp-r span{border-color:#3A4550}
.hs-cmp .cmp-h span{color:var(--casing-light);border-bottom-color:#3A4550}
.hs-cmp .cmp-h span:last-child{color:var(--flare)}
.hs-cmp .cmp-r{border-top-color:#3A4550}
.hs-cmp .cmp-r:hover{background:#232B35}
.hs-cmp .cmp-r span:first-child{color:var(--casing-light)}
.hs-cmp .cmp-r span:last-child{color:var(--bone)}
.hs-cmp .cmp-r span:last-child::after{background:var(--flare)}
.hs-cmp .cmp-r span::before{color:var(--casing-light)}
.hs-cmp .cmp-r span:last-child::before{content:"With The Handshake";color:var(--flare)}
.hs-cmp .cmp-r span:first-child::before{content:"Without it"}
html[lang="es"] .hs-cmp .cmp-r span:last-child::before{content:"Con The Handshake"}
html[lang="es"] .hs-cmp .cmp-r span:first-child::before{content:"Sin él"}
.hs .cta-pair{margin-top:34px}
.hs .cta-pair .btn-ghost{border-color:var(--bone);color:var(--bone);background:transparent}
.hs .cta-pair .btn-ghost:hover{background:var(--bone);color:var(--crude)}
.hs a.btn-flare,.pr-ticket a.btn-flare{color:var(--crude)}
.tr-boxes{display:grid;gap:14px;margin-top:26px}
@media(min-width:820px){.tr-boxes{grid-template-columns:1fr 1fr}}
.tr-box{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surf)}
.tr-box h3{font-size:22px;margin:0 0 10px}
.tr-box p{margin:0;font-size:16px;line-height:1.6;color:var(--mute-strong)}
.tr-box.stop{border-style:dashed}
.pp-final .disclaimer{max-width:70ch}
/* pricing */
.pr-hero .pr-stats{margin-top:46px}
.pr-clock{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding:14px;border-radius:12px;background:var(--ink);color:var(--bg)}
.pr-clock em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.pr-clock{gap:12px;align-items:center}
.pr-clock b{font-family:var(--display);font-weight:800;font-size:22px;color:var(--flare);white-space:nowrap}
.pr-bother{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--bg) 15%,color-mix(in srgb,var(--flare) 12%,var(--bg)) 50%,var(--bg) 85%);background-size:220% 100%;animation:ppwash 12s ease-in-out infinite alternate;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pr-bother .wrap{position:relative;z-index:1}
.pr-bother h2{font-size:clamp(30px,4.6vw,52px)}
.pr-cmp .cmp{margin-top:26px}
.pr-cards{display:grid;gap:14px;margin-top:14px}
@media(min-width:820px){.pr-cards{grid-template-columns:1fr 1fr}}
.pr-card{padding:24px;border:1px solid #3A4550;border-radius:18px;background:var(--iron)}
.pr-card h3{margin:16px 0 10px;font-size:22px;color:var(--bone)}
.pr-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--casing-light)}
.pr-build .shop{margin-top:26px}
.pr-build h2{font-size:clamp(28px,4.4vw,44px)}
.pr-build p{max-width:62ch}
.pr-build .tally2{box-shadow:0 30px 60px -40px rgba(20,22,26,.55)}
.pr-tail-in{max-width:70ch}
.pr-tail-in h2{font-size:clamp(24px,3.6vw,34px);margin:30px 0 10px}
.pr-tail-in h2:first-child{margin-top:0}
.pr-tail-in p{font-size:17px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.pr-bother{animation:none}.phone.in .vf-ok{animation:none}}
.cta-pair{max-width:560px}
.cta-pair .btn{white-space:nowrap}
.dark .pp-kick{background:transparent;border-color:#3A4550}
.card .who.pr-save{color:var(--ok);font-weight:700}
.card .who.pr-save .num{color:var(--ok)}

/* q · 27 Sep 2026 · a shop's quote signed on the customer's own link, with the ID check */
.sign .qsteps{display:flex;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.sign .qsteps li{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:600 13.5px/1.2 var(--display);color:var(--mute-strong);background:var(--surf)}
.sign .qsteps li i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);font-size:12px}
.sign .qsteps li.on{border-color:var(--ink);color:var(--ink)}
.sign .qsteps li.on i{background:var(--flare);color:var(--crude)}
.sign .qsteps li.ok i{background:#1F7A4A;color:#fff}
.sign .idgate{margin-top:26px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surf)}
.sign .idgate h2{margin:0 0 8px}
.sign .idgate p.mute{font-size:14px;line-height:1.55}
.sign .idok{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:14px;background:#E6F2EA;border:1px solid #BFDCC9}
.sign .idok .tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#1F7A4A;color:#fff;font-weight:800}
.sign .idok b{display:block;font:700 15px/1.3 var(--display);color:#14361F}
.sign .idok p{margin:3px 0 0;font-size:13px;color:#2C5A3C}
.sign .locked{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surf);font-weight:600;color:var(--ink)}
.sign .locked span{font-size:12px;font-weight:500;color:var(--mute-strong)}
.sign .vcode{font:800 24px/1 var(--display);letter-spacing:.08em;color:var(--ink);margin:14px 0 6px}

/* v3.3 · 27 Sep 2026 · Request Access is the last section of Pricing */
#request-access,#build,.pr-build .anchor{scroll-margin-top:84px}
.pr-build .anchor{display:block;height:0}
.pr-build .req-lede{font-size:17px;line-height:1.6;color:var(--mute-strong);margin:10px 0 0}
.req-promise{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.req-promise li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  font:600 13px/1 var(--display);color:var(--ink);background:var(--surf)}
.req-promise li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--flare)}
@media(min-width:900px){.shop .tally2{grid-row:1/7}}
.shop .q5 .who2{display:grid;gap:0 14px}
@media(min-width:620px){.shop .q5 .who2{grid-template-columns:1fr 1fr}.shop .q5 .who2 .wide{grid-column:1/-1}}
.shop .q5 .field{margin-bottom:14px}
.shop .q5 .field label{font-size:14px}
.shop .q5 .field .opt{font-weight:500;color:var(--mute);font-size:12.5px}
.shop .q5 .field input,.shop .q5 .field select{border-radius:11px;transition:border-color .2s,box-shadow .2s}
.shop .q5 .field input:focus,.shop .q5 .field select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(245,180,0,.35)}
.shop .q5 .field.need input,.shop .q5 .field.need select{border-color:var(--bad);box-shadow:0 0 0 3px rgba(190,50,40,.14)}
.shop .q5 .field.need label{color:var(--bad)}
.tally2 button.btn{border:0;cursor:pointer;font:inherit}
.tally2 .msg{margin-top:12px;font-size:13.5px;line-height:1.5;padding:12px 14px}
.req-done{margin-top:26px;scroll-margin-top:96px}
.req-done .rd-in{max-width:640px;padding:28px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surf);
  box-shadow:0 30px 60px -40px rgba(20,22,26,.55);animation:qrise .5s cubic-bezier(.2,.75,.2,1) both}
.req-done .rd-tick{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--flare);color:var(--crude);
  font-weight:800;font-size:20px;margin-bottom:14px}
.req-done h3{font-size:clamp(24px,4vw,32px);margin:0 0 12px}
.req-done .rd-lede{font-size:16px;margin:0}
.req-done .rd-rows{margin:6px 0 4px}
.req-done .rd-next{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--mute-strong)}
@media(prefers-reduced-motion:reduce){.req-done .rd-in{animation:none}}
#qsign .doc-head > div:first-child .no{text-align:left;margin-top:6px}
#qsign .done .vcode{color:var(--flare)}

/* 27 Sep 2026 · a state we are not charging for yet wears a stamp */
.pst .pst-in{position:relative;overflow:hidden}
.pst-free{position:absolute;top:10px;right:10px;transform:rotate(10deg);padding:4px 9px 3px;border:2.5px solid #C0392B;border-radius:6px;
  font:800 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#C0392B;background:rgba(255,255,255,.55);
  mix-blend-mode:multiply;opacity:.92;pointer-events:none;box-shadow:inset 0 0 0 1.5px rgba(192,57,43,.25)}
.dark .pst-free,[data-theme="dark"] .pst-free{background:transparent;mix-blend-mode:normal;color:#FF7A6B;border-color:#FF7A6B}
/* 27 Sep 2026 · what each state's record actually holds */
.pst-has{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px}
.pst-has u{text-decoration:none;font:700 9.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:5px}
.pst-has u.y{background:#E6F2EA;color:#1F5A36}
.pst-has u.y::before{content:"\2713\00a0"}
.pst-has u.n{background:transparent;color:var(--mute);border:1px dashed var(--line);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.dark .pst-has u.y,[data-theme="dark"] .pst-has u.y{background:#1E3A2A;color:#9FD8B2}
.pst-free{top:9px;right:9px;font-size:12px;padding:3px 7px 2px;border-width:2px}
.pst-in:has(.pst-free) > b{display:block;padding-right:58px}
/* 27 Sep 2026 · every state with oil and gas work, the coming ones in one line */
.roster-next{margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--mute-strong)}
.roster-next b{display:inline-block;margin-right:8px;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* 27 Sep 2026, Brandon: pricing hero card sells the morning, not the quote. */
.pr-morning .pr-sig{align-items:center}
.pr-morning .pr-sig>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-morning .pr-sig b{font-weight:700;font-size:15px}
.pr-morning .pr-sig i{font-style:normal;font-size:13px;color:var(--mute-strong)}
.pr-call{flex:none;font:700 12px/1 var(--sans);letter-spacing:.02em;padding:8px 12px;border-radius:999px;background:var(--flare);color:#14161A}

/* 28 Sep 2026: the legal row. Small, quiet, last thing on the page. */
.ftr-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--mute-strong)}
.ftr-legal a{color:var(--mute-strong);text-decoration:none;padding:6px 0}
.ftr-legal a:hover,.ftr-legal a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-doc .doc-date{font-size:14px;color:var(--mute-strong);margin:0 0 8px}
.legal-doc .src-list{margin:0 0 14px;padding-left:20px;font-size:16px;line-height:1.6}
.legal-doc h2[id]{scroll-margin-top:90px}

/* 28 Sep 2026: consent boxes on the signing page, and tables in the legal pages */
.sign .agree{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;font-size:13.5px;line-height:1.45;color:var(--mute-strong);cursor:pointer}
.sign .agree input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--flare)}
.sign .agree a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sign button[disabled]{opacity:.45;cursor:not-allowed}
.legal-doc .tbl-wrap{overflow-x:auto;margin:14px 0 18px;-webkit-overflow-scrolling:touch}
.legal-doc table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;line-height:1.45}
.legal-doc th,.legal-doc td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.legal-doc th{font-weight:600;background:var(--surf)}
.legal-doc ul,.legal-doc ol{font-size:17px;line-height:1.55;padding-left:22px;margin:0 0 14px}
.legal-doc li{margin-bottom:6px}
.legal-doc hr{border:0;border-top:1px solid var(--line);margin:24px 0}

/* ===== 29 Sep 2026 · the home hero card, rebuilt to match the product and pricing cards ===== */
.hero-vis{margin:44px auto 0;width:min(400px,100%)}
.hero-vis .phone{margin:0;width:100%}
.hero-phone{border-radius:30px;padding:14px;background:linear-gradient(180deg,var(--surf),var(--wash));border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 80px -44px rgba(20,22,26,.6),0 12px 28px -18px rgba(20,22,26,.35)}
.hc-deck{position:absolute;left:0;right:0;bottom:-14px;height:100%;pointer-events:none}
.hc-deck i{position:absolute;left:7%;right:7%;bottom:0;height:60px;border-radius:26px;background:var(--surf);border:1px solid var(--line);opacity:.75;box-shadow:0 18px 30px -22px rgba(20,22,26,.4)}
.hc-deck i+i{left:13%;right:13%;bottom:-12px;opacity:.45}
.hc-bar{align-items:center;padding:2px 8px 12px}
.hc-live{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font);letter-spacing:.02em;color:var(--ink)}
.hc-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(78,107,63,.45);animation:hclive 2.2s ease-out infinite}
@keyframes hclive{70%{box-shadow:0 0 0 7px rgba(78,107,63,0)}100%{box-shadow:0 0 0 0 rgba(78,107,63,0)}}
.hc-dots{display:inline-flex;gap:5px;align-items:center}
.hc-dots i,.hc-dots b{display:block;width:6px;height:6px;border-radius:3px;background:var(--line)}
.hc-dots b{width:18px;background:var(--flare)}
.card.hc{padding:18px 18px 16px;border-radius:20px;background:var(--surf);box-shadow:0 1px 2px rgba(20,22,26,.05)}
.hc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hc-kind{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 9px;border-radius:999px;background:rgba(245,180,0,.16);
  color:var(--flare-dark);font:700 11.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase}
.hc-kind::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--flare)}
.hc-date{font:500 11.5px/1.3 var(--mono);color:var(--mute-strong);letter-spacing:.02em}
.card.hc h3{margin-top:12px;font-family:var(--display);font-size:26px;line-height:1.05;letter-spacing:-.01em}
.card.hc .fact{margin-top:6px;font-size:15px;color:var(--mute-strong)}
.hc-facts{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:6px;margin-top:14px}
.hc-facts div{padding:10px 10px 9px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.hc-facts b{display:block;font:800 19px/1 var(--display);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-facts span{display:block;margin-top:5px;font-size:11px;line-height:1.25;color:var(--mute-strong)}
.hc-who{display:flex;align-items:center;gap:11px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.hc-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--flare)}
.hc-av svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hc-wt{flex:1;min-width:0}
.hc-wt b{display:block;font-size:14.5px;line-height:1.2;color:var(--ink)}
.hc-wt em{display:block;font-style:normal;font:500 12.5px/1.3 var(--mono);color:var(--mute-strong);margin-top:3px}
.hc-ok{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(78,107,63,.12);color:var(--ok);font:700 11.5px/1 var(--font)}
.hc-ok svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hc-sayl{margin-top:14px;font:700 10.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mute-strong)}
.card.hc .say{margin-top:8px;padding:13px 14px 13px 16px;border-radius:12px;background:var(--bg);border-left:3px solid var(--flare);font-size:15.5px;line-height:1.5;color:var(--ink)}
.card.hc .src{display:inline-flex;align-items:center;gap:7px;margin-top:11px;font-size:12.5px;text-decoration:none;color:var(--info)}
.card.hc .src svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card.hc .src:hover span{text-decoration:underline;text-underline-offset:3px}
.card.hc .act{margin-top:14px}
.card.hc .act span{min-height:46px;border-radius:12px;font-size:15px}
.card.hc .act .call{gap:8px;flex:1.35;box-shadow:0 10px 20px -12px rgba(20,22,26,.7)}
.card.hc .act .call svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card.hc .due{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12.5px}
.hc-due{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:rgba(210,55,47,.1);color:var(--bad);font:700 11.5px/1 var(--font)}
[dir="rtl"] .card.hc .say{border-left:0;border-right:3px solid var(--flare);padding:13px 16px 13px 14px}
[dir="rtl"] .hc-dots{flex-direction:row-reverse}
html[lang="ar"] .hc-kind,html[lang="ar"] .hc-sayl,html[lang="zh-Hans"] .hc-kind,html[lang="zh-Hans"] .hc-sayl{letter-spacing:0;text-transform:none}
@media(min-width:900px){.hero-vis{margin:0}}
@media (prefers-reduced-motion:reduce){.hc-live i{animation:none}}

/* the three beats under the hero, lifted to match */
.beat{padding:26px 24px 24px;border-radius:20px;background:linear-gradient(180deg,var(--surf),var(--wash));overflow:hidden;box-shadow:0 1px 2px rgba(20,22,26,.04)}
.beat .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--flare);
  font:800 15px/1 var(--display);letter-spacing:0;margin-bottom:16px}
.beat h3{font-size:24px}
.beat::before{content:attr(data-n);position:absolute;right:14px;top:-6px;font:800 110px/1 var(--display);color:var(--ink);opacity:.045;pointer-events:none}
.beat p{color:var(--mute-strong)}
/* hero card in the dark theme: the pill reads in flare, and Call is the bright button */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hc-kind{color:var(--flare);background:rgba(245,180,0,.14)}
  :root:not([data-theme="light"]) .card.hc .act .call{background:var(--bone);color:var(--crude);border-color:var(--bone)}
  :root:not([data-theme="light"]) .hc-av{background:var(--bone);color:var(--crude)}
  :root:not([data-theme="light"]) .beat::before{color:var(--bone);opacity:.05}
}
:root[data-theme="dark"] .hc-kind{color:var(--flare);background:rgba(245,180,0,.14)}
:root[data-theme="dark"] .card.hc .act .call{background:var(--bone);color:var(--crude);border-color:var(--bone)}
:root[data-theme="dark"] .hc-av{background:var(--bone);color:var(--crude)}
:root[data-theme="dark"] .beat::before{color:var(--bone);opacity:.05}

/* 29 Sep 2026: the compliance desk page */
.cd .lede{font-size:19px;max-width:60ch}
.cd-rate{display:grid;gap:12px;margin:26px 0 8px}
@media(min-width:700px){.cd-rate{grid-template-columns:repeat(3,1fr)}}
.cd-rate div{padding:18px 18px 16px;border-radius:16px;background:var(--surf);border:1px solid var(--line)}
.cd-rate b{display:block;font:800 30px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.cd-rate span{display:block;margin-top:7px;font-size:14px;line-height:1.45;color:var(--mute-strong)}
.cd-grid{display:grid;gap:12px;margin:8px 0 6px}
@media(min-width:700px){.cd-grid{grid-template-columns:1fr 1fr}}
.cd-item{padding:20px 20px 18px;border-radius:16px;background:var(--surf);border:1px solid var(--line)}
.cd-item h3{font-size:19px;margin-bottom:6px}
.cd-item p{font-size:15.5px;line-height:1.5;margin:0;color:var(--mute-strong)}

/* ---------- add-on cards, 30 Sep 2026 ----------
   What it is, the name large, one line, and the rest behind "How it works".
   The card is a .ad so the pricing receipt still finds it; everything here
   overrides the old .ad look. Motion is off under prefers-reduced-motion. */
.adds.addx-grid{gap:14px}
@media(min-width:620px){.adds.addx-grid{grid-template-columns:1fr 1fr}}
.adds.addx-grid.one{grid-template-columns:1fr;margin-top:14px}
.ad.addx{--ax-bg:var(--surf);--ax-ink:var(--ink);--ax-mute:var(--mute-strong);--ax-line:var(--line);
  --ax-wash:var(--wash);--ax-kind:var(--accent-txt);--ax-ic-bg:var(--crude);--ax-ic:var(--flare);
  display:flex;flex-direction:column;padding:0;border:1px solid var(--ax-line);border-radius:16px;
  background:var(--ax-bg);color:var(--ax-ink);overflow:hidden;cursor:default;isolation:isolate}
.ad.addx::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--flare),#FFD466,var(--flare));background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.ad.addx:hover::before,.ad.addx:has(input:checked)::before{transform:scaleX(1);animation:ax-sweep 2.6s linear infinite}
@keyframes ax-sweep{to{background-position:-200% 0}}
.ad.addx::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgb(245 180 0 / .22),transparent 70%);opacity:0;transform:scale(.6);
  transition:opacity .45s,transform .7s cubic-bezier(.2,.75,.2,1);z-index:-1;pointer-events:none}
.ad.addx:hover::after,.ad.addx:has(input:checked)::after{opacity:1;transform:scale(1)}
.ad.addx:has(input:checked){border-color:var(--ax-ink);box-shadow:inset 0 0 0 1px var(--ax-ink),0 14px 30px rgb(var(--shadow)/var(--shadow-a))}
.addx .addx-pick{display:block;margin:0;padding:20px 20px 16px;cursor:pointer}
.addx div.addx-pick{cursor:default}
.addx .addx-pick input{position:absolute;opacity:0;width:1px;height:1px}
.addx .addx-top{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.addx .addx-ic{display:grid;place-items:center;flex:none;width:50px;height:50px;margin:0;border-radius:14px;
  background:var(--ax-ic-bg);color:var(--ax-ic);transition:transform .4s cubic-bezier(.3,1.4,.4,1)}
.addx .addx-ic svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ad.addx:hover .addx-ic,.ad.addx:has(input:checked) .addx-ic{transform:rotate(-7deg) scale(1.07)}
.addx .addx-wave{display:flex;align-items:center;gap:3px;height:24px;margin:0}
.addx .addx-wave i{display:block;width:3px;height:6px;border-radius:2px;background:var(--flare);animation:ax-wave 1.15s ease-in-out infinite}
.addx .addx-wave i:nth-child(2){animation-delay:.14s}.addx .addx-wave i:nth-child(3){animation-delay:.28s}
.addx .addx-wave i:nth-child(4){animation-delay:.42s}.addx .addx-wave i:nth-child(5){animation-delay:.56s}
@keyframes ax-wave{0%,100%{height:5px}50%{height:22px}}
.addx .tick{position:relative;left:auto;top:auto;flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--ax-line);background:transparent;transition:background .2s,border-color .2s,transform .3s cubic-bezier(.3,1.6,.4,1)}
.addx:has(input:checked) .tick{background:var(--flare);border-color:var(--crude);transform:scale(1.12)}
.addx:has(input:checked) .tick::after{content:"";position:absolute;left:9px;top:4.5px;width:6px;height:12px;
  border:2.4px solid var(--crude);border-top:0;border-left:0;transform:rotate(42deg)}
.addx .addx-pick input:focus-visible~.addx-top .tick{outline:2px solid var(--accent);outline-offset:2px}
.addx .addx-kind{display:block;margin:0;font:700 11.5px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ax-kind)}
.addx .addx-name{display:block;margin:6px 0 0;font:800 clamp(26px,3.4vw,32px)/1.05 var(--display);letter-spacing:-.02em;color:var(--ax-ink)}
.addx .addx-short{display:block;margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--ax-ink)}
.addx .soon-tag{margin-top:8px}
.addx .addx-more{margin-top:auto;border-top:1px solid var(--ax-line)}
.addx .addx-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;cursor:pointer;font:700 12.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ax-ink);transition:background .2s}
.addx .addx-more summary::-webkit-details-marker{display:none}
.addx .addx-more summary:hover{background:var(--ax-wash)}
.addx .addx-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.addx .addx-more summary i{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ax-wash);
  color:var(--ax-ink);transition:transform .35s cubic-bezier(.3,1.4,.4,1),background .2s,color .2s}
.addx .addx-more summary i::before,.addx .addx-more summary i::after{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:1px;background:currentColor;transition:transform .35s}
.addx .addx-more summary i::after{transform:rotate(90deg)}
.addx .addx-more[open] summary i{transform:rotate(180deg);background:var(--flare);color:var(--crude)}
.addx .addx-more[open] summary i::after{transform:rotate(0)}
.addx .addx-body{padding:2px 20px 20px;animation:ax-open .45s cubic-bezier(.2,.75,.2,1)}
@keyframes ax-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.addx .addx-body p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ax-mute)}
.addx .addx-body .addx-note{margin-top:12px;padding-left:12px;border-left:3px solid var(--flare);color:var(--ax-ink);font-weight:500}
.dark .ad.addx{--ax-bg:#1B2129;--ax-ink:var(--bone);--ax-mute:var(--casing-light);--ax-line:#3A4550;
  --ax-wash:#232B35;--ax-kind:var(--flare);--ax-ic-bg:var(--flare);--ax-ic:var(--crude)}
:root[data-theme="dark"] .ad.addx{--ax-ic-bg:var(--flare);--ax-ic:var(--crude);--ax-kind:var(--flare)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ad.addx{--ax-ic-bg:var(--flare);--ax-ic:var(--crude);--ax-kind:var(--flare)}}
@media (prefers-reduced-motion:reduce){
  .ad.addx::before,.addx .addx-wave i,.addx .addx-body{animation:none}
  .ad.addx,.ad.addx::after,.addx .addx-ic,.addx .tick,.addx .addx-more summary i{transition:none}
}
.adds.addx-grid{align-items:start}
.ad.addx .addx-more summary{color:var(--ax-ink)}
.addx .addx-more summary span{display:inline;margin:0;font:inherit;line-height:inherit;color:inherit}

/* ---------- compliance desk: Get a quote, 30 Sep 2026 ----------
   Its own questionnaire, separate from the pricing calculator. */
.cq{margin-top:56px;padding-top:36px;border-top:1px solid var(--line);scroll-margin-top:84px}
.cq-head h2{margin-top:6px}
.cq-form{margin-top:18px}
.cq-q{margin:0 0 14px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surf);min-width:0}
.cq-q legend{float:left;width:100%;padding:0;margin:0 0 4px;font:800 19px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.cq-q legend+*{clear:both}
.cq-q .qn{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;
  background:var(--crude);color:var(--flare);font:800 13px/1 var(--display);vertical-align:2px}
.cq-q .qh{clear:both;margin:4px 0 12px;font-size:14px;line-height:1.5;color:var(--mute-strong)}
.cq-q .field{margin:8px 0 0}
.cq-q textarea{width:100%;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:11px;resize:vertical}
.cq-q .field input,.cq-q .field select{border-radius:11px;background:var(--bg)}
.cq-q .field input:focus,.cq-q .field select:focus,.cq-q textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(245,180,0,.35)}
.cq-q .field.need input,.cq-q .field.need select{border-color:var(--bad);box-shadow:0 0 0 3px rgba(190,50,40,.14)}
.cq-q .field.need label{color:var(--bad)}
.cq-q.need{border-color:var(--bad);box-shadow:0 0 0 3px rgba(190,50,40,.12)}
.cq-chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.cq-chip{position:relative;cursor:pointer}
.cq-chip input{position:absolute;opacity:0;width:1px;height:1px}
.cq-chip span{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);font-size:15px;font-weight:500;line-height:1.3;color:var(--ink);
  transition:background .18s,border-color .18s,transform .25s cubic-bezier(.3,1.5,.4,1)}
.cq-chip:hover span{border-color:var(--ink);transform:translateY(-1px)}
.cq-chip input:checked+span{background:var(--flare);border-color:var(--crude);color:var(--crude);font-weight:600;transform:scale(1.03)}
.cq-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cq-go{margin-top:18px}
.cq-go .btn{width:100%;justify-content:center}
@media(min-width:620px){.cq-go .btn{width:auto}}
@media (prefers-reduced-motion:reduce){.cq-chip span{transition:none}}

/* ---------- Tell Todd, the product page section, 1 Oct 2026 ----------
   Only opacity and transform animate, so nothing on the page reflows while the
   demo loops. One 14-second cycle drives every piece of the phone. */
.todd{position:relative;overflow:hidden;background:var(--crude);color:var(--bone);padding:clamp(72px,9vw,128px) 0}
.todd-bg i{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none}
.todd-bg i:nth-child(1){width:620px;height:620px;right:-160px;top:-180px;background:radial-gradient(circle,rgb(245 180 0 / .20),transparent 65%);animation:td-drift 16s ease-in-out infinite alternate}
.todd-bg i:nth-child(2){width:480px;height:480px;left:-180px;bottom:-200px;background:radial-gradient(circle,rgb(245 180 0 / .10),transparent 65%);animation:td-drift 20s ease-in-out infinite alternate-reverse}
@keyframes td-drift{to{transform:translate(-60px,50px) scale(1.12)}}
.todd-in{position:relative;z-index:1;display:grid;gap:48px;align-items:center}
@media(min-width:960px){.todd-in{grid-template-columns:1.1fr .9fr;gap:64px}}
.todd-kind{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgb(245 180 0 / .45);border-radius:999px;
  font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--flare);background:rgb(245 180 0 / .08)}
.todd-h{margin:18px 0 0;font:800 clamp(52px,8vw,104px)/.92 var(--display);letter-spacing:-.03em;color:var(--bone)}
.todd-h em{display:block;margin-top:12px;font-style:normal;font-size:.42em;line-height:1.08;letter-spacing:-.015em;color:var(--flare)}
.todd .lede{margin-top:22px;max-width:56ch;color:var(--casing-light);font-size:clamp(17px,1.6vw,20px)}
.todd-steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
@media(min-width:640px){.todd-steps{grid-template-columns:repeat(3,1fr)}}
.todd-steps li{position:relative;overflow:hidden;padding:18px 18px 20px;border:1px solid #3A4550;border-radius:16px;background:#1B2129;
  transition:transform .35s cubic-bezier(.2,.75,.2,1),border-color .25s,box-shadow .35s}
.todd-steps li::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--flare);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.todd-steps i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--flare);color:var(--crude);font:800 15px/1 var(--display);font-style:normal;
  transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.todd-steps b{display:block;margin-top:14px;font:800 20px/1.15 var(--display);color:var(--bone)}
.todd-steps span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--casing-light)}
@media (hover:hover){.todd-steps li:hover{transform:translateY(-6px);border-color:var(--flare);box-shadow:0 26px 44px -26px rgba(0,0,0,.8)}
  .todd-steps li:hover::after{transform:scaleX(1)}.todd-steps li:hover i{transform:rotate(-8deg) scale(1.1)}}
.todd-facts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
@media(min-width:640px){.todd-facts{grid-template-columns:1fr 1fr}}
.todd-facts li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:var(--bone)}
.todd-facts li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgb(245 180 0 / .16);
  box-shadow:inset 0 0 0 1.5px var(--flare)}
.todd-facts li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--flare);border-width:0 2px 2px 0;transform:rotate(45deg)}
.todd .cta-pair{margin-top:30px}
.todd a.btn-flare,.todd a.btn-flare:visited{color:var(--crude)}
/* the demo phone */
.todd-demo{display:flex;justify-content:center}
.td-phone{position:relative;width:min(100%,360px);min-height:560px;padding:26px 20px 22px;border-radius:38px;background:#11151A;
  border:1px solid #3A4550;box-shadow:0 0 0 8px #0B0E12,0 40px 80px -30px rgba(0,0,0,.9),0 0 120px -40px rgb(245 180 0 / .45)}
.td-mic{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:6px auto 0;border-radius:50%;background:var(--flare);color:var(--crude);
  animation:td-mic 14s infinite}
.td-mic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.td-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--flare);opacity:0;animation:td-ring 14s infinite}
.td-ring.r2{animation-name:td-ring2}
@keyframes td-mic{0%,2%{transform:scale(1)}5%{transform:scale(.9)}8%,26%{transform:scale(1)}30%,100%{transform:scale(.82);opacity:.55}}
@keyframes td-ring{0%,5%{opacity:0;transform:scale(1)}6%{opacity:.8;transform:scale(1)}12%{opacity:0;transform:scale(1.7)}13%{opacity:.8;transform:scale(1)}19%{opacity:0;transform:scale(1.7)}20%{opacity:.8;transform:scale(1)}26%,100%{opacity:0;transform:scale(1.7)}}
@keyframes td-ring2{0%,8%{opacity:0;transform:scale(1)}9%{opacity:.6;transform:scale(1)}16%{opacity:0;transform:scale(1.9)}17%{opacity:.6;transform:scale(1)}24%,100%{opacity:0;transform:scale(1.9)}}
.td-rec{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--flare);
  animation:td-rec 14s infinite}
.td-dot{width:8px;height:8px;border-radius:50%;background:#FF5A47;animation:td-blink 1s steps(2) infinite}
@keyframes td-blink{50%{opacity:.2}}
.td-wave{display:inline-flex;align-items:center;gap:3px;height:18px}
.td-wave i{display:block;width:3px;height:16px;border-radius:2px;background:var(--flare);transform:scaleY(.3);animation:td-bar .9s ease-in-out infinite}
.td-wave i:nth-child(2){animation-delay:.1s}.td-wave i:nth-child(3){animation-delay:.2s}.td-wave i:nth-child(4){animation-delay:.3s}
.td-wave i:nth-child(5){animation-delay:.4s}.td-wave i:nth-child(6){animation-delay:.5s}.td-wave i:nth-child(7){animation-delay:.6s}
@keyframes td-bar{50%{transform:scaleY(1)}}
@keyframes td-rec{0%,4%{opacity:0}6%,27%{opacity:1}30%,100%{opacity:0}}
.td-said,.td-heard,.td-ask,.td-log{position:relative;margin-top:14px;opacity:0}
.td-said{padding:12px 14px;border-radius:16px 16px 16px 4px;background:#1E252E;animation:td-in-said 14s infinite}
.td-said em,.td-heard em{display:block;font:700 10.5px/1 var(--display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#94A3B1}
.td-said p{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--bone)}
.td-heard{padding:12px 14px;border-radius:16px;border:1px solid rgb(245 180 0 / .5);background:rgb(245 180 0 / .06);animation:td-in-heard 14s infinite}
.td-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0 0;margin-top:8px;border-top:1px solid #2A333D;font-size:13.5px;
  opacity:0;animation:td-in-row 14s infinite;animation-delay:calc(var(--k) * .45s)}
.td-row:first-of-type{border-top:0}
.td-row b{color:var(--flare);font-weight:700}.td-row span{color:var(--bone);text-align:right}
.td-ask{animation:td-in-ask 14s infinite}
.td-ask b{display:block;font-size:13.5px;color:var(--bone)}
.td-chips{display:flex;gap:8px;margin-top:8px}
.td-chips span{padding:7px 12px;border-radius:999px;border:1px solid #3A4550;font-size:13px;color:var(--bone)}
.td-chips span:first-child{animation:td-chip 14s infinite}
.td-log{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;background:var(--flare);color:var(--crude);
  font:800 16px/1 var(--display);animation:td-in-log 14s infinite}
.td-log span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--crude);color:var(--flare);font-size:13px;transform:scale(0);animation:td-tick 14s infinite}
@keyframes td-in-said{0%,24%{opacity:0;transform:translateY(12px)}28%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes td-in-heard{0%,36%{opacity:0;transform:translateY(12px) scale(.98)}40%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes td-in-row{0%,40%{opacity:0;transform:translateX(-10px)}44%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes td-in-ask{0%,58%{opacity:0;transform:translateY(10px)}62%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes td-chip{0%,68%{background:transparent;color:var(--bone);border-color:#3A4550}70%,94%{background:var(--bone);color:var(--crude);border-color:var(--bone)}100%{background:transparent}}
@keyframes td-in-log{0%,72%{opacity:0;transform:translateY(10px)}76%,80%{opacity:1;transform:none}82%{transform:scale(.96)}84%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes td-tick{0%,82%{transform:scale(0)}85%,94%{transform:scale(1)}100%{transform:scale(0)}}
@media (prefers-reduced-motion:reduce){
  .todd-bg i,.td-mic,.td-ring,.td-rec,.td-dot,.td-wave i,.td-said,.td-heard,.td-row,.td-ask,.td-chips span,.td-log,.td-log span{animation:none!important}
  .td-said,.td-heard,.td-row,.td-ask,.td-log{opacity:1}.td-log span{transform:none}.td-rec{opacity:1}}
/* the more tiles reuse the trust tiles; the icon turns on hover */
.more-tile .tr-ic{transition:transform .35s cubic-bezier(.2,.75,.2,1)}
@media (hover:hover){.more-tile:hover .tr-ic{transform:rotate(-8deg) scale(1.08)}}

/* ---------- Compliance Consulting, 1 Oct 2026 ---------- */
.cc .section{position:relative}
.cc-hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,80px)}
.cc-hero .wrap{position:relative;z-index:1}
.cc-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:var(--crude);color:var(--flare);
  font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.cc-hero h1{margin-top:18px;font-size:clamp(44px,7.5vw,92px);line-height:.95;letter-spacing:-.03em}
.cc-nets{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cc-nets span{padding:9px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surf);font:800 15px/1 var(--display);color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.75,.2,1),border-color .2s,box-shadow .3s}
@media (hover:hover){.cc-nets span:hover{transform:translateY(-4px) rotate(-2deg);border-color:var(--flare);box-shadow:0 14px 26px -16px rgb(var(--shadow)/.5)}}
.cc-hero .cta-pair{margin-top:26px}
.cc-tile{min-height:100%}
.cc-tile .tr-ic{transition:transform .35s cubic-bezier(.2,.75,.2,1),background .25s,color .25s}
.cc-tile::before{content:"";position:absolute;right:-60px;top:-60px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgb(245 180 0 / .20),transparent 70%);opacity:0;transform:scale(.6);
  transition:opacity .4s,transform .6s cubic-bezier(.2,.75,.2,1);pointer-events:none}
@media (hover:hover){.cc-tile:hover .tr-ic{transform:rotate(-8deg) scale(1.1);background:var(--flare);color:var(--crude)}
  .cc-tile:hover::before{opacity:1;transform:scale(1)}}
.cc-app{overflow:hidden;background:var(--crude)}
.cc-glow{position:absolute;right:-200px;top:-160px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgb(245 180 0 / .16),transparent 65%);
  animation:td-drift 18s ease-in-out infinite alternate;pointer-events:none}
.cc-app .wrap{position:relative;z-index:1}
.cc-app h2{color:var(--bone)}
.tr-tile.cc-dark{background:#1B2129;border-color:#3A4550}
.tr-tile.cc-dark h3{color:var(--bone)}.tr-tile.cc-dark p{color:var(--casing-light)}
@media (hover:hover){.tr-tile.cc-dark:hover{border-color:var(--flare);box-shadow:0 26px 44px -26px rgba(0,0,0,.85)}}
@media(min-width:1000px){.cc-app .cc-grid{grid-template-columns:repeat(2,1fr)}}
.cc-pay{display:grid;gap:14px;margin-top:28px}
@media(min-width:640px){.cc-pay{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cc-pay{grid-template-columns:repeat(4,1fr)}}
.cc-paybox{position:relative;overflow:hidden;padding:22px 20px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surf);
  transition:transform .35s cubic-bezier(.2,.75,.2,1),border-color .25s,box-shadow .35s}
.cc-paybox::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--flare),#FFD466,var(--flare));
  background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.cc-paybox b{display:block;font:800 clamp(22px,2.4vw,28px)/1.05 var(--display);letter-spacing:-.015em;color:var(--ink)}
.cc-paybox span{display:block;margin-top:9px;font-size:15px;line-height:1.5;color:var(--mute-strong)}
@media (hover:hover){.cc-paybox:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 26px 44px -30px rgb(var(--shadow)/.6)}
  .cc-paybox:hover::after{transform:scaleX(1);animation:ax-sweep 2.6s linear infinite}}
.cc-not{margin-top:28px;padding:22px 22px 8px;border-left:4px solid var(--flare);border-radius:4px 16px 16px 4px;background:var(--wash)}
.cc-not h3{font-size:20px;margin:0 0 8px}.cc-not p{font-size:16px;line-height:1.6;max-width:72ch}
.cc-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px;counter-reset:none}
@media(min-width:680px){.cc-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cc-steps{grid-template-columns:repeat(4,1fr)}}
.cc-steps li{position:relative;overflow:hidden;padding:20px 20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surf);
  transition:transform .35s cubic-bezier(.2,.75,.2,1),border-color .25s,box-shadow .35s}
.cc-steps i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--crude);color:var(--flare);font:800 16px/1 var(--display);font-style:normal;
  transition:transform .35s cubic-bezier(.2,.75,.2,1),background .25s,color .25s}
.cc-steps b{display:block;margin-top:14px;font:800 19px/1.2 var(--display);color:var(--ink)}
.cc-steps span{display:block;margin-top:7px;font-size:15px;line-height:1.5;color:var(--mute-strong)}
@media (hover:hover){.cc-steps li:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 26px 44px -30px rgb(var(--shadow)/.6)}
  .cc-steps li:hover i{transform:rotate(-8deg) scale(1.1);background:var(--flare);color:var(--crude)}}
.cc-form{max-width:820px;margin:0 auto}
.cc-form .cq{margin-top:48px}
.cc-form .cq-q{transition:border-color .25s,box-shadow .3s}
.cc-form .cq-q:focus-within{border-color:var(--ink);box-shadow:0 18px 34px -26px rgb(var(--shadow)/.6)}
@media (prefers-reduced-motion:reduce){.cc-glow{animation:none}.cc-paybox:hover::after{animation:none}}
/* one button alone must not sit in half a grid row */
.todd .cta-pair{grid-template-columns:1fr;max-width:420px}
.todd .cta-pair .btn{white-space:normal}
.td-row b{white-space:nowrap}
.cc-hero .cta-pair{max-width:640px}

/* 2 Oct 2026: ISN Trademark Policy s.7 disclaimer. Bold, never under 16px (12pt), never smaller than the body text. */
.isn-disc{font-weight:700;font-size:17px;line-height:1.55;color:inherit;margin:22px 0 0;max-width:64ch}
.pr-tail-in p.isn-disc{font-size:17px}

/* 2 Oct 2026, BENCH contrast fixes. Flare text sat on --ink, which flips to
   near-white in dark mode (1.7:1); these panels stay crude in both schemes. */
.pr-clock{background:var(--crude);color:var(--bone)}
.beat .n{background:var(--crude)}
.lang-pick li a[aria-current] .k{color:var(--accent-txt)}
.shop .q5 .field .opt{color:var(--mute-strong)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pst-free{background:transparent;mix-blend-mode:normal;color:#FF7A6B;border-color:#FF7A6B}
  :root:not([data-theme="light"]) .hc-due{color:#FF8A80}}
:root[data-theme="dark"] .hc-due,.dark .hc-due{color:#FF8A80}
/* 19 Sep rule: the mock card's Call chip is Crude on the site, so the page's one Flare action is Request access. */
.pr-call{background:var(--crude);color:var(--bone)}
/* the status chips jump between states; a tween left dark text on a half-faded chip */
.q-st em{animation-timing-function:step-end}

/* ===== 3 Oct 2026 · the phone cards, Apple pass =====
   Brandon: the cards still carried tells (the pulsing dot, the stripe down the
   side of the quote, capsule badges, typewriter eyebrows). One system for every
   phone mock: sentence-case captions, colored words instead of badges, inset
   grouped lists instead of boxed rows, a real segmented control, and motion on
   the iOS sheet curve. Local tokens so the light page, the dark theme and the
   dark sections all read from one place. */
.phone{--p-ink:var(--ink);--p-mute:var(--mute-strong);--p-fill:var(--bg);--p-sep:var(--line);--p-raise:var(--surf);
  --p-green:var(--ok);--p-amber:var(--accent-txt);--p-red:#B42A22;--p-ease:cubic-bezier(.32,.72,0,1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone{--p-fill:var(--crude);--p-raise:#3A4550;--p-red:#FF8A80}}
:root[data-theme="dark"] .phone{--p-fill:var(--crude);--p-raise:#3A4550;--p-red:#FF8A80}
.dark .phone{--p-ink:var(--bone);--p-mute:var(--casing-light);--p-fill:var(--crude);--p-sep:#3A4550;--p-raise:#3A4550;
  --p-green:#8DB37A;--p-amber:var(--flare);--p-red:#FF8A80}

/* The device: a thicker material. A lit top edge and a two-layer shadow. */
.phone{border-radius:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(20,22,26,.06),0 40px 80px -44px rgba(20,22,26,.55)}
.dark .phone{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.25),0 44px 90px -40px rgba(0,0,0,.9)}

/* Entrance: each line settles on the sheet curve, with a breath of blur. */
.phone .stag>*{transform:translateY(12px) scale(.985);filter:blur(3px);
  transition:opacity .7s var(--p-ease),transform .7s var(--p-ease),filter .7s var(--p-ease)}
.phone.in .stag>*{filter:none}

/* Captions: sentence case, the body face, no typewriter. */
.phone .tag{font:600 13px/1.3 var(--font);letter-spacing:-.003em;text-transform:none;color:var(--p-mute)}
.phone .card h3{letter-spacing:-.012em}
.phone .card .who .num,.phone .card .who.tot .num{font-family:var(--font);font-weight:600;font-variant-numeric:tabular-nums;color:var(--p-ink)}

/* Home card header: the word, no pulsing light. */
.hc-live{font:700 15px/1 var(--font);letter-spacing:-.01em;color:var(--p-ink)}
.hc-live i{display:none}
.hc-dots i{background:var(--p-sep)}
.hc-dots b{transition:width .5s var(--p-ease)}

/* Kind and date: a colored word and a plain date. No capsule, no dot. */
.phone .hc-kind,:root .phone .hc-kind{padding:0;background:none!important;border-radius:0;font:700 13px/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--p-amber)!important}
.phone .hc-kind::before{display:none}
.hc-date{font:500 13px/1.3 var(--font);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--p-mute)}

/* Three facts in one inset panel, split by hairlines. */
.hc-facts{gap:0;padding:12px 0;border-radius:16px;background:var(--p-fill)}
.hc-facts div{padding:0 12px;border:0;border-radius:0;background:none}
.hc-facts div+div{box-shadow:inset 1px 0 0 var(--p-sep)}
[dir="rtl"] .hc-facts div+div{box-shadow:inset -1px 0 0 var(--p-sep)}
.hc-facts b{font-size:21px;color:var(--p-ink)}
.hc-facts span{font-size:11.5px;color:var(--p-mute)}

.hc-wt em{font:500 13px/1.3 var(--font);font-variant-numeric:tabular-nums;color:var(--p-mute)}
.hc-ok{padding:0;background:none;color:var(--p-green);font:600 13px/1 var(--font)}

/* The opening line: a quiet inset, no stripe down the side. */
.hc-sayl{font:600 13px/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--p-mute)}
.card.hc .say,[dir="rtl"] .card.hc .say{border:0;padding:14px 16px;border-radius:16px;background:var(--p-fill);
  font-size:16px;line-height:1.45;font-weight:500;letter-spacing:-.006em;color:var(--p-ink)}

/* Buttons: one corner radius across the card, and they give under a press. */
.phone .act span,.phone .chips3 span{border-radius:14px;transition:transform .12s ease-out,background-color .2s,box-shadow .2s}
.phone .act span:active,.phone .chips3 span:active{transform:scale(.97)}
.card.hc .act span{border-radius:14px}

/* Due: a red word, then the reason. */
.hc-due,:root .hc-due{padding:0;background:none;color:var(--p-red)!important;font:700 13px/1 var(--font)}
.hc-due::after{content:"\00B7";margin-inline-start:9px;color:var(--p-mute);font-weight:400}
.card.hc .due{gap:9px;color:var(--p-mute)}

/* Import list: the status is a word at the end of the row. */
.phone .imp{grid-template-columns:1fr auto;border-top-color:var(--p-sep)}
.phone .imp .t,.phone .imp .t.ok,.phone .imp .t.new{order:2;padding:0;border:0;border-radius:0;background:none;
  font:600 12.5px/1 var(--font);letter-spacing:0;text-transform:lowercase;color:var(--p-mute)}
.phone .imp .t::first-letter{text-transform:uppercase}
.phone .imp .t.ok{color:var(--p-green)}

/* The read: For, Not yet, Against as colored words. */
.phone .rd{border-top-color:var(--p-sep)}
.phone .rd .m,.phone .rd .m.for,.phone .rd .m.not,.phone .rd .m.ag{padding:0;border-radius:0;background:none;text-align:start;
  font:700 13px/1.4 var(--font);letter-spacing:0;text-transform:none}
.phone .rd .m.for{color:var(--p-green)}.phone .rd .m.not{color:var(--p-amber)}.phone .rd .m.ag{color:var(--p-red)}

/* Before / On the call / After: a segmented control. */
.phone .cc-tabs{border:0;padding:3px;border-radius:11px;background:var(--p-fill);margin-bottom:16px;
  font:600 13px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--p-mute)}
.phone .cc-tabs span{position:relative;z-index:1;padding:8px 0}
.phone .cc-tabs i{top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);height:auto;border-radius:8px;background:var(--p-raise);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08);animation-timing-function:cubic-bezier(.32,.72,0,1)}
.phone .cc-p{top:72px}

/* Quote header: a logo tile and a segmented status. */
.phone .q-brand{border-bottom:1px solid var(--p-sep)}
.phone .q-brand .logo{padding:8px 11px;border:0;border-radius:10px;background:var(--p-fill);
  font:700 12px/1 var(--font);letter-spacing:.01em;text-transform:lowercase;color:var(--p-mute)}
.phone .q-brand .logo::first-letter{text-transform:uppercase}
.phone .q-st{display:inline-flex;gap:0;padding:2px;border-radius:9px;background:var(--p-fill)}
.phone .q-st em{border:0!important;border-radius:7px;padding:5px 8px;font:600 11.5px/1 var(--font);letter-spacing:0;text-transform:none}

/* Signing steps and My Customers: inset grouped lists, not boxed rows. */
.phone .steps3,.phone .finds{gap:0;border-radius:16px;background:var(--p-fill);overflow:hidden}
.phone .steps3 span{border:0;border-radius:0;background:none;color:var(--p-ink)}
.phone .steps3 span+span,.phone .find+.find{box-shadow:inset 0 1px 0 var(--p-sep)}
.phone .find{grid-template-columns:1fr;gap:3px;padding:11px 14px;border:0;border-radius:0;background:none;color:var(--p-ink)}
.phone .find .k,.phone .find .k.open,.phone .find .k.link,.phone .find .k.warn{padding:0;border:0;border-radius:0;background:none;
  font:700 12.5px/1.3 var(--font);letter-spacing:0;text-transform:none;justify-self:start}
.phone .find .k.warn{color:var(--p-red)}.phone .find .k.open{color:var(--p-amber)}.phone .find .k.link{color:var(--p-green)}

/* Event card: a colored caption, plain price, plain name. */
.phone .tg-kind{padding:0;border-radius:0;background:none;color:var(--p-amber);font:700 13px/1 var(--font);letter-spacing:0;text-transform:none}
.phone .tg-price{padding:0;border:0;border-radius:0;background:none;font:500 14px/1.4 var(--font);font-variant-numeric:tabular-nums;color:var(--p-mute)}
.phone .tg-name{padding:0;border:0;border-radius:0}

/* Pricing card: the clock line in the body face. */
.phone .pr-clock em{font:600 13px/1.3 var(--font);letter-spacing:0;text-transform:none}

@media (prefers-reduced-motion:reduce){.phone .stag>*{filter:none;transform:none}.phone .act span:active,.phone .chips3 span:active{transform:none}}
.dark .phone .card{--p-fill:#232B35;--p-raise:#3A4550}
.phone .pr-clock em{font-size:12.5px}

/* ===== Side by side · 9 Oct 2026 =====
   Phone first: one card per row, the row label as the heading, five short
   lines with the product named on each, Roughneck first, carrying the lockup
   and a Flare rule. From 900px it becomes a table: labels in a fixed column,
   the Roughneck column raised on a Bone panel with a Flare edge and the
   lockup in the header, and every row lifting its Roughneck cell on hover.
   The column reveals once, top to bottom, on scroll. */
.sbs{background:var(--bg)}
.sbs .anchor{display:block;height:0;scroll-margin-top:84px}
.sbs-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sbs-logo{display:inline-flex;align-items:center;line-height:0}
.sbs-logo img{height:20px;width:auto;display:block}
.sbs-logo .darkmark{display:none}
.sbs-grid{margin-top:26px;display:grid;gap:12px}
.sbs-head{display:none}
.sbs-row{display:grid;gap:0;padding:14px 16px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surf);transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s,border-color .25s}
.sbs-row:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 10px 26px -14px rgba(20,22,26,.35)}
.sbs-row .sbs-lab{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.15;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.sbs-row [role="cell"]{display:grid;grid-template-columns:minmax(0,11ch) 1fr;gap:12px;align-items:start;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--ink)}
.sbs-row [role="cell"]::before{content:attr(data-col);font:600 12.5px/1.4 var(--font);color:var(--mute-strong);overflow-wrap:anywhere}
.sbs-row [role="cell"].n{color:var(--mute-strong)}
.sbs-row .sbs-rn{position:relative;background:#fff;margin:0 -16px;padding:12px 16px 12px 19px;border-top:0;border-radius:0;font-weight:600;grid-template-columns:auto 1fr;align-items:center}
.sbs-row .sbs-rn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--flare)}
.sbs-row .sbs-rn.n{font-weight:500;color:var(--mute-strong)}
.sbs-close{margin-top:24px;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.012em;max-width:30ch}
.sbs-foot{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--mute-strong);max-width:72ch}
@media (min-width:900px){
  .sbs-grid{display:block;margin-top:30px;border:1px solid var(--line);border-radius:14px;background:var(--surf);overflow:visible}
  .sbs-head,.sbs-row{display:grid;grid-template-columns:210px 1.25fr repeat(4,1fr);gap:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .sbs-row:hover{transform:none;border-color:transparent;box-shadow:none}
  .sbs-head{background:var(--crude);color:var(--bone);border-radius:14px 14px 0 0;overflow:hidden}
  .sbs-head span{padding:16px 14px;font:700 13.5px/1.3 var(--font);letter-spacing:-.005em;display:flex;align-items:center}
  .sbs-head .sbs-rn{background:var(--iron);border-bottom:3px solid var(--flare);padding:14px}
  .sbs-head .sbs-logo img{height:24px}
  .sbs-row{border-top:1px solid var(--line);transition:background .3s ease}
  .sbs-row:hover{background:var(--wash)}
  .sbs-row:last-child [role="cell"]:last-child{border-radius:0 0 14px 0}
  .sbs-row .sbs-lab{padding:16px;margin:0;font:700 14.5px/1.35 var(--font);letter-spacing:0;background:var(--wash);transition:background .3s ease}
  .sbs-row:hover .sbs-lab{background:var(--border)}
  .sbs-row [role="cell"]{display:block;padding:16px 14px;border:0;border-left:1px solid var(--line);font-size:14.5px}
  .sbs-row [role="cell"]::before{display:none}
  .sbs-row .sbs-rn{display:flex;align-items:flex-start;gap:10px;margin:0;padding:16px 14px 16px 17px;background:#fff;border-left:1px solid var(--line);font-weight:700;color:var(--ink);position:relative;z-index:1;
    transition:box-shadow .45s cubic-bezier(.32,.72,0,1),background .3s ease}
  .sbs-row .sbs-rn::before{width:3px;transition:width .35s cubic-bezier(.32,.72,0,1),box-shadow .35s}
  .sbs-row .sbs-rn .sbs-logo{display:none}
  .sbs-row .sbs-rn.n{font-weight:500;color:var(--mute-strong)}
  .sbs-row:hover .sbs-rn{box-shadow:0 14px 30px -14px rgba(20,22,26,.38),0 0 0 1px rgba(245,180,0,.35);background:#FFFDF6}
  .sbs-row:hover .sbs-rn::before{width:5px;box-shadow:0 0 12px rgba(245,180,0,.55)}
  .sbs-row .sbs-rn.y::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--flare);flex:none;margin:6px 0 0 auto;box-shadow:0 0 0 3px rgba(245,180,0,.22);transition:box-shadow .35s cubic-bezier(.32,.72,0,1)}
  .sbs-row:hover .sbs-rn.y::after{box-shadow:0 0 0 5px rgba(245,180,0,.3)}
  /* the reveal is a keyframe, not a transition, so it never fights the hover */
  .sbs-grid .sbs-row .sbs-rn{opacity:0}
  .sbs-grid.in .sbs-row .sbs-rn{animation:sbsIn .55s cubic-bezier(.32,.72,0,1) both;animation-delay:calc(120ms + var(--i,0) * 60ms)}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sbs-logo .light{display:none}
  :root:not([data-theme="light"]) .sbs-logo .darkmark{display:block}
  :root:not([data-theme="light"]) .sbs-head{background:#0E1013}
  :root:not([data-theme="light"]) .sbs-head .sbs-rn{background:#1C222B}
  :root:not([data-theme="light"]) .sbs-row .sbs-rn{background:#232B35}
  :root:not([data-theme="light"]) .sbs-row:hover .sbs-rn{background:#2A3340;box-shadow:0 14px 30px -14px rgba(0,0,0,.7),0 0 0 1px rgba(245,180,0,.35)}
  :root:not([data-theme="light"]) .sbs-row .sbs-lab{background:#1E2530}
  :root:not([data-theme="light"]) .sbs-row:hover .sbs-lab{background:#262E3A}
  :root:not([data-theme="light"]) .sbs-row:hover{box-shadow:0 10px 26px -14px rgba(0,0,0,.8)}}
:root[data-theme="dark"] .sbs-logo .light{display:none}
:root[data-theme="dark"] .sbs-logo .darkmark{display:block}
:root[data-theme="dark"] .sbs-head{background:#0E1013}
:root[data-theme="dark"] .sbs-head .sbs-rn{background:#1C222B}
:root[data-theme="dark"] .sbs-row .sbs-rn{background:#232B35}
:root[data-theme="dark"] .sbs-row:hover .sbs-rn{background:#2A3340;box-shadow:0 14px 30px -14px rgba(0,0,0,.7),0 0 0 1px rgba(245,180,0,.35)}
:root[data-theme="dark"] .sbs-row .sbs-lab{background:#1E2530}
:root[data-theme="dark"] .sbs-row:hover .sbs-lab{background:#262E3A}
:root[data-theme="dark"] .sbs-row:hover{box-shadow:0 10px 26px -14px rgba(0,0,0,.8)}
@keyframes sbsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sbs-row,.sbs-row .sbs-rn,.sbs-grid .sbs-row .sbs-rn{opacity:1;transform:none!important;transition:none;animation:none}}

/* ===== The customer's quote page, /q · 22 Oct 2026 ==========================
   Set to match the quote document in app v3.10.2. Scoped under .qd so the
   site's own signing page (/sign) and the verify page keep their old rules.
   Phone first at 390px, one column to 760px wide on a desk. Prints on Letter. */
.qd{--qd-ink:#14161A;--qd-paper:#FAF7F0;--qd-muted:#5A5348;--qd-label:#6B6455;--qd-panel:#F1EBDF;
  --qd-hair:rgba(20,22,26,.10);--qd-gold:#F5B400;--qd-box:#FFFDF8;--qd-boxline:rgba(20,22,26,.16);
  --qd-display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --qd-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --qd-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  max-width:760px;margin:0 auto;padding:22px 16px 56px;box-sizing:border-box;
  background:var(--qd-paper);color:var(--qd-ink);font-family:var(--qd-body);font-size:13.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.qd *{box-sizing:border-box;min-width:0}
.qd p{margin:0}
.qd a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.qd .mute{color:var(--qd-muted)}
.qd .lede{font-size:15px;line-height:1.5}
.qd #err h1,.qd #load h1{font-family:var(--qd-display);font-weight:800;font-size:27px;line-height:1.02;margin:0 0 10px}
.qd #err p{margin:6px 0}

/* labels and codes */
.qd .lab{font-family:var(--qd-mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--qd-label);line-height:1.3}

/* masthead */
.qd .mast{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:12px}
.qd .mast>div:first-child{flex:1 1 auto}
.qd .mast .qshop{font-family:var(--qd-display);font-weight:800;font-size:27px;line-height:1.02;letter-spacing:-.01em;overflow-wrap:anywhere}
.qd .mast .qwho{font-size:12.5px;color:var(--qd-muted);margin-top:4px;line-height:1.4}
.qd .mast .right{text-align:right;flex:0 0 auto;max-width:50%}
.qd .mast .qnum{font-family:var(--qd-display);font-weight:700;font-size:22px;line-height:1.1;margin-top:2px;white-space:nowrap}
.qd .mast .date{font-size:12.5px;color:var(--qd-muted);margin-top:2px}
.qd .qrule{height:2px;background:var(--qd-ink);position:relative;margin-bottom:16px}
.qd .qrule:after{content:"";position:absolute;left:0;top:2px;width:72px;height:4px;background:var(--qd-gold)}

/* parties */
.qd .parties{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;background:var(--qd-panel);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.qd .parties .cust{font-family:var(--qd-display);font-weight:700;font-size:18px;line-height:1.15;margin-top:3px;overflow-wrap:anywhere}
.qd .parties .contact{font-size:12.5px;color:var(--qd-muted);margin-top:2px;line-height:1.4}
.qd .parties .dates{text-align:right}
.qd .parties .dates .lab+div{font-family:var(--qd-display);font-weight:700;font-size:15px;line-height:1.2;margin:2px 0 8px}
.qd .parties .dates .lab+div:last-child{margin-bottom:0}
@media (max-width:419px){.qd .parties{grid-template-columns:1fr}.qd .parties .dates{text-align:left;display:flex;gap:18px}
  .qd .parties .dates>div{flex:1}}

/* subject */
.qd .subject{padding:2px 0 12px;border-bottom:1px solid var(--qd-hair);margin-bottom:16px}
.qd .subject .val{font-family:var(--qd-display);font-weight:700;font-size:21px;line-height:1.15;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* letter and text blocks */
.qd .letter{font-size:13.5px;line-height:1.6;margin-bottom:18px}
.qd .letter p+p{margin-top:10px}
.qd .sec{font-family:var(--qd-display);font-weight:800;font-size:17px;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;
  border-left:4px solid var(--qd-gold);padding:0 0 0 10px;margin:22px 0 10px}
.qd .sec:first-child{margin-top:0}
.qd .blk{font-size:13.5px;line-height:1.6;padding:0 0 12px;border-bottom:1px solid var(--qd-hair);white-space:pre-line}
.qd .blk:last-child{border-bottom:0}

/* priced lines */
.qd .qrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--qd-hair)}
.qd .qrow .svc{font-weight:700;font-size:14px;line-height:1.35}
.qd .qrow .qcode{display:inline-block;background:var(--qd-ink);color:var(--qd-paper);font-family:var(--qd-mono);font-weight:600;font-size:10.5px;
  letter-spacing:.04em;border-radius:4px;padding:1px 5px;line-height:1.5;vertical-align:1px;margin-right:6px}
.qd .qrow .incl{margin:4px 0 0 0;padding-left:16px;font-size:12.5px;color:var(--qd-muted);line-height:1.5}
.qd .qrow .incl li{margin:1px 0}
.qd .qrow .right{text-align:right;flex:0 0 auto;max-width:48%}
.qd .qrow .qmeta{font-size:12.5px;color:var(--qd-muted);line-height:1.4}
.qd .qrow .amt{font-weight:700;font-size:14.5px;color:var(--qd-ink);line-height:1.3;white-space:nowrap}
.qd .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--qd-ink);color:var(--qd-paper);
  border-radius:10px;padding:13px 16px;margin:14px 0 6px}
.qd .total b{font-family:var(--qd-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.qd .total i{font-style:normal;font-family:var(--qd-display);font-weight:700;font-size:26px;line-height:1;white-space:nowrap}
.qd .qfine{font-size:11px;line-height:1.55;color:var(--qd-label);border-top:1px solid var(--qd-hair);padding-top:10px;margin-top:18px}
.qd .qfine p+p{margin-top:6px}

/* signatures */
.qd .sigs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:419px){.qd .sigs{grid-template-columns:1fr}}
.qd .sigbox{border:1px solid var(--qd-boxline);border-radius:10px;background:var(--qd-box);padding:12px}
.qd .sigbox .party{font-family:var(--qd-display);font-weight:700;font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.qd .sigbox .area{height:62px;border-bottom:1px solid var(--qd-ink);margin:6px 0 6px;display:flex;align-items:flex-end;justify-content:flex-start;
  font-family:var(--qd-display);font-weight:700;font-size:20px;color:var(--qd-ink);padding-bottom:4px;overflow:hidden}
.qd .sigbox .area.empty{color:var(--qd-label);font-family:var(--qd-mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.qd .sigbox .nm{font-size:12.5px;line-height:1.4}
.qd .sigbox .nm b{font-weight:600}
.qd .sigbox .dt{font-size:12px;color:var(--qd-muted)}
.qd .sigbox .dt.lab{font-size:10px;color:var(--qd-label);padding-top:2px}

/* status notes */
.qd .note{border:1px solid var(--qd-boxline);border-radius:10px;background:var(--qd-box);padding:14px 16px;margin:0 0 16px}
.qd .note b{display:block;font-family:var(--qd-display);font-weight:800;font-size:19px;line-height:1.1;margin-bottom:6px}
.qd .note.gold{border-color:transparent;background:var(--qd-gold);color:var(--qd-ink)}
.qd .vcode{font-family:var(--qd-mono);font-weight:600;font-size:22px;letter-spacing:.12em;margin:10px 0 4px}
.qd .idok{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--qd-boxline);border-radius:10px;background:var(--qd-box);margin:0 0 16px;font-size:13px}
.qd .idok .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--qd-ink);color:var(--qd-paper);display:grid;place-items:center;font-size:13px}
.qd .idok b{display:block;font-weight:700}
.qd .idok p{color:var(--qd-muted);font-size:12.5px}
.qd .qsteps{display:flex;gap:10px;list-style:none;margin:0 0 16px;padding:0;font-size:12.5px;color:var(--qd-muted)}
.qd .qsteps li{display:flex;align-items:center;gap:7px}
.qd .qsteps li i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1px solid var(--qd-boxline);display:grid;place-items:center;font-family:var(--qd-mono);font-weight:600;font-size:11px}
.qd .qsteps li.on{color:var(--qd-ink);font-weight:600}
.qd .qsteps li.on i{background:var(--qd-ink);color:var(--qd-paper);border-color:var(--qd-ink)}
.qd .qsteps li.ok i{background:var(--qd-gold);border-color:var(--qd-gold)}

/* the act of signing */
.qd .qact{margin-top:22px}
.qd .qact h2{font-family:var(--qd-display);font-weight:800;font-size:17px;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;
  border-left:4px solid var(--qd-gold);padding:0 0 0 10px;margin:0 0 10px}
.qd .qact .mute{font-size:13.5px;line-height:1.6}
.qd .pad{display:block;width:100%;height:150px;margin-top:12px;border:1px dashed rgba(20,22,26,.35);border-radius:10px;background:#fff;touch-action:none}
.qd .padrow{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--qd-muted);margin:6px 0 10px}
.qd .fld{margin:12px 0}
.qd .fld label{display:block;font-family:var(--qd-mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--qd-label);margin-bottom:5px}
.qd .fld label .opt{text-transform:none;letter-spacing:0;font-family:var(--qd-body);font-size:11.5px;margin-left:6px}
.qd .fld input{width:100%;height:48px;border:1px solid var(--qd-boxline);border-radius:12px;background:#fff;color:var(--qd-ink);font:inherit;font-size:16px;padding:0 14px;outline:none}
.qd .fld input:focus{border-color:var(--qd-ink);box-shadow:0 0 0 3px rgba(245,180,0,.35)}
.qd .fld .locked{height:48px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--qd-boxline);border-radius:12px;background:var(--qd-panel);padding:0 14px;font-size:15px;font-weight:600}
.qd .fld .locked span{font-weight:500;font-size:11.5px;color:var(--qd-muted)}
.qd .agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;margin:12px 0;color:var(--qd-ink)}
.qd .agree input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--qd-ink)}
.qd .btn,.qd button.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border-radius:12px;
  font-family:var(--qd-body);font-weight:600;font-size:16px;line-height:1;cursor:pointer;border:1px solid transparent;padding:0 18px;margin:0;text-decoration:none;transition:background .15s,opacity .15s}
.qd .btn-flare,.qd button.btn-flare{background:var(--qd-gold);color:var(--qd-ink);border-color:var(--qd-gold)}
.qd .btn-flare:hover{background:#E0A500;border-color:#E0A500}
.qd .btn[disabled]{opacity:.45;cursor:default}
.qd .btn .ar{font-weight:500}
.qd .btn-line,.qd button.btn-line{background:transparent;color:var(--qd-ink);border-color:var(--qd-ink)}
.qd .btn-line:hover{background:rgba(20,22,26,.06)}
.qd .padrow button{height:36px;padding:0 14px;border-radius:12px;border:1px solid var(--qd-ink);background:transparent;color:var(--qd-ink);
  font-family:var(--qd-body);font-weight:600;font-size:13px;cursor:pointer}
.qd .until{font-size:12.5px;color:var(--qd-muted);text-align:center;margin-top:10px}
.qd .warn{color:#8A1C1C;font-size:13.5px;margin:8px 0 0;font-weight:500}
.qd .a-note{color:var(--qd-muted);font-size:13.5px;margin:8px 0 0}
.qd .idgate{border:1px solid var(--qd-boxline);border-radius:10px;background:var(--qd-box);padding:16px;margin-top:22px}
.qd .idgate h2{font-family:var(--qd-display);font-weight:800;font-size:17px;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.qd .idgate .btn{margin-top:4px}
.qd .dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-left:3px;opacity:.35;animation:qdDot 1s infinite}
.qd .dots i:nth-child(2){animation-delay:.15s}.qd .dots i:nth-child(3){animation-delay:.3s}
@keyframes qdDot{0%,100%{opacity:.25}50%{opacity:1}}

/* the site's dark theme does not reach a document a customer prints */
[data-theme="dark"] .qd,.qd{color-scheme:light}

/* d104: a test-mode ID check is labelled */
.qd .idok.test{border-color:#7E5A00;background:#FFF6E0}
.qd .idok.test .tick{background:#7E5A00;color:#fff;font-weight:700}
.qd .idtest{background:#FFF6E0;border:1px solid #7E5A00;border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.5;margin:0 0 12px;color:#14161A}
/* 23 Oct 2026: Save as PDF, two-line subject, room above Safari's toolbar */
.qd{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
.qd .subject .val{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.qd .qsave{margin-top:16px}
.qd .qsave-note{font-size:12px;line-height:1.45;color:var(--qd-muted);text-align:center;margin-top:6px}
.qd .note+.qsave{margin:-4px 0 16px}
.qd .nw{white-space:nowrap}
.qd .padrow button{text-decoration:none}
/* 23 Oct 2026: the total bar on /q */
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#14161A;color:#FAF7F0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(20,22,26,.18);
  transition:transform .22s ease,opacity .22s ease}
.qbar.off{transform:translateY(110%);opacity:0;pointer-events:none}
.qbar .in{max-width:728px;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.qbar b{font-family:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.qbar i{font-style:normal;font-family:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:23px;line-height:1;white-space:nowrap}
body.qd-bar{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.qbar{transition:none}}
@media print{
  @page{size:letter;margin:14mm 15mm}
  body.qd-page{background:#fff}
  body.qd-page>header,body.qd-page>footer,body.qd-page>nav{display:none!important}
  .qd{background:#fff;max-width:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qd .mast .qshop{font-size:22pt}
  .qd .qrow,.qd .blk,.qd .total,.qd .sigbox,.qd .parties,.qd .note,.qd .idok{break-inside:avoid;page-break-inside:avoid}
  .qd .sec,.qd .qact h2{break-after:avoid;page-break-after:avoid}
  .qd .qact,.qd .idgate,.qd .qsteps,.qd .btn,.qd .padrow,.qd .pad,.qd .until,.qd #load{display:none!important}
  body.qd-page .hdr,body.qd-page .sheet,body.qd-page .menu-btn,.qd .qsave,.qd button,.qd .idtest{display:none!important}
  .qd{padding-bottom:0}
  .qbar{display:none!important}
  body.qd-bar{padding-bottom:0}
  .qd .note.gold{border:1px solid var(--qd-boxline);background:#fff}
  .qd .sigbox{background:#fff}
  .qd a{text-decoration:none}
}

/* /help, the customer guide (29 Oct 2026): the doc look, a row of links between the pages, tables that scroll on a phone */
.help-doc .help-nav{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.help-doc .help-nav a{font-size:15px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:inherit;min-height:44px;display:inline-flex;align-items:center}
.help-doc .help-nav a[aria-current="page"]{background:var(--surf);font-weight:600}
.help-doc h3{font-size:19px;margin:24px 0 8px}
.help-doc li{font-size:17px;line-height:1.55;margin:0 0 6px}
.help-doc .tbl-wrap{overflow-x:auto;margin:12px 0 18px}
.help-doc table{border-collapse:collapse;font-size:15px;min-width:100%}
.help-doc th,.help-doc td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.help-doc hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.help-doc .help-maker{font-size:14px;color:var(--mute-strong);margin-top:36px}
.help-doc .help-toc{margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-card)}
.help-doc .help-toc p{font-size:14px;font-weight:600;margin:0 0 6px}
.help-doc .help-toc ul{columns:2;column-gap:24px;margin:0;padding-left:18px}
.help-doc .help-toc li{font-size:15px;margin:0 0 4px;break-inside:avoid}
.help-doc .help-shot{float:right;width:280px;max-width:42%;margin:4px 0 16px 24px}
.help-doc .help-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px}
.help-doc h2{clear:both;scroll-margin-top:96px}
@media (max-width:640px){.help-doc .help-shot{float:none;max-width:100%;margin:8px auto 18px}.help-doc .help-toc ul{columns:1}}
/* 29 Oct 2026 (d105): the NDA signed on a link, /nda/<token>. Rides on the .qd quote styles. */
.qd .nhero{background:var(--qd-panel);border-radius:12px;padding:16px;margin:0 0 20px}
.qd .nhero h1,.qd .ndone h1{font-family:var(--qd-display);font-weight:800;font-size:30px;line-height:1.02;margin:0 0 6px}
.qd .nhero .lede{font-size:16px;line-height:1.45}
.qd .nsteps{display:flex;gap:14px;list-style:none;margin:14px 0 10px;padding:0;font-weight:600;font-size:14px}
.qd .nsteps li{display:flex;align-items:center;gap:7px}
.qd .nsteps i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--qd-ink);color:var(--qd-paper);display:grid;place-items:center;font-family:var(--qd-mono);font-weight:600;font-size:12px}
.qd .njump{font-size:14px;font-weight:600}
.qd .nterms{font-size:15px;line-height:1.6}
.qd .nterms p{margin:0 0 12px}
.qd .nterms .nsec{font-family:var(--qd-display);font-weight:700;font-size:17px;line-height:1.15;margin:20px 0 6px}
.qd .nterms .nnote{font-size:13px;color:var(--qd-muted);border-top:1px solid var(--qd-hair);padding-top:12px;margin-top:18px}
.qd .nlab{margin:16px 0 0}
.qd .nagree{font-size:15px}
.qd .nagree input{width:24px;height:24px}
.qd .pad{height:170px}
.qd .bigbtn{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:76px;margin:16px 0 4px;
  border:0;border-radius:18px;background:#F5B400;color:#14161A;cursor:pointer;
  font-family:var(--qd-display);font-weight:800;font-size:28px;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 6px 0 #9E7300,0 14px 28px rgba(20,22,26,.18);transition:transform .08s ease,box-shadow .08s ease}
.qd .bigbtn:active{transform:translateY(5px);box-shadow:0 1px 0 #9E7300,0 6px 14px rgba(20,22,26,.18)}
.qd .bigbtn[disabled]{opacity:.7;cursor:default}
.qd .bigbtn .arr{width:40px;height:30px;animation:ndaNudge .9s ease-in-out infinite}
@keyframes ndaNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
.qd .nfun{text-align:center;font-size:13.5px;color:var(--qd-muted);margin:8px 0 0;font-style:italic}
.qd .ndone{text-align:center;padding:24px 0 8px}
.qd .ntick{width:84px;height:84px;margin:4px auto 16px;border-radius:50%;background:#F5B400;color:#14161A;display:grid;place-items:center}
.qd .ntick svg{width:52px;height:52px}
.qd .ntick.pop{animation:ndaPop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ndaPop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
.qd .ndone .lede{font-size:16.5px;line-height:1.5;max-width:30ch;margin:0 auto 18px}
.qd .nid{margin:0 auto 18px}
.qd .ndone .btn{max-width:420px;margin:0 auto}
@media (prefers-reduced-motion:reduce){.qd .bigbtn .arr,.qd .ntick.pop{animation:none}}

/* ---------- the quote, card v13 · 30 Oct 2026 ----------
   What a buyer reads and signs. Two parts, what is paid once and what is paid every month; each line
   at its own price with what it buys listed plainly under it; the receipt panel at the head and at the
   total, dark in both themes. Phone first. */
.qx-head{background:var(--panel);color:var(--panel-ink);border-radius:18px;padding:20px 20px 18px;
  box-shadow:inset 0 0 0 1px rgba(250,247,240,.09),0 18px 40px -24px rgba(var(--shadow),.55)}
.qx-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.qx-brand{font:800 25px/1 var(--display);letter-spacing:-.01em;position:relative;padding-bottom:9px}
.qx-brand:after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:2px;background:var(--flare)}
.qx-face{font:800 19px/1 var(--display);letter-spacing:.06em;color:var(--flare)}
.qx-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;font:500 11.5px/1.5 var(--mono);
  letter-spacing:.04em;text-transform:uppercase;color:var(--panel-mute)}
.qx-to{margin-top:14px;padding-top:13px;border-top:1px solid rgba(250,247,240,.14)}
.qx-to small{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--panel-mute)}
.qx-to b{display:block;margin-top:4px;font:700 19px/1.25 var(--display);color:var(--panel-ink)}
.qx-to span{display:block;font-size:14px;color:rgba(250,247,240,.78);margin-top:2px}
.qx{display:grid;gap:14px;margin-top:16px}
.qx-sec{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:4px 18px 2px;
  box-shadow:0 10px 28px -22px rgba(var(--shadow),var(--shadow-a))}
.qx-eye{margin:0;padding:15px 0 9px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute-strong)}
.qx-ln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:15px 0;border-top:1px solid var(--line)}
.qx-name b{display:block;font:600 16.5px/1.3 var(--display);color:var(--ink);letter-spacing:.005em}
.qx-name p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--mute-strong)}
.qx-items{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.qx-items li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.qx-items li:before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--flare);box-shadow:0 0 0 2px rgba(245,180,0,.18)}
.qx-amt{text-align:right;font:600 16.5px/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.qx-amt small,.qx-sub small{display:block;margin-top:3px;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.qx-ln.off .qx-amt,.qx-ln.off .qx-name b{color:var(--ok)}
.qx-ln.open .qx-amt{color:var(--mute-strong);font-weight:500;font-family:var(--font);font-size:14.5px}
.qx-grp{margin:0;padding:13px 0 3px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--mute-strong)}
.qx-ln.st{padding:9px 0;border-top:0}
.qx-ln.st .qx-name b{font-size:15.5px}
.qx-ln.st .qx-amt small{display:none}
.qx-ln.st + .qx-ln:not(.st){border-top:1px solid var(--line)}
.qx-sub{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:13px 0 15px;border-top:2px solid var(--ink);
  font:700 15.5px/1.3 var(--display);color:var(--ink)}
.qx-sub span:last-child{text-align:right;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.qx-due{margin-top:16px;background:var(--panel);color:var(--panel-ink);border-radius:18px;padding:18px 20px 16px;
  box-shadow:inset 0 0 0 1px rgba(250,247,240,.09),0 18px 40px -24px rgba(var(--shadow),.55)}
.qx-due-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.qx-due-row span{font:700 16px/1 var(--display);letter-spacing:.02em}
.qx-due-row b{font:800 34px/1 var(--display);letter-spacing:-.02em;color:var(--panel-ink)}
.qx-due p{margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(250,247,240,.14);font-size:13.5px;line-height:1.55;color:rgba(250,247,240,.78)}
.sign .qx-head + .done{margin-top:16px}
@media (min-width:640px){
  .qx-head{padding:26px 28px 22px}.qx-sec{padding:6px 26px 4px}.qx-due{padding:22px 28px 20px}
  .qx-brand{font-size:28px}.qx-due-row b{font-size:40px}
}