/* GENERATED by marketing/site/build.mjs: the tokens from Design/css/colors_and_type.css, then marketing/site/base.css + tools/tools.css.
   Edit those, then npm run build:site. */
:root {
  --bg-0: oklch(0.178 0.014 52);
  --bg-1: oklch(0.232 0.018 52);
  --bg-2: oklch(0.285 0.020 50);
  --bg-3: oklch(0.350 0.022 50);
  --bg-grad: radial-gradient(125% 82% at 50% -6%,
    oklch(0.250 0.028 56) 0%,
    oklch(0.182 0.015 52) 54%,
    oklch(0.150 0.012 46) 100%);
  --bg-grad-warm: radial-gradient(130% 88% at 50% -4%,
    oklch(0.275 0.045 60) 0%,
    oklch(0.190 0.020 50) 52%,
    oklch(0.150 0.012 44) 100%);
  --line-1: oklch(0.46 0.020 55 / 0.18);
  --line-2: oklch(0.58 0.020 55 / 0.22);
  --ink-0: oklch(0.958 0.012 78);
  --ink-1: oklch(0.800 0.016 72);
  --ink-2: oklch(0.662 0.016 66);
  --ink-3: oklch(0.520 0.014 60);
  --accent:       oklch(0.800 0.125 188);
  --accent-soft:  oklch(0.800 0.125 188 / 0.16);
  --accent-line:  oklch(0.800 0.125 188 / 0.42);
  --accent-ink:   oklch(0.210 0.045 195);
  --accent-bold:  oklch(0.865 0.145 186);
  --accent-deep:  oklch(0.630 0.120 192);
  --accent-glow:  oklch(0.820 0.140 188 / 0.48);
  --gold:       #E5CC85;
  --gold-soft:  rgba(229, 204, 133, 0.16);
  --gold-line:  rgba(229, 204, 133, 0.45);
  --gold-glow:  rgba(229, 204, 133, 0.46);
  --gold-ink:   #2A1F08;
  --alert:        oklch(0.800 0.130 62);
  --alert-soft:   oklch(0.800 0.130 62 / 0.16);
  --alert-line:   oklch(0.800 0.130 62 / 0.45);
  --alert-ink:    oklch(0.245 0.050 50);
  --alert-bold:   oklch(0.865 0.150 65);
  --alert-deep:   oklch(0.660 0.140 55);
  --alert-glow:   oklch(0.820 0.150 62 / 0.48);
  --font-wordmark: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:       "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono:     "Hanken Grotesk", ui-monospace, "SF Mono", monospace;
  --t-display-xl: 88px;
  --t-display-l:  52px;
  --t-display-m:  34px;
  --t-display-s:  24px;
  --t-body-l:     17px;
  --t-body:       15px;
  --t-body-s:     13px;
  --t-mono:       12px;
  --t-eyebrow:    11px;
  --t-micro:      10px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 28px; --s-7: 36px; --s-8: 48px;
  --glass:        linear-gradient(180deg, oklch(0.98 0.02 72 / 0.10), oklch(0.98 0.02 72 / 0.05));
  --glass-strong: linear-gradient(180deg, oklch(0.98 0.02 72 / 0.11), oklch(0.98 0.02 72 / 0.035));
  --glass-border: oklch(0.92 0.03 66 / 0.12);
  --glass-blur:   16px;
  --shadow-1:     0 1px 0 oklch(1 0 0 / 0.05) inset, 0 0 0 1px oklch(1 0 0 / 0.04);
  --shadow-raise: 0 12px 28px -16px oklch(0 0 0 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-card:  0 24px 48px -24px oklch(0 0 0 / 0.66), inset 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-sheet: 0 -24px 60px oklch(0 0 0 / 0.55);
  --shadow-glow:       0 0 0 1px var(--accent-glow), 0 14px 40px -10px var(--accent-glow);
  --shadow-glow-alert: 0 0 0 1px var(--alert-glow),  0 14px 40px -10px var(--alert-glow);
  --shadow-glow-gold:  0 0 0 1px var(--gold-glow),   0 14px 44px -10px var(--gold-glow);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    900ms;
  --dur-celebrate: 1100ms;
  --nim-time-tint: oklch(0.800 0.125 188);
  --nim-time-glow: oklch(0.800 0.125 188 / 0.22);
}

/* ===================================================================
   Paff · what every home-page design shares (marketing/site): the type,
   the ground, the material, the header, the call to action, the pieces
   each chapter is built from (the chat, the plan cards, the medal labels,
   the kit) and the footer. A design lays its chapters out on top
   (classic.css, moments/moments.css).
   The brand's tokens sit above this (build.mjs copies them from
   Design/css/colors_and_type.css). The laws hold here as in the app:
   warm and deep, never a flat void; Fraunces leads with its real italic
   for the punchline; teal and honey-amber; numbers lead; Nim is the
   hero and moves inside his own SVGs.
   =================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-600.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --page: 1200px;
  --gut: clamp(16px, 4.4vw, 56px);
  --sec: clamp(96px, 12vw, 176px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the coach's three facts (marketing/store/know.js): the hard moment, what helps, the reason */
  --fact-m: var(--alert);
  --fact-h: var(--accent-bold);
  --fact-r: var(--gold);
  /* a check drawn as a mask, so it takes the colour of whatever paints it */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3 3L12.8 4.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* the page never pans sideways: the root clips what the body would hand it (WebKit lets a body's own clip leak) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-0); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; background: var(--bg-0); color: var(--ink-0);
  font: 400 17px/1.6 var(--font-ui); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-bold); }
:focus-visible { outline: 2px solid var(--accent-bold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); color: var(--ink-0); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--bg-2); color: var(--ink-0); font-weight: 600; }
.skip:focus { top: 16px; }

/* ── type ───────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink-0); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent-bold); letter-spacing: -0.014em; }
h1 { font-size: min(clamp(42px, 1.4rem + 5vw, 96px), 8svh + 12px); line-height: 1.02; }
/* the hero's first line: the app's icon and what it is, a quiet pill over the meadow */
.hero-id { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 5px 15px 5px 5px; border-radius: var(--r-pill); background: oklch(0.16 0.012 50 / 0.5); border: 1px solid oklch(0.92 0.03 66 / 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 15px/1 var(--font-ui); letter-spacing: 0.01em; color: var(--ink-0); }
.hero-id img { width: 30px; height: 30px; border-radius: 7px; }
h2 { font-size: clamp(36px, 1.2rem + 3.4vw, 68px); line-height: 1.05; }
h3 { font-size: clamp(23px, 1rem + 0.9vw, 30px); line-height: 1.18; letter-spacing: -0.012em; }
.split h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.eyebrow { margin: 0 0 20px; font: 600 13px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.eyebrow-warm { color: var(--alert); }
.lede { font-size: clamp(18px, 1rem + 0.3vw, 21px); line-height: 1.55; color: var(--ink-1); }
.body { margin-top: 24px; color: var(--ink-1); max-width: 34em; }
.center { text-align: center; }
.center .lede, .center .body { margin-inline: auto; }

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: calc(760px + 2 * var(--gut)); }
.sec { position: relative; padding-block: var(--sec); isolation: isolate; }
.split { display: grid; gap: clamp(48px, 7vw, 112px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split.rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split.rev > :first-child { order: 2; }
  .split-top { align-items: start; }
}

/* the light each section stands in: one warm or teal glow, never a flat band */
.sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.coach::before { background: radial-gradient(50% 46% at 72% 52%, oklch(0.80 0.125 188 / 0.10), transparent 72%); }
.money::before { background: radial-gradient(46% 50% at 26% 48%, oklch(0.80 0.130 62 / 0.11), transparent 72%); }
.medals::before { background: radial-gradient(54% 60% at 50% 62%, oklch(0.85 0.09 90 / 0.08), transparent 72%); }
.kit::before { background: radial-gradient(48% 40% at 50% 26%, oklch(0.80 0.130 62 / 0.12), transparent 72%); }
.slip::before { background: radial-gradient(40% 50% at 50% 30%, oklch(0.80 0.125 188 / 0.07), transparent 72%); }

/* ── material ───────────────────────────────────────────────────────── */
.glass {
  background: var(--glass), oklch(0.21 0.016 52 / 0.72);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}

/* a phone: the capture with its own rounded screen, the bezel drawn by the shadow's spread */
.device { width: min(100%, 330px); justify-self: center; container-type: inline-size; }
.device img {
  width: 100%; height: auto; border-radius: 13.6cqi;
  box-shadow: 0 0 0 2.7cqi #0c0a08, 0 0 0 calc(2.7cqi + 1px) oklch(1 0 0 / 0.11), 0 50px 90px -40px oklch(0 0 0 / 0.85), 0 30px 60px -30px oklch(0.80 0.130 62 / 0.10);
}

/* ── header ─────────────────────────────────────────────────────────── */
.site-head { position: absolute; inset: 0 0 auto; z-index: 10; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand { display: block; color: var(--ink-0); }
.brand svg { height: 25px; width: auto; }
.wm-ink { fill: currentColor; }
.wm-dot { fill: var(--accent); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font: 500 15px/1 var(--font-ui); }
.nav a { color: oklch(0.93 0.012 75 / 0.86); padding-block: 8px; }
.nav a:hover { color: var(--ink-0); }

/* ── the call to action: the date until launch, then the App Store ─── */
.cta { display: grid; justify-items: center; gap: 12px; }
.launch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px 0 20px; border-radius: var(--r-pill);
  background: oklch(0.19 0.02 55 / 0.62); border: 1px solid oklch(0.92 0.03 66 / 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 600 16px/1.2 var(--font-ui); color: var(--ink-0); box-shadow: 0 18px 40px -20px oklch(0 0 0 / 0.6);
}
.launch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bold); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px var(--accent-glow); }
.store {
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 30px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-bold), var(--accent-deep)); color: var(--accent-ink);
  font: 600 17px/1 var(--font-ui); box-shadow: var(--shadow-glow); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.store:hover { color: var(--accent-ink); transform: translateY(-1px); }
.store:active { opacity: 0.82; transform: scale(0.985); }
.cta-meta { font: 500 13px/1.3 var(--font-ui); letter-spacing: 0.02em; color: var(--ink-2); }
.hero .cta-meta { display: none; }

/* ── the coach ──────────────────────────────────────────────────────── */
.meet { display: flex; align-items: center; gap: 10px; margin-top: 32px; max-width: 32em; }
/* every Nim SVG is framed alike (nim.mjs FRAME): the cloud is a third of its image, so the sizes here are the cloud × 3 */
.meet-nim { width: 200px; height: 200px; flex: none; margin: -40px -16px -40px -38px; }
.meet figcaption { font: 400 16px/1.5 var(--font-ui); color: var(--ink-2); }
.chat { display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); width: 100%; max-width: 560px; justify-self: end; }
.chat-who { margin-bottom: 6px; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.msg { max-width: 88%; padding: 12px 17px; border-radius: 22px; }
.msg.me { justify-self: end; border-bottom-right-radius: 7px; background: oklch(0.33 0.018 58 / 0.9); color: var(--ink-0); font: 500 16px/1.4 var(--font-ui); }
.msg.coach-says {
  justify-self: start; border-bottom-left-radius: 7px; background: oklch(0.225 0.03 192 / 0.92); border: 1px solid oklch(0.80 0.125 188 / 0.32);
  font: 400 clamp(18px, 0.9rem + 0.4vw, 21px)/1.38 var(--font-display); letter-spacing: -0.008em; color: var(--ink-0);
}
mark { background: none; color: inherit; font-style: italic; }
mark.f-m { color: var(--fact-m); }
mark.f-h { color: var(--fact-h); }
mark.f-r { color: var(--fact-r); }
.knew { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line-1); }
.knew .eyebrow { margin-bottom: 14px; font-size: 12px; color: var(--ink-2); }
.knew dl { display: grid; gap: 10px; }
.fact { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.fact::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.fact dt { color: var(--ink-2); min-width: 9.5em; }
.fact dd { color: var(--ink-0); font-weight: 500; }
.fact.f-m { color: var(--fact-m); } .fact.f-h { color: var(--fact-h); } .fact.f-r { color: var(--fact-r); }
/* the line the chat lands on: the difference, said in the brand's voice */
.method { margin-top: 18px; font: 500 clamp(19px, 0.95rem + 0.45vw, 22px)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--ink-0); }
.method em { font-style: italic; color: var(--accent-bold); }

/* ── the plan ───────────────────────────────────────────────────────── */
.tactics { padding: clamp(24px, 3vw, 36px); max-width: 520px; width: 100%; }
.tactics .eyebrow { margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.tactics h3 { margin-bottom: 22px; }
.tactics ol { display: grid; gap: 12px; }
.tactic { padding: 18px 20px; border-radius: var(--r-md); background: oklch(0.255 0.02 52 / 0.9); border: 1px solid var(--line-1); }
.tactic-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.tactic-when { font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--alert); }
.tactic-tag { font: 500 12px/1 var(--font-ui); padding: 6px 10px; border-radius: var(--r-pill); color: var(--accent); background: var(--accent-soft); }
.tactic-move { font: 400 19px/1.36 var(--font-display); letter-spacing: -0.008em; color: var(--ink-0); }
.tactic-proof { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* ── money ──────────────────────────────────────────────────────────── */
.figure { margin-top: 36px; }
.figure-num {
  display: block; font: 500 clamp(96px, 3rem + 9vw, 188px)/0.92 var(--font-display); letter-spacing: -0.035em;
  color: var(--alert-bold); text-shadow: 0 0 0.4em oklch(0.82 0.15 62 / 0.22);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
/* a figure with a separator and a currency after it ("3.895 ₺") runs nearly twice as wide as "$304" */
.figure-num.figure-long { font-size: clamp(64px, 2rem + 6.2vw, 148px); }
.figure-note { display: block; margin-top: 14px; font: 500 16px/1.4 var(--font-ui); color: var(--ink-1); }

/* ── medals ─────────────────────────────────────────────────────────── */
.medals .lede { max-width: 30em; margin-top: 22px; }
.medal-row { margin-top: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2.4vw, 36px); align-items: end; }
.medal-row li { display: grid; justify-items: center; }
.medal-row img { width: 100%; max-width: 184px; height: auto; filter: drop-shadow(0 22px 26px oklch(0 0 0 / 0.5)); }
.medal-row li:nth-child(3) img, .medal-row li:nth-child(5) img { filter: drop-shadow(0 22px 26px oklch(0 0 0 / 0.5)) drop-shadow(0 0 34px oklch(0.85 0.09 90 / 0.22)); }
.medal-metal { margin-top: 18px; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-1); }
.medal-when { margin-top: 4px; font: 500 15px/1.3 var(--font-display); color: var(--ink-2); }
@media (max-width: 640px) {
  .medal-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 36%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gut)); padding: 8px var(--gut) 12px; scrollbar-width: none; }
  .medal-row::-webkit-scrollbar { display: none; }
  .medal-row li { scroll-snap-align: center; }
}

/* ── three ways in ──────────────────────────────────────────────────── */
.roads h2 { max-width: 14em; }
.road-list { margin-top: 56px; display: grid; gap: 18px; }
@media (min-width: 900px) { .road-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.road { padding: 10px 30px 32px; }
.road-nim { width: 250px; height: 250px; margin: -6px auto -18px; }
.road h3 { margin-bottom: 10px; }
.road p { color: var(--ink-1); font-size: 16px; }

/* ── the slip ───────────────────────────────────────────────────────── */
.slip-nim { width: 290px; height: 290px; margin: -60px auto -36px; }
.slip .lede { max-width: 28em; margin-top: 22px; }
.ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px; }
.ticks li { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.4 var(--font-ui); color: var(--ink-0); }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--accent-bold); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }

/* ── built for iPhone ───────────────────────────────────────────────── */
.features { margin-top: 36px; display: grid; gap: 4px; }
.features div { padding: 18px 0; border-top: 1px solid var(--line-1); }
.features div:last-child { border-bottom: 1px solid var(--line-1); }
.features dt { font: 500 20px/1.3 var(--font-display); color: var(--ink-0); }
.features dd { margin-top: 4px; color: var(--ink-1); font-size: 16px; }

/* ── privacy ────────────────────────────────────────────────────────── */
.privacy h2 { max-width: 18em; }
.facts { margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.facts li {
  display: flex; align-items: flex-end; min-height: 128px; padding: 22px 24px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(0.24 0.018 52), oklch(0.21 0.016 52)); border: 1px solid var(--line-1);
  font: 500 clamp(22px, 0.9rem + 0.9vw, 28px)/1.15 var(--font-display); letter-spacing: -0.012em;
}
.privacy .body { margin-top: 32px; max-width: 40em; }

/* ── the Quit Kit ───────────────────────────────────────────────────── */
.kit-nim { width: 310px; height: 310px; margin: -64px auto -30px; }
.ticks-grid { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 14px 40px; text-align: left; }
@media (max-width: 560px) { .ticks-grid { grid-template-columns: max-content; } }
.kit-foot { margin-top: 30px; color: var(--ink-1); }
.price { margin-top: 40px; font: 500 clamp(28px, 1rem + 1.8vw, 40px)/1.15 var(--font-display); letter-spacing: -0.016em; color: var(--alert-bold); }
.price span { display: block; margin-top: 8px; font: 500 14px/1.4 var(--font-ui); letter-spacing: 0; color: var(--ink-2); }
.app-row { display: inline-flex; align-items: center; gap: 16px; margin: 48px auto 26px; text-align: left; }
.app-icon { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 14px 30px -14px oklch(0 0 0 / 0.7); }
.app-name { font: 600 17px/1.3 var(--font-ui); color: var(--ink-0); }
.app-sub { font-size: 15px; color: var(--ink-2); }

/* ── questions ──────────────────────────────────────────────────────── */
.faq-list details { border-top: 1px solid var(--line-1); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-1); }
.faq-list summary {
  position: relative; display: block; cursor: pointer; list-style: none; padding: 24px 48px 24px 0;
  font: 500 clamp(19px, 0.9rem + 0.5vw, 23px)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--ink-0);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; border-radius: 1px; background: var(--accent);
  transition: transform var(--dur-base) var(--ease);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list summary:hover { color: var(--accent-bold); }
.faq-list details p { padding: 0 48px 26px 0; max-width: 38em; color: var(--ink-1); }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot { padding-block: 72px 48px; border-top: 1px solid var(--line-1); background: oklch(0.155 0.012 50); color: var(--ink-2); font-size: 15px; }
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; } }
.foot-brand .brand svg { height: 22px; margin-bottom: 18px; }
.foot-brand p + p { margin-top: 6px; }
.crisis { padding: 22px 24px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: oklch(0.19 0.014 52); }
.crisis .eyebrow { margin-bottom: 10px; font-size: 12px; }
.crisis p { color: var(--ink-1); line-height: 1.55; }
.crisis strong { color: var(--ink-0); font-weight: 600; white-space: nowrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-1); font-size: 14px; }
.foot-links a { color: var(--ink-1); }
.foot-links a:hover { color: var(--ink-0); }
.fine { margin-top: 22px; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 60em; }

/* ── phones ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-head .wrap { height: 68px; }
  .brand svg { height: 22px; }
  .nav { gap: 16px; font-size: 14px; }
  .chat { padding: 18px; }
  .msg { max-width: 92%; }
  .fact { flex-wrap: wrap; gap: 2px 12px; }
  .fact dt { min-width: 0; }
  .meet-nim { width: 172px; height: 172px; margin: -36px -14px -36px -34px; }
  .road { padding: 4px 22px 26px; }
}

/* ===================================================================
   Paff · the free tools (marketing/site/tools): the cost calculator and
   the body timeline. base.css carries the type, the ground, the header,
   the call to action and the footer; this lays out a tool: its opening,
   the form beside its live result, the notes, the closing ask. The result
   is on the page from the start (the example's), so nothing waits for a
   script to be read.
   =================================================================== */

.tool { --sec: clamp(72px, 9vw, 140px); }
.tool h1 { font-size: clamp(38px, 1.2rem + 3.6vw, 72px); line-height: 1.04; }
.tool h2 { font-size: clamp(30px, 1rem + 2.2vw, 48px); }
.more { display: inline-flex; margin-top: 22px; font: 600 16px/1.3 var(--font-ui); color: var(--accent); border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; }
.more:hover { color: var(--accent-bold); }

/* ── the opening ── */
.tool-hero { position: relative; isolation: isolate; padding-block: clamp(120px, 14vw, 176px) 24px; }
.tool-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 50% 0%, oklch(0.80 0.130 62 / 0.10), transparent 72%); }
.tool-hero .lede { margin-top: 20px; max-width: 34em; }

/* ── a field ── */
.glass.calc-form, .glass.rec-form { padding: clamp(22px, 3vw, 32px); display: grid; gap: 22px; align-content: start; }
.field { display: grid; gap: 10px; }
.field-label { font: 600 13px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-1); }
.field-hint { font: 500 13.5px/1.3 var(--font-ui); color: var(--ink-2); }
.field input {
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink-0);
  font: 500 24px/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; color-scheme: dark;
}
.field input:focus-visible { outline: 2px solid var(--accent-bold); outline-offset: 2px; }
.stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; }
.stepper input { text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button {
  min-height: 56px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-0); cursor: pointer;
  font: 500 26px/1 var(--font-ui); transition: background var(--dur-fast) var(--ease);
}
.stepper button:hover { background: var(--bg-3); }
.stepper button:active { transform: scale(0.97); }
.money-in { display: flex; align-items: center; gap: 10px; }
.money-in .unit { font: 500 24px/1 var(--font-display); color: var(--ink-2); }
.private { font: 400 14px/1.5 var(--font-ui); color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line-1); }

/* ── the cost: the form beside its result ── */
.calc { padding-block: 24px var(--sec); }
.calc-grid { display: grid; gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.calc-out { display: grid; gap: 14px; min-width: 0; }
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calc-jar { flex: none; width: clamp(92px, 24%, 170px); height: auto; margin: -28px -10px -20px 0; -webkit-mask: radial-gradient(closest-side, #000 74%, transparent); mask: radial-gradient(closest-side, #000 74%, transparent); }
.calc-year { display: grid; gap: 6px; min-width: 0; }
.calc-num { font: 500 clamp(64px, 2rem + 6vw, 128px)/0.95 var(--font-display); letter-spacing: -0.035em; color: var(--alert-bold); text-shadow: 0 0 0.4em oklch(0.82 0.15 62 / 0.22); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
:lang(tr) .calc-num { font-size: clamp(50px, 1.6rem + 5vw, 104px); }
.calc-label { font: 500 17px/1.4 var(--font-ui); color: var(--ink-1); }
.calc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (min-width: 640px) { .calc-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc-rows div { padding: 14px 16px; border-radius: var(--r-md); background: oklch(0.21 0.016 52); border: 1px solid var(--line-1); }
.calc-rows dt { font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.calc-rows dd { margin-top: 6px; font: 500 clamp(20px, 0.9rem + 0.6vw, 26px)/1.1 var(--font-display); color: var(--ink-0); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.calc-cigs { margin-top: 6px; font: 500 17px/1.4 var(--font-ui); color: var(--ink-0); }
.calc-work { font-size: 16px; color: var(--ink-1); max-width: 34em; }
.calc-keep { font: 500 clamp(20px, 0.9rem + 0.6vw, 24px)/1.3 var(--font-display); color: var(--accent-bold); }

/* ── the body: the date beside where the body is now, then the fourteen steps ── */
.rec { padding-block: 24px 24px; }
.rec-grid { display: grid; gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .rec-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.rec-inputs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.rec-inputs input { font-size: 20px; }
.rec-example { font: 500 14px/1.45 var(--font-ui); color: var(--alert); }
.rec-now { display: grid; gap: 10px; }
.rec-since { font: 500 clamp(30px, 1rem + 2.4vw, 50px)/1.08 var(--font-display); letter-spacing: -0.02em; color: var(--ink-0); text-wrap: balance; }
.rec-count { font: 600 13px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.rec-bar { height: 8px; border-radius: 8px; background: var(--line-1); overflow: hidden; }
.rec-fill { display: block; height: 100%; width: calc(var(--k, 0.43) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent-bold)); transition: width 0.4s var(--ease); }
.rec-next { font: 500 17px/1.4 var(--font-ui); color: var(--ink-1); min-height: 1.4em; }
.rec-garden { margin-top: 10px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-1); }
.rec-garden img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 72%; }
.rec-garden figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: oklch(0.21 0.016 52); font: 500 14px/1.3 var(--font-ui); color: var(--ink-1); }
.rec-day { color: var(--ink-0); font-weight: 600; }
.rec-list h2 { margin-bottom: 28px; }
.steps { display: grid; gap: 0; counter-reset: none; }
.step { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line-1); }
.step:last-child { border-bottom: 1px solid var(--line-1); }
.step-when { position: relative; padding-left: 22px; font: 600 12px/1.6 var(--font-ui); letter-spacing: 0.08em; color: var(--ink-2); }
.step-when::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.step h3 { font-size: clamp(20px, 0.9rem + 0.6vw, 24px); }
.step p { margin-top: 6px; color: var(--ink-1); font-size: 16px; }
.step .step-state { font: 600 13px/1.3 var(--font-ui); color: var(--ink-2); }
.step .step-state:empty { display: none; }
.step.reached .step-when { color: var(--accent); }
.step.reached .step-when::before { background: var(--accent-bold); border-color: var(--accent-bold); box-shadow: 0 0 12px var(--accent-glow); }
.step.next .step-when::before { border-color: var(--alert-bold); }
.step.next .step-state { color: var(--alert-bold); }
@media (max-width: 560px) { .step { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ── notes and sources ── */
.tool-notes { padding-bottom: 24px; }
.tool-method { font-size: 15px; color: var(--ink-2); max-width: 46em; }
.source { margin-top: 28px; font-size: 14px; color: var(--ink-2); }
.sources { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 14px; }
.sources a { color: var(--ink-1); border-bottom: 1px solid var(--line-2); }
.sources a:hover { color: var(--ink-0); }

/* ── the closing ask ── */
.tool-cta::before { background: radial-gradient(48% 40% at 50% 30%, oklch(0.80 0.125 188 / 0.08), transparent 72%); }
.tool-nim { width: 260px; height: 260px; margin: -50px auto -30px; }
.tool-cta .lede { margin-top: 16px; }
.tool-cta .cta { margin-top: 28px; }