/* ==========================================================================
   SCOPE — sales page
   Thesis: an instrument, not a publication. Cool neutrals, tight grid,
   hairline rules, no serif anywhere, numbers do the talking.
   ========================================================================== */

:root{
  --sheet:     oklch(0.978 0.002 250);
  --sheet-2:   oklch(0.948 0.004 250);
  --ink:       oklch(0.235 0.014 258);
  --ink-soft:  oklch(0.415 0.012 258);
  --ink-mute:  oklch(0.560 0.010 258);
  --rule:      oklch(0.235 0.014 258 / 0.14);
  --rule-firm: oklch(0.235 0.014 258 / 0.26);
  --blue:      oklch(0.520 0.185 258);
  --blue-deep: oklch(0.430 0.170 258);
  --blue-wash: oklch(0.520 0.185 258 / 0.08);
  --flag:      oklch(0.560 0.170 28);
  --flag-wash: oklch(0.560 0.170 28 / 0.10);

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--sheet);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ color:var(--ink); margin:0; font-weight:600; letter-spacing:-0.02em; }
h1{ font-size:clamp(38px,5.6vw,64px); line-height:1.04; letter-spacing:-0.03em; }
h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.1; }
h3{ font-size:19px; letter-spacing:-0.01em; }

/* Emphasis is weight and colour. No italics anywhere in this build. */
h1 strong, h2 strong{ font-weight:600; color:var(--blue); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink); font-weight:600; }
em{ font-style:normal; color:var(--ink); font-weight:500; }
a{ color:var(--blue-deep); }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px; }

.label{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 16px;
}
.label-inv{ color:oklch(0.978 0.002 250 / 0.55); }

.lede{ font-size:clamp(17px,1.9vw,20px); line-height:1.55; color:var(--ink); max-width:46ch; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--sheet); padding:12px 18px; font-weight:600;
}
.skip:focus{ left:16px; top:16px; }

:where(a,button,input):focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:2px;
}

/* ---------------------------------------------------------------- bar */

.bar{
  border-bottom:1px solid var(--rule);
  background:oklch(0.978 0.002 250 / 0.9);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20;
}
.bar-row{ display:flex; align-items:center; gap:20px; height:58px; }
.mark{
  font-family:var(--mono); font-weight:700; font-size:14px;
  letter-spacing:0.18em; color:var(--ink);
}
.bar-meta{
  font-size:11.5px; color:var(--ink-mute); margin-right:auto;
  padding-left:18px; border-left:1px solid var(--rule);
}
.bar-buy{
  font-size:14px; font-weight:500; color:var(--ink); text-decoration:none;
  border:1px solid var(--rule-firm); border-radius:2px; padding:7px 14px;
  transition:border-color 160ms var(--ease), color 160ms var(--ease);
  white-space:nowrap;
}
.bar-buy .mono{ color:var(--blue-deep); }
.bar-buy:hover{ border-color:var(--blue); color:var(--blue-deep); }

/* ---------------------------------------------------------------- hero */

.hero{ padding:74px 0 84px; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:56px;
  align-items:start;
}
.hero-copy h1{ margin-bottom:26px; }
.hero-copy .lede{ margin-bottom:20px; }
.hero-sub{ max-width:50ch; }

/* ---------------------------------------------------------------- calculator */

.calc{
  border:1px solid var(--rule-firm);
  border-radius:3px;
  background:var(--sheet);
}
.calc-head{ padding:20px 22px 16px; border-bottom:1px solid var(--rule); }
.calc-title{ font-size:20px; margin-bottom:4px; }
.calc-sub{ font-size:13.5px; color:var(--ink-mute); margin:0; }

.calc-fields{ padding:18px 22px 4px; }

.fld{ padding-bottom:16px; }
.fld + .fld{ border-top:1px solid var(--rule); padding-top:16px; }
.fld-current{ border-top:1px solid var(--rule-firm); }

.fld label{
  display:block;
  font-size:13px; color:var(--ink); font-weight:500;
  margin-bottom:9px;
}
.fld-row{ display:flex; align-items:center; gap:16px; }
.fld-out{
  font-size:16px; color:var(--ink); font-weight:500;
  min-width:88px; text-align:right;
}
.fld-hint{ font-size:12px; color:var(--ink-mute); margin:8px 0 0; }

input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none;
  height:2px; background:var(--rule-firm); border-radius:2px;
  outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:var(--blue); cursor:pointer;
  transition:transform 160ms var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border:0; border-radius:50%;
  background:var(--blue); cursor:pointer;
}

.calc-out{
  border-top:1px solid var(--rule-firm);
  background:var(--sheet-2);
  padding:20px 22px;
}
.out-main{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; }
.out-block{ display:flex; flex-direction:column; gap:5px; }
.out-block .label{ margin:0; }
.figure{
  font-size:clamp(32px,4vw,46px);
  font-weight:500; color:var(--blue); line-height:1;
  letter-spacing:-0.02em;
}

.out-verdict{
  font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:0; padding-top:14px; border-top:1px solid var(--rule);
}
.out-verdict strong{ color:var(--ink); }
.flag{
  display:inline-block;
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; font-weight:500;
  padding:3px 7px; border-radius:2px; margin-right:8px;
  background:var(--flag-wash); color:var(--flag);
}
.flag.ok{ background:var(--blue-wash); color:var(--blue-deep); }

.calc-note{
  font-size:12.5px; color:var(--ink-mute); line-height:1.62;
  padding:16px 22px 20px; margin:0;
  border-top:1px solid var(--rule);
}

/* ---------------------------------------------------------------- sections */

.sec{ padding:104px 0; border-top:1px solid var(--rule); }
.sec-alt{ background:var(--sheet-2); }

.sec-head{ max-width:56ch; margin-bottom:48px; }
.sec-head h2{ margin-bottom:16px; }
.sec-sub{ color:var(--ink-soft); max-width:54ch; }

.split{ display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); gap:56px; }
.split-rail h2{ margin-bottom:0; }
.split-body{ max-width:62ch; }
.split-body p{ margin-bottom:1.2em; }

/* ---------------------------------------------------------------- parts */

.parts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-firm); }
.parts li{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:22px;
  padding:26px 0; border-bottom:1px solid var(--rule);
}
.part-n{ font-size:12.5px; color:var(--blue); letter-spacing:0.08em; padding-top:4px; }
.part-body h3{ margin-bottom:8px; }
.part-body p{ max-width:64ch; font-size:15.5px; margin-bottom:10px; }
.part-meta{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------------------------------------------------------------- script */

.script{ border:1px solid var(--rule-firm); border-radius:3px; overflow:hidden; }
.script-head{
  display:flex; align-items:baseline; gap:16px;
  padding:16px 22px; background:var(--ink);
}
.script-n{ font-size:11px; letter-spacing:0.14em; color:oklch(0.978 0.002 250 / 0.6); }
.script-head h3{ color:oklch(0.985 0.002 250); font-size:17px; }

.script-body{ padding:24px 22px; background:var(--sheet); }
.who{
  display:inline-block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-right:10px;
}
.script-them, .script-you{
  font-size:16.5px; line-height:1.6; color:var(--ink);
  padding:14px 16px; border-radius:2px; margin-bottom:16px;
  max-width:66ch;
}
.script-them{ background:var(--sheet-2); border:1px solid var(--rule); }
.script-you{ background:var(--blue-wash); border:1px solid var(--blue); font-weight:500; }
.script-note{ font-size:14.5px; color:var(--ink-soft); max-width:66ch; margin-bottom:14px; }

/* ---------------------------------------------------------------- buy */

.buy{ background:var(--ink); color:oklch(0.978 0.002 250 / 0.72); padding:96px 0; }
.buy-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:56px; align-items:start; }
.buy h2{ color:oklch(0.985 0.002 250); max-width:19ch; margin-bottom:28px; }
.buy h2 strong{ color:oklch(0.74 0.14 258); font-weight:600; }

.buy-list{ list-style:none; margin:0; padding:0; }
.buy-list li{
  display:flex; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid oklch(0.978 0.002 250 / 0.14);
  font-size:15px;
}
.buy-list li:last-child{ border-bottom:0; }
.buy-list .mono{ font-size:11.5px; color:oklch(0.74 0.14 258); }

.buy-panel{
  border:1px solid oklch(0.978 0.002 250 / 0.20);
  border-radius:3px; padding:26px 24px;
}
.buy-fig{
  display:block; font-size:46px; font-weight:500; line-height:1;
  color:oklch(0.985 0.002 250); margin-bottom:12px;
}
.buy-note{ font-size:13.5px; color:oklch(0.978 0.002 250 / 0.6); margin-bottom:22px; }

.btn{
  display:block; text-align:center;
  background:oklch(0.62 0.17 258); color:oklch(0.16 0.03 258);
  font-size:15.5px; font-weight:600;
  padding:15px 24px; border-radius:2px; text-decoration:none;
  transition:background 160ms var(--ease);
}
.btn:hover{ background:oklch(0.70 0.16 258); }
.buy-fine{ font-size:11px; letter-spacing:0.08em; color:oklch(0.978 0.002 250 / 0.45); margin:14px 0 0; text-align:center; }

/* ---------------------------------------------------------------- footer */

.foot{ padding:44px 0 60px; border-top:1px solid var(--rule); }
.foot-mark{ font-size:12px; letter-spacing:0.18em; color:var(--ink); margin-bottom:14px; }
.foot-note, .foot-spec{ font-size:12.5px; color:var(--ink-mute); max-width:64ch; margin-bottom:8px; }
.foot-spec a{ color:var(--ink); }

/* ---------------------------------------------------------------- responsive */

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .split{ grid-template-columns:1fr; gap:28px; }
  .buy-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .shell{ padding-inline:20px; }
  .hero{ padding:52px 0 60px; }
  .sec{ padding:68px 0; }
  .buy{ padding:68px 0; }
  .sec-head{ margin-bottom:34px; }
  .bar-meta{ display:none; }
  .out-main{ grid-template-columns:1fr; gap:14px; }
  .parts li{ grid-template-columns:1fr; gap:8px; }
  .part-n{ padding-top:0; }
  .fld-row{ gap:12px; }
  .fld-out{ min-width:74px; font-size:15px; }
  .script-body{ padding:18px 16px; }
  .script-head{ padding:14px 16px; flex-direction:column; gap:5px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0.001ms !important; }
}