/* Tessok website, v2.
   Layout: full-bleed bands (Abyss hero, Paper story, Petrol privacy, Ink footer),
   oversized Archivo Expanded type, the receipt as the hero object, the mark's
   three cuts as the recurring graphic device. No app UI on the marketing page. */

/* Archivo, self-hosted (SIL Open Font License, see fonts/OFL.txt). Variable width 62-125, weight 400-800. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #F1F1EC;
  --paper-2: #E7E8E3;
  --card: #FFFFFF;
  --ink: #11171A;
  --ink-2: #2A343A;
  --slate: #56616A;
  --line: #D8DAD5;
  --link: #1E4756;
  --link-hover: #0F2027;
  --ground: #E7E8E3;
  --flow-line: #0F2027;
  --flow-alpha: 0.12;
  --slate-on-flow: #48525A; /* slate darkened to keep 4.5:1 where lines cross text */
  --over: #B03A22;

  /* Bands keep their colour in both themes */
  --abyss: #0F2027;
  --abyss-2: #16303A;
  --petrol: #1E4756;
  --night: #0B1216;
  --on-dark: #F1F1EC;
  --on-dark-2: #9BB3BC;
  --on-dark-line: #2C4450;
  --petrol-light: #7FB3C4;
  --brass: #B79A62;

  /* Category colours, always shown with a label */
  --c1: #1E4756;
  --c2: #B79A62;
  --c3: #4A6C9B;
  --c4: #A8566E;
  --c5: #6B7A3A;

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 76rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1216;
    --paper-2: #101A20;
    --card: #152027;
    --ink: #F1F1EC;
    --ink-2: #C9CFCC;
    --slate: #A2ABB2;
    --line: #22313A;
    --link: #7FB3C4;
    --link-hover: #A3CAD6;
    --ground: #0B1216;
    --flow-line: #F1F1EC;
    --flow-alpha: 0.11;
    --slate-on-flow: #A2ABB2;
    --over: #E0705A;
    --c1: #7FB3C4;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B1216;
  --paper-2: #101A20;
  --card: #152027;
  --ink: #F1F1EC;
  --ink-2: #C9CFCC;
  --slate: #A2ABB2;
  --line: #22313A;
  --link: #7FB3C4;
  --link-hover: #A3CAD6;
  --ground: #0B1216;
  --flow-line: #F1F1EC;
  --flow-alpha: 0.11;
  --slate-on-flow: #A2ABB2;
  --over: #E0705A;
  --c1: #7FB3C4;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--petrol-light); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.skip { position: absolute; left: 16px; top: -100px; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }

/* Type */
h1, h2, h3, .xp { font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.04; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.5; max-width: 38rem; color: var(--ink-2); }
.eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--slate); }
.dim { color: var(--on-dark-2); }

/* Mark */
.brand { display: inline-flex; align-items: baseline; gap: 0.35em; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand svg { width: 0.72em; height: 0.72em; fill: currentColor; flex-shrink: 0; }
.brand span { font-stretch: 125%; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: var(--on-dark); color: var(--abyss);
}
.btn:hover { background: #FFFFFF; color: var(--abyss); }
.btn-petrol { background: var(--petrol); color: var(--on-dark); }
.btn-petrol:hover { background: var(--abyss); color: var(--on-dark); }
.btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { background: rgba(127, 179, 196, 0.12); color: inherit; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ---------- Hero (Abyss) ---------- */
.hero { background: var(--abyss); color: var(--on-dark); overflow: hidden; position: relative; }
.hero::after {
  /* the mark's cuts, as a quiet ground pattern at the far edge */
  content: ""; position: absolute; right: -6vw; bottom: -10vw; width: 46vw; aspect-ratio: 1; max-width: 100%;
  background:
    linear-gradient(var(--abyss-2), var(--abyss-2)) 0 0 / 100% 28% no-repeat,
    linear-gradient(var(--abyss-2), var(--abyss-2)) 0 100% / 42% 56% no-repeat,
    linear-gradient(var(--abyss-2), var(--abyss-2)) 100% 100% / 42% 56% no-repeat;
  pointer-events: none;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; position: relative; z-index: 2; }
.topbar .brand { font-size: 1.375rem; }
.topnav { display: flex; align-items: center; gap: 6px; }
.topnav a:not(.btn) { color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 10px 14px; border-radius: 999px; }
.topnav a:not(.btn):hover { background: var(--abyss-2); color: var(--on-dark); }
.topnav .btn { min-height: 44px; padding: 10px 20px; font-size: 0.95rem; }
@media (max-width: 760px) { .topnav a:not(.btn) { display: none; } }
/* Phones: the section links move to their own row under the top bar, scrolling sideways if long */
.mobnav { display: none; }
@media (max-width: 760px) {
  .mobnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: -10px; padding-bottom: 4px; position: relative; z-index: 2; }
  .mobnav::-webkit-scrollbar { display: none; }
  .mobnav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(241, 241, 236, 0.22); color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
  .mobnav a:hover, .mobnav a:active { background: var(--abyss-2); }
  .mobnav a:focus-visible { outline: 2px solid var(--petrol-light); outline-offset: 2px; }
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 5vw, 80px);
  align-items: center; padding-block: clamp(32px, 6vw, 80px) clamp(64px, 9vw, 128px);
}
.hero-copy { display: grid; gap: 28px; min-width: 0; }
.hero h1 .second { color: var(--petrol-light); display: block; }
.hero .lede { color: var(--on-dark-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9rem; color: var(--on-dark-2); list-style: none; margin: 0; padding: 0; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof li::before { content: ""; width: 8px; height: 8px; background: var(--brass); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* The receipt: a physical object, not app UI */
.receipt-wrap { position: relative; justify-self: center; width: min(100%, 400px); }
.receipt {
  background: #FBFBF8; color: #11171A; padding: 26px 24px 34px;
  transform: rotate(2.5deg); font-size: 0.92rem; font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x;
}
.receipt header { text-align: center; display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px dashed #B8BCB6; margin-bottom: 12px; font-stretch: 75%; }
.receipt header strong { font-stretch: 125%; font-weight: 800; letter-spacing: 0.06em; font-size: 1.05rem; }
.receipt header span { color: #56616A; font-size: 0.82rem; }
.receipt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.receipt li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 3px 6px; margin-inline: -6px; position: relative; }
.receipt li > span:first-child { font-stretch: 85%; }
.receipt li > span:nth-child(2) { grid-column: 3; grid-row: 1; }
.receipt .tag {
  grid-column: 2; grid-row: 1; justify-self: start; align-self: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 7px; color: #FBFBF8; animation: tagin 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.receipt .total { display: flex; justify-content: space-between; border-top: 1px dashed #B8BCB6; margin-top: 12px; padding-top: 12px; font-weight: 800; font-size: 1.05rem; }
.t1 { background: #1E4756; } .t2 { background: #8A6F3A; } .t3 { background: #4A6C9B; } .t4 { background: #A8566E; } .t5 { background: #6B7A3A; }
.receipt li:nth-child(2) .tag { animation-delay: 0.5s; } .receipt li:nth-child(3) .tag { animation-delay: 0.65s; }
.receipt li:nth-child(4) .tag { animation-delay: 0.8s; } .receipt li:nth-child(5) .tag { animation-delay: 0.95s; }
.receipt li:nth-child(6) .tag { animation-delay: 1.1s; } .receipt li:nth-child(7) .tag { animation-delay: 1.25s; }
.receipt li:nth-child(8) .tag { animation-delay: 1.4s; } .receipt li:nth-child(1) .tag { animation-delay: 0.35s; }
@keyframes tagin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .receipt .tag { animation: none; } }
.receipt-note { margin-top: 18px; text-align: center; font-size: 0.85rem; color: var(--on-dark-2); }

/* ---------- Sections ---------- */
.band { padding-block: clamp(72px, 11vw, 144px); }
/* Flowing lines (assets/flow.js) on the ground; decorative, hidden under reduced transparency */
.band-flow { --slate: var(--slate-on-flow); background-color: var(--ground); position: relative; isolation: isolate; }
.band-flow { overflow: hidden; overflow: clip; }
.band-flow > .flow { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.band-flow > .flow svg { display: block; max-width: none; }
@media (prefers-reduced-transparency: reduce) { .band-flow > .flow { display: none; } }
.band-alt { background: var(--paper-2); }
.head { display: grid; gap: 18px; max-width: 50rem; margin-bottom: clamp(40px, 6vw, 72px); }

/* Problem: statement line vs. what was inside */
.compare { display: grid; grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.compare-arrow { width: 56px; height: 56px; stroke: var(--slate); fill: none; stroke-width: 1.6; }
@media (max-width: 900px) { .compare { grid-template-columns: minmax(0, 1fr); } .compare-arrow { transform: rotate(90deg); justify-self: center; } }

.statement { display: grid; gap: 14px; min-width: 0; }
.statement .who { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.stmt {
  background: var(--card); padding: 18px 20px; font-stretch: 70%; font-weight: 500; font-size: 1.05rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline;
  border-top: 2px solid var(--ink); font-variant-numeric: tabular-nums;
}
.stmt + .stmt { border-top: 1px solid var(--line); }
.stmt .d { color: var(--slate); }
.stmt .m { text-transform: uppercase; overflow-wrap: anywhere; }
.stmt.dim-row { color: var(--slate); }
.stmt.hl { outline: 2px solid var(--over); outline-offset: -2px; }

.split { display: grid; gap: 20px; min-width: 0; }
.split .who { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.bar { display: flex; height: 64px; gap: 3px; }
.bar i { display: block; height: 100%; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; }
.legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.legend li:first-child { border-top: 1px solid var(--line); }
.legend .sw { width: 14px; height: 14px; align-self: center; }
.legend b { font-weight: 700; }
.legend small { color: var(--slate); font-size: 0.875rem; margin-left: 6px; }
.legend .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-foot { margin-top: clamp(32px, 4vw, 48px); font-stretch: 125%; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.015em; max-width: 44rem; text-wrap: balance; }

/* Ways in: big words */
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.ways li { padding: 24px 20px 8px 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ways li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.ways .w { font-stretch: 125%; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1; }
.ways p { color: var(--ink-2); font-size: 0.98rem; }
.ways .fmt { color: var(--slate); font-size: 0.85rem; }
@media (max-width: 1000px) { .ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ways li, .ways li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } .ways li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); } }
@media (max-width: 560px) { .ways { grid-template-columns: minmax(0, 1fr); } .ways li:nth-child(even) { padding-left: 0; border-left: 0; } }
.ways-foot { margin-top: 28px; color: var(--slate); }

/* Outcomes: big numbers */
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.outcome { display: grid; gap: 14px; align-content: start; border-top: 2px solid var(--ink); padding-top: 22px; min-width: 0; }
.outcome .fig { font-weight: 600; font-size: clamp(3rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.outcome .fig.over { color: var(--over); }
.outcome .fig small { font-size: 0.4em; letter-spacing: -0.01em; font-weight: 600; }
.outcome h3 { font-size: 1.2rem; }
.outcome p { color: var(--ink-2); }
.example-note { margin-top: 28px; font-size: 0.85rem; color: var(--slate); }
@media (max-width: 860px) { .outcomes { grid-template-columns: minmax(0, 1fr); } }

/* Privacy (Petrol band) */
.privacy { background: var(--petrol); color: var(--on-dark); }
.privacy .eyebrow { color: #C7D6DB; }
.privacy .lede { color: #C7D6DB; }
.claims { display: grid; gap: 0; margin-top: clamp(32px, 5vw, 56px); }
.claim { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px 32px; padding-block: 28px; border-top: 1px solid rgba(241, 241, 236, 0.25); align-items: baseline; }
.claim:last-child { border-bottom: 1px solid rgba(241, 241, 236, 0.25); }
.claim .tag { display: inline-flex; gap: 10px; align-items: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C7D6DB; }
.claim .tag svg { width: 20px; height: 20px; stroke: var(--brass); fill: none; stroke-width: 2; }
.claim p { font-stretch: 125%; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.claim .small { font-stretch: 100%; font-weight: 500; font-size: 1.05rem; line-height: 1.5; letter-spacing: 0; color: #DCE5E8; }
@media (max-width: 700px) { .claim { grid-template-columns: minmax(0, 1fr); } }

/* Tessera story */
.story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tessera { width: min(100%, 340px); justify-self: center; aspect-ratio: 1; position: relative; }
.tessera i { position: absolute; background: var(--ink); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.tessera i:nth-child(1) { left: 0; top: 0; width: 100%; height: 28%; }
.tessera i:nth-child(2) { left: 0; bottom: 0; width: 42%; height: 56%; }
.tessera i:nth-child(3) { right: 0; bottom: 0; width: 42%; height: 56%; }
.story:hover .tessera i:nth-child(1) { transform: translateY(-10px); }
.story:hover .tessera i:nth-child(2) { transform: translate(-10px, 8px); }
.story:hover .tessera i:nth-child(3) { transform: translate(10px, 8px); }
@media (prefers-reduced-motion: reduce) { .tessera i { transition: none; } }
.story-copy { display: grid; gap: 20px; min-width: 0; }
.story-copy p { font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); max-width: 36rem; }
.say { font-stretch: 125%; font-weight: 800; color: var(--ink); }
@media (max-width: 800px) { .story { grid-template-columns: minmax(0, 1fr); } .tessera { width: min(60%, 240px); } }

/* Pricing and early access */
.offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price strong { font-weight: 600; font-size: clamp(3rem, 6vw, 4.5rem); letter-spacing: -0.035em; line-height: 1; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; }
.includes li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.includes li:last-child { border-bottom: 1px solid var(--line); }
.includes svg { width: 20px; height: 20px; stroke: var(--link); fill: none; stroke-width: 2.4; margin-top: 3px; }
.offer-col { display: grid; gap: 24px; min-width: 0; }
.signup { background: var(--petrol); color: var(--on-dark); padding: clamp(28px, 4vw, 48px); display: grid; gap: 20px; }
.signup h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.signup p { color: var(--on-dark-2); }
.signup form { display: grid; gap: 10px; }
.signup label { font-weight: 600; font-size: 0.95rem; }
.field { display: flex; gap: 8px; flex-wrap: wrap; }
.field input {
  flex: 1 1 14rem; min-width: 0; min-height: 52px; padding: 12px 18px; border-radius: 999px;
  border: 1.5px solid var(--on-dark-line); background: var(--abyss-2); color: var(--on-dark); font: inherit;
}
.field input::placeholder { color: #7E929A; }
.field .btn { min-height: 52px; }
.form-note { font-size: 0.875rem; color: var(--on-dark-2); min-height: 1.4em; }
.form-note.is-error { color: var(--on-dark); font-weight: 600; font-size: 1rem; }
.form-note.is-error::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--vermilion-light, #E0705A); vertical-align: 0.1em; }
.signup-done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; background: var(--on-dark); color: var(--abyss); padding: clamp(20px, 3vw, 28px); outline: none; }
.signup-done[hidden] { display: none; }
.signup-done svg { width: 44px; height: 44px; padding: 10px; background: var(--petrol); stroke: var(--on-dark); fill: none; stroke-width: 2.6; stroke-linecap: square; }
.signup .signup-done p { color: var(--abyss); margin: 0; }
.signup .signup-done .signup-done-title { font-family: inherit; font-stretch: 125%; font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; margin-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) { .signup-done:not([hidden]) { animation: done-in 0.45s cubic-bezier(.2,.7,.2,1) both; } @keyframes done-in { from { opacity: 0; transform: translateY(8px); } } }
@media (max-width: 860px) { .offer { grid-template-columns: minmax(0, 1fr); } }

/* Footer (Ink) */
.site-footer { background: var(--night); color: var(--on-dark); padding-block: 56px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; }
.foot .brand { font-size: 1.25rem; }
.foot small { display: block; margin-top: 12px; color: var(--on-dark-2); font-size: 0.85rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.foot-links a, .foot-links button { color: var(--on-dark); text-decoration: none; font-size: 0.95rem; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.foot-links a:hover, .foot-links button:hover { text-decoration: underline; color: var(--on-dark); }

/* ---------- Cookie consent ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  margin-inline: auto; max-width: 40rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px; display: grid; gap: 14px;
  box-shadow: 0 12px 40px rgba(11, 18, 22, 0.25);
}
.consent h2 { font-size: 1.15rem; letter-spacing: -0.01em; }
.consent p { font-size: 0.95rem; color: var(--ink-2); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-actions .btn { flex: 1 1 9rem; min-height: 44px; font-size: 0.95rem; }
.consent .c-equal { background: var(--ink); color: var(--paper); }
.consent .c-equal:hover { background: var(--ink-2); color: var(--paper); }
.consent .c-link { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.consent .c-link:hover { background: var(--paper-2); color: var(--ink); }
.consent-opts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.opt label { font-weight: 700; }
.opt p { grid-column: 1; font-size: 0.875rem; color: var(--slate); }
.opt input { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; accent-color: var(--petrol); }

/* ---------- Legal pages ---------- */
.legal-hero { background: var(--abyss); color: var(--on-dark); }
.legal-hero .head { padding-block: clamp(24px, 5vw, 56px) clamp(40px, 6vw, 72px); margin: 0; position: relative; z-index: 1; }  /* above the background mark */
.legal-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.legal-hero .eyebrow { color: var(--on-dark-2); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(40px, 6vw, 72px) 96px; }
.toc { position: sticky; top: 24px; font-size: 0.9rem;
  /* scrolls on its own when the list is taller than the window */
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-right: 8px; }
.toc .toc { position: static; max-height: none; overflow: visible; padding: 0; }  /* the list Markdown generates inside the nav */
.toc ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.toc ul ul { margin: 2px 0 4px 12px; }
.toc a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--link); }
.toc-empty { display: none; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: minmax(0, 1fr); } .toc { position: static; max-height: none; overflow: visible; } }

.prose { max-width: 46rem; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.6rem; margin: 2.2em 0 0.6em; scroll-margin-top: 24px; }
.prose h3 { font-size: 1.15rem; margin: 1.8em 0 0.5em; scroll-margin-top: 24px; }
.prose h4 { font-size: 1rem; margin: 1.5em 0 0.4em; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1em; }
.prose p, .prose li { max-width: 65ch; }
.prose li + li { margin-top: 0.35em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote { margin-left: 0; padding: 16px 20px; background: var(--paper-2); color: var(--ink-2); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose code { font-size: 0.92em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; }
.table-wrap { overflow-x: auto; margin: 0 0 1em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; border-bottom: 2px solid var(--ink); }

/* ---------- Scroll motion (only when motion.js runs) ---------- */
.motion [data-reveal] {
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1), clip-path 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0ms);
}
.motion [data-reveal="up"]:not(.in) { opacity: 0; transform: translateY(28px); }
.motion [data-reveal="left"]:not(.in) { opacity: 0; transform: translateX(-36px); }
.motion [data-reveal="right"]:not(.in) { opacity: 0; transform: translateX(36px); }
.motion [data-reveal="fade"]:not(.in) { opacity: 0; }
.motion [data-reveal="wipe"]:not(.in) { clip-path: inset(0 100% 0 0); }
.motion [data-reveal="wipe"].in { clip-path: inset(0 0 0 0); }

/* Bank line: highlighted row flashes once it lands */
.motion .stmt.hl.in { animation: flag 1.2s 0.5s ease-out both; }
@keyframes flag { 0% { outline-color: transparent; } 30% { outline-color: var(--over); outline-width: 4px; } 100% { outline-color: var(--over); outline-width: 2px; } }

/* Arrow draws itself */
.motion .compare-arrow { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 0.8s 0.4s ease-out; }
.motion .compare-arrow.in { stroke-dashoffset: 0; }

/* Bar segments grow from the left, one after another */
.motion .bar i { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.motion .bar.in i { transform: scaleX(1); }
.motion .bar i:nth-child(1) { transition-delay: 0.6s; } .motion .bar i:nth-child(2) { transition-delay: 0.8s; }
.motion .bar i:nth-child(3) { transition-delay: 1.0s; } .motion .bar i:nth-child(4) { transition-delay: 1.2s; }
.motion .bar i:nth-child(5) { transition-delay: 1.4s; }

/* Rules above big numbers and the ways list draw across */
.motion .outcome, .motion .ways { border-top-color: transparent; position: relative; }
.motion .outcome::before, .motion .ways::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(.2,.7,.2,1) var(--delay, 0ms);
}
.motion .outcome.in::before, .motion .ways.in::before { transform: scaleX(1); }

/* Privacy claims: line draws, then the words rise */
.motion .claim { border-top-color: transparent; position: relative; }
.motion .claim::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(241, 241, 236, 0.25);
  transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1) var(--delay, 0ms);
}
.motion .claim.in::before { transform: scaleX(1); }
.motion .claim > * { transition: opacity 0.7s, transform 0.8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--delay, 0ms) + 200ms); }
.motion .claim:not(.in) > * { opacity: 0; transform: translateY(16px); }

/* The tessera assembles: three pieces arrive from apart */
.motion .tessera:not(.in) i:nth-child(1) { transform: translateY(-48px); opacity: 0; }
.motion .tessera:not(.in) i:nth-child(2) { transform: translate(-48px, 40px); opacity: 0; }
.motion .tessera:not(.in) i:nth-child(3) { transform: translate(48px, 40px); opacity: 0; }
.motion .tessera i { transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 0.6s; }
.motion .tessera.in i:nth-child(2) { transition-delay: 0.12s, 0.12s; }
.motion .tessera.in i:nth-child(3) { transition-delay: 0.24s, 0.24s; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-bottom: clamp(40px, 6vw, 72px); }
.plan { padding: clamp(24px, 3vw, 36px); display: grid; gap: 20px; align-content: start; min-width: 0; }
/* Name, price, summary, list and footer share rows across the three cards, so they line up. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    .plans { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .plan { grid-row: span 5; grid-template-rows: subgrid; row-gap: 20px; }
  }
}
.plan .price { flex-direction: column; align-items: flex-start; gap: 8px; }
.plan .plan-sum { font-size: 1.05rem; }
div.plan-sum { display: grid; gap: 20px; align-content: space-between; }
.plan .includes, .plan .not-in { align-self: start; }
.plan h3 { font-size: 1.5rem; }
.plan .price strong { font-size: clamp(2.6rem, 4.6vw, 3.6rem); }
.plan p { color: var(--ink-2); }
.plan .small { font-size: 0.9rem; }
.plan-trial { box-shadow: inset 0 0 0 1.5px var(--line); }
.plan-pro { background: var(--card); }
.plan-unlimited { background: var(--abyss); color: var(--on-dark); }
.plan-unlimited p, .plan-unlimited .includes li { color: var(--on-dark); }
.plan-unlimited .includes li { border-color: var(--on-dark-line); }
.plan-unlimited .includes svg { stroke: var(--petrol-light); }
.label-sm { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.not-in ul { list-style: none; margin: 0; padding: 0; display: grid; }
.not-in li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink-2); }
.not-in li:last-child { border-bottom: 1px solid var(--line); }
.not-in li::before { content: ""; width: 12px; height: 2px; background: var(--slate); margin: 0.75em 0 0 4px; }
.addon { border-top: 2px solid var(--ink); padding-top: 14px; display: grid; gap: 6px; }
.addon-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.addon p { font-size: 0.95rem; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); }
.signup-copy { display: grid; gap: 12px; }
@media (max-width: 860px) { .signup { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.hero-eyebrow { color: var(--petrol-light); }
.faq { max-width: 50rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 22px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); margin: 0; }
.faq-item summary::after { content: ""; width: 14px; height: 14px; justify-self: end; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.faq-item p { margin: 0 0 24px; color: var(--ink-2); max-width: 44rem; }

/* ---------- Back to top (a control, so liquid glass) ---------- */
.to-top {
  position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 52px; height: 52px; border: 0; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  background: rgba(15, 32, 39, 0.72); color: var(--on-dark);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(241, 241, 236, 0.3), 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s, transform 0.25s, background 0.2s;
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: rgba(30, 71, 86, 0.9); }
.to-top:focus-visible { outline: 2px solid var(--petrol-light); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 761px) { .to-top { right: 28px; bottom: 28px; } }
@media (prefers-reduced-transparency: reduce) { .to-top { background: var(--abyss); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity 0.2s; transform: none; } }

/* Language and currency picker in the footer */
.foot-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(241, 241, 236, 0.12); }
.foot-lang label { color: var(--on-dark-2); font-size: 0.9rem; }
.foot-lang select { font: inherit; font-size: 0.95rem; color: var(--on-dark); background: rgba(241, 241, 236, 0.06); border: 1px solid rgba(241, 241, 236, 0.22); border-radius: 10px; padding: 8px 34px 8px 12px; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F1F1EC' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px; }
.foot-lang select:focus-visible { outline: 2px solid var(--brass, #B79A62); outline-offset: 2px; }
.foot-lang select option { color: #11171A; background: #F1F1EC; }
.foot-lang small { margin-top: 0; flex-basis: 100%; }
.foot-company small { display: block; margin-top: 20px; color: var(--on-dark-2); font-size: 0.8rem; }
.foot-company span { white-space: nowrap; }

/* Language picker in the top bar: a native select laid over a compact label */
.lang-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark); font-weight: 600; font-size: 0.9rem; padding: 10px 12px; border-radius: 999px; }
.lang-pick:hover { background: var(--abyss-2); }
.lang-pick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang-pick select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.lang-pick:focus-within { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Currency switch above the plans */
.cur-pick { display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.cur-pick button { font: inherit; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; min-height: 36px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.cur-pick button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.cur-pick button[aria-pressed="true"] { background: var(--ink, #11171A); color: var(--paper, #F1F1EC); cursor: default; }
.cur-pick button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lang-pick svg { flex-shrink: 0; }
.cur-pick { width: max-content; max-width: 100%; justify-self: start; align-self: flex-start; }
/* Phones: translated button labels don't fit next to the logo, and the hero's
   own button is right below, so the top bar keeps just the logo and language */
@media (max-width: 560px) { .topnav .btn { display: none; } }
/* Elements sliding in from the side must not widen the page before they arrive */
.band { overflow-x: clip; }