/* Countersheet (countersheet.com, site/tk-home.html + tk-thanks.html): the takeoffs-only site in the Countersheet brand.
   Layered after site.css and tk.css: their layout stays, the look is a drawing set laid out on a dark table. Graphite grounds with a
   faint blueprint grid (.dark) alternate with drafting-film gray (.cs-film); white appears only on "sheets": cards with a second sheet
   offset behind them, like the two sheets in the logo. Every section is labeled like a sheet in a set (.cs-sheet, CS-01...).
   Red is the markup pen: the check, the second half of a headline, the main button. Red means "checked", never "error".
   Brand book: the Countersheet design system (claude.ai/artifact/JY7faJwEYMxryu8aBR9Cyd); logo files in ~/Projects/countersheet/brand. */
@font-face{font-family:"Lexend Exa";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/lexend-exa-800.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2")}

.cs{
  /* Countersheet tokens */
  --graphite:#121519; --graphite-2:#1a1e24; --graphite-3:#232830; --night:#0c0e11;
  --film:#e4e7eb; --film-2:#d3d8de;
  --sheet:#ffffff; --pen:#d4372c; --pen-press:#b82e24; --pen-on-dark:#ff6b5e; --pen-text:#b82e24;
  --rule-d:rgba(255,255,255,.1); --text-d:#f3f4f6; --muted-d:#a3abb6;
  --grid-d:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,
           linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/120px 120px;
  --grid-l:linear-gradient(rgba(18,21,25,.045) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(18,21,25,.045) 1px,transparent 1px) 0 0/24px 24px;
  /* a sheet on the table: a second sheet offset behind it, then a soft drop */
  --stack-l:12px 12px 0 -1px #f4f5f7,12px 12px 0 0 #b7bdc6,0 30px 60px -28px rgba(18,21,25,.35);
  --stack-d:14px 14px 0 -1px #2a2f38,14px 14px 0 0 rgba(255,255,255,.16),0 40px 80px -30px rgba(0,0,0,.7);
  /* the site.css names, mapped */
  --linen:#e4e7eb; --linen-2:#d3d8de; --paper:#fff; --sand:#d3d8de; --sand-2:#fbe4e1;
  --walnut:#121519; --walnut-2:#0c0e11; --walnut-3:#232830;
  --ink:#1b1f26; --body:#3a404b; --muted:#5a6472; --line:#dadde2; --line-dark:rgba(255,255,255,.1);
  --copper:#d4372c; --copper-deep:#b82e24; --copper-ink:#b82e24; --copper-num:#b82e24; --copper-lt:#ff6b5e; --copper-hot:#d4372c;
  --gold:#ff6b5e; --hl:#d4372c; --hl-soft:#fbe4e1;
  --btn-grad:linear-gradient(#d4372c,#d4372c); --on-dark:#f3f4f6; --on-dark-muted:#a3abb6;
  --ok:#1b1f26; --bad:#9a6700;
  --font:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Lexend Exa","Arial Black",ui-sans-serif,sans-serif; /* site.css calls the display face --serif */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:0px; --r-sm:3px; --shadow:none; --shadow-sm:none;
  background:var(--graphite);color:var(--body)
}
.cs ::selection{background:#fbe4e1;color:#1b1f26}
.cs :focus-visible{outline:2px solid #1b1f26;outline-offset:3px;border-radius:0}
.cs .dark :focus-visible,.cs .top :focus-visible{outline-color:#f3f4f6}

/* ---------- grounds ---------- */
.cs .dark{background:var(--grid-d),var(--graphite);color:var(--muted-d)}
.cs .cs-film{background:var(--grid-l),var(--film)}
.cs .dark .lede{color:var(--muted-d)}

/* ---------- type ---------- */
.cs .display{font-family:var(--serif);font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1.06;color:var(--ink)}
.cs .dark .display{color:var(--text-d)}
.cs .display em{color:var(--pen)}
.cs .dark .display em{color:var(--pen-on-dark)}
.cs h1.display em{background:none;padding:0}
.cs h2.display{font-size:clamp(28px,3.6vw,46px)}
.cs .lede{font-size:clamp(17px,1.4vw,19.5px);line-height:1.6}
.cs h3{font-weight:700}
/* sheet labels: each section is a sheet in the set */
.cs-sheet{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:500 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs-sheet span{display:inline-block;padding:7px 9px 6px;border:1.5px solid currentColor;color:var(--ink);letter-spacing:.08em}
.cs-sheet::after{content:"";flex:1 1 auto;max-width:120px;height:1.5px;background:var(--pen)}
.dark .cs-sheet{color:var(--muted-d)}
.dark .cs-sheet span{color:var(--text-d)}
.dark .cs-sheet::after{background:var(--pen-on-dark)}
/* the tagline: spaced caps between two short red rules */
.cs-tag{display:inline-flex;align-items:center;gap:12px;font:500 12px/1.3 var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:0 0 22px;white-space:nowrap}
.cs-tag::before,.cs-tag::after{content:"";width:28px;height:2.5px;background:var(--pen);flex:0 0 auto}
.dark .cs-tag,.tk-hero .cs-tag{color:var(--text-d)}
.dark .cs-tag::before,.dark .cs-tag::after,.tk-hero .cs-tag::before,.tk-hero .cs-tag::after{background:var(--pen-on-dark)}
@media (max-width:480px){.cs-tag{gap:8px;font-size:11px;letter-spacing:.16em}.cs-tag::before,.cs-tag::after{width:18px}}

/* ---------- header: graphite, the reversed logo ---------- */
.cs .top{background:rgba(18,21,25,.86);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid transparent} /* graphite even before the first scroll event: it sits on graphite at the top anyway */
.cs .top.scrolled{background:rgba(18,21,25,.86);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:none;border-bottom-color:var(--rule-d)}
.cs .cs-logo{display:flex;align-items:center;text-decoration:none;line-height:0;margin-right:auto}
.cs .cs-logo img{height:32px;width:auto}
@media (max-width:480px){.cs .cs-logo img{height:26px}}
.cs .nav a{color:var(--muted-d);border-radius:0}
.cs .nav a:hover{color:var(--text-d);background:rgba(255,255,255,.06)}
.cs .nav a[aria-current]{color:var(--text-d);background:none;box-shadow:inset 0 -2px 0 var(--pen-on-dark)}
.cs .menu-btn{background:var(--graphite-2);border-color:var(--rule-d);color:var(--text-d);border-radius:3px}
.cs .top.menu-open .nav{background:var(--graphite-2);border-color:var(--rule-d);border-radius:0}
.cs .top.menu-open .nav a{color:var(--text-d)}

/* ---------- buttons ---------- */
.cs .btn{border-radius:3px;background:var(--pen);color:#fff;box-shadow:none;font-weight:700;letter-spacing:.01em}
.cs .btn:hover{background:var(--pen-press);transform:none;box-shadow:none}
.cs .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs .btn-ghost:hover{background:var(--ink);color:#fff}
.cs .dark .btn-ghost{color:var(--text-d);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.cs .dark .btn-ghost:hover{background:var(--text-d);color:var(--graphite)}

/* ---------- hero: the pitch on the dark table, the request card as the top sheet ---------- */
.cs .tk-hero{background:var(--grid-d),var(--graphite);color:var(--muted-d);padding-bottom:0}
.cs .tk-hero::before{display:none}
.cs .tk-pitch h1{font-size:clamp(32px,3.4vw,50px);max-width:none;line-height:1.04;color:var(--text-d)}
.cs .tk-pitch h1 em{color:var(--pen-on-dark)}
.cs .tk-pitch .lede{color:var(--muted-d)}
.cs .tk-method li{color:var(--muted-d)}
.cs .tk-method b{color:var(--text-d)}
.cs .tk-method li::before{font:500 15px/1.6 var(--mono);color:var(--pen-on-dark);content:"0" counter(m)}
.cs .tk-company{color:var(--muted-d);font-weight:500;border-top:1px solid var(--rule-d);padding-top:18px}
/* the request card */
.cs .panel{background:var(--sheet);border:0;border-radius:0;box-shadow:var(--stack-l);overflow:visible}
.cs .panel::before{display:none}
.cs .tk-card{box-shadow:var(--stack-d);padding-bottom:0}
@media (prefers-reduced-motion:no-preference){.cs .tk-card{animation:csLay .9s .15s cubic-bezier(.2,.8,.2,1) both}}
@keyframes csLay{from{box-shadow:0 0 0 -1px #2a2f38,0 0 0 0 rgba(255,255,255,.16),0 40px 80px -30px rgba(0,0,0,.7)}to{box-shadow:var(--stack-d)}}
.cs .tk-card h2{font:800 21px/1.2 var(--serif);text-transform:uppercase;color:var(--ink)}
.cs .chip{border-radius:3px;border-color:#a1a8b2}
.cs .chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.cs .tk-first{border-radius:3px}
.cs .field input,.cs .field select,.cs .field textarea{border-radius:3px;border-color:#a1a8b2}
.cs .field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231b1f26' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
.cs .field input:focus,.cs .field select:focus,.cs .field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,31,38,.14)}
.cs .tk-fee-line .v{font:500 clamp(30px,3.2vw,38px)/1 var(--mono)}
.cs .tk-back{color:var(--pen-text)}
/* a title block along the bottom of a sheet */
.cs-tb{display:grid;grid-template-columns:1.3fr 1fr auto;margin:26px calc(-1 * clamp(24px,3.4vw,36px)) 0;border-top:2px solid var(--ink);font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cs-tb span{padding:11px clamp(12px,2vw,18px);border-left:1px solid var(--line)}
.cs-tb span:first-child{border-left:0;color:var(--ink)}
.cs-tb b{color:var(--pen-text);font-weight:500}
/* the proof strip under the hero */
.cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(64px,8vw,104px) 0 0;border-top:1px solid var(--rule-d)}
.cs-stats div{padding:28px 24px 34px 0;display:grid;gap:10px;align-content:start;border-left:1px solid var(--rule-d);padding-left:24px}
.cs-stats div:first-child{border-left:0;padding-left:0}
.cs-stats b{font:800 clamp(30px,3.4vw,46px)/1 var(--serif);color:var(--text-d);letter-spacing:0}
.cs-stats b small{font-size:.5em;color:var(--pen-on-dark);margin-left:4px}
.cs-stats span{font:500 12.5px/1.45 var(--mono);color:var(--muted-d);letter-spacing:.03em}
@media (max-width:820px){.cs-stats{grid-template-columns:1fr 1fr}.cs-stats div:nth-child(3){border-left:0;padding-left:0}.cs-stats div:nth-child(n+3){border-top:1px solid var(--rule-d)}}

/* ---------- trades: an index sheet ---------- */
.cs .tk-trades{background:var(--sheet);border-top:0;padding:8px clamp(20px,3vw,40px);box-shadow:var(--stack-l)}
.cs .tk-trade:last-child{border-bottom:0}
.cs .tk-trade .csi{font:500 16px/1.4 var(--mono);color:var(--pen-text)}
.cs .tk-trade h3{font:800 17px/1.3 var(--serif);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.cs .tk-trade .unit{font:500 12.5px/1.4 var(--mono);color:var(--muted);letter-spacing:.02em}
.cs .tk-never{margin-top:40px}

/* ---------- method: two counts, the ledger as a sheet on the dark table ---------- */
.cs .dark .checks li{color:var(--muted-d)}
.cs .dark .checks b{color:var(--text-d)}
.cs .checks li svg{color:var(--pen-on-dark)}
.cs .tk-ledger{border:0;border-radius:0;box-shadow:var(--stack-d);overflow:visible}
.cs .tk-ledger figcaption{background:var(--ink)}
.cs .tk-ledger figcaption b{font:800 15px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.03em}
.cs .tk-ledger thead th{color:var(--muted);background:#f4f5f7;font-family:var(--mono);font-weight:500;letter-spacing:.06em}
.cs .tk-ledger td:nth-child(2),.cs .tk-ledger td:nth-child(3){font-family:var(--mono);font-size:14px}
.cs .tk-ledger .ok{color:var(--ink)}
.cs .tk-ledger .ok::after{content:"";display:inline-block;width:.8em;height:.45em;margin-left:6px;border:solid var(--pen);border-width:0 0 2.5px 2.5px;transform:translateY(-.3em) rotate(-45deg)} /* the red check: counts agree */
.cs .tk-ledger .q{color:#8a5c00;background:#fdf3dc;border-radius:3px}

/* ---------- samples: the package laid out as sheets ---------- */
.cs .cs-film .tk-gallery figcaption{color:var(--body)}
.cs .cs-film .tk-gallery figcaption b{color:var(--ink)}
.cs .tk-gallery a{border-radius:0;box-shadow:var(--stack-l);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cs .tk-gallery a:hover{transform:translate(-3px,-3px)}
.cs .tk-gallery-2{row-gap:56px}
.cs .tk-file{font-family:var(--mono);color:var(--pen-text)}

/* ---------- pricing on the dark table ---------- */
.cs .tk-free{background:transparent;border:1.5px solid var(--pen-on-dark);border-radius:0;color:var(--text-d)}
.cs .tk-free b{color:var(--pen-on-dark)}
.cs .dark .tier,.cs .dark .plan{background:var(--graphite-2);border:1px solid var(--rule-d);border-radius:0;box-shadow:none;color:var(--muted-d)}
.cs .dark .tier::before{background:var(--pen-on-dark)}
.cs .dark .tier .k,.cs .dark .plan .k{color:var(--muted-d);font-family:var(--mono);font-weight:500;letter-spacing:.06em}
.cs .dark .tier b,.cs .dark .plan b{font-family:var(--serif);font-weight:800;color:var(--text-d)}
.cs .dark .tier b small,.cs .dark .plan b small{color:var(--muted-d)}
.cs .dark .tier span,.cs .dark .plan .per{color:var(--muted-d)}
.cs .dark .tier.quote{background:transparent}
.cs .dark .plan.hot{background:var(--sheet);border:0;box-shadow:var(--stack-d);color:var(--body)}
.cs .dark .plan.hot .k,.cs .dark .plan.hot .per{color:var(--muted)}
.cs .dark .plan.hot b{color:var(--ink)}
.cs .dark .plan.hot b small{color:var(--muted)}
.cs .plan .flag{border-radius:0;background:var(--pen);color:#fff;font-family:var(--mono);font-weight:500;letter-spacing:.08em}
.cs .dark .plan .yr{color:var(--muted-d)}
.cs .dark .plan.hot .yr{color:var(--body)}
.cs .tk-plans h3,.cs .tk-includes h3{font:800 clamp(20px,2.1vw,26px)/1.2 var(--serif);text-transform:uppercase;color:var(--text-d)}
.cs .dark .plan-note,.cs .dark .pb-pts li{color:var(--muted-d)}
.cs .dark .plan-note a{color:var(--text-d)}
.cs .pb-pts li::before{background:var(--pen-on-dark);border-radius:0}

/* ---------- FAQ: a sheet of answers ---------- */
.cs .faq{background:var(--sheet);padding:4px clamp(20px,3vw,36px);box-shadow:var(--stack-l)}
.cs .faq details:last-child{border-bottom:0}
.cs .faq summary{font-weight:700}
.cs .faq summary .pm{border-radius:0}
.cs .faq summary .pm::before,.cs .faq summary .pm::after{background:var(--pen)}

/* ---------- final band and footer ---------- */
.cs .final::before{background:url(/brand/countersheet/countersheet-mark-white.svg) no-repeat right -6% center/min(52vw,620px);opacity:.05}
.cs .final .micro li::before{background:var(--pen-on-dark);border-radius:0;box-shadow:none}
.cs .foot{background:var(--night);border-top:1px solid var(--rule-d)}
.cs .foot .cs-foot-logo{height:30px;width:auto;margin-bottom:16px}
.cs .foot .foot-h{font-family:var(--mono);font-weight:500;letter-spacing:.14em}
.cs .legal .tag{letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.cs .mcta .btn{border-radius:3px;box-shadow:0 18px 36px -12px rgba(0,0,0,.6)}

/* ---------- the thanks page ---------- */
.cs .form-page{background:var(--grid-d),var(--graphite);color:var(--muted-d);padding-bottom:clamp(80px,10vw,120px)}
.cs .form-page .display{color:var(--text-d)}
.cs .form-page .display em{color:var(--pen-on-dark)}
.cs .form-page .lede{color:var(--muted-d)}
.cs .form-page .eyebrow{color:var(--pen-on-dark)}
.cs .form-page .ready{background:var(--sheet);border:0;border-radius:0;box-shadow:var(--stack-d);text-align:left}
.cs .form-page .btn-ghost{color:var(--text-d);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.cs .form-page .btn-ghost:hover{background:var(--text-d);color:var(--graphite)}
.cs .form-page .ready{color:var(--body)}
.cs .form-page .ready h2,.cs .form-page .ready b{color:var(--ink)}
.cs .form-page .ready a{color:var(--pen-text)}

/* ---------- second accent: blueprint cyan, the measuring color (Garrett 2026-11-05: "a bright pop of color... or gradient").
   Red stays the pen (the check, the main button, the second half of a headline); cyan marks what is measured or numbered:
   sheet numbers, step numbers, the major grid lines, units, links on dark. #4cc3ff on graphite 9.2:1; #0a6aa3 on film 4.7:1. ---------- */
.cs{--cyan:#4cc3ff;--cyan-ink:#0a6aa3;
  --grid-d:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px) 0 0/24px 24px,
           linear-gradient(rgba(76,195,255,.075) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(76,195,255,.075) 1px,transparent 1px) 0 0/120px 120px}
/* light on the table: a cyan glow up left, a red glow behind the request card */
.cs .tk-hero{background:radial-gradient(52% 60% at 8% 4%,rgba(76,195,255,.16),transparent 70%),radial-gradient(46% 58% at 86% 46%,rgba(212,55,44,.2),transparent 70%),var(--grid-d),var(--graphite)}
.cs .final{background:radial-gradient(40% 70% at 50% 100%,rgba(212,55,44,.22),transparent 70%),radial-gradient(34% 60% at 12% 0%,rgba(76,195,255,.14),transparent 70%),var(--grid-d),var(--graphite)}
.cs #method{background:radial-gradient(40% 60% at 100% 0%,rgba(76,195,255,.12),transparent 70%),var(--grid-d),var(--graphite)}
.cs #pricing{background:radial-gradient(44% 50% at 50% 62%,rgba(212,55,44,.14),transparent 70%),radial-gradient(36% 50% at 0% 0%,rgba(76,195,255,.1),transparent 70%),var(--grid-d),var(--graphite)}
/* the red buttons get depth: a lit top edge to a deeper base */
.cs .btn{background:linear-gradient(180deg,#e5463a 0%,#d4372c 55%,#bf2f25 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(212,55,44,.7)}
.cs .btn:hover{background:linear-gradient(180deg,#d63d31 0%,#c22f25 60%,#a9271e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(212,55,44,.7)}
.cs .btn-ghost,.cs .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs .btn-ghost{background:transparent}.cs .btn-ghost:hover{background:var(--ink)}
.cs .dark .btn-ghost,.cs .form-page .btn-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(76,195,255,.6)}
.cs .dark .btn-ghost:hover,.cs .form-page .btn-ghost:hover{background:rgba(76,195,255,.12);color:var(--text-d)}
/* cyan marks the numbers and measures */
.dark .cs-sheet span,.tk-hero .cs-sheet span{color:var(--cyan);border-color:var(--cyan)}
.cs-film .cs-sheet span{color:var(--cyan-ink);border-color:var(--cyan-ink)}
.cs .tk-method li::before{color:var(--cyan)}
.cs-stats b small{color:var(--cyan)}
.cs-stats div{position:relative}
.cs-stats div::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.cs-stats div:not(:first-child)::before{left:24px}
@media (max-width:820px){.cs-stats div:nth-child(3)::before{left:0}}
.cs .dark .tier .k,.cs .dark .plan .k{color:var(--cyan)}
.cs .dark .plan.hot .k{color:var(--cyan-ink)}
.cs .dark .plan-note a,.cs .dark .plan .yr:hover{color:var(--cyan)}
.cs .nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--cyan)}
.cs .foot a:hover{color:var(--cyan)}
.cs .checks li svg{color:var(--cyan)}
.cs .tk-gallery a:hover{box-shadow:12px 12px 0 -1px #f4f5f7,12px 12px 0 0 var(--cyan-ink),0 30px 60px -28px rgba(18,21,25,.35)}
/* the hot plan: a red-to-cyan rule across its top edge */
.cs .dark .plan.hot{background:linear-gradient(90deg,var(--pen),var(--cyan)) top/100% 4px no-repeat,var(--sheet)}

/* ---------- dark steel blue (Garrett 2026-11-05: "a dark steel blue look but gradient", a little lighter, on every grid section).
   Each dark grid section runs from slate steel at the top (#2b3d52) to deep steel at the bottom (#16212d), under the grid and glows.
   Text on the lightest point: #f3f4f6 9.5:1, muted #b4bfcc 5.6:1, cyan 5.3:1; red headlines (large) 3.7:1 and up. ---------- */
.cs{--graphite:#1d2b3a;--graphite-2:#24344a;--graphite-3:#2d3f55;--night:#111a24;--muted-d:#b4bfcc;--on-dark-muted:#b4bfcc;--rule-d:rgba(255,255,255,.12);--pen-on-dark:#ff7c70;
  --steel:linear-gradient(165deg,#2b3d52 0%,#22323f 45%,#16212d 100%);
  --stack-d:14px 14px 0 -1px #2d3f55,14px 14px 0 0 rgba(255,255,255,.2),0 40px 80px -30px rgba(5,10,16,.7);
  background:#16212d}
.cs .dark{background:var(--grid-d),var(--steel)}
.cs .tk-hero{background:radial-gradient(52% 60% at 8% 4%,rgba(76,195,255,.16),transparent 70%),radial-gradient(46% 58% at 86% 46%,rgba(212,55,44,.2),transparent 70%),var(--grid-d),var(--steel)}
.cs #method{background:radial-gradient(40% 60% at 100% 0%,rgba(76,195,255,.13),transparent 70%),var(--grid-d),var(--steel)}
.cs #pricing{background:radial-gradient(44% 50% at 50% 62%,rgba(212,55,44,.14),transparent 70%),radial-gradient(36% 50% at 0% 0%,rgba(76,195,255,.11),transparent 70%),var(--grid-d),var(--steel)}
.cs .final{background:radial-gradient(40% 70% at 50% 100%,rgba(212,55,44,.22),transparent 70%),radial-gradient(34% 60% at 12% 0%,rgba(76,195,255,.15),transparent 70%),var(--grid-d),var(--steel)}
.cs .form-page{background:radial-gradient(50% 50% at 10% 0%,rgba(76,195,255,.14),transparent 70%),radial-gradient(44% 50% at 90% 60%,rgba(212,55,44,.14),transparent 70%),var(--grid-d),var(--steel)}
.cs .top{background:rgba(36,52,70,.88)}
.cs .top.scrolled{background:rgba(29,43,58,.9)}
.cs .foot{background:linear-gradient(180deg,#16212d,#0f1720)}
.cs .dark .tier,.cs .dark .plan{background:rgba(255,255,255,.045)}
.cs .menu-btn,.cs .top.menu-open .nav{background:#24344a}