/* TerraNova marketing site. One stylesheet: tokens, base, then one block per section in page order. */

/* ── tokens ─────────────────────────────────────────── */
:root {
  --tn-off-white: #FEFEFE;
  --tn-cotton: #F3F1EA;
  --tn-feather-grey: #B9AEA0;
  --tn-lt-green: #AFC5AD;
  --tn-dk-green: #46594D;
  --tn-black: #0A0F0A;
  --tn-yellow: #FFC500;
  --tn-yellow-hover: #E6B100;
  --tn-tone: #E6E2D6;
  --ink-2: #2B332D;
  --footer-rule: #2A2F2A;

  /* App-faithful neutrals: rule components must look like the product. */
  --app-card: #F7F7F5;
  --app-line: #E7E5E0;
  --app-line-soft: #EFEEEA;
  --app-tag: #EEEDEA;
  --app-tag-hl: #FFF6D6;
  --app-tag-hl-line: #F0C94A;
  --app-ink: #1F1F1F;
  --app-strong: #111111;
  --app-mute: #555555;
  --app-mute-2: #6B6B6B;
  --app-field: #F4F6F8;
  --app-field-line: #E3E3E3;
  --app-placeholder: #767676;

  --font-display: 'Kaisei Decol', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Courier Prime', ui-monospace, monospace;
  --font-app: 'Inter', system-ui, sans-serif;

  --wrap: min(1360px, 100% - 8vw);
  --nav-h: 68px;
  --shadow-lg: 0 1px 2px rgba(10, 15, 10, .06), 0 30px 60px -34px rgba(10, 15, 10, .45);
  --shadow-md: 0 20px 40px -30px rgba(10, 15, 10, .45);

  /* Refresh 2026-10-04: the hero's downward point, and the contour texture behind the
     hero and the final call to action. One generated image covers each section, so
     nothing tiles (tests/tools/make-contours.mjs). */
  --hero-tip: clamp(28px, 5vw, 80px);
  --contours: url(/assets/img/contours-1600.webp);
}
@media (min-width: 1700px), (min-width: 1000px) and (min-resolution: 2dppx) {
  :root { --contours: url(/assets/img/contours-2800.webp); }
}

/* ── base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--tn-cotton); color: var(--tn-black); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--tn-yellow); color: var(--tn-black); padding: .6em 1em; border-radius: 4px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--tn-yellow); outline-offset: 3px; border-radius: 4px; }
.h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(2rem, 3.3vw, 3.1rem); margin: 0 0 .6em; text-wrap: pretty; }

.btn { display: inline-block; padding: .8em 1.4em; border-radius: 4px; font-weight: 700; font-size: .95rem; text-decoration: none; text-align: center; transition: background-color .15s, color .15s; }
.btn--cta { background: var(--tn-yellow); color: var(--tn-black); }
.btn--cta:hover { background: var(--tn-yellow-hover); }
.btn--ghost { border: 1.5px solid var(--tn-black); color: var(--tn-black); font-weight: 500; padding: .72em 1.3em; }
.btn--ghost:hover { background: var(--tn-black); color: var(--tn-off-white); }

.ul { position: relative; color: inherit; text-decoration: none; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.ul:hover::after { transform: scaleX(1); }
/* A link inside running text: underlined at rest, so it reads as a link before anyone hovers. */
.link { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--tn-dk-green); }
.flag { display: inline-block; width: 1.5em; height: 1em; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10, 15, 10, .12); vertical-align: -.12em; }

.logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.35rem; color: var(--tn-off-white); text-decoration: none; }
.logo__mark { width: 30px; height: 30px; background: currentColor; -webkit-mask: url(/assets/brand/mark.svg) center / contain no-repeat; mask: url(/assets/brand/mark.svg) center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── nav ────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: var(--tn-black); color: var(--tn-off-white); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.nav__links { display: flex; gap: 2.2rem; font-size: .92rem; }
.nav__actions { display: flex; align-items: center; gap: 1.4rem; font-size: .92rem; }
.menu-btn { display: none; background: none; border: 0; color: var(--tn-off-white); padding: .4rem; cursor: pointer; }
.menu-btn svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn__close { display: none; }
.nav.is-open .menu-btn__open { display: none; }
.nav.is-open .menu-btn__close { display: inline; }
.menu-sheet { display: flex; flex-direction: column; background: var(--tn-black); border-top: 1px solid var(--footer-rule); padding: 1rem 4vw 1.6rem; }
.menu-sheet[hidden] { display: none; }
.menu-sheet a { color: var(--tn-off-white); text-decoration: none; font-size: 1.1rem; padding: .85rem 0; border-bottom: 1px solid var(--footer-rule); }
.menu-sheet .btn--cta { margin-top: 1.2rem; border: 0; color: var(--tn-black); padding: .9em; }
@media (max-width: 760px) {
  .nav__links, .nav__signin, .nav__trial { display: none; }
  .menu-btn { display: block; }
}
@media (min-width: 761px) {
  .menu-sheet { display: none !important; }
}

/* ── hero ───────────────────────────────────────────── */
.hero {
  position: relative; z-index: 2;
  padding-bottom: calc(5.5rem + var(--hero-tip));
  background: var(--tn-cotton) var(--contours) center / cover no-repeat;
  /* The point says "keep going". The green section slides up under it by its depth. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-tip)), 50% 100%, 0 calc(100% - var(--hero-tip)));
}
.hero__kicker { margin: 0; padding-top: 5.5rem; text-align: center; white-space: nowrap; color: var(--tn-dk-green); font-family: var(--font-display); letter-spacing: -.02em; line-height: 1; font-size: clamp(2.2rem, 6vw, 5.6rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 5vw; align-items: center; padding-top: 6rem; }
.hero__title { margin: 0 0 .45em; font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.04; white-space: nowrap; font-size: clamp(1.9rem, 3.05vw, 2.75rem); }
.hero__lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 36ch; margin: 0 0 2rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__ctas .btn--ghost { background: var(--tn-cotton); } /* solid, so the contours stay behind it */
.hero__ctas .btn--ghost:hover { background: var(--tn-black); }
.hero__show { min-width: 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--tn-dk-green); }
.hero__trust li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .5em; vertical-align: middle; }
@media (max-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-top: 4rem; } }
@media (max-width: 760px) {
  .hero { padding-bottom: calc(4rem + var(--hero-tip)); }
  .hero__kicker { padding-top: 3rem; font-size: clamp(1.4rem, 8.4vw, 2.6rem); }
  .hero__grid { padding-top: 3rem; }
  .hero__title { font-size: clamp(1.3rem, 6.6vw, 2rem); }
  .hero__lede { font-size: 1.08rem; }
}

/* ── app-faithful rule components (hero demo + anatomy) ─ */
.app { font-family: var(--font-app); color: var(--app-ink); font-size: 15px; line-height: 1.75; }
.app p { margin: 0 0 .35rem; }
.term { color: var(--tn-dk-green); text-decoration: underline dotted 1.5px; text-underline-offset: 3px; }
.rule__country { display: flex; align-items: center; gap: .5rem; color: var(--app-mute); font-size: 14px; }
.rule__flag { font-size: 18px; line-height: 1; }
.rule__title { font-weight: 600; font-size: 16px; line-height: 1.35; margin: .35rem 0 .3rem; color: var(--app-strong); }
.rule__verified { font-size: 12.5px; color: var(--app-mute-2); }
.rule__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .55rem; padding: 0; list-style: none; }
.rule__tags li { font-size: 12.5px; line-height: 1.6; background: var(--app-tag); border-radius: 5px; padding: .15em .6em; color: var(--app-ink); }
.rule__tags li.is-hl { background: var(--app-tag-hl); box-shadow: inset 0 0 0 1px var(--app-tag-hl-line); }
.rule__btns { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; }
.rule__more { font-size: 12px; line-height: 1.6; border: 1px solid var(--app-line); border-radius: 6px; padding: 0 .55em; color: var(--app-mute-2); background: #fff; }
.rule__tn { width: 34px; height: 34px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; display: grid; place-items: center; }
.rule__tn i { width: 18px; height: 18px; background: var(--app-strong); -webkit-mask: url(/assets/brand/mark.svg) center / contain no-repeat; mask: url(/assets/brand/mark.svg) center / contain no-repeat; }
.cite { display: inline-flex; gap: .45em; align-items: center; background: var(--tn-lt-green); color: var(--tn-black); font-family: var(--font-mono); font-size: .8rem; line-height: 1.4; padding: .3em .7em; border-radius: 3px; text-decoration: none; transition: background-color .15s, color .15s; }
.cite i { font-style: normal; transition: transform .15s; }
a.cite:hover { background: var(--tn-dk-green); color: var(--tn-off-white); }
a.cite:hover i { transform: translate(2px, -2px); }

/* ── hero search demo ───────────────────────────────── */
.demo { margin: 0; background: var(--tn-dk-green); border-radius: 18px; padding: 1.4rem; box-shadow: 0 2px 4px rgba(10, 15, 10, .14), 0 18px 36px -16px rgba(10, 15, 10, .4), 0 48px 90px -36px rgba(10, 15, 10, .6); }
.sbar { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 999px; padding: 6px; font-family: var(--font-app); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.sbar__scope { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--app-field); border: 1px solid var(--app-field-line); }
.sbar__scope > span { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; transition: transform .45s cubic-bezier(.5, 0, .2, 1), opacity .3s; }
.sbar__globe { font-size: 24px; }
.sbar__flag { font-size: 30px; transform: translateY(100%); opacity: 0; }
.sbar.is-country .sbar__globe { transform: translateY(-100%); opacity: 0; }
.sbar.is-country .sbar__flag { transform: none; opacity: 1; }
.sbar__mag { flex: none; width: 20px; height: 20px; color: var(--app-mute); }
.sbar__mag, .sbar__go svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sbar__field { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 16px; color: var(--app-strong); }
.sbar__ph { color: var(--app-placeholder); }
.sbar__ph[hidden] { display: none; }
.sbar__caret { display: inline-block; width: 2px; height: 1.15em; background: var(--app-strong); vertical-align: -.2em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sbar__go { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tn-black); color: #fff; display: grid; place-items: center; }
.sbar__go svg { width: 20px; height: 20px; }
.demo__stage { position: relative; height: 16.5rem; margin-top: .9rem; }
.demo__card { position: absolute; inset: 0; z-index: 1; margin: 0; background: var(--app-card); border-radius: 12px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; overflow: hidden; transition: opacity .45s, transform .45s; }
.demo__card.is-hidden { opacity: 0; transform: translateY(10px); }
.demo__skel { position: absolute; inset: 0; border-radius: 12px; background: rgba(243, 241, 234, .08); padding: 1.3rem; display: flex; flex-direction: column; gap: .7rem; transition: opacity .45s; }
.demo__card:not(.is-hidden) ~ .demo__skel { opacity: 0; }
.demo__skel i { display: block; height: 12px; border-radius: 6px; background: rgba(243, 241, 234, .14); }
.demo__skel i:nth-child(1) { width: 35%; } .demo__skel i:nth-child(2) { width: 55%; height: 16px; } .demo__skel i:nth-child(3) { width: 92%; } .demo__skel i:nth-child(4) { width: 86%; } .demo__skel i:nth-child(5) { width: 60%; }
.demo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.demo__head > div:first-child { min-width: 0; }
.demo__head .rule__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__head .rule__tags { flex: none; justify-content: flex-end; margin: 0; }
.demo__text { margin: 0; font-size: 14.5px; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.demo__foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: auto; padding-top: .7rem; }
.demo__dots { display: flex; gap: .4rem; justify-content: center; margin-top: 1rem; }
.demo__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--tn-lt-green); opacity: .4; }
.demo__dots i.is-on { opacity: 1; }
@media (max-width: 760px) {
  .demo { padding: 1rem; border-radius: 14px; }
  .sbar__field { font-size: 14px; }
  .demo__stage { height: 20rem; }
  .demo__head { flex-direction: column; gap: .4rem; }
  .demo__head .rule__tags { justify-content: flex-start; }
  .demo__text { -webkit-line-clamp: 4; line-clamp: 4; }
  .demo__foot .rule__btns { display: none; }
}

/* ── reveal on scroll (only when JS runs) ───────────── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── why it's hard ──────────────────────────────────── */
/* Linen weave (refresh 2026-10-04): two stretched noise fields, one across and one down,
   multiplied into crossing threads. No viewBox, so the weave is drawn at the section's
   real size and never stretches or tiles. */
.why { --linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .9' numOctaves='2' seed='3' result='h'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .015' numOctaves='2' seed='8' result='v'/%3E%3CfeBlend in='h' in2='v' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); }
.why { position: relative; isolation: isolate; background: var(--linen) 0 0 / 100% 100% no-repeat, var(--tn-lt-green); margin-top: calc(-1 * var(--hero-tip)); padding-block: calc(7rem + var(--hero-tip)) 7rem; }
/* The point's shadow. A blurred V drawn as an image, because a CSS clip would cut the
   blur off square. Its tip sits at 72% of a box 1.5x the point's depth: just under the point. */
.why::before, .why::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.why::before {
  inset: 0 0 auto; height: calc(var(--hero-tip) * 1.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-50%25' width='110%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cpolygon points='0,3 500,72 1000,3 1000,-20 0,-20' fill='%230A0F0A' fill-opacity='.32' filter='url(%23b)'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
}
.why::after {
  left: 50%; top: calc(var(--hero-tip) - 18px); width: min(56%, 620px); height: 90px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(10, 15, 10, .2), rgba(10, 15, 10, 0));
}
.why__title { margin-bottom: 2.5rem; }
.why__stack { display: flex; flex-direction: column; gap: 3rem; margin-top: 1rem; }
.wcard { width: 84%; display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; padding: 2rem; background: var(--tn-cotton); border-radius: 18px; box-shadow: var(--shadow-lg); }
.wcard--flip { margin-left: auto; grid-template-columns: 1.15fr 1fr; }
.wcard--flip .wcard__img { order: 2; }
.wcard__img { display: block; height: 340px; overflow: hidden; background: var(--tn-dk-green); }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; }
.shape-corner { border-radius: 18px 140px 18px 18px; }
.shape-rect { border-radius: 10px; }
.shape-arch { border-radius: 999px 999px 14px 14px; }
.wcard h3 { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1.1; margin: 0 0 .5em; }
.wcard p { margin: 0; font-size: 1.08rem; color: var(--ink-2); max-width: 40ch; }
.why__close { font-family: var(--font-display); font-size: clamp(1.6rem, 2.9vw, 2.8rem); line-height: 1.15; margin: 4.5rem 0 0; text-wrap: pretty; }
@media (max-width: 1024px) { .wcard, .wcard--flip { width: 100%; grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 760px) {
  .why { padding-block: calc(4.5rem + var(--hero-tip)) 4.5rem; }
  .wcard, .wcard--flip { grid-template-columns: 1fr; padding: 1rem; gap: 1.2rem; }
  .wcard--flip .wcard__img { order: 0; }
  .wcard__body { padding: 0 .6rem .8rem; }
  .wcard__img { height: 220px; }
  .wcard h3 { font-size: 1.6rem; }
}

/* ── fixed background mark (How → Anatomy → Pricing) ── */
.marked { position: relative; overflow: clip; }
.marked__stick { position: sticky; top: var(--nav-h); height: 0; z-index: 0; }
.marked__mark { position: absolute; left: -34vw; top: 4vh; width: 78vw; max-width: 1200px; aspect-ratio: 1; background: var(--tn-tone); opacity: .75; pointer-events: none; -webkit-mask: url(/assets/brand/mark.svg) center / contain no-repeat; mask: url(/assets/brand/mark.svg) center / contain no-repeat; }
.marked > section { position: relative; z-index: 1; }
@media (max-width: 760px) { .marked__mark { left: -60vw; width: 140vw; } }

/* ── how rules are built ────────────────────────────── */
.how { padding-block: 7rem 4rem; }
.steps { --link: 2.6rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem var(--link); margin: 1rem 0 0; padding: 0; list-style: none; }
.step { position: relative; background: var(--tn-off-white); border-radius: 14px; padding: 1.8rem 1.6rem 2rem; box-shadow: var(--shadow-md); }
.step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; margin: 0 0 .5rem; }
.step p { margin: 0; font-size: .98rem; color: var(--ink-2); }
.step--hl { background: var(--tn-dk-green); color: var(--tn-off-white); }
.step--hl p { color: var(--tn-cotton); }

/* The connectors (refresh 2026-10-04): each step draws the track to the next one, a
   dotted line with a yellow light travelling along it. The lights run in turn, so the
   eye follows a rule through the process. The ends fade, so the light rises out of
   one card and sinks into the next. */
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: var(--link); height: 16px; transform: translateY(-50%);
  background:
    radial-gradient(circle, var(--tn-yellow) 0 3.5px, rgba(255, 197, 0, .3) 4px 6.5px, transparent 7px) -16px 50% / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, rgba(70, 89, 77, .55) 0 4px, transparent 4px 9px) 0 50% / 100% 2px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: travel 2.4s cubic-bezier(.5, 0, .3, 1) infinite;
}
.step:nth-child(2)::after { animation-delay: .8s; }
.step:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes travel { 0% { background-position: -16px 50%, 0 50%; } 33%, 100% { background-position: calc(100% + 16px) 50%, 0 50%; } }
@keyframes travel-down { 0% { background-position: 50% -16px, 50% 0; } 33%, 100% { background-position: 50% calc(100% + 16px), 50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .step:not(:last-child)::after { animation: none; background-position: 50% 50%, 0 50%; }
}
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  /* The end of a row has nowhere to point: the next step starts the row below. */
  .step:nth-child(2)::after { display: none; }
}
@media (max-width: 760px) {
  .how { padding-block: 4.5rem 3rem; }
  .steps { grid-template-columns: 1fr; row-gap: var(--link); }
  .step:nth-child(2)::after { display: block; }
  .step:not(:last-child)::after {
    left: 50%; top: 100%; width: 16px; height: var(--link); transform: translateX(-50%);
    background:
      radial-gradient(circle, var(--tn-yellow) 0 3.5px, rgba(255, 197, 0, .3) 4px 6.5px, transparent 7px) 50% -16px / 16px 16px no-repeat,
      repeating-linear-gradient(180deg, rgba(70, 89, 77, .55) 0 4px, transparent 4px 9px) 50% 0 / 2px 100% no-repeat;
    -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    animation-name: travel-down;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .step:not(:last-child)::after { animation: none; background-position: 50% 50%, 50% 0; }
}

/* ── anatomy of a rule ──────────────────────────────── */
.anat { padding-block: 5rem 7rem; }
.specimen { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 400px; gap: 2rem; align-items: start; padding: 2.2rem; background: var(--app-card); border-radius: 20px; box-shadow: var(--shadow-lg); }
.sources { background: #fff; border: 1px solid var(--app-line); border-radius: 14px; padding: 1.1rem 1.3rem; }
.sources p { margin: 0; }
.sources__h { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--app-mute-2); }
.sources__title { font-weight: 600; font-size: 16px; color: var(--app-strong); margin: .1rem 0 .8rem !important; }
.sources__act { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 16px; color: var(--tn-dk-green); margin-bottom: .6rem !important; }
.sources__doc { width: 14px; height: 17px; background: var(--app-field-line); border-radius: 2px; }
.sources__star { width: 26px; height: 26px; border: 1px solid var(--app-line); border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 400; color: var(--app-mute-2); }
.sources__secs { list-style: none; margin: 0; padding: 0; }
.sources__secs li { position: relative; border-bottom: 1px solid var(--app-line-soft); padding: .55rem 0 .55rem 1rem; font-size: 14.5px; line-height: 1.45; }
.sources__secs li::before { content: "▸"; position: absolute; left: 0; top: .75rem; font-size: 11px; color: var(--app-mute); }
.sources__before { margin-top: .9rem !important; padding-top: .8rem; border-top: 1px solid var(--app-line); font-size: 14px; font-weight: 500; color: var(--tn-dk-green); }

.anch { position: relative; }
.pin { position: absolute; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--tn-yellow); color: var(--tn-black); box-shadow: 0 0 0 4px rgba(255, 197, 0, .28); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.pin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pin:hover { box-shadow: 0 0 0 6px rgba(255, 197, 0, .4); }
.pin[aria-expanded="true"] { background: var(--tn-black); color: var(--tn-yellow); box-shadow: 0 0 0 4px rgba(10, 15, 10, .18); }
.pin.is-nudge { animation: nudge 1.6s ease-out 2; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(255, 197, 0, .6); } 100% { box-shadow: 0 0 0 14px rgba(255, 197, 0, 0); } }
.a1 > .pin { left: -2.05rem; top: -.2rem; }
.a2 > .pin { left: -2.05rem; top: .05rem; }
.a3 > .pin { left: -2.05rem; top: .2rem; }
.a4 > .pin { right: -.9rem; top: -.9rem; }
.a5 > .pin { right: -.9rem; top: .55rem; }

/* The bubble (refresh 2026-10-04): opens beside its bulb, over the rule, placed by
   js/lib/bubble.js. The layer spans the card so the bubble can sit anywhere on it
   without becoming a fourth grid column. */
.anat__live { position: absolute; inset: 0; pointer-events: none; }
.bubble { --x: 0px; --y: 0px; --arrow: 24px; position: absolute; left: var(--x); top: var(--y); z-index: 5; width: min(300px, calc(100% - 16px)); padding: 1rem 1.15rem 1.1rem; background: var(--tn-off-white); border-radius: 12px; box-shadow: 0 1px 2px rgba(10, 15, 10, .08), 0 18px 40px -14px rgba(10, 15, 10, .5); pointer-events: auto; font-family: var(--font-body); transition: none; /* the reduced-motion rule would otherwise slide it in from its last spot */ }
.bubble[hidden] { display: none; }
.bubble.is-entering { animation: bubble-in .2s ease; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.bubble::before { content: ""; position: absolute; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); }
.bubble[data-side="right"]::before { left: -7px; top: calc(var(--arrow) - 7px); }
.bubble[data-side="left"]::before { right: -7px; top: calc(var(--arrow) - 7px); }
.bubble[data-side="below"]::before { top: -7px; left: calc(var(--arrow) - 7px); }
.bubble[data-side="above"]::before { bottom: -7px; left: calc(var(--arrow) - 7px); }
.bubble p { margin: 0; }
.bubble__t { position: relative; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--tn-black); }
.bubble__b { position: relative; margin-top: .35rem !important; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1024px) {
  .specimen { grid-template-columns: minmax(0, 1fr); padding-left: 2.6rem; }
  .a4 > .pin { right: .4rem; top: .4rem; }
  .a5 > .pin { right: .2rem; }
}
@media (max-width: 760px) {
  .anat { padding-block: 3rem 4.5rem; }
  .specimen { padding: 1.2rem 1.2rem 1.2rem 2.4rem; }
  .pin { width: 26px; height: 26px; }
  .pin svg { width: 15px; height: 15px; }
  .a1 > .pin, .a2 > .pin, .a3 > .pin { left: -1.85rem; }
}

/* ── pricing ────────────────────────────────────────── */
.pricing { padding-block: 4rem 7rem; }
.pricing__sub { margin: 0; color: var(--ink-2); }
.toggle { display: inline-flex; margin-top: 1rem; padding: 4px; background: var(--tn-off-white); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tn-tone); }
.toggle button { border: 0; background: transparent; padding: .55em 1.3em; border-radius: 999px; font: inherit; font-size: .9rem; color: var(--tn-black); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--tn-black); color: var(--tn-off-white); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 2.2rem; background: var(--tn-off-white); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; }
.plan p { margin: 0; }
.plan--best { background: var(--tn-dk-green); color: var(--tn-off-white); }
/* Corner ribbon. The band is centred on the stretch of it the card's corner leaves
   visible (68px in from each edge), not on its own length, so the words sit centred. */
.ribbon { position: absolute; top: 0; right: 0; width: 180px; height: 180px; overflow: hidden; pointer-events: none; }
/* Band and words are one ::before, read from data-label. A rotated element's bounding box is a
   square, and axe takes it as the background of whatever it reaches, the price included. */
.ribbon::before { content: attr(data-label); position: absolute; top: 68px; right: 68px; width: 320px; transform: translate(50%, -50%) rotate(45deg); padding: .55em 0; text-align: center; background: var(--tn-yellow); color: var(--tn-black); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 12px -6px rgba(10, 15, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(10, 15, 10, .12); }
.plan h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin: 0; }
.plan__price { font-family: var(--font-display); font-size: clamp(2.2rem, 3.3vw, 3rem); line-height: 1; margin-top: .6rem !important; }
.plan__now { white-space: nowrap; } /* on a narrow card the struck price wraps above, never the unit */
.plan__price s { font-size: 1.3rem; opacity: .7; margin-right: .2rem; text-decoration-thickness: 2px; }
.plan__price small { font-family: var(--font-body); font-size: 1rem; opacity: .8; }
.plan__save { min-height: 1.4em; margin: .4rem 0 !important; font-size: .85rem; color: var(--tn-dk-green); }
.plan--best .plan__save { color: var(--tn-cotton); }
.plan__save--big { font-size: 1.25rem; font-weight: 700; }
.plan--best .plan__save--big { color: var(--tn-yellow); }
/* On a white card yellow text fails contrast (~1.6:1), so the offer is a yellow marker band instead. */
.plan:not(.plan--best) .plan__save--big > span { background: var(--tn-yellow); color: var(--tn-black); padding: .1em .45em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.plan__for { margin: .6rem 0 1.2rem !important; font-size: .95rem; }
.plan__list { flex: 1; list-style: none; margin: 0 0 2rem; padding: 0; }
.plan__list li { padding: .45rem 0; border-top: 1px solid var(--tn-tone); font-size: .95rem; }
.plan__list s { display: block; opacity: .7; }
.plan--best .plan__list li { border-color: rgba(175, 197, 173, .3); }
.plan--best .btn--ghost { border-color: var(--tn-off-white); color: var(--tn-off-white); }
[data-pricing]:not(.is-annual) .plan__y, [data-pricing].is-annual .plan__m { display: none; }
@media (max-width: 1024px) { .plans { grid-template-columns: 1fr; max-width: 560px; } .plan__price { font-size: 3rem; } }
@media (max-width: 760px) { .pricing { padding-block: 3rem 4.5rem; } }

/* ── available countries ────────────────────────────── */
.countries { padding-block: 2rem 7rem; }
.countries__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.countries__h { margin: 0 0 1.2rem; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.countries__live, .countries__soon { margin: 0; padding: 0; list-style: none; }
.countries__live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.countries__live li { display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; background: var(--tn-off-white); border-radius: 14px; box-shadow: var(--shadow-md); }
.countries__live .countries__flag { font-size: 2.2rem; line-height: 1; }
.countries__live .countries__name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; }
.countries__soon { display: flex; flex-wrap: wrap; gap: .6rem; }
.countries__soon li { display: inline-flex; align-items: center; gap: .5rem; padding: .5em 1em; border: 1px solid var(--tn-feather-grey); border-radius: 999px; font-size: .95rem; }
.countries__soon .countries__flag { font-size: 1.15rem; line-height: 1; }
@media (max-width: 1024px) { .countries__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 760px) {
  .countries { padding-block: 1rem 4.5rem; }
  .countries__live { grid-template-columns: 1fr; }
  .countries__live li { flex-direction: row; align-items: center; padding: 1.1rem 1.3rem; }
}

/* ── faq ────────────────────────────────────────────── */
.faq { background: var(--tn-lt-green); padding-block: 7rem; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5vw; }
.faq__contact { color: var(--ink-2); }
.faq details { border-top: 1px solid rgba(10, 15, 10, .2); padding: 1.2rem 0; }
.faq details:last-child { border-bottom: 1px solid rgba(10, 15, 10, .2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3; cursor: pointer; list-style: none; transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-body); font-size: 1.4rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--tn-dk-green); }
.faq details p { margin: .8rem 0 0; max-width: 60ch; color: var(--ink-2); }
@media (max-width: 1024px) { .faq__grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 760px) { .faq { padding-block: 4.5rem; } .faq summary { font-size: 1.2rem; } }

/* ── final cta ──────────────────────────────────────── */
.final { padding-block: 8rem; background: var(--tn-cotton) var(--contours) center 30% / cover no-repeat; }
.final__box { display: grid; grid-template-columns: 1.7fr auto 1fr; gap: 3.5rem; align-items: center; padding: 5rem 4.5rem; background: var(--tn-dk-green); color: var(--tn-off-white); border-radius: 24px; box-shadow: 0 1px 2px rgba(10, 15, 10, .08), 0 40px 70px -36px rgba(10, 15, 10, .55); }
.final__title { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.12; }
.final__title span { display: block; }
.final__divider { width: 1px; align-self: stretch; margin-block: .5rem; background: var(--tn-off-white); opacity: .7; }
.final__text { margin: 0 0 1.6rem; color: var(--tn-cotton); font-size: 1.1rem; }
@media (min-width: 1100px) { .final__title span { white-space: nowrap; } }
@media (max-width: 1024px) {
  .final__box { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 2.5rem; }
  .final__divider { width: auto; height: 1px; margin: 0; }
}
@media (max-width: 760px) { .final { padding-block: 4.5rem; } .final__box { padding: 2.5rem 1.6rem; } }

/* ── about page ─────────────────────────────────────── */
.about-hero .wrap { padding-block: 6rem 4rem; }
.about-hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(2.2rem, 5vw, 4.6rem); text-wrap: balance; }
.about__lead { margin: 2rem 0 0; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding-block: 1rem 6rem; }
.about__card { padding: 2.4rem; background: var(--tn-off-white); border-radius: 18px; box-shadow: var(--shadow-lg); }
.about__card h2 { margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; }
.about__card p { margin: 0 0 1rem; font-size: 1.05rem; color: var(--ink-2); }
.about__card--dk { background: var(--tn-dk-green); color: var(--tn-off-white); }
.about__card--dk p { color: var(--tn-cotton); }
.mission { background: var(--tn-lt-green); padding-block: 6rem; }
.mission p { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.2; text-wrap: balance; }
@media (max-width: 760px) {
  .about-hero .wrap { padding-block: 3.5rem 2.5rem; }
  .about__cards { grid-template-columns: 1fr; padding-bottom: 4rem; }
  .about__card { padding: 1.6rem; }
  .mission { padding-block: 4rem; }
}

/* ── footer ─────────────────────────────────────────── */
.footer { background: var(--tn-black); color: var(--tn-off-white); padding-block: 4rem 2.5rem; font-size: .92rem; }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer__cols .ul { display: table; margin: .3rem 0; }
.footer__tag { color: var(--tn-feather-grey); margin: .8rem 0 0; }
.footer__title { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tn-feather-grey); margin: 0 0 .8rem; }
.footer hr { border: 0; border-top: 1px solid var(--footer-rule); margin: 2.5rem 0 1.5rem; }
.footer__legal { font-size: .8rem; color: var(--tn-feather-grey); }
.footer__legal a { color: var(--tn-off-white); text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--tn-yellow); }
@media (max-width: 760px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__cols > div:first-child { grid-column: 1 / -1; }
}