/* turnproskiing.com — editorial grid, 80s ski-print accents */

:root {
  --paper: #f4f0e6;
  --paper-2: #ebe6d8;
  --ink: #191713;
  --ink-soft: #55503f;
  --line: #d8d2bf;
  --magenta: #e8266f;
  --teal: #008f8c;
  --yellow: #ffb80c;
  --orange: #ff7a1a;
  --purple: #6d2a86;
  --snow: #fdfcf8;
  --max: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191712;
    --paper-2: #211e17;
    --ink: #ece7d8;
    --ink-soft: #a89f88;
    --line: #38342a;
    --magenta: #ff4f8d;
    --teal: #2cc7c2;
    --yellow: #ffc233;
    --snow: #12110d;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

a { color: inherit; }

::selection { background: var(--yellow); color: #191713; }

img { max-width: 100%; height: auto; display: block; }

/* ---- type ---- */

.display {
  font-family: "Anton", "Archivo", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.01em;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ---- header ---- */

header {
  border-bottom: 2px solid var(--ink);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}

.wordmark {
  font-family: "Anton", sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transform: skewX(-8deg);
  display: inline-block;
}
.wordmark em {
  font-style: normal;
  color: var(--magenta);
}

nav { display: flex; gap: 22px; }
nav a {
  text-decoration: none;
  padding: 12px 0;
}
nav a:hover { color: var(--magenta); }

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

.hero { padding: 56px 0 64px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.4fr 1fr; }
}

.hero .kicker {
  color: var(--ink-soft);
  margin-bottom: 22px;
}

h1.display {
  font-size: clamp(48px, 9vw, 104px);
  transform: skewX(-6deg);
  margin-left: 6px;
}
h1 .l1 { display: block; text-shadow: 5px 5px 0 var(--teal); }
h1 .l2 { display: block; color: var(--magenta); text-shadow: 5px 5px 0 var(--yellow); }

.hero .lede {
  max-width: 34em;
  margin-top: 30px;
  font-size: 19px;
}

.cta-row {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pill {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  text-decoration: none;
  border: 2px solid var(--ink);
}

.arrow-link {
  text-decoration: none;
  border-bottom: 2px solid var(--magenta);
  padding: 10px 0 2px;
}
.arrow-link:hover { color: var(--magenta); }

.hero-shot { max-width: 340px; justify-self: center; }
.hero-shot img { border: 2px solid var(--ink); }
.hero-shot figcaption,
.carve-shot figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---- ninety-second band ---- */

.ninety {
  border-top: 2px solid var(--ink);
  padding: 64px 0;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 34px,
      color-mix(in srgb, var(--teal) 8%, transparent) 34px 36px);
}
.ninety h2 { font-size: clamp(34px, 6vw, 56px); }
.ninety p {
  max-width: 36em;
  margin-top: 20px;
  font-size: 19px;
}

/* ---- vhs stripe divider ---- */

.stripes {
  transform: skewY(-2.2deg);
  margin: 10px 0;
}
.stripes span { display: block; height: 12px; }
.stripes .s1 { background: var(--yellow); }
.stripes .s2 { background: var(--orange); }
.stripes .s3 { background: var(--magenta); }
.stripes .s4 { background: var(--purple); }

/* ---- how it works rows ---- */

.rows { padding: 70px 0 40px; }

.rows h2 {
  font-size: clamp(32px, 5.5vw, 52px);
  margin-bottom: 34px;
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 40px;
  padding: 30px 0;
  border-top: 2px solid var(--ink);
}

.row h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.02em;
}
.row p { color: var(--ink-soft); max-width: 44em; }

@media (min-width: 720px) {
  .row { grid-template-columns: 240px 1fr; }
}

/* ---- dark section: the trust model ---- */
/* always dark, in both schemes — fixed colors, not scheme tokens */

.carve {
  --carve-fg: #f2eddd;
  background: #191713;
  color: var(--carve-fg);
  padding: 80px 0;
}
@media (prefers-color-scheme: dark) {
  .carve { background: #100f0b; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
}

.carve h2 {
  font-size: clamp(32px, 5.5vw, 52px);
  max-width: 14em;
}
.carve h2 .hl { color: var(--yellow); }

.carve .split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 40px;
  align-items: center;
}
@media (min-width: 860px) {
  .carve .split { grid-template-columns: 1.2fr 1fr; }
}

.carve p { color: color-mix(in srgb, var(--carve-fg) 72%, transparent); max-width: 36em; }
.carve p + p { margin-top: 16px; }

.readout {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 18px;
  border: 1.5px solid color-mix(in srgb, var(--carve-fg) 40%, transparent);
  color: var(--carve-fg);
  text-transform: none;
  letter-spacing: 0.06em;
}

.carve-shot { max-width: 340px; justify-self: center; }
.carve-shot img { border: 2px solid color-mix(in srgb, var(--carve-fg) 50%, transparent); }
.carve-shot figcaption { color: color-mix(in srgb, var(--carve-fg) 65%, transparent); }

/* ---- free / pro ---- */

.tiers { padding: 80px 0; }

.tiers h2 { font-size: clamp(30px, 5vw, 50px); max-width: 16em; }
.tiers .sub { color: var(--ink-soft); margin-top: 14px; max-width: 40em; }

.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 44px;
}
@media (min-width: 760px) {
  .tier-grid { grid-template-columns: 1fr 1fr; }
}

.tier {
  border: 2px solid var(--ink);
  padding: 28px 28px 34px;
  background: var(--paper);
}
.tier.pro-card {
  background: var(--paper-2);
  border-top: 6px solid var(--magenta);
}

.tier h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 34px;
  margin-bottom: 16px;
}
.tier .price { color: var(--ink-soft); margin: -8px 0 16px; }

.tier ul { list-style: none; }
.tier li {
  padding: 10px 0 10px 26px;
  border-top: 1px solid var(--line);
  position: relative;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 12px;
  height: 12px;
  background: var(--teal);
  transform: skewX(-14deg);
}
.tier.pro-card li::before { background: var(--magenta); }

/* ---- maker note ---- */

.maker {
  border-top: 2px solid var(--ink);
  padding: 64px 0;
}
.maker h2 { font-size: clamp(28px, 4.5vw, 42px); }
.maker p {
  max-width: 36em;
  margin-top: 16px;
  font-size: 19px;
  color: var(--ink-soft);
}

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

footer {
  border-top: 2px solid var(--ink);
  padding: 28px 0 40px;
}
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 14px;
}
.foot a { text-decoration-color: var(--magenta); }
.foot .fine { font-size: 13px; }

/* ---- privacy page ---- */

.doc { padding: 56px 0 90px; max-width: 720px; margin: 0 auto; }
.doc h1 { font-size: clamp(40px, 8vw, 72px); transform: skewX(-6deg); }
.doc h1 span { text-shadow: 4px 4px 0 var(--teal); }
.doc .meta { color: var(--ink-soft); margin-top: 14px; }

.tldr {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 8px 8px 0 var(--teal);
  padding: 24px 26px;
  margin: 40px 0 12px;
}
.tldr .mono { color: var(--teal); }
.tldr p { margin-top: 8px; font-size: 18px; }

.doc h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.02em;
  margin: 44px 0 12px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.doc h2::before {
  content: attr(data-num) " ";
  color: var(--magenta);
}
.doc p { margin-top: 12px; color: var(--ink-soft); }
.doc p strong { color: var(--ink); font-weight: 600; }
.doc ul { margin: 12px 0 0 22px; color: var(--ink-soft); }
.doc li { margin-top: 6px; }

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}