/* ===========================================================
   REPLY FIRST on KINETIC · Trust Blue (seed #2f4ea6, surface tint 0.15).
   Token values are the output of Kinetic's own brand engine
   (BrandEngine.build('trust-blue') painted on the Kinetic
   chassis), frozen to CSS so the page needs no runtime engine.
   Light is default; .dark on <html> swaps the semantic set.
   =========================================================== */

/* ---- fonts · Kinetic's two roles plus mono ---- */
@font-face{font-family:"Inter WR";src:url("fonts/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Signika Negative WR";src:url("fonts/signika-negative-variable.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

/* ---- semantic tokens · light ---- */
:root{
  color-scheme:light;
  --sys-color-bg-canvas:#ffffff;   /* plain white in light mode, on every page */
  --sys-color-surface:#fdfdff;
  --sys-color-surface-raised:#ffffff;
  --sys-color-surface-sunken:#ebf0fc;
  --sys-color-surface-popover:#ffffff;
  --sys-color-surface-hover:rgba(21,26,38,.04);
  --sys-color-surface-selected:rgba(47,78,166,.1);
  --sys-color-border:rgba(12,17,23,.09);
  --sys-color-border-strong:rgba(12,17,23,.16);
  --sys-color-border-focus:#5c81de;
  --sys-color-text-primary:#151a26;
  --sys-color-text-secondary:#252b38;
  --sys-color-text-tertiary:#3b4252;
  --sys-color-text-inverse:#ffffff;
  --sys-color-accent:#2f4ea6;
  --sys-color-accent-hover:#2f4ea6;
  --sys-color-accent-text:#2f4ea6;
  --sys-color-accent-soft:rgba(47,78,166,.1);
  --sys-color-text-on-accent:#ffffff;
  --sys-color-accent-solid:#2f4ea6;
  --sys-color-accent-solid-lift:#2f4ea6;
  --sys-color-text-on-accent-solid:#ffffff;
  --sys-color-spark:#5c81de;
  --sys-color-spark-fill:#5c81de;
  --sys-color-on-spark:#f3f7ff;
  --sys-color-pop:#5c81de;
  --sys-color-on-pop:#ffffff;
  --sys-color-pop-text:#2f4ea6;
  --sys-color-pop-soft:rgba(47,78,166,.08);
  --sys-color-pop-border:rgba(47,78,166,.30);
  --sys-color-mark:#fbeec4;
  --sys-color-on-mark:#3a2a00;
  --sys-color-hot:#b91c1c;
  --sys-color-bad:#dc2626;
  --sys-color-bad-text:#b91c1c;
  --sys-color-bad-bg:#fef5f5;
  --sys-color-bad-bd:#fbd5d5;
  --sys-color-good:#16a34a;
  --sys-color-good-text:#15803d;
  --sys-color-good-bg:#f2fbf4;
  --sys-color-good-bd:#c6ecd2;
  --sys-color-hot-soft:rgba(220,38,38,.07);
  --sys-status-cleared-fg:#00652f;
  --sys-status-cleared-bg:rgba(0,120,59,.14);
  --sys-status-cleared-bd:rgba(0,120,59,.3);
  --sys-status-pending-fg:#6e4900;
  --sys-status-pending-bg:rgba(134,89,0,.14);
  --sys-status-pending-bd:rgba(134,89,0,.3);
  --sys-status-scheduled-fg:#1666aa;
  --sys-status-scheduled-bg:rgba(22,102,170,.12);
  --sys-status-scheduled-bd:rgba(22,102,170,.28);
  --sys-status-declined-fg:#b02a2d;
  --sys-status-declined-bg:rgba(176,42,45,.1);
  --sys-status-declined-bd:rgba(176,42,45,.26);
  --sys-shadow-xs:0 1px 2px rgba(20,24,33,.05);
  --sys-shadow-sm:0 1px 2px rgba(20,24,33,.05),0 2px 6px rgba(20,24,33,.04);
  --sys-shadow-md:0 6px 18px -6px rgba(20,24,33,.12),0 2px 6px rgba(20,24,33,.05);
  --sys-shadow-lg:0 24px 48px -16px rgba(20,24,33,.20),0 4px 12px rgba(20,24,33,.06);
  --sys-shadow-brand:0 12px 28px -10px color-mix(in srgb,var(--sys-color-accent) 55%,transparent);
  --sys-radius-xs:7px;--sys-radius-sm:10px;--sys-radius-md:14px;--sys-radius-lg:18px;--sys-radius-xl:24px;--sys-radius-pill:999px;
  --sys-focus-ring-default:0 0 0 2px var(--sys-color-surface),0 0 0 4px var(--sys-color-border-focus);
  --sys-font-sans:"Inter WR",ui-sans-serif,system-ui,sans-serif;
  --sys-font-display:"Signika Negative WR",ui-sans-serif,system-ui,sans-serif;
  --sys-font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --sys-text-display:60px;--sys-text-title:36px;--sys-text-heading:23px;--sys-text-subhead:18px;--sys-text-card:17px;--sys-text-body:17px;
  --sys-text-sm:16px;--sys-text-caption:15px;--sys-text-label:14px;--sys-text-micro:14px;
  --sys-leading-tight:1.02;--sys-leading-normal:1.55;--sys-leading-relaxed:1.68;
  --sys-tracking-tight:-0.035em;--sys-tracking-snug:-0.02em;--sys-tracking-normal:0;--sys-tracking-wide:0.06em;
  --sys-space-1:4px;--sys-space-2:8px;--sys-space-3:12px;--sys-space-4:16px;--sys-space-5:20px;--sys-space-6:24px;--sys-space-8:32px;
  --sys-space-10:40px;--sys-space-12:48px;--sys-space-14:56px;--sys-space-16:64px;--sys-space-20:80px;--sys-space-24:96px;--sys-space-28:112px;
  --sys-container-page:1200px;--sys-container-gutter:32px;--sys-measure:68ch;
  --sys-weight-regular:400;--sys-weight-medium:500;--sys-weight-semibold:600;--sys-weight-bold:700;--sys-weight-extrabold:800;
}

/* ---- semantic tokens · dark ---- */
.dark{
  color-scheme:dark;
  /* Kinetic dark chassis (neutral near-black, white ink): no blue cast in the grounds or the text.
     Accent fills are bright sky blue with near-black ink, so buttons, ticks and highlights pop on black */
  --sys-color-bg-canvas:#0d0e10;
  --sys-color-surface:#17181b;
  --sys-color-surface-raised:#1e2024;
  --sys-color-surface-sunken:#0a0b0d;
  --sys-color-surface-popover:#22242a;
  --sys-color-surface-hover:rgba(255,255,255,.05);
  --sys-color-surface-selected:rgba(150,182,255,.16);
  --sys-color-border:rgba(255,255,255,.10);
  --sys-color-border-strong:rgba(255,255,255,.18);
  --sys-color-border-focus:#a0bcff;
  --sys-color-text-primary:#f7f8fa;
  --sys-color-text-secondary:#d2d6dc;
  --sys-color-text-tertiary:#aeb4be;
  --sys-color-text-inverse:#0d0e10;
  --sys-color-accent:#a0bcff;
  --sys-color-accent-hover:#b8ceff;
  --sys-color-accent-text:#a8c2ff;
  --sys-color-accent-soft:rgba(150,182,255,.16);
  --sys-color-text-on-accent:#0d0e10;
  --sys-color-accent-solid:#a0bcff;
  --sys-color-accent-solid-lift:#c3d5ff;
  --sys-color-text-on-accent-solid:#0d0e10;
  --sys-color-spark:#d6e2ff;
  --sys-color-spark-fill:#d6e2ff;
  --sys-color-on-spark:#0d0e10;
  --sys-color-pop:#a0bcff;
  --sys-color-on-pop:#0d0e10;
  --sys-color-pop-text:#96b6ff;
  --sys-color-pop-soft:rgba(150,182,255,.14);
  --sys-color-pop-border:rgba(150,182,255,.36);
  --sys-color-mark:rgba(250,214,92,.18);
  --sys-color-on-mark:#f7e3a1;
  --sys-color-hot:#f87171;
  --sys-color-bad:#ef4444;
  --sys-color-bad-text:#fca5a5;
  --sys-color-bad-bg:rgba(239,68,68,.07);
  --sys-color-bad-bd:rgba(252,165,165,.22);
  --sys-color-good:#22c55e;
  --sys-color-good-text:#86efac;
  --sys-color-good-bg:rgba(34,197,94,.07);
  --sys-color-good-bd:rgba(134,239,172,.22);
  --sys-color-hot-soft:rgba(248,113,113,.09);
  --sys-status-cleared-fg:#4dbf74;
  --sys-status-cleared-bg:rgba(77,191,116,.16);
  --sys-status-cleared-bd:rgba(77,191,116,.34);
  --sys-status-pending-fg:#f2ad3a;
  --sys-status-pending-bg:rgba(218,149,11,.16);
  --sys-status-pending-bd:rgba(218,149,11,.36);
  --sys-status-scheduled-fg:#60aaf3;
  --sys-status-scheduled-bg:rgba(96,170,243,.16);
  --sys-status-scheduled-bd:rgba(96,170,243,.34);
  --sys-status-declined-fg:#fd736d;
  --sys-status-declined-bg:rgba(253,115,109,.16);
  --sys-status-declined-bd:rgba(253,115,109,.34);
  --sys-shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --sys-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
  --sys-shadow-md:0 6px 18px -6px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --sys-shadow-lg:0 24px 48px -16px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.45);
}

/* ---- motion + velocity · Kinetic's electric layer ---- */
:root{
  --sys-duration-fast:140ms;--sys-duration-base:220ms;--sys-duration-slow:360ms;
  --sys-ease-standard:cubic-bezier(.2,.8,.2,1);--sys-ease-emphasized:cubic-bezier(.2,.9,.1,1);--sys-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --sys-motion-scale:1;
  --sys-dur-fast:calc(var(--sys-duration-fast) * var(--sys-motion-scale));
  --sys-dur-base:calc(var(--sys-duration-base) * var(--sys-motion-scale));
  --sys-dur-slow:calc(var(--sys-duration-slow) * var(--sys-motion-scale));
  --sys-gradient-velocity:linear-gradient(96deg,var(--sys-color-accent) 0%,var(--sys-color-spark-fill) 62%,var(--sys-color-accent) 100%);
  --sys-gradient-command:linear-gradient(96deg,var(--sys-color-accent-solid) 0%,var(--sys-color-accent-solid-lift) 62%,var(--sys-color-accent-solid) 100%);
  --sys-gradient-charge:linear-gradient(90deg,transparent 0%,var(--sys-color-spark-fill) 45%,var(--sys-color-accent) 100%);
  --sys-glow-spark:0 0 0 1px color-mix(in srgb,var(--sys-color-spark) 40%,transparent),0 10px 30px -12px color-mix(in srgb,var(--sys-color-accent) 85%,transparent);
  --sys-rule-charge:2px;
}
@media (prefers-reduced-motion: reduce){:root{--sys-motion-scale:0}}

/* ===========================================================
   BASE
   =========================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html[data-kin-switching] *,html[data-kin-switching] *::before,html[data-kin-switching] *::after{transition:none !important}
body{margin:0;font-family:var(--sys-font-sans);display:flex;flex-direction:column;min-height:100vh;background:var(--sys-color-bg-canvas);
  color:var(--sys-color-text-primary);font-size:var(--sys-text-body);line-height:var(--sys-leading-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .25s ease,color .25s ease}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background:radial-gradient(60% 50% at 88% -8%,color-mix(in srgb,var(--sys-color-accent) 14%,transparent),transparent 70%),
             radial-gradient(50% 40% at 0% 0%,color-mix(in srgb,var(--sys-color-spark) 7%,transparent),transparent 65%)}
html:not(.dark) body::before{display:none}   /* no tinted glow over the white canvas */
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img,svg{display:block}
::selection{background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text)}
:focus-visible{outline:none;box-shadow:var(--sys-focus-ring-default);border-radius:var(--sys-radius-xs)}
.mono{font-family:var(--sys-font-mono);font-feature-settings:"tnum" 1,"zero" 1;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid);padding:10px 16px;border-radius:var(--sys-radius-sm);font-weight:var(--sys-weight-semibold)}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--sys-container-page);margin:0 auto;padding:0 var(--sys-container-gutter)}
@media (max-width:680px){.wrap{padding:0 var(--sys-space-4)}}
main{flex:1}

/* ===========================================================
   TYPE · Kinetic roles
   =========================================================== */
.eyebrow{font-family:var(--sys-font-mono);font-size:var(--sys-text-micro);font-weight:var(--sys-weight-semibold);letter-spacing:var(--sys-tracking-wide);text-transform:uppercase;color:var(--sys-color-accent-text)}
.display{font-family:var(--sys-font-display);font-size:var(--sys-text-display);font-weight:var(--sys-weight-bold);line-height:var(--sys-leading-tight);letter-spacing:var(--sys-tracking-tight)}
@media (max-width:860px){.display{font-size:46px}}
@media (max-width:560px){.display{font-size:38px}}
.display .spark{position:relative;color:var(--sys-color-accent-text);white-space:nowrap}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .display .spark{background:var(--sys-gradient-velocity);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kx-charge-sweep 5s linear infinite}
}
.display .spark::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.06em;border-radius:999px;background:var(--sys-gradient-charge);
  transform:scaleX(0);transform-origin:0 50%;animation:kx-underscore var(--sys-dur-slow) var(--sys-ease-emphasized) 240ms forwards}
@keyframes kx-underscore{to{transform:scaleX(1)}}
@keyframes kx-charge-sweep{from{background-position:100% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion: reduce){.display .spark{animation:none}.display .spark::after{transform:scaleX(1);animation:none}}
.title{font-family:var(--sys-font-display);font-size:var(--sys-text-title);font-weight:var(--sys-weight-bold);line-height:1.12;letter-spacing:var(--sys-tracking-snug)}
@media (max-width:560px){.title{font-size:30px}}
.heading{font-family:var(--sys-font-display);font-size:var(--sys-text-heading);font-weight:var(--sys-weight-bold);line-height:1.2;letter-spacing:var(--sys-tracking-snug)}
.subhead{font-family:var(--sys-font-display);font-size:var(--sys-text-subhead);font-weight:var(--sys-weight-bold);line-height:1.25;letter-spacing:var(--sys-tracking-snug)}
.card-title{font-family:var(--sys-font-display);font-size:var(--sys-text-card);font-weight:var(--sys-weight-bold);line-height:1.3;letter-spacing:var(--sys-tracking-snug)}
.lead{font-size:19px;line-height:var(--sys-leading-relaxed);color:var(--sys-color-text-secondary);max-width:var(--sys-measure)}
.prose{font-size:var(--sys-text-body);line-height:var(--sys-leading-normal);color:var(--sys-color-text-secondary);max-width:var(--sys-measure)}
.prose-sm{font-size:var(--sys-text-sm);line-height:1.6;color:var(--sys-color-text-secondary)}
.caption{font-size:var(--sys-text-caption);line-height:1.5;font-weight:var(--sys-weight-medium);color:var(--sys-color-text-secondary)}
.micro{font-size:14px;line-height:1.45;font-weight:var(--sys-weight-medium);color:var(--sys-color-text-tertiary)}
.sub-tag{font-family:var(--sys-font-mono);font-size:var(--sys-text-caption);font-weight:var(--sys-weight-medium);color:var(--sys-color-text-tertiary)}
.link{color:var(--sys-color-accent-text);font-weight:var(--sys-weight-semibold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* section head: the short velocity bar, the label, the fading rule */
.sechead{display:flex;align-items:center;gap:12px;margin:0 0 var(--sys-space-4)}
.sechead::before{content:"";flex:none;width:22px;height:var(--sys-rule-charge);border-radius:999px;background:var(--sys-gradient-velocity)}
.sechead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--sys-color-border),transparent)}

/* ===========================================================
   COMPONENTS
   =========================================================== */
.card{position:relative;background:var(--sys-color-surface);border:1px solid var(--sys-color-border);border-radius:var(--sys-radius-lg);box-shadow:var(--sys-shadow-sm)}
/* no top accent bar on cards: David retired that pattern on 2026-10-20 */
.card-pad{padding:var(--sys-space-6)}
.card-pad-lg{padding:var(--sys-space-8)}
@media (max-width:560px){.card-pad{padding:var(--sys-space-5)}.card-pad-lg{padding:var(--sys-space-6)}}
.divider{height:1px;background:var(--sys-color-border);border:0;margin:0}

/* ---- interaction states · one pattern for the whole site ----
   ACTION (does something): primary = Trust Blue fill (See pricing, Pay); secondary = outline (See how it works, Replay);
     card link = soft blue outline (Learn more cards); text link = blue underline.
     hover: darker edge or glow + 1px lift · pressed: lift drops · disabled: 50% and no pointer.
   NAVIGATION (where you are): default = grey text; hover = darker text + faint fill;
     current = blue text + blue bar, never a fill, so it can't be mistaken for a button.
   CHOICE (pick one: trade tabs, contact options, theme): unselected = outline;
     selected = soft tint + solid border in the control's color.
   FOCUS (keyboard), everywhere: 2px gap + 2px blue ring (--sys-focus-ring-default). */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-weight:var(--sys-weight-semibold);font-size:15px;line-height:1;padding:12px 18px;border-radius:var(--sys-radius-pill);
  border:1px solid var(--sys-color-border-strong);background:var(--sys-color-surface);color:var(--sys-color-text-primary);
  transition:border-color var(--sys-dur-fast) var(--sys-ease-standard),background var(--sys-dur-fast) var(--sys-ease-standard),color var(--sys-dur-fast) var(--sys-ease-standard),transform var(--sys-dur-fast) var(--sys-ease-spring),box-shadow var(--sys-dur-fast) var(--sys-ease-standard);white-space:nowrap}
.btn:hover{border-color:var(--sys-color-text-tertiary);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}
.btn--sm{padding:9px 14px;font-size:14px}
.btn--lg{padding:16px 24px;font-size:16px}
.btn--primary{background:var(--sys-gradient-command);background-size:200% 100%;background-position:40% 0;border-color:transparent;color:var(--sys-color-text-on-accent-solid);box-shadow:var(--sys-shadow-brand)}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn--primary:hover::after{animation:kx-sheen var(--sys-dur-slow) var(--sys-ease-standard)}
@keyframes kx-sheen{to{transform:translateX(120%)}}
.btn--primary:hover{background-position:0 0;border-color:transparent;box-shadow:var(--sys-shadow-brand),var(--sys-glow-spark)}
.btn--primary:focus-visible{box-shadow:var(--sys-shadow-brand),var(--sys-focus-ring-default)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--sys-color-text-secondary)}
.btn--ghost:hover{background:var(--sys-color-surface-hover);border-color:transparent;color:var(--sys-color-text-primary)}
.btn--soft{background:var(--sys-color-accent-soft);border-color:transparent;color:var(--sys-color-accent-text)}
.btn--block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
@media (prefers-reduced-motion: reduce){.btn:hover{transform:none}.btn--primary:hover::after{animation:none}}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:var(--sys-weight-bold);padding:4px 11px 4px 9px;border-radius:var(--sys-radius-pill);
  border:1px solid transparent;line-height:1.4;letter-spacing:-.005em;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.cleared{color:var(--sys-status-cleared-fg);background:var(--sys-status-cleared-bg);border-color:var(--sys-status-cleared-bd)}
.pill.pending{color:var(--sys-status-pending-fg);background:var(--sys-status-pending-bg);border-color:var(--sys-status-pending-bd)}
.pill.scheduled{color:var(--sys-status-scheduled-fg);background:var(--sys-status-scheduled-bg);border-color:var(--sys-status-scheduled-bd)}
.pill.brand{color:var(--sys-color-accent-text);background:var(--sys-color-accent-soft);border-color:color-mix(in srgb,var(--sys-color-accent-text) 28%,transparent)}
.pill.neutral{color:var(--sys-color-text-secondary);background:var(--sys-color-surface-sunken);border-color:var(--sys-color-border)}

/* review flag: a pending pill, visible on purpose, removed before publish */
.flag{display:inline-flex;align-items:center;font-family:var(--sys-font-mono);font-size:12px;font-weight:var(--sys-weight-semibold);
  color:var(--sys-status-pending-fg);background:var(--sys-status-pending-bg);border:1px dashed var(--sys-status-pending-bd);border-radius:6px;padding:1px 7px;max-width:100%}

/* icon tile, as in Kinetic's activity rows */
.tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--sys-color-surface-sunken);color:var(--sys-color-text-secondary);border:1px solid var(--sys-color-border)}
.tile svg{width:19px;height:19px}
.tile.brand{background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text);border-color:transparent}
.tile.solid{background:var(--sys-gradient-command);color:var(--sys-color-text-on-accent-solid);border-color:transparent;box-shadow:var(--sys-shadow-brand)}

/* the fact sheet: label left, value right */

/* checklists */

/* fields · Kinetic kf-control */
.kf-field{display:flex;flex-direction:column;gap:6px}
.kf-label{font-size:var(--sys-text-caption);font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.kf-control{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:var(--sys-radius-md);border:1px solid var(--sys-color-border);background:var(--sys-color-surface-sunken);transition:border-color .15s,box-shadow .15s}
.kf-control:focus-within{border-color:var(--sys-color-border-focus);box-shadow:0 0 0 3px var(--sys-color-accent-soft)}
.kf-control input{border:0;background:transparent;outline:none;color:var(--sys-color-text-primary);width:100%;min-width:0;font-family:inherit;font-size:16px}
.kf-control input:focus-visible{box-shadow:none}
.kf-control input::placeholder{color:var(--sys-color-text-tertiary)}
.kf-ic{color:var(--sys-color-text-tertiary);display:inline-flex;flex-shrink:0}
.kf-ic svg{width:17px;height:17px}
.kf-hint{font-size:14px;color:var(--sys-color-text-tertiary)}

/* ===========================================================
   CHROME · nav and footer
   =========================================================== */
.kx-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--sys-color-surface) 86%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--sys-color-border)}
.kx-nav-row{max-width:var(--sys-container-page);margin:0 auto;padding:14px var(--sys-container-gutter);display:flex;align-items:center;gap:18px}
@media (max-width:680px){.kx-nav-row{padding:12px 16px;gap:10px}}
.kx-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.kx-mark{position:relative;overflow:hidden;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--sys-gradient-velocity);background-size:220% 100%;box-shadow:var(--sys-shadow-brand);color:var(--sys-color-text-on-accent);animation:kx-charge-sweep 4.2s linear infinite}
@media (prefers-reduced-motion: reduce){.kx-mark{animation:none}}
.kx-word{font-family:var(--sys-font-display);font-weight:var(--sys-weight-bold);font-size:20px;letter-spacing:var(--sys-tracking-tight)}
.kx-tabs{display:flex;align-items:center;gap:2px;margin-left:auto}
.kx-tab{position:relative;white-space:nowrap;padding:9px 16px;border-radius:var(--sys-radius-pill);font-size:15px;font-weight:var(--sys-weight-semibold);letter-spacing:-.01em;
  color:var(--sys-color-text-secondary);transition:color .15s ease,background .15s ease}
.kx-tab:hover{color:var(--sys-color-text-primary);background:var(--sys-color-surface-hover)}
.kx-tab.active{color:var(--sys-color-accent-text);background:transparent;cursor:default}
.kx-tab.active::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:999px;background:var(--sys-color-accent-text)}
.kx-tab.only-menu{display:none}
.kx-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.kx-burger{display:none;width:38px;height:38px;border-radius:var(--sys-radius-md);border:1px solid var(--sys-color-border);background:var(--sys-color-surface);color:var(--sys-color-text-primary);cursor:pointer;place-items:center;padding:0}
.kx-burger svg{width:18px;height:18px}
.kx-burger:hover,.contact-x:hover{background:var(--sys-color-surface-hover);border-color:var(--sys-color-border-strong);color:var(--sys-color-text-primary)}
.kx-burger[aria-expanded="true"]{background:var(--sys-color-accent-soft);border-color:var(--sys-color-accent-text);color:var(--sys-color-accent-text)}
@media (max-width:860px){
  .kx-tools{margin-left:auto}
  .kx-tabs{position:fixed;inset:70px 12px auto 12px;z-index:55;flex-direction:column;align-items:stretch;gap:4px;padding:10px;margin:0;
    background:var(--sys-color-surface);border:1px solid var(--sys-color-border);border-radius:var(--sys-radius-lg);box-shadow:var(--sys-shadow-lg);
    transform:scale(.98);opacity:0;pointer-events:none;visibility:hidden;transition:.16s;transform-origin:top}
  .kx-tabs.open{transform:scale(1);opacity:1;pointer-events:auto;visibility:visible}
  .kx-tab{padding:11px 14px}
  .kx-tab.active{background:var(--sys-color-accent-soft)}
  .kx-tab.active::after{left:0;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .kx-tab.only-menu{display:block}
  .kx-burger{display:grid}
}
@media (max-width:480px){.kx-tools [data-contact-open]{display:none}}

/* theme switch · the site's two-state light/dark toggle (Kinetic + davidpaterni.com) */
.tswitch{--ts-track:#eceef2;--ts-line:#a9b0bc;--ts-thumb:#0b0d11;--ts-dim:#545b68;--ts-on:#f6f7f9;--ts-ring:var(--sys-color-border-focus);
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;flex:none;box-sizing:border-box;width:76px;height:38px;padding:3px;margin:0;
  border-radius:999px;border:1px solid var(--ts-line);background:var(--ts-track)}
.dark .tswitch{--ts-track:#222427;--ts-line:#5a616b;--ts-thumb:#f1f2f3;--ts-dim:#d3d6d8;--ts-on:#111417}
.tswitch .thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:999px;background:var(--ts-thumb);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.dark .tswitch .thumb{transform:translateX(100%)}
.tswitch button{position:relative;z-index:1;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:999px;background:none;cursor:pointer;color:var(--ts-dim);box-shadow:none;transition:color .3s}
.tswitch button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tswitch button[aria-checked="true"]{color:var(--ts-on)}
.tswitch button:focus-visible{outline:2px solid var(--ts-ring);outline-offset:3px;box-shadow:none}
@media (prefers-reduced-motion: reduce){.tswitch .thumb{transition:none}}

.kx-foot{border-top:1px solid var(--sys-color-border);background:var(--sys-color-surface-sunken);margin-top:var(--sys-space-24)}
.kx-foot-row{max-width:var(--sys-container-page);margin:0 auto;padding:var(--sys-space-10) var(--sys-container-gutter);display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,1.1fr) minmax(200px,auto);gap:var(--sys-space-10);align-items:start}
.kx-foot-id{display:flex;align-items:center;gap:var(--sys-space-3)}
.kx-foot-name{font-family:var(--sys-font-display);font-weight:var(--sys-weight-bold);font-size:18px;letter-spacing:var(--sys-tracking-tight);line-height:1.2}
.kx-foot-sub{font-size:14px;color:var(--sys-color-text-secondary);margin-top:2px;max-width:34ch}
.kx-foot-nav{display:flex;flex-wrap:wrap;gap:var(--sys-space-1) var(--sys-space-5)}
.kx-foot-nav a{font-size:14px;font-weight:var(--sys-weight-medium);color:var(--sys-color-text-secondary);padding:var(--sys-space-1) 0}
.kx-foot-nav a:hover{color:var(--sys-color-accent-text)}
.kx-foot-nav a[aria-current="page"],.kx-foot-copy a[aria-current="page"]{color:var(--sys-color-accent-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.kx-foot-meta{display:flex;flex-direction:column;gap:var(--sys-space-1);font-size:14px;color:var(--sys-color-text-secondary);justify-self:end;text-align:right}
.kx-foot-meta a{color:var(--sys-color-text-secondary)}
.kx-foot-meta a:hover{color:var(--sys-color-accent-text)}
.kx-foot-meta .eyebrow{margin-top:var(--sys-space-3);color:var(--sys-color-text-tertiary)}
.kx-foot-copy{color:var(--sys-color-text-tertiary);margin-top:var(--sys-space-2)}
@media (max-width:900px){
  .kx-foot-row{grid-template-columns:1fr;gap:var(--sys-space-6);padding:var(--sys-space-8) var(--sys-container-gutter)}
  .kx-foot-meta{justify-self:start;text-align:left}
}

/* ===========================================================
   PAGE LAYOUT · Reply First
   =========================================================== */
.band{padding:var(--sys-space-14) 0}
.band.tight{padding-top:var(--sys-space-8)}
.page-head + .band.tight{padding-bottom:var(--sys-space-8)}
@media (max-width:680px){.band{padding:var(--sys-space-10) 0}}
.band-head{margin-bottom:var(--sys-space-10);max-width:760px}
.band-head .title{margin-bottom:var(--sys-space-4)}

.page-head{padding:var(--sys-space-16) 0 var(--sys-space-8)}
.page-head .display{max-width:16ch;margin:var(--sys-space-4) 0 var(--sys-space-5)}
@media (max-width:680px){.page-head{padding:var(--sys-space-10) 0 var(--sys-space-4)}}

/* hero */
.hero{padding-top:var(--sys-space-16);padding-bottom:var(--sys-space-12);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--sys-space-12);align-items:start}
@media (max-width:980px){.hero{grid-template-columns:minmax(0,1fr);gap:var(--sys-space-10)}}
@media (max-width:680px){.hero{padding-top:var(--sys-space-10);padding-bottom:var(--sys-space-8)}}
.hero .display{margin:var(--sys-space-4) 0 var(--sys-space-5)}
.hero .lead{margin-bottom:var(--sys-space-8)}
.cta-row{display:flex;gap:var(--sys-space-3);flex-wrap:wrap}
.pills{display:flex;gap:var(--sys-space-2);flex-wrap:wrap;margin-top:var(--sys-space-6)}

/* demo: an activity list */

/* trades strip */

/* before / after */

/* steps */

.callout{display:flex;gap:14px;align-items:flex-start;margin-top:var(--sys-space-6);padding:var(--sys-space-4) var(--sys-space-5);border-radius:var(--sys-radius-md);
  background:var(--sys-color-accent-soft);color:var(--sys-color-text-primary);font-size:16px;max-width:820px}
.callout svg{width:20px;height:20px;color:var(--sys-color-accent-text);flex:none;margin-top:2px}

/* pricing */

.terms-line{text-align:center;margin-top:var(--sys-space-5)}

.results{display:grid;grid-template-columns:1fr 1fr;gap:var(--sys-space-3);margin-top:var(--sys-space-4)}
@media (max-width:420px){.results{grid-template-columns:1fr}}

/* proof */
.num-list{display:grid;gap:var(--sys-space-6);counter-reset:n}
.num-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sys-space-4)}
.num-list li::before{counter-increment:n;content:counter(n);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-bold);font-size:18px;background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text)}
.num-list .card-title{margin-bottom:4px}

.stack{display:grid;gap:var(--sys-space-5)}

/* timeline */

/* faq */
@media (max-width:560px){.faq summary{padding:var(--sys-space-5) var(--sys-space-5)}.faq .ans{padding:0 var(--sys-space-5) var(--sys-space-5)}}

/* closing band: the command surface */

/* free test */

.test-intro{grid-area:intro}.test-steps{grid-area:steps}.test-form{grid-area:form}

.test-form form{display:grid;gap:var(--sys-space-4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===========================================================
   HERO EXAMPLE · one lead, start to finish
   =========================================================== */
.hero-copy{padding-top:var(--sys-space-6)}
/* hero: the offer in four lines */
.hero-points{list-style:none;margin:var(--sys-space-5) 0 var(--sys-space-8);padding:0;display:grid;gap:12px;max-width:560px}
.hero-points li{position:relative;padding-left:34px;font-size:19px;line-height:1.45;color:var(--sys-color-text-primary);white-space:nowrap}   /* one line each */
@media (max-width:420px){.hero-points{gap:10px}.hero-points li{font-size:16px;padding-left:32px}.hero-points li::before{width:22px;height:22px;background-size:13px}}
@media (max-width:340px){.hero-points li{font-size:15px}}
.hero-points .hp-key{color:var(--sys-color-accent-text)}   /* the trust line: bold, accent, padlock instead of a tick */
.hero-points .hp-key strong{font-weight:var(--sys-weight-bold,700)}
.hero-points li.hp-key::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.page-head .hero-points{margin:var(--sys-space-5) 0 var(--sys-space-6)}
@media (max-width:380px){.hp-own{display:none}}   /* keeps 'Leads logged in your Google Sheet' on one line on small phones */
.hero-points li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:999px;background:var(--sys-color-accent-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:980px){.hero-copy{padding-top:0}}

.ex-tab{font:inherit;font-size:14.5px;font-weight:var(--sys-weight-semibold);padding:7px 12px;border-radius:var(--sys-radius-pill);cursor:pointer;
  border:1px solid var(--sys-color-pop-border);background:transparent;color:var(--sys-color-pop-text);transition:background var(--sys-dur-fast),color var(--sys-dur-fast),border-color var(--sys-dur-fast)}
.ex-tab:hover{background:var(--sys-color-pop-soft)}
.ex-tab[aria-pressed="true"]{background:var(--sys-color-pop-soft);color:var(--sys-color-pop-text);border-color:var(--sys-color-pop-text)}

/* page header: the h1 and the lead share one measure */
.page-head .wrap > *{max-width:860px}
.page-head .display{max-width:860px}

/* ===========================================================
   LEGAL PAGES
   =========================================================== */
.legal-note{margin:0 0 var(--sys-space-6);max-width:none}
.legal-doc{display:grid;gap:var(--sys-space-8)}
.legal-sec{display:grid;gap:var(--sys-space-3);scroll-margin-top:90px}
.legal-sec .subhead{margin-top:var(--sys-space-2)}
.legal-list{display:grid;gap:8px;padding-left:1.2em;list-style:disc;color:var(--sys-color-text-secondary);max-width:var(--sys-measure)}
.legal-list li::marker{color:var(--sys-color-accent-text)}
.legal-doc b{color:var(--sys-color-text-primary);font-weight:var(--sys-weight-semibold)}

/* ===========================================================
   LINE BREAKING · no lone last words (the build also binds the last two words)
   =========================================================== */
[hidden]{display:none!important}
h1,h2,h3,.display,.title,.heading,.subhead,.card-title,.big-num{text-wrap:balance}
p,li,dd,dt,.lead,.prose,.prose-sm,.caption,.micro,.ans{text-wrap:pretty}
p,li,dd,dt,.caption,.micro,.prose-sm,.card-title,.duo-steps span,.duo-end span,.duo-cap,.plan-pitch,.pp-setup,.ans,.lead,.prose{text-wrap:balance}

/* hero example: capped scroll area (JS sets the cap to step 1 + half of step 2) */

/* ===========================================================
   WHAT'S INCLUDED · icon cards, with a quieter "what it isn't" panel
   =========================================================== */

p,li,dd,dt,.ans{overflow-wrap:anywhere}
.flag{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.9}
.legal-doc{grid-template-columns:minmax(0,1fr)}
.contact-list{display:grid;gap:6px;color:var(--sys-color-text-secondary)}
.payback{max-width:720px;margin:var(--sys-space-6) auto 0;text-align:center;font-size:var(--sys-text-subhead);line-height:1.55;color:var(--sys-color-text-primary)}

/* ===========================================================
   CONTACT · the Contact popup
   =========================================================== */
dialog.contact{border:0;padding:0;background:transparent;color:inherit;width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:visible}
dialog.contact::backdrop{background:rgba(10,12,16,.55);backdrop-filter:blur(3px)}
.contact-card{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.contact-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sys-space-4);margin-bottom:var(--sys-space-4)}
.contact-head .heading{margin-top:var(--sys-space-2)}
.contact-x{width:38px;height:38px;flex:none;border-radius:var(--sys-radius-md);border:1px solid var(--sys-color-border);background:var(--sys-color-surface);color:var(--sys-color-text-secondary);display:grid;place-items:center;cursor:pointer}
.contact-x:hover{color:var(--sys-color-text-primary)}
.contact-form{display:grid;gap:var(--sys-space-4)}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sys-space-4)}
.contact-wide{grid-column:1/-1}
@media (max-width:560px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.kf-area{align-items:flex-start}
.kf-area textarea{border:0;background:transparent;outline:none;color:var(--sys-color-text-primary);width:100%;min-width:0;font:inherit;font-size:16px;resize:vertical;min-height:72px}
.kf-area textarea:focus-visible{box-shadow:none}
.kf-err{font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-status-declined-fg)}
.kf-control[aria-invalid="true"]{border-color:var(--sys-status-declined-fg)}
.reach{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sys-space-2);align-items:center}
.reach legend{width:100%;margin-bottom:6px}
.reach label{position:relative;cursor:pointer}
.reach input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.reach span{display:inline-block;padding:8px 16px;border-radius:var(--sys-radius-pill);border:1px solid var(--sys-color-border-strong);font-size:14.5px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.reach span:hover{border-color:var(--sys-color-text-tertiary)}
.reach input:checked + span{background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text);border-color:var(--sys-color-accent-text)}
.reach input:focus-visible + span{box-shadow:var(--sys-focus-ring-default)}
.contact-form .btn.loading{opacity:.7;pointer-events:none}
.contact-done{display:grid;justify-items:start;gap:var(--sys-space-3);padding:var(--sys-space-4) 0}
.foot-link{font:inherit;font-size:14px;background:none;border:0;padding:0;color:var(--sys-color-text-secondary);cursor:pointer;text-align:inherit}
.foot-link:hover{color:var(--sys-color-accent-text)}
.link-btn{font:inherit;background:none;border:0;padding:0;cursor:pointer}
.reach legend{padding:0}

/* problem: the same lead, two outcomes (very light red / green cards) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sys-space-6);align-items:stretch}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr);gap:var(--sys-space-5)}}
.duo-card{--tone:var(--sys-color-bad);--tone-text:var(--sys-color-bad-text);--tone-bg:var(--sys-color-bad-bg);--tone-bd:var(--sys-color-bad-bd);
  display:flex;flex-direction:column;gap:var(--sys-space-5);padding:var(--sys-space-8);border-radius:var(--sys-radius-lg);background:var(--tone-bg);border:1px solid var(--tone-bd)}
.duo-card.good{--tone:var(--sys-color-good);--tone-text:var(--sys-color-good-text);--tone-bg:var(--sys-color-good-bg);--tone-bd:var(--sys-color-good-bd)}
@media (max-width:560px){.duo-card{padding:var(--sys-space-6) var(--sys-space-5)}}
.duo-head{display:flex;align-items:center;gap:12px}
.duo-ic{width:36px;height:36px;flex:none;border-radius:999px;display:grid;place-items:center;background:var(--tone);color:#fff}
.duo-ic.sm{width:24px;height:24px}
.duo-title{font-family:var(--sys-font-display);font-size:22px;font-weight:var(--sys-weight-bold);line-height:1.2;letter-spacing:var(--sys-tracking-snug);color:var(--sys-color-text-primary)}
.duo-stat{display:flex;flex-direction:column;gap:4px;padding:var(--sys-space-5) 0;border-top:1px solid var(--tone-bd);border-bottom:1px solid var(--tone-bd)}
.duo-num{font-family:var(--sys-font-display);font-size:48px;font-weight:var(--sys-weight-bold);letter-spacing:var(--sys-tracking-tight);line-height:1;color:var(--tone-text)}
.duo-cap{font-size:16px;font-weight:var(--sys-weight-medium);color:var(--sys-color-text-secondary)}
.duo-steps{display:grid;gap:0}
.duo-steps li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:baseline}
.duo-steps time{font-family:var(--sys-font-mono);font-size:14px;font-weight:var(--sys-weight-bold);color:var(--tone-text);white-space:nowrap}
.duo-steps li > span{position:relative;padding:0 0 var(--sys-space-4) 22px;font-size:16.5px;line-height:1.4;color:var(--sys-color-text-primary)}
.duo-steps li > span::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:999px;background:var(--tone)}
.duo-steps li > span::after{content:"";position:absolute;left:4.5px;top:calc(.42em + 14px);bottom:2px;width:1px;background:var(--tone-bd)}
.duo-steps li:last-child > span{padding-bottom:0}
.duo-steps li:last-child > span::after{display:none}
.duo-end{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:var(--sys-space-4);border-top:1px solid var(--tone-bd);font-size:16.5px;font-weight:var(--sys-weight-bold);color:var(--sys-color-text-primary)}
@media (max-width:560px){.duo-num{font-size:40px}.duo-steps li{grid-template-columns:62px minmax(0,1fr);gap:6px}.duo-steps time{font-size:14px;letter-spacing:-.03em}.duo-steps li > span{padding-left:18px;font-size:16px}.duo-end{font-size:16px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* pricing: two plans, each with its own pay button */

/* ---- mobile QA (2026-10-17): 44px tap targets on phones and tablets, footer links easy to hit ---- */
.kx-foot-nav a{display:inline-block;padding:12px 8px;margin:0 -8px;min-width:44px;text-align:center;font-size:15px}
.tswitch button::after{content:"";position:absolute;inset:-4px -2px}
.foot-link{font-size:15px;padding:12px 0}
.kx-foot-copy{font-size:14px}
.kx-foot-copy a{display:inline-block;padding:12px 2px}
@media (max-width:860px){
  .kx-burger{width:44px;height:44px}
  .tswitch{width:88px;height:44px}
  .kx-brand{min-height:44px}
  .ex-tab{min-height:44px;padding:10px 14px}
  .btn--sm{min-height:44px}
  .kx-tab{min-height:44px;display:flex;align-items:center}
}
@media (max-width:480px){
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
}
@media (max-width:560px){
  
  
  .card-pad,.card-pad-lg{padding:var(--sys-space-5)}
  
  
  
  
}

/* learn more: same build as the problem cards, in the brand tone */
.lm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sys-space-6);align-items:stretch}
.lm.lm-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.lm{grid-template-columns:minmax(0,1fr);gap:var(--sys-space-5)}.lm.lm-2{grid-template-columns:minmax(0,1fr)}}
.duo-card.brand{--tone:var(--sys-color-accent-solid);--tone-text:var(--sys-color-accent-text);--tone-bg:var(--sys-color-surface);--tone-bd:color-mix(in srgb,var(--sys-color-accent-text) 16%,transparent);box-shadow:var(--sys-shadow-sm)}
.lm .duo-card{padding:var(--sys-space-6) var(--sys-space-6) var(--sys-space-6)}
.lm .duo-num{font-size:40px}
.lm .duo-steps{flex:1;align-content:start}
.lm .duo-steps li{grid-template-columns:62px minmax(0,1fr);gap:8px}
.lm .duo-steps time{letter-spacing:-.03em}
.lm .duo-steps li > span{font-size:16px;padding-left:20px}
.lm .duo-steps.narrow li{grid-template-columns:28px minmax(0,1fr)}
.duo-steps li.plain{grid-template-columns:minmax(0,1fr)}
.lm-go{width:100%;min-height:48px;margin-top:auto;background:var(--sys-color-pop-soft);color:var(--sys-color-pop-text);border-color:var(--sys-color-pop-border);font-weight:var(--sys-weight-bold)}
.lm-buy{width:100%;min-height:48px;margin-top:auto}
.lm-go:hover{background:color-mix(in srgb,var(--sys-color-pop) 18%,transparent);border-color:var(--sys-color-pop-text)}
.lm-go svg{transition:transform var(--sys-dur-fast) var(--sys-ease-spring)}
.lm-go:hover svg{transform:translateX(3px)}

/* ---- hero example: one lead, start to finish (same build as the duo cards) ---- */
.demo{padding:0;overflow:hidden;border-color:color-mix(in srgb,var(--sys-color-accent-text) 16%,transparent);box-shadow:var(--sys-shadow-md)}
.demo-head{display:flex;align-items:center;gap:12px;padding:var(--sys-space-5) var(--sys-space-6) var(--sys-space-4)}
.demo-head .duo-ic{background:var(--sys-color-accent-solid)}
.demo-title{flex:1;min-width:0;font-family:var(--sys-font-display);font-size:20px;font-weight:var(--sys-weight-bold);line-height:1.2;letter-spacing:var(--sys-tracking-snug);color:var(--sys-color-text-primary)}
.timer{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px;border-radius:var(--sys-radius-pill);background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text);font-family:var(--sys-font-mono);font-size:15px;font-weight:var(--sys-weight-bold);font-variant-numeric:tabular-nums}
.timer svg{width:16px;height:16px}
.ex-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--sys-space-6) var(--sys-space-4);border-bottom:1px solid var(--sys-color-border)}
.act-scroll{position:relative;max-height:340px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
.act-scroll.at-end{-webkit-mask-image:none;mask-image:none}
.act-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--sys-color-border-focus)}
.act{padding:var(--sys-space-5) var(--sys-space-6) var(--sys-space-2)}
.act-row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding-bottom:var(--sys-space-5);
  transition:opacity var(--sys-dur-slow) var(--sys-ease-standard)}
.act-row::before{content:"";position:absolute;left:15px;top:38px;bottom:6px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--sys-color-accent-text) 20%,transparent)}
.act-row:last-child::before{display:none}
.act-node{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid);transition:background var(--sys-dur-base),color var(--sys-dur-base)}
.act-node svg{width:16px;height:16px}
.act-main{min-width:0}
.act-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px}
.act-title{font-size:16px;font-weight:var(--sys-weight-bold);line-height:1.3;color:var(--sys-color-text-primary)}
.act-when{flex:none;font-family:var(--sys-font-mono);font-size:14px;font-weight:var(--sys-weight-bold);color:var(--sys-color-accent-text);font-variant-numeric:tabular-nums}
.act-box{margin-top:8px;padding:12px 14px;border-radius:var(--sys-radius-md);background:var(--sys-color-surface-sunken);border:1px solid var(--sys-color-border);font-size:14.5px;line-height:1.5;color:var(--sys-color-text-primary)}
.kv{display:grid;gap:6px}
.kv > div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px}
.kv dt{font-family:var(--sys-font-mono);font-size:14px;color:var(--sys-color-text-tertiary)}
.kv dd{color:var(--sys-color-text-primary)}
.mail-h{display:grid;gap:2px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--sys-color-border);font-size:14px;color:var(--sys-color-text-secondary)}
.mail-h b{font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-tertiary);margin-right:8px}
.mail-b{color:var(--sys-color-text-primary);text-wrap:balance}
.mail-b + .mail-b{margin-top:8px}
.row3 > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) 48px;gap:10px}
.row3-h{padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--sys-color-border);font-family:var(--sys-font-mono);font-size:14px;color:var(--sys-color-text-tertiary)}
.alert-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.act-box .mono{white-space:nowrap}
.alert-top strong{font-family:var(--sys-font-display);font-size:17px}
.alert-who{margin-top:2px;color:var(--sys-color-text-secondary)}
.alert-open{margin-top:10px;padding-top:10px;border-top:1px solid var(--sys-color-border)}
.alert-open .micro{display:block;color:var(--sys-color-text-tertiary)}
.alert-quote{color:var(--sys-color-text-primary);text-wrap:balance}
.demo.armed .act-row[data-at]{opacity:.5}
.demo.armed .act-row[data-at] .act-node{background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text)}
.demo.armed .act-row.on{opacity:1}
.demo.armed .act-row.on .act-node{background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid)}
@media (prefers-reduced-motion: reduce){.demo.armed .act-row[data-at]{opacity:1}}
@media (max-width:360px){.demo .kv > div{grid-template-columns:minmax(0,1fr);gap:0}}   /* label above value, so the phone number fits its box at 320px */
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--sys-space-4) var(--sys-space-6);border-top:1px solid var(--sys-color-border)}
.demo-foot .btn{flex:none}
@media (max-width:560px){
  .demo-head,.ex-tabs,.act,.demo-foot{padding-left:var(--sys-space-4);padding-right:var(--sys-space-4)}
  .act-row{gap:12px}
  .kv > div{grid-template-columns:64px minmax(0,1fr)}
  .act-top{flex-direction:column-reverse;align-items:flex-start;justify-content:center;gap:0}
  .act-when{font-size:14px;line-height:1.2}
  .demo-head .duo-ic{display:none}
  .demo-title{font-size:18px}
}
@media (max-width:440px){.demo-foot{flex-direction:column;align-items:flex-start}}

/* ---- closing CTA: light card, same build as the duo cards ---- */
.cta-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,auto);gap:var(--sys-space-10);align-items:center;
  padding:clamp(24px,4vw,44px);border-radius:var(--sys-radius-xl);
  background:linear-gradient(var(--sys-color-accent-soft),var(--sys-color-accent-soft)),var(--sys-color-surface);
  border:1px solid color-mix(in srgb,var(--sys-color-accent-text) 18%,transparent);box-shadow:var(--sys-shadow-sm)}
.cta-card .duo-ic{width:40px;height:40px;background:var(--sys-color-accent-solid)}
.cta-title{font-family:var(--sys-font-display);font-size:30px;font-weight:var(--sys-weight-bold);line-height:1.15;letter-spacing:var(--sys-tracking-snug);color:var(--sys-color-text-primary)}
.cta-text{margin-top:var(--sys-space-4);max-width:56ch;font-size:17px;line-height:1.55;color:var(--sys-color-text-secondary)}
.cta-points{display:flex;flex-wrap:wrap;gap:var(--sys-space-2) var(--sys-space-6);margin-top:var(--sys-space-5)}
.cta-points li{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-primary)}
.cta-points svg{flex:none;color:var(--sys-color-good-text)}
.cta-actions{display:flex;flex-direction:column;gap:var(--sys-space-3)}
.cta-actions .btn{width:100%}
@media (max-width:860px){.cta-card{grid-template-columns:minmax(0,1fr);gap:var(--sys-space-6)}}
@media (max-width:560px){.cta-title{font-size:24px}.cta-points{flex-direction:column;gap:var(--sys-space-2)}}

/* ---- flow: steps on a rail (horizontal on wide screens, vertical on phones) ---- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sys-space-6);counter-reset:none}
.flow-step{position:relative;display:flex;flex-direction:column;gap:var(--sys-space-4)}
.flow-step::before{content:"";position:absolute;top:21px;left:52px;right:calc(var(--sys-space-6) * -1 + 8px);height:2px;border-radius:2px;background:color-mix(in srgb,var(--sys-color-accent-text) 20%,transparent)}
.flow-step:last-child::before{display:none}
.flow-node{width:44px;height:44px;flex:none;border-radius:999px;display:grid;place-items:center;background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid);box-shadow:0 0 0 6px var(--sys-color-bg-canvas)}
.flow-node svg{width:18px;height:18px}
.flow-when{display:block;font-family:var(--sys-font-mono);font-size:14px;font-weight:var(--sys-weight-bold);color:var(--sys-color-accent-text)}
.flow-title{margin-top:4px;font-family:var(--sys-font-display);font-size:19px;font-weight:var(--sys-weight-bold);line-height:1.25;letter-spacing:var(--sys-tracking-snug);color:var(--sys-color-text-primary)}
.flow-text{margin-top:6px;font-size:16px;line-height:1.55;color:var(--sys-color-text-secondary)}
@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr);gap:0}
  .flow-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-bottom:var(--sys-space-6)}
  .flow-step::before{top:50px;bottom:6px;left:21px;right:auto;width:2px;height:auto}
  .flow-step:last-child{padding-bottom:0}
}
.flow + .callout,.flow + .duo{margin-top:var(--sys-space-8)}

/* ---- feature grid inside one card ---- */
.feat-card{padding:var(--sys-space-8)}
.feat{display:grid;gap:var(--sys-space-6) var(--sys-space-8)}
.feat-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.feat-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.feat-3,.feat-2{grid-template-columns:minmax(0,1fr)}.feat-card{padding:var(--sys-space-6) var(--sys-space-5)}}
.feat-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.feat-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text)}
.feat-ic svg{width:18px;height:18px}
.feat-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:40px;font-family:var(--sys-font-display);font-size:18px;font-weight:var(--sys-weight-bold);line-height:1.25;color:var(--sys-color-text-primary)}
.feat-text{margin-top:2px;font-size:16px;line-height:1.55;color:var(--sys-color-text-secondary)}

/* ---- duo card extras: a tag in the header, a closing note, label rows ---- */
.duo-head .pill{margin-left:auto}
@media (max-width:480px){.duo-head{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:6px}.duo-head .pill{grid-column:2;justify-self:start;margin-left:0}}
.duo-note{margin-top:auto;padding-top:var(--sys-space-4);border-top:1px solid var(--tone-bd);font-size:15.5px;line-height:1.55;color:var(--sys-color-text-secondary)}
.kv-card{gap:var(--sys-space-3)}
.kv-card > div{grid-template-columns:minmax(0,1fr);gap:2px}   /* label above its text: a side column split "The difference" mid-word */
.kv-card dt{font-size:14px;padding-top:2px;color:var(--sys-color-text-secondary);font-weight:var(--sys-weight-semibold)}   /* no muted labels on phones */
.kv-card dd{font-size:16px;line-height:1.45}
.isnt{margin-top:var(--sys-space-6)}
.isnt-list li > span::before{background:var(--sys-color-bad)}
.golive{margin-top:var(--sys-space-8)}

/* ---- pricing: plan cards in the duo build ---- */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sys-space-6);max-width:1000px;margin:0 auto;align-items:stretch}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr);gap:var(--sys-space-5)}}
.plan .duo-title{font-size:26px}
.plan-pitch{margin-top:calc(var(--sys-space-2) * -1);font-size:16.5px;color:var(--sys-color-text-secondary)}
.plan .duo-num small{margin-left:4px;font-size:20px;font-weight:var(--sys-weight-semibold);letter-spacing:0;color:var(--sys-color-text-tertiary)}
.plan-lead-in{margin-bottom:calc(var(--sys-space-2) * -1);font-family:var(--sys-font-mono);font-size:14px;font-weight:var(--sys-weight-bold);letter-spacing:var(--sys-tracking-wide);text-transform:uppercase;color:var(--sys-color-accent-text)}
.terms-cap > span{white-space:nowrap}
@media (max-width:340px){.terms-cap{font-size:15px}}   /* keeps "Renews monthly, cancel anytime." inside the card at 320px */
.plan-pay{width:100%;margin-top:auto;white-space:normal;text-align:center;line-height:1.3}
.plan-secure{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:calc(var(--sys-space-3) * -1);font-size:14px;color:var(--sys-color-text-tertiary)}
.plan-secure svg{flex:none}

/* ---- FAQ: one card, numbered questions, open item marked ---- */
.faq{padding:0;gap:0;overflow:hidden;counter-reset:faq;max-width:920px}
.faq details{position:relative;border-bottom:1px solid var(--tone-bd);counter-increment:faq}
.faq details:last-child{border-bottom:0}
.faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sys-color-accent-solid);opacity:0;transition:opacity var(--sys-dur-fast)}
.faq details[open]::before{opacity:1}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) 36px;align-items:center;gap:var(--sys-space-3);padding:var(--sys-space-5) var(--sys-space-6);min-height:64px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:counter(faq,decimal-leading-zero);font-family:var(--sys-font-mono);font-size:14px;font-weight:var(--sys-weight-bold);color:var(--sys-color-accent-text)}
.faq summary:hover{background:var(--sys-color-surface-hover)}
.faq summary .subhead{font-family:var(--sys-font-display);font-size:19px;font-weight:var(--sys-weight-bold);line-height:1.3;color:var(--sys-color-text-primary)}
.faq .pm{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text);transition:transform var(--sys-dur-base) var(--sys-ease-standard),background var(--sys-dur-fast),color var(--sys-dur-fast)}
.faq .pm svg{width:16px;height:16px}
.faq details[open] .pm{transform:rotate(45deg);background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid)}
.faq .ans{padding:0 calc(var(--sys-space-6) + 36px + var(--sys-space-3)) var(--sys-space-6) calc(var(--sys-space-6) + 40px + var(--sys-space-3));max-width:none;font-size:17px;line-height:1.6;color:var(--sys-color-text-primary)}
@media (max-width:560px){
  .faq summary{grid-template-columns:28px minmax(0,1fr) 36px;gap:var(--sys-space-2);padding:var(--sys-space-4) var(--sys-space-4)}
  .faq summary .subhead{font-size:18px}
  .faq .ans{padding:0 var(--sys-space-4) var(--sys-space-5) calc(var(--sys-space-4) + 28px + var(--sys-space-2))}
}

/* ---- "on this page" jump links under a page intro ---- */
.jump{display:flex;flex-wrap:wrap;gap:var(--sys-space-2);margin-top:var(--sys-space-6)}
.jump-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--sys-radius-pill);
  background:var(--sys-color-pop-soft);color:var(--sys-color-pop-text);border:1px solid var(--sys-color-pop-border);font-size:15px;font-weight:var(--sys-weight-bold);transition:background var(--sys-dur-fast),border-color var(--sys-dur-fast)}
.jump-link svg{transform:rotate(90deg);flex:none}
.jump-link:hover{background:color-mix(in srgb,var(--sys-color-pop) 18%,transparent);border-color:var(--sys-color-pop-text)}
.band-head .title[id]{scroll-margin-top:96px}

/* welcome (after payment): setup form in one card, pill choices at 44px */
.reach span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;font-size:15px}
.intake{max-width:760px}
.kf-group{margin-top:var(--sys-space-4);padding-top:var(--sys-space-5);border-top:1px solid var(--sys-color-border);font-family:var(--sys-font-display);font-size:20px;font-weight:var(--sys-weight-bold);line-height:1.2;color:var(--sys-color-text-primary)}
#intake-plan[hidden] + .kf-group{margin-top:0;padding-top:0;border-top:0}   /* plan already chosen at checkout: About you leads the card */
.intake .micro{color:var(--sys-color-text-secondary)}
.intake .micro .link-btn{display:inline-block;padding:12px 0;font-size:14px}
.contact-x{width:44px;height:44px}
.contact-form .micro .link{display:inline-block;padding:12px 0}

/* pricing: one line on quoted add-ons, under the plans */
.plans-addons{max-width:1000px;margin:var(--sys-space-5) auto 0;text-align:center;font-size:16px;line-height:1.5;color:var(--sys-color-text-primary)}
/* pricing: free form test offer under the plans */
.not-yet{max-width:1000px;margin:var(--sys-space-6) auto 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sys-space-5)}
.not-yet .duo-head{gap:12px}
.not-yet-text{font-size:16.5px;line-height:1.5;color:var(--sys-color-text-primary)}
@media (max-width:760px){.not-yet{grid-template-columns:minmax(0,1fr)}.not-yet .btn{width:100%}}

/* ===== CHECKOUT (/checkout/): sticky stepper on top, sticky total at the bottom, add-ons then review ===== */
.co-page{padding-bottom:96px}
.co-top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--sys-color-surface) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sys-color-border)}
.co-top-row{max-width:var(--sys-container-page);margin:0 auto;padding:10px var(--sys-container-gutter);display:flex;align-items:center;gap:16px}
.co-top .kx-brand{min-height:44px}
.co-steps{flex:1;display:flex;justify-content:center;min-width:0}
.co-steps ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.co-step{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.co-step + .co-step::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--sys-color-border-strong);margin-right:2px}
.co-dot{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;border:2px solid var(--sys-color-border-strong);font-size:14px;font-weight:var(--sys-weight-bold);background:var(--sys-color-surface)}
.co-dot svg{display:none;width:15px;height:15px}
.co-step.is-done .co-dot{background:var(--sys-color-accent-solid);border-color:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid)}
.co-step.is-done .co-dot .n{display:none}.co-step.is-done .co-dot svg{display:block}
.co-step.is-done + .co-step::before{background:var(--sys-color-accent-solid)}
.co-step.is-current{color:var(--sys-color-text-primary)}
.co-step.is-current .co-dot{border-color:var(--sys-color-accent-solid);color:var(--sys-color-accent-text);box-shadow:0 0 0 4px var(--sys-color-accent-soft)}
@media (max-width:760px){
  .co-top-row{padding:8px 16px;gap:10px}
  .co-top .kx-word{display:none}
  .co-step + .co-step::before{width:12px}
  .co-step:not(.is-current) .co-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:480px){
  .co-steps ol{gap:4px}
  .co-step + .co-step::before{width:8px;margin-right:0}
  .co-step .co-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

.co-wrap{padding-top:var(--sys-space-8);padding-bottom:var(--sys-space-8)}
.co-narrow{max-width:720px}
.co-head{margin-bottom:var(--sys-space-6)}
.co-h1{font-family:var(--sys-font-display);font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:var(--sys-tracking-tight);margin:0 0 8px;outline:none}
.co-h1:focus,.co-h1:focus-visible{outline:none;box-shadow:none}
.co-lead{font-size:17px;line-height:1.5;color:var(--sys-color-text-primary);margin:0}
.co-plan{border:0;margin:0 0 var(--sys-space-8);padding:0}
.co-plan .reach span{min-height:44px;display:inline-flex;align-items:center;font-size:15px}
.co-group{margin-bottom:var(--sys-space-10, 56px)}
.co-group-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sys-space-5);margin-bottom:var(--sys-space-5)}
.co-h2{font-family:var(--sys-font-display);font-size:24px;line-height:1.2;margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.co-sub{font-size:16px;line-height:1.5;color:var(--sys-color-text-primary);margin:0;max-width:60ch}

/* form colour: Kinetic's theme switcher, one swatch per business colour, with the sliding thumb */
.co-themes{display:flex;flex-direction:column;gap:6px}
.co-swatches{--n:0;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:44px;height:54px;padding:4px;border-radius:999px;background:var(--sys-color-surface-sunken);border:1px solid var(--sys-color-border-strong)}
.co-swatches .thumb{position:absolute;top:3px;left:3px;width:46px;height:calc(100% - 6px);border-radius:999px;background:var(--sys-color-surface-raised);box-shadow:var(--sys-shadow-sm);border:2px solid var(--sys-color-text-primary);transform:translateX(calc(var(--n) * 44px));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.co-sw{position:relative;z-index:1;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;border-radius:999px}
.co-sw span{width:24px;height:24px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.co-sw:focus-visible{outline:2px solid var(--sys-color-border-focus);outline-offset:2px}
.co-theme-name{font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-primary)}
@media (prefers-reduced-motion: reduce){.co-swatches .thumb{transition:none}}

.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sys-space-4)}
.co-opt{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--sys-space-5);background:var(--sys-color-surface);border:1px solid var(--sys-color-border-strong);border-radius:var(--sys-radius-lg);box-shadow:var(--sys-shadow-sm);transition:border-color .2s,box-shadow .2s}
.co-opt.is-picked{border-color:var(--sys-color-accent-solid);box-shadow:0 0 0 3px var(--sys-color-accent-soft),var(--sys-shadow-sm)}
.co-opt-head{display:flex;align-items:center;gap:10px}
.co-opt-t{font-size:18px;line-height:1.25;margin:0}
.co-opt-d{font-size:15.5px;line-height:1.45;color:var(--sys-color-text-primary);margin:0;max-width:68ch}
.co-asks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.co-asks li{font-size:14px;font-weight:var(--sys-weight-semibold);padding:3px 10px;border-radius:999px;background:var(--sys-color-surface-sunken);color:var(--sys-color-text-secondary);border:1px solid var(--sys-color-border)}
.co-price{font-size:20px;font-weight:var(--sys-weight-bold);margin:auto 0 0;padding-top:4px}
.co-price span{font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.co-opt-btns{display:flex;gap:8px}
.co-opt-btns .btn{min-height:44px;flex:1}
.co-add .on{display:none}.co-add[aria-pressed="true"] .on{display:inline-flex;align-items:center;gap:6px}.co-add[aria-pressed="true"] .off{display:none}
.co-add[aria-pressed="true"]{background:var(--sys-color-accent-solid);border-color:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid)}
.co-grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (min-width:900px){.co-grid-2{grid-template-columns:repeat(2,minmax(0,560px))}}
.co-hint{margin:var(--sys-space-3) 0 0}

/* review */
.co-lines{list-style:none;margin:0 0 var(--sys-space-5);padding:0}
.co-lines li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--sys-color-border)}
.co-lines b{font-size:17px}
.co-lines .amt{font-size:17px;font-weight:var(--sys-weight-bold);text-align:right}
.co-lines .meta{font-size:14px;color:var(--sys-color-text-secondary);grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.co-lines .meta .link-btn{min-height:44px;font-size:14px}
.co-sum{margin:0 0 var(--sys-space-4)}
.co-sum div{display:flex;justify-content:space-between;padding:6px 0;font-size:17px}
.co-sum div:first-child{font-size:20px;font-weight:var(--sys-weight-bold)}
.co-sum dt,.co-sum dd{margin:0}
.co-fine{margin:0}

/* sticky total */
.co-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--sys-color-surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--sys-color-border-strong);padding-bottom:env(safe-area-inset-bottom)}
.co-bar-row{max-width:var(--sys-container-page);margin:0 auto;padding:12px var(--sys-container-gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.co-total{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:15px}
.co-total-lab{font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.co-total b{font-size:22px}
.co-then{font-size:14px;color:var(--sys-color-text-secondary);font-weight:var(--sys-weight-semibold);white-space:nowrap}
.co-actions{display:flex;gap:8px}
.co-actions .btn{min-height:48px}
@media (max-width:760px){
  .co-bar-row{padding:10px 16px}
  .co-total{gap:0 6px;max-width:150px}
  .co-total-lab{font-size:14px}
  .co-then{flex-basis:100%}
  .co-actions .btn--lg{padding:12px 16px}
}
/* phones: the bar must fit total + Back + Pay with Stripe inside the screen (it ran 6px off a 375px screen) */
@media (max-width:420px){
  .co-bar-row{gap:10px}
  .co-actions{gap:6px}
  .co-actions .btn{padding-left:14px;padding-right:14px}
  #co-next svg{display:none}
}
@media (max-width:360px){
  #co-back{width:48px;padding:0;font-size:0}   /* the arrow below; "Back" stays the accessible name */
  #co-back::before{content:"\2190";font-size:20px;line-height:1}
  .co-total{max-width:76px}
}
.co-preview .card{max-height:calc(100dvh - 24px);overflow:auto}
.co-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.co-preview-head .btn{min-width:44px;min-height:44px}
#co-preview-body{margin-top:var(--sys-space-4)}
.wel-order{max-width:760px;margin:0 0 var(--sys-space-12)}
.wel-order .heading{margin:0 0 var(--sys-space-2)}
.wel-next{margin:0 0 var(--sys-space-6)}
#wel-t:focus{outline:none}   /* focused by script after the setup form is sent, not by the keyboard */
.wel-order .co-lines{margin:0}
.wel-order .co-lines li:last-child{border-bottom:0}
.wel-order .co-sum{margin:var(--sys-space-2) 0 0;padding-top:var(--sys-space-4);border-top:1px solid var(--sys-color-border)}
.wel-order .co-sum div:last-child{color:var(--sys-color-text-secondary)}
.flow-step.is-done .flow-node{background:var(--sys-gradient-command)}
.flow-step.is-done .flow-when{font-weight:var(--sys-weight-bold)}
.co-opt .duo-ic{background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid)}

/* ===== GOOGLE PROFILE DECK (/google-profile/): full-screen slides, native swipe (scroll-snap), arrows and dots ===== */
body.dk-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.dk-page main{flex:1;min-height:0}
.dk-page .co-bar{position:static}
.dk-title{flex:1;text-align:center;font-weight:var(--sys-weight-bold);font-size:15px;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-close{min-height:44px}
@media (max-width:560px){.dk-title{display:none}.dk-close{margin-left:auto}}
.deck{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.dk-slide{flex:0 0 100%;height:100%;overflow-y:auto;scroll-snap-align:start}
.dk-inner{max-width:1040px;min-height:100%;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,40px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.dk-k{font-size:14px;font-weight:var(--sys-weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--sys-color-accent-text);margin:0}
.dk-h1{font-family:var(--sys-font-display);font-size:clamp(34px,6vw,64px);line-height:1.04;letter-spacing:var(--sys-tracking-tight);margin:0;max-width:16ch;text-wrap:balance}
.dk-hl{color:var(--sys-color-spark)}
.dk-h2{font-family:var(--sys-font-display);font-size:clamp(28px,4.4vw,46px);line-height:1.08;letter-spacing:var(--sys-tracking-tight);margin:0;max-width:22ch;text-wrap:balance}
.dk-lead{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--sys-color-text-primary);margin:0;max-width:58ch;text-wrap:balance}
.dk-hint{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary);margin:8px 0 0}
.dk-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-top:8px}
.dk-copy{display:grid;gap:14px}
.dk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
@media (max-width:760px){.dk-split,.dk-two{grid-template-columns:1fr}}

/* cover: the trades footage still under a dark wash */
.dks-cover{background:linear-gradient(110deg,rgba(10,12,18,.94),rgba(10,12,18,.72)),url("../templates/trades/assets/hero.jpg") center/cover,#0b0d11;color:#fff}
.dks-cover .dk-k{color:#f4b468}.dks-cover .dk-lead{color:#e8eaf0}.dks-cover .dk-hint{color:#d6d9e0}.dks-cover .dk-hl{color:#f4b468}

/* slide 1: a phone showing the map search */
.gb-phone{justify-self:center;width:min(300px,100%);padding:14px;border-radius:28px;background:var(--sys-color-surface-raised);border:1px solid var(--sys-color-border-strong);box-shadow:var(--sys-shadow-lg, 0 20px 50px rgba(0,0,0,.18))}
.gb-search{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:999px;background:var(--sys-color-surface-sunken);font-size:15px;font-weight:var(--sys-weight-semibold)}
.gb-map{position:relative;height:120px;margin:12px 0;border-radius:14px;background:linear-gradient(90deg,transparent 48%,rgba(120,140,170,.25) 48% 52%,transparent 52%),linear-gradient(0deg,transparent 40%,rgba(120,140,170,.25) 40% 44%,transparent 44%),#dfe8d8}
.dark .gb-map{background:linear-gradient(90deg,transparent 48%,rgba(160,175,200,.25) 48% 52%,transparent 52%),linear-gradient(0deg,transparent 40%,rgba(160,175,200,.25) 40% 44%,transparent 44%),#24302a}
.mp{position:absolute;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#d93025;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.mp.a{left:22%;top:22%}.mp.b{left:58%;top:48%}.mp.c{left:76%;top:16%}
.gb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gb-li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--sys-color-border)}
.gb-pin{width:26px;height:26px;border-radius:999px;background:#d93025;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.gb-lines{display:grid;gap:6px}.gb-lines span{height:9px;border-radius:9px;background:var(--sys-color-border-strong)}.gb-lines span+span{width:60%}
.gb-stars{color:#e5a93a;font-size:14px;letter-spacing:1px}

/* slide 2: what's on the profile */
.dk-icons{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dk-icons li{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--sys-radius-lg);background:var(--sys-color-surface);border:1px solid var(--sys-color-border-strong);font-size:16px;line-height:1.4}
.dk-icons svg{color:var(--sys-color-accent-text)}
@media (max-width:860px){.dk-icons{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* slide 3: the three factors */
.dk-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.dk-three article{padding:22px;border-radius:var(--sys-radius-lg);background:var(--sys-color-surface);border:1px solid var(--sys-color-border-strong)}
.dk-three h3{font-size:20px;margin:10px 0 6px}
.dk-three p{font-size:16px;line-height:1.5;margin:0;text-wrap:balance}
.dk-n{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid);font-weight:var(--sys-weight-bold)}
.dk-src{font-size:14px;color:var(--sys-color-text-secondary);margin:4px 0 0;text-wrap:balance}
.dk-src .link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){.dk-three{grid-template-columns:1fr}}

/* slides 4 and 7: checklists */
.dk-checks{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.dk-checks.tight{grid-template-columns:1fr}
.dk-checks li{position:relative;padding:12px 0 12px 36px;border-bottom:1px solid var(--sys-color-border);font-size:16.5px;line-height:1.45;text-wrap:balance}
.dk-checks li::before{content:"";position:absolute;left:0;top:13px;width:24px;height:24px;border-radius:999px;background:var(--sys-color-accent-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:760px){.dk-checks{grid-template-columns:1fr}}

/* slide 5: before and after */
.gb-card{margin:0;padding:22px;border-radius:var(--sys-radius-lg);background:var(--sys-color-surface);border:2px solid var(--sys-color-border-strong)}
.gb-card figcaption{display:inline-block;font-size:14px;font-weight:var(--sys-weight-bold);padding:3px 12px;border-radius:999px;margin-bottom:12px}
.gb-card.bad figcaption{background:var(--sys-color-bad-bg);color:var(--sys-color-bad-text);border:1px solid var(--sys-color-bad-bd)}
.gb-card.good{border-color:var(--sys-color-good)}
.gb-card.good figcaption{background:var(--sys-color-good-bg);color:var(--sys-color-good-text);border:1px solid var(--sys-color-good-bd)}
.gb-name{font-size:21px;font-weight:var(--sys-weight-bold);margin:0}
.gb-meta{font-size:15px;color:var(--sys-color-text-secondary);margin:4px 0 12px}
.gb-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.gb-rows li{display:flex;align-items:center;gap:10px}
.gb-rows li::before{content:"✓";display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:999px;background:var(--sys-color-good-bg);color:var(--sys-color-good-text);font-size:14px;font-weight:700}
.gb-rows li.no::before{content:"✕";background:var(--sys-color-bad-bg);color:var(--sys-color-bad-text)}
.gb-btns{display:flex;gap:8px;margin-top:14px}
.gb-btns span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--sys-color-border-strong);font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-accent-text)}

/* slide 6: the review card */
.gb-qr{justify-self:center;width:min(260px,100%);padding:22px;border-radius:18px;background:#fff;color:#111;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08)}
.gb-qr-h{font-size:20px;font-weight:800;margin:0 0 12px}
.gb-qr-code{display:block;width:150px;height:150px;margin:0 auto}
.gb-qr-s{font-size:14px;font-weight:600;margin:12px 0 0;color:#333}

/* slide 7: timeline */
.dk-time{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:3px solid var(--sys-color-accent-solid)}
.dk-time li{display:grid;gap:2px;padding:10px 0 14px 18px;position:relative;font-size:16px;line-height:1.45}
.dk-time li::before{content:"";position:absolute;left:-9px;top:14px;width:15px;height:15px;border-radius:999px;background:var(--sys-color-surface);border:3px solid var(--sys-color-accent-solid)}
.dk-time b{font-size:17px}.dk-time span{color:var(--sys-color-text-secondary);text-wrap:balance}

/* slide 8: price */
.dk-price{font-family:var(--sys-font-display);font-size:clamp(56px,9vw,96px);line-height:1;margin:4px 0 0;font-weight:var(--sys-weight-bold)}
.dk-price span{font-family:var(--sys-font-body, inherit);font-size:18px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.dk-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* controls */
.dk-bar .co-bar-row{gap:12px}
.dk-arrow{min-width:52px;min-height:52px;padding:0}
.dk-prev svg{transform:rotate(180deg)}
.dk-arrow:disabled{opacity:.35}
.dk-dots{display:flex;gap:2px;flex:1;justify-content:center}
.dk-dot{width:28px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.dk-dot::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--sys-color-border-strong);transition:width .2s,background .2s}
.dk-dot[aria-current="true"]::before{width:22px;background:var(--sys-color-accent-solid)}
.dk-count{margin:0;font-size:15px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary);white-space:nowrap}
@media (max-width:480px){.dk-dots{display:none}.dk-count{flex:1;text-align:center}}
@media (prefers-reduced-motion:reduce){.deck{scroll-behavior:auto}.dk-dot::before{transition:none}}
/* deck on phones: every slide fits one screen */
@media (max-width:560px){
  .dk-inner{justify-content:flex-start;padding-top:20px;padding-bottom:20px;gap:12px}
  .dks-cover .dk-inner{justify-content:center}
  .dk-h2{font-size:27px}
  .dk-lead{font-size:16.5px}
  .dk-split{gap:14px;margin-top:0}
  .dk-copy{gap:10px}
  .gb-phone{width:min(250px,100%);padding:10px;border-radius:22px}
  .gb-search{padding:8px 12px;font-size:14px}
  .gb-map{height:72px;margin:8px 0}
  .mp{width:22px;height:22px;font-size:14px}
  .gb-list{gap:6px}.gb-li{padding:6px 8px;grid-template-columns:24px 1fr auto}.gb-pin{width:22px;height:22px}
  .dk-icons{gap:10px;margin-top:4px}.dk-icons li{padding:14px;gap:6px;font-size:15.5px}
  .dk-three{gap:10px;margin-top:0}
  .dk-three article{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:14px}
  .dk-three .dk-n{grid-row:span 2;width:36px;height:36px}
  .dk-three h3{margin:0;font-size:18px}
  .dk-three p{font-size:15px}
  .dk-checks{margin-top:0}.dk-checks li{padding:8px 0 8px 32px;font-size:15.5px}.dk-checks li::before{top:9px;width:22px;height:22px}
  .dk-two{gap:12px;margin-top:0}
  .gb-card{padding:16px}.gb-card figcaption{margin-bottom:8px}.gb-name{font-size:18px}.gb-meta{margin:2px 0 8px}.gb-rows{gap:6px;font-size:15px}
  .gb-qr{width:min(220px,100%);padding:16px}.gb-qr-code{width:110px;height:110px}.gb-qr-h{font-size:17px;margin-bottom:8px}
  .dk-time li{padding:6px 0 8px 16px;font-size:15px}
  .dk-price{font-size:60px}
}
@media (max-width:560px){.dk-checks li{padding-top:7px;padding-bottom:7px}}
@media (max-width:560px) and (max-height:720px){
  .dk-top .co-top-row{padding-top:4px;padding-bottom:4px}
  .dk-bar .co-bar-row{padding-top:6px;padding-bottom:6px}
  .dk-arrow{min-width:48px;min-height:48px}
  .dk-inner{padding-top:14px;padding-bottom:14px;gap:10px}
  .dk-k{font-size:14px}
  .dk-h2{font-size:24px}
  .dk-lead{font-size:15.5px;line-height:1.5}
  .gb-phone{width:210px}.gb-map{display:none}.gb-search{margin-bottom:8px}
  .dk-icons li{padding:10px 12px;font-size:15px}.dk-icons svg{width:18px;height:18px}
  .dk-three article{padding:10px 12px}.dk-three p{font-size:14.5px}
  .dk-checks li{font-size:15px;padding:5px 0 5px 30px}.dk-checks li::before{top:6px;width:20px;height:20px}
  .gb-card{padding:12px}.gb-rows{font-size:14.5px;gap:4px}.gb-btns{display:none}
  .gb-qr{width:180px;padding:12px}.gb-qr-code{width:84px;height:84px}
  .dk-time li{padding:4px 0 6px 16px;font-size:14.5px}
  .dk-price{font-size:52px}
}

/* checkout, one page: step 1 plan cards, step 2 add-on cards with trade pills */
.co-mid{max-width:880px}
.co-sec{margin-bottom:var(--sys-space-10)}
.co-stepk{margin:0 0 4px;font-size:14px;font-weight:var(--sys-weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--sys-color-accent-text)}
.co-sec > .co-sub{margin-bottom:var(--sys-space-5)}
.co-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sys-space-4);margin-top:var(--sys-space-4)}
@media (max-width:620px){.co-plans{grid-template-columns:1fr}}
.co-plan-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:var(--sys-space-5);border-radius:var(--sys-radius-lg);background:var(--sys-color-surface);border:1.5px solid var(--sys-color-border-strong);cursor:pointer;box-shadow:var(--sys-shadow-sm);transition:border-color .2s,box-shadow .2s}
.co-plan-card input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.co-plan-card.is-picked{border-color:var(--sys-color-accent-solid);box-shadow:0 0 0 3px var(--sys-color-accent-soft),var(--sys-shadow-sm)}
.co-plan-card:has(input:focus-visible){box-shadow:var(--sys-focus-ring-default)}
.co-pc-top{display:flex;align-items:center;gap:10px}
.co-pc-top b{font-size:19px}
.co-pc-radio{flex:none;width:22px;height:22px;border-radius:999px;border:2px solid var(--sys-color-border-strong);display:grid;place-items:center}
.co-plan-card.is-picked .co-pc-radio{border-color:var(--sys-color-accent-solid)}
.co-plan-card.is-picked .co-pc-radio::after{content:"";width:12px;height:12px;border-radius:999px;background:var(--sys-color-accent-solid)}
.co-pc-price{margin-left:auto;font-size:22px;font-weight:var(--sys-weight-bold)}
.co-pc-price small{font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.co-pc-d{font-size:15.5px;line-height:1.45;color:var(--sys-color-text-primary);padding-left:32px;text-wrap:balance}

.co-addon{display:flex;flex-direction:column;gap:12px;padding:var(--sys-space-5);margin-bottom:var(--sys-space-4);background:var(--sys-color-surface);border:1.5px solid var(--sys-color-border-strong);border-radius:var(--sys-radius-lg);box-shadow:var(--sys-shadow-sm);transition:border-color .2s,box-shadow .2s}
.co-addon.is-picked{border-color:var(--sys-color-accent-solid);box-shadow:0 0 0 3px var(--sys-color-accent-soft),var(--sys-shadow-sm)}
.co-addon-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.co-addon .duo-ic{background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid)}
.co-addon-t{font-size:19px;line-height:1.25;margin:0;flex:1;min-width:0}
.co-addon .co-price{margin:0;font-size:19px}
.co-addon > .co-opt-btns{max-width:420px}
.co-pills{display:flex;flex-wrap:wrap;gap:8px}
.co-pill{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--sys-color-border-strong);background:var(--sys-color-surface);color:var(--sys-color-text-primary);font:inherit;font-size:15px;font-weight:var(--sys-weight-semibold);cursor:pointer}
.co-pill svg{flex:none}
.co-pill[aria-pressed="true"]{border-color:var(--sys-color-accent-solid);background:var(--sys-color-accent-soft);color:var(--sys-color-accent-text)}
.co-pill .co-in{display:none;width:20px;height:20px;border-radius:999px;background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid);place-items:center}
.co-pill.is-in .co-in{display:inline-grid}
.co-pill:focus-visible{outline:2px solid var(--sys-color-border-focus);outline-offset:2px}
.co-details{border-radius:var(--sys-radius-md);background:var(--sys-color-surface-sunken);padding:var(--sys-space-4)}
.co-detail{display:flex;flex-direction:column;gap:10px}
.co-detail-t{margin:0;font-size:17px;font-weight:var(--sys-weight-bold)}
.co-detail .co-opt-btns{max-width:420px}
.co-note{margin:0;font-size:14.5px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-primary)}
@media (max-width:560px){.co-addon-head .co-price{flex-basis:100%;padding-left:48px;margin-top:-6px}}

/* pricing: the add-ons under the plans */
.pr-addons{max-width:1000px;margin:var(--sys-space-10) auto 0}
.pr-add-h{font-family:var(--sys-font-display);font-size:26px;margin:0 0 var(--sys-space-4);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pr-add-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sys-space-4)}
.pr-add-grid .co-addon{margin:0}
@media (max-width:900px){.pr-add-grid{grid-template-columns:1fr}}
.pr-prev{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;font-size:15.5px}
.pr-add-note{margin:var(--sys-space-4) 0 0;font-size:15.5px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-primary);text-align:center}
.ex-tab{min-height:44px}
.pr-add-grid .co-addon-head .co-price{flex-basis:100%;padding-left:48px;margin-top:-6px}
.co-brand{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:var(--sys-radius-md);background:var(--sys-color-accent-soft);border:1px solid color-mix(in srgb,var(--sys-color-accent-text) 35%,transparent);font-size:15.5px;line-height:1.45;color:var(--sys-color-text-primary)}
.co-brand svg{flex:none;margin-top:1px;color:var(--sys-color-accent-text)}
.co-pill-custom{border-color:var(--sys-color-accent-solid);color:var(--sys-color-accent-text)}
.co-pill-custom[aria-pressed="false"]{border-style:dashed}

/* Reply + Rank alert example (home "Know who to call first" and How it works "The alert you get"): drawn like the real alert email */
.alert-mock{margin-top:var(--sys-space-4);padding:16px;border-radius:var(--sys-radius-md);background:var(--sys-color-surface-sunken);border:1px solid var(--sys-color-border);font-size:15px;line-height:1.5;color:var(--sys-color-text-primary)}
.am-subj{font-family:var(--sys-font-display);font-weight:var(--sys-weight-bold);font-size:17px;line-height:1.3;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--sys-color-border)}
.am-k{display:block;font-family:var(--sys-font-mono);font-size:14px;font-weight:var(--sys-weight-semibold);color:var(--sys-color-text-secondary)}
.am-call{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:44px;padding:8px 18px;margin-bottom:12px;border-radius:22px;background:var(--sys-color-accent-solid);color:var(--sys-color-text-on-accent-solid);font-weight:var(--sys-weight-semibold);line-height:1.3}
.am-call svg{flex:none}
.am-num{white-space:nowrap}
.am-rows{display:grid;gap:6px}
.am-rows b{font-weight:var(--sys-weight-semibold)}
.am-open{margin-top:4px;padding:10px 12px;border-radius:var(--sys-radius-sm);background:var(--sys-color-accent-soft)}
.am-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--sys-color-border);color:var(--sys-color-text-secondary)}
.duo.alert-set{grid-template-columns:minmax(0,1fr);margin-top:var(--sys-space-6)}
@media (max-width:360px){.alert-mock{padding:14px 12px;font-size:14.5px}.am-call{padding:8px 14px}}

/* Dark mode: accent fills are light, so their icons and ticks take the dark ink */
.duo-card.brand .duo-ic,.demo-head .duo-ic,.cta-card .duo-ic{color:var(--sys-color-text-on-accent-solid)}
.dark .hero-points li::before,.dark .dk-checks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0e10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")}
.dark .hero-points li.hp-key::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0e10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}

/* ===========================================================
   FORMS · Kinetic text field and choice chips, finished.
   Bright labels, a lit icon and accent glow on focus, Kinetic's
   error ring, autofill kept on the field colours, a tick on the
   picked chip. Tokens only, so light and dark both follow.
   =========================================================== */
.kf-label{font-size:15px;color:var(--sys-color-text-primary);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.kf-opt{display:inline-flex;align-items:center;padding:1px 9px;border-radius:999px;border:1px solid var(--sys-color-border-strong);font-family:var(--sys-font-sans);font-size:14px;font-weight:var(--sys-weight-medium);line-height:1.5;color:var(--sys-color-text-secondary);letter-spacing:0}
.kf-group .kf-opt{vertical-align:middle;margin-left:8px;position:relative;top:-2px}
.kf-control{min-height:52px;transition:border-color var(--sys-dur-fast) ease,box-shadow var(--sys-dur-base) ease,background-color var(--sys-dur-fast) ease}
.kf-control:hover{border-color:var(--sys-color-border-strong)}
.kf-control:focus-within{border-color:var(--sys-color-accent-solid);box-shadow:0 0 0 3px var(--sys-color-accent-soft),0 10px 28px -14px color-mix(in srgb,var(--sys-color-accent) 70%,transparent)}
.kf-control .kf-ic{color:var(--sys-color-text-secondary);transition:color var(--sys-dur-fast) ease}
.kf-control:focus-within .kf-ic{color:var(--sys-color-accent-text)}
.kf-control input,.kf-area textarea{caret-color:var(--sys-color-accent-text)}
.kf-control input::placeholder,.kf-area textarea::placeholder{color:color-mix(in srgb,var(--sys-color-text-tertiary) 76%,var(--sys-color-surface-sunken));opacity:1}   /* a hint, clearly lighter than typed text, still over 4.5:1 */
.kf-control[aria-invalid="true"]{border-color:var(--sys-status-declined-fg);box-shadow:0 0 0 3px var(--sys-status-declined-bg)}
.kf-control[aria-invalid="true"] .kf-ic{color:var(--sys-status-declined-fg)}
.kf-err{display:flex;align-items:center;gap:6px}
.kf-err::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:999px;background:var(--sys-status-declined-fg);color:var(--sys-color-bg-canvas);font-size:13px;font-weight:var(--sys-weight-bold);line-height:1}
.kf-control input:-webkit-autofill,.kf-control input:-webkit-autofill:hover,.kf-control input:-webkit-autofill:focus{-webkit-text-fill-color:var(--sys-color-text-primary);caret-color:var(--sys-color-accent-text);-webkit-box-shadow:0 0 0 1000px var(--sys-color-surface-sunken) inset;transition:background-color 600000s 0s}
.reach span{background:var(--sys-color-surface-sunken);border:1px solid var(--sys-color-border-strong);color:var(--sys-color-text-primary);gap:8px;transition:border-color var(--sys-dur-fast) ease,background-color var(--sys-dur-fast) ease,box-shadow var(--sys-dur-fast) ease}
.reach label:hover span{border-color:var(--sys-color-text-tertiary)}
.reach input:checked + span{background:var(--sys-color-accent-soft);border-color:var(--sys-color-accent-solid);box-shadow:inset 0 0 0 1px var(--sys-color-accent-solid);color:var(--sys-color-accent-text)}
.reach input:checked + span::before{content:"";width:16px;height:16px;flex:none;margin-left:-4px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.reach input:focus-visible + span{box-shadow:var(--sys-focus-ring-default)}
@media (prefers-reduced-motion: reduce){.kf-control,.kf-control .kf-ic,.reach span{transition:none}}

/* Modals · while a dialog is open the page behind it can't scroll, and scrolling inside the dialog never chains to the page */
html:has(dialog[open]),html:has(dialog[open]) body{overflow:hidden}
dialog,dialog .card{overscroll-behavior:contain}

/* ---- responsive QA (2026-10-21): 44px targets in the desktop nav, which iPads in landscape use by touch ---- */
.kx-brand{min-height:44px}
.kx-tab{min-height:44px;display:inline-flex;align-items:center}
.kx-nav-row{padding-top:10px;padding-bottom:10px}   /* the taller tabs keep the bar the same height */
@media (pointer:coarse){.kx-tools .btn--sm{min-height:44px}.tswitch{width:88px;height:44px}}
.kf-control{padding-top:0;padding-bottom:0}.kf-control input{min-height:50px}   /* the whole 52px field takes the tap, not a 22px line inside it */
.kf-area{padding-top:13px;padding-bottom:13px}
.kf-label{display:block}.kf-opt{vertical-align:2px;margin-left:2px}   /* the Optional tag flows with the label text and never sits alone */
.kx-brand{min-width:44px}
.dk-dots{gap:0}.dk-dot{width:44px}
@media (max-width:767px){.dk-dots{display:none}.dk-count{flex:1;text-align:center}}   /* the counter stands in where nine 44px dots don't fit */
.kf-nw{white-space:nowrap}   /* last word + Optional tag move as one */
.link-btn{padding-block:9px;margin-block:-9px}   /* inline "Contact form" links: a 44px tap area, same line spacing */
/* notched phones in landscape: content and bars clear the notch and the home indicator */
.wrap,.kx-nav-row,.kx-foot-row{padding-left:max(var(--sys-container-gutter),env(safe-area-inset-left));padding-right:max(var(--sys-container-gutter),env(safe-area-inset-right))}
@media (max-width:680px){.wrap,.kx-nav-row{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
.co-bar{padding-bottom:max(12px,env(safe-area-inset-bottom))}
/* touch: no double-tap delay or grey flash; hover lifts only with a real pointer, a press state instead */
a,button,label,summary,.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:none){.btn:hover{transform:none}.btn:active{transform:scale(.98)}}
@media (min-width:901px){.pr-add-grid .co-addon-t{min-height:2.5em;display:flex;align-items:center}}   /* one- and two-line titles: prices and text line up across the row */