/* =============================================================================
   Skintonic landing page.

   Standalone on purpose: this page is the first thing a visitor sees and it
   should paint without waiting on the app's stylesheet or any script. Nothing
   here depends on Tailwind or on css/styles.css, so the two can be edited
   without breaking each other.

   Mobile first. Every breakpoint below is min-width.

   The palette is the brief's: warm cream ground, navy and charcoal for
   structure, rust as the one warm accent. Rust is used sparingly — on the
   eyebrows and the honest box — because an accent used everywhere is not an
   accent.
============================================================================= */

:root {
  /* Taken from the hero design, so the sections below it are the same cream,
     navy and rust rather than a near-miss of each. */
  --cream: var(--st-bg);
  --cream-2: var(--st-surface);
  --cream-3: #E4DCCF;
  --navy: #1F2A44;
  --navy-soft: #2B3A5C;
  --charcoal: #262626;
  --charcoal-2: #5F5A52;
  --rust: #A3461F;
  --rust-soft: #BE5C32;
  --line: #E2DACC;
  --shadow: 32 24 12;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gut: 20px;
  --max: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Sections carry their own rhythm so the page reads as a sequence of beats
   rather than one long column. */
.sec { padding-block: 56px; }
.sec--tight { padding-block: 40px; }
.sec--alt { background: var(--cream-2); border-block: 1px solid var(--line); }

@media (min-width: 768px) {
  :root { --gut: 32px; }
  .sec { padding-block: 88px; }
  .sec--tight { padding-block: 64px; }
}

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--charcoal); margin: 0; letter-spacing: -0.02em; }

h1 { font-size: clamp(2.1rem, 8vw, 3.9rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.15; }
h3 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 10px;
}

.lede { font-size: 1.05rem; color: var(--charcoal-2); margin: 10px 0 0; max-width: 46ch; }
.sec__head { margin-bottom: 28px; }
@media (min-width: 768px) { .sec__head { margin-bottom: 40px; } }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border: 0;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.16s ease, transform 0.12s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

@media (min-width: 560px) { .btn--block { width: auto; } }

.btn-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--charcoal-2); }

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

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { width: 30px; height: 30px; }
.brand span { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--charcoal); letter-spacing: -0.02em; }
.head-link { font-size: 0.9rem; color: var(--charcoal-2); text-decoration: none; }
.head-link:hover { color: var(--navy); }

/* =========================================================
   Skintonic — Homepage hero (carousel)
   From the supplied design, scoped to .st-hero. Departures,
   all deliberate:
     1. The palette maps to css/tokens.css instead of the
        design's hard-coded light values, and dark mode uses
        the site's one switch, [data-theme='dark'] on <html>.
        The design ships no dark mode at all.
     2. The design's own <header class="st-nav"> (brand +
        "How it works") is dropped: landing.html already has
        that header above the hero, and keeping both would
        print the brand and the link twice.
     3. The button follows the PHONE file (navy, var(--st-title)),
        not the desktop file's rust. The two files disagree on
        this one value; the phone one is the later of the two —
        it also adds the mobile carousel ordering below — and
        navy matches the CTA on the rest of the page.
   ========================================================= */
.st-hero {
  /* --st-bg is not redeclared: it already means this in tokens.css, and
     `--st-bg: var(--st-bg)` is a self-reference CSS discards as a cycle. */
  --st-card: var(--st-surface); --st-line: var(--st-border);
  --st-title: var(--st-ink); --st-text: var(--st-ink-dim); --st-muted: var(--st-ink-dim); --st-rust: var(--st-accent);
  box-sizing: border-box;
  background: var(--st-bg);
  font-family: "Outfit", system-ui, sans-serif; color: var(--st-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.st-hero *, .st-hero *::before, .st-hero *::after { box-sizing: border-box; }

.st-hero .st-inner {
  max-width: 1200px; margin: 0 auto;
  /* 28px, not the design's 48px, below the two-column breakpoint: the trust
     strip underneath adds 24px of its own padding, so 48 + 24 left the CTA
     stranded a long way from the strip on a phone. */
  padding: 0 16px 28px;
}
@media (min-width: 960px) { .st-hero .st-inner { padding-bottom: 48px; } }
@media (min-width: 960px) { .st-hero .st-inner { padding: 0 32px 72px; } }

.st-hero .st-nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
@media (min-width: 960px) { .st-hero .st-nav { height: 84px; } }
.st-hero .st-brand { font-family: "DM Serif Display", Georgia, serif; font-size: 26px; letter-spacing: -0.01em; color: var(--st-title); text-decoration: none; }
.st-hero .st-nav-link { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: lowercase; color: var(--st-title); text-decoration: none; padding: 10px 0; }
.st-hero .st-nav-link:hover { color: var(--st-rust); }

.st-hero .st-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 8px; }
@media (min-width: 960px) {
  .st-hero .st-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 72px; align-items: center; padding-top: 24px; }
}

/* Copy */
.st-hero .st-tag { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--st-title); }
.st-hero .st-tag::after { content: ""; width: 40px; height: 1px; background: currentColor; }
.st-hero h1 {
  margin: 14px 0 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 900;
  font-size: clamp(48px, 6.6vw, 88px); line-height: .92; letter-spacing: -0.045em;
  color: var(--st-title); text-wrap: balance;
}
.st-hero h1 em { display: block; margin-top: .06em; font-family: "DM Serif Display", Georgia, serif; font-style: normal; font-weight: 400; letter-spacing: -0.02em; line-height: .95; color: var(--st-rust); }
.st-hero .st-sub { margin: 18px 0 0; max-width: 460px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--st-text); text-wrap: pretty; }
.st-hero .st-privacy { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--st-muted); }
.st-hero .st-privacy svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--st-title); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.st-hero .st-cta { margin-top: 28px; width: 100%; max-width: 360px; }
/* Centred below the two-column breakpoint. The cap is 360px, so on a 430px
   phone the block sat 16px from the left and 54px from the right — visibly
   off-centre, and more so the wider the phone. From 960px up the copy is a
   left-hand column and the button belongs on its left edge, untouched. */
@media (max-width: 959px) { .st-hero .st-cta { margin-left: auto; margin-right: auto; } }
.st-hero .st-button {
  min-height: 58px; padding: 0 28px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; background: var(--st-title); color: #FFFFFF;
  font: 500 15px/1 "Outfit", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 1px 2px rgba(31,42,68,.18), 0 10px 24px -6px rgba(31,42,68,.35);
  transition: background .2s ease, transform .2s ease;
}
.st-hero .st-button:hover { background: #2A3758; color: #FFFFFF; transform: translateY(-1px); }
.st-hero .st-button:focus-visible { outline: 3px solid var(--st-rust); outline-offset: 3px; }
.st-hero .st-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* .st-pricenote, NOT .st-price: the pricing SECTION further down owns
   `.st-price` as an unscoped block (72px padding, its own surface), so a
   <p class="st-price"> in the hero inherited all of it — one line of 13px text
   rendered 182px tall, which is what put a phantom 72px gap between the button
   and the trust strip below. */
.st-hero .st-pricenote { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--st-muted); text-align: center; }

/* Carousel */
.st-hero .st-carousel { position: relative; }
@media (max-width: 959px) { .st-hero .st-carousel { order: -1; } }
.st-hero .st-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 12px; margin: 0 -16px; padding: 4px 16px 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  list-style: none;
}
.st-hero .st-track::-webkit-scrollbar { display: none; }
@media (min-width: 960px) {
  .st-hero .st-track { grid-auto-columns: 100%; margin: 0; padding: 0 0 20px; gap: 20px; scroll-padding: 0; }
}
.st-hero .st-slide { scroll-snap-align: start; margin: 0; }
.st-hero .st-slide img {
  /* height:auto is required because the markup carries width/height attributes
     (they reserve the box and stop the hero shifting as the slides load). Those
     attributes map to a presentational height:1000px, which outranks
     aspect-ratio and made every square slide 1000px tall — so `cover` cropped
     the burned-in headline off both sides. */
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 20px; background: #E9E3D8;
  box-shadow: 0 1px 2px rgba(40,30,20,.06), 0 24px 50px -18px rgba(40,30,20,.35);
}
@media (min-width: 960px) { .st-hero .st-slide img { border-radius: 28px; } }

.st-hero .st-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-hero .st-dots { display: flex; gap: 2px; }
.st-hero .st-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.st-hero .st-dot span { width: 8px; height: 8px; border-radius: 999px; background: #CFC5B6; transition: width .35s cubic-bezier(.65,0,.35,1), background .3s; }
.st-hero .st-dot[aria-current="true"] span { width: 24px; background: var(--st-rust); }
.st-hero .st-dot:focus-visible { outline: 2px solid var(--st-rust); outline-offset: 0; border-radius: 6px; }
.st-hero .st-arrows { display: flex; gap: 8px; }
.st-hero .st-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--st-card); border: 1px solid var(--st-line); color: var(--st-title); cursor: pointer;
  transition: background .2s, transform .2s;
}
.st-hero .st-arrow:hover { background: #FFFFFF; transform: translateY(-1px); }
.st-hero .st-arrow:focus-visible { outline: 2px solid var(--st-rust); outline-offset: 2px; }
.st-hero .st-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-hero .st-progress { flex: 1; max-width: 140px; height: 2px; border-radius: 2px; background: var(--st-line); overflow: hidden; }
.st-hero .st-progress span { display: block; height: 100%; width: 100%; background: var(--st-title); transform-origin: left; transform: scaleX(0); }
.st-hero .st-carousel.is-playing .st-progress span { animation: st-prog var(--st-dur, 5s) linear forwards; }
@keyframes st-prog { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .st-hero .st-progress { display: none; } .st-hero .st-dot span { transition: none; } }

/* Dark mode — the site's existing switch and existing colours only. */
[data-theme='dark'] .st-hero .st-button { color: var(--st-bg); }
[data-theme='dark'] .st-hero .st-button:hover { background: #FFFFFF; }
[data-theme='dark'] .st-hero .st-arrow:hover { background: var(--st-surface); }
[data-theme='dark'] .st-hero .st-dot span { background: var(--st-border); }
/* Must follow the line above: it has the SAME specificity as the design's
   active-dot rule, so without this the dark override also greyed out the
   current slide's dot and the carousel lost its position indicator. */
[data-theme='dark'] .st-hero .st-dot[aria-current="true"] span { background: var(--st-rust); }
[data-theme='dark'] .st-hero .st-slide img { background: var(--st-surface); }

/* ---------------------------------------------------------------------------
   RESTORED. These five sections — the small card grids, the twelve types, the
   four families, how it works, what you get, the honest box, the FAQ and the
   footer — were deleted by accident when the hero was swapped for the carousel
   version: that edit cut from the hero's banner all the way to the "Why it
   matters" banner, and everything between the hero and it went with it. The
   hero's own rules actually ended ~300 lines earlier. Without these the
   affected sections fell back to browser defaults, which is why the check
   icons rendered at 310px, the FAQ showed raw disclosure triangles and the
   type-card links were blue and underlined.
--------------------------------------------------------------------------- */

/* --- 3 & 5. small card grids ---------------------------------------------- */

.cards { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.card {
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream-2);
}
.card__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgb(var(--shadow) / 0.05);
  color: var(--navy);
  margin-bottom: 14px;
}
.card__icon svg { width: 20px; height: 20px; }
.card p { margin: 7px 0 0; font-size: 0.9rem; color: var(--charcoal-2); line-height: 1.5; }

/* --- 4. the twelve -------------------------------------------------------- */

.types { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .types { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.type {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream-2);
  overflow: hidden;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.type:hover { border-color: var(--navy-soft); transform: translateY(-2px); }

/* Folded fabric, not a flat swatch row: overlapping rounded panels read as
   cloth, which is what the colors are actually for. */
.type__fabric { display: flex; height: 92px; }
.type__fabric span { flex: 1; }
.type__fabric span:first-child { flex: 1.4; }

.type__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.type__tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(var(--shadow) / 0.06);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  margin-bottom: 9px;
}
.type h3 { margin-bottom: 6px; }
.type__desc { margin: 0 0 13px; font-size: 0.875rem; line-height: 1.5; color: var(--charcoal-2); }

.type__traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 13px; padding: 0; list-style: none; }
.type__traits li {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--charcoal);
}

.type__chips { display: flex; gap: 7px; margin: 0 0 15px; padding: 0; list-style: none; }
.type__chips li { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--charcoal-2); }
.type__chip {
  width: 17px; height: 17px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.14);
  flex-shrink: 0;
}

.type__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.type__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.after-types { margin-top: 28px; text-align: center; }

/* --- the four families ----------------------------------------------------
   Each closed group is a strip of real palette colour, the family name and a
   count. Open, it reveals the same .types grid as before — the twelve cards
   are always in the markup, so nothing is hidden from a crawler. */
.fams { display: grid; gap: 12px; }

.fam {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream-2);
  overflow: hidden;
}

.fam__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fam__head::-webkit-details-marker { display: none; }

/* The strip: nine bands of the family's own colours, no gaps. */
.fam__strip {
  flex-shrink: 0;
  display: flex;
  width: 108px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.1);
}
.fam__strip span { flex: 1; }

.fam__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fam__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.fam__count { font-size: 0.8rem; color: var(--charcoal-2); }

.fam__chev {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--rust);
  transition: transform 0.18s ease;
}
.fam[open] .fam__chev { transform: rotate(90deg); }

/* The grid inside an open family: same cards, same rules, one row of three. */
.fam .types { padding: 0 14px 16px; }
@media (min-width: 1000px) { .fam .types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 768px) {
  .fam__head { padding: 18px 20px; gap: 18px; }
  .fam__strip { width: 140px; height: 42px; }
  .fam .types { padding: 0 20px 20px; }
}

/* --- 6. how it works ------------------------------------------------------ */

.steps { display: grid; gap: 14px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

.step {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream-2);
}
.step__n {
  counter-increment: step;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 13px;
}
.step__n::before { content: counter(step); }
.step__time {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgb(var(--shadow) / 0.06);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  vertical-align: 2px;
}
.step p { margin: 7px 0 0; font-size: 0.9rem; color: var(--charcoal-2); }

/* --- 7. what you get ------------------------------------------------------ */

.gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gets li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.gets li:last-child { border-bottom: 0; }
.gets__tick {
  flex-shrink: 0;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  margin-top: 1px;
}
.gets__tick svg { width: 13px; height: 13px; }
.gets b { display: block; font-size: 0.98rem; font-weight: 600; color: var(--charcoal); }
.gets span { font-size: 0.88rem; color: var(--charcoal-2); }

@media (min-width: 820px) { .gets { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* --- 8. the honest box ---------------------------------------------------- */

.honest {
  border: 2px solid var(--rust);
  border-radius: 20px;
  background: var(--cream-2);
  padding: 32px 24px;
  text-align: center;
}
.honest h2 { color: var(--rust); font-size: clamp(1.5rem, 5.5vw, 2.1rem); }
.honest p { margin: 12px auto 0; max-width: 40ch; color: var(--charcoal-2); }
.honest__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.honest__row span {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--cream);
}
@media (min-width: 768px) { .honest { padding: 44px 32px; } }

/* --- 9. faq --------------------------------------------------------------- */

.faq { max-width: 44rem; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--charcoal);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__chev {
  flex-shrink: 0;
  color: var(--rust);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
.faq details[open] .faq__chev { transform: rotate(90deg); }
.faq__a { margin: 0 0 20px; padding-left: 24px; color: var(--charcoal-2); font-size: 0.95rem; }
/* A bare <a> inside an answer had no rule of its own, so it fell through to
   the browser default: #0000EE and a full underline. */
.faq__a a { color: var(--st-accent); text-decoration: underline; text-underline-offset: 2px; }
.faq__a a:hover { opacity: .8; }
/* Belt and braces for the whole page: an inline SVG with no width collapses to
   its container if its scoped rule ever goes missing — which is exactly what
   put 310px check marks on this page. Anything not sized by its own rule falls
   back to a sane icon size instead of filling the column. */
svg:not([width]) { width: 20px; height: 20px; }

.final { margin-top: 40px; text-align: center; }

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

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 28px 40px;
  font-size: 0.85rem;
  color: var(--charcoal-2);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.site-foot a { color: var(--charcoal-2); text-decoration: none; }
.site-foot a:hover { color: var(--navy); }

/* A sticky phone CTA: the page is long, and the button should never be more
   than a thumb away. Desktop has the buttons in flow and does not need it. */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgb(250 246 239 / 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
body { padding-bottom: 86px; }
@media (min-width: 900px) {
  .sticky-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ===== Skintonic "Why it matters" — scoped under .skt-why ===== */
.skt-why {
  --skt-cream: var(--st-bg);
  --skt-card: var(--st-surface);
  --skt-navy: #1F2A44;
  --skt-rust: #A3461F;
  --skt-body: #4A443D;
  --skt-line: #E6DED1;
  --skt-chip: #F1EBE1;
  box-sizing: border-box;
  background: var(--skt-cream);
  padding: 72px 16px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--skt-body);
  -webkit-font-smoothing: antialiased;
}
.skt-why *, .skt-why *::before, .skt-why *::after { box-sizing: border-box; }
@media (min-width: 768px) { .skt-why { padding: 120px 32px; } }

.skt-why .skt-inner { max-width: 1200px; margin: 0 auto; }

.skt-why .skt-head { max-width: 640px; }
@media (min-width: 1024px) { .skt-why .skt-head { margin: 0 auto; text-align: center; } }

.skt-why .skt-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--skt-rust);
}
.skt-why .skt-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--skt-rust); }

.skt-why .skt-title {
  margin: 14px 0 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: 34px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--skt-navy); text-wrap: balance;
}
@media (min-width: 768px) { .skt-why .skt-title { font-size: 48px; } }

.skt-why .skt-grid {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px) { .skt-why .skt-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .skt-why .skt-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; } }

.skt-why .skt-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px;
  background: var(--skt-card);
  border: 1px solid var(--skt-line);
  border-radius: 22px;
}
@media (min-width: 1024px) { .skt-why .skt-card { padding: 30px 26px 32px; gap: 18px; } }

.skt-why .skt-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--skt-chip);
}
.skt-why .skt-icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--skt-navy);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.skt-why .skt-swatches { display: flex; height: 44px; align-items: center; }
.skt-why .skt-swatches span {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--skt-card); margin-left: -8px;
}
.skt-why .skt-swatches span:first-child { margin-left: 0; }

.skt-why .skt-card h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--skt-navy);
}
.skt-why .skt-card p { margin: -6px 0 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 1024px) { .skt-why .skt-card p { margin-top: -8px; } }

/* ---------------------------------------------------------------------------
   Dark mode.

   The same switch the rest of the site uses: [data-theme='dark'] on <html>,
   set before first paint by the inline script this page now carries too. No
   media query, no second mechanism.

   Every value comes from css/tokens.css, which holds the site's existing dark
   palette. Nothing here is a new colour.

   The page's own tokens flip first, which carries the cards, type grid, honest
   box and FAQ. The per-section rules after that exist only where a token does
   two jobs at once and cannot simply be swapped — the hero's --st-navy is both
   its headline colour AND its button fill, so flipping it would have produced a
   white button with white text.
--------------------------------------------------------------------------- */
[data-theme='dark'] {
  --cream-3: var(--st-border);
  --navy: var(--st-cool);
  --navy-soft: var(--st-cool);
  --charcoal: var(--st-ink);
  --charcoal-2: var(--st-ink-dim);
  --rust: var(--st-accent);
  --rust-soft: var(--st-accent);
  --line: var(--st-border);
  --shadow: 0 0 0;
}

/* --- hero -----------------------------------------------------------------
   The hero's own dark rules now live with the hero block above. What was here
   targeted the PREVIOUS hero's sub-classes — .st-h1, .st-cta, .st-label--right
   and a --st-photo-ground for the proof photos — none of which exist in the
   carousel hero. Left in place they would have been dead weight that looked
   load-bearing. */

/* --- why it matters -------------------------------------------------------- */
[data-theme='dark'] .skt-why {
  --skt-navy: var(--st-ink);
  --skt-body: var(--st-ink-dim);
  --skt-line: var(--st-border);
  --skt-rust: var(--st-accent);
  --skt-chip: var(--st-border);
}
[data-theme='dark'] .skt-why .skt-icon svg { stroke: var(--st-cool); }

/* --- the sections below ---------------------------------------------------- */
/* .card__icon and .step__n sit on a tint of --shadow, which is black; on a dark
   surface that is invisible. */
[data-theme='dark'] .card__icon { background: var(--st-border); color: var(--st-cool); }
[data-theme='dark'] .step__n { background: var(--st-cool); color: var(--st-bg); }
[data-theme='dark'] .step__time,
[data-theme='dark'] .type__tag { background: var(--st-border); }
[data-theme='dark'] .gets__tick { background: var(--st-cool); color: var(--st-bg); }
[data-theme='dark'] .btn { background: var(--st-ink); color: var(--st-bg); }
[data-theme='dark'] .btn:hover { filter: brightness(1); background: #FFFFFF; }
[data-theme='dark'] .fam__strip { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
[data-theme='dark'] .honest__row span { background: var(--st-surface); }
[data-theme='dark'] .sticky-cta { background: rgb(var(--st-bg-rgb) / 0.94); }
[data-theme='dark'] .type__chip { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }

/* ===== Skintonic "What decides your colors" — scoped under .st-factors =====
   Rewired to the site's single switch: [data-theme='dark'] on <html>. The
   design shipped two of its own — a data-theme on the section plus a
   prefers-color-scheme block — and both are gone, because a second mechanism
   would turn this one section dark on a light page for an OS-dark visitor.
   Dark values come from css/tokens.css, not the design's own navy. */
.st-factors {
  --st-card: var(--st-surface);
  --st-line: var(--st-border);
  --st-title: var(--st-ink);
  --st-text: var(--st-ink-dim);
  --st-muted: var(--st-ink-dim);
  --st-rust: var(--st-accent);
  --st-ring: var(--st-surface);
  box-sizing: border-box;
  background: var(--st-bg);
  padding: 72px 16px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--st-text);
  -webkit-font-smoothing: antialiased;
}
[data-theme='dark'] .st-factors {
  /* The site's dark palette, not the design's own navy. */
  --st-card: var(--st-surface);
  --st-line: var(--st-border);
  --st-title: var(--st-ink);
  --st-text: var(--st-ink-dim);
  --st-muted: var(--st-ink-dim);
  --st-rust: var(--st-accent);
  --st-ring: var(--st-surface);
}
.st-factors *, .st-factors *::before, .st-factors *::after { box-sizing: border-box; }
@media (min-width: 768px) { .st-factors { padding: 120px 32px; } }

.st-factors .st-inner { max-width: 1200px; margin: 0 auto; }
.st-factors .st-head { max-width: 640px; }
@media (min-width: 1024px) { .st-factors .st-head { margin: 0 auto; text-align: center; } }

.st-factors .st-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--st-rust);
}
.st-factors .st-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st-rust); }

.st-factors .st-title {
  margin: 14px 0 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: 34px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--st-title); text-wrap: balance;
}
@media (min-width: 768px) { .st-factors .st-title { font-size: 48px; } }

.st-factors .st-sub { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--st-muted); text-wrap: pretty; }
@media (min-width: 768px) { .st-factors .st-sub { font-size: 18px; } }

.st-factors .st-grid {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px) { .st-factors .st-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .st-factors .st-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; } }

.st-factors .st-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px;
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: 22px;
}
@media (min-width: 1024px) { .st-factors .st-card { padding: 28px 24px 30px; gap: 16px; } }

.st-factors .st-card h3 {
  margin: 6px 0 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--st-title);
}
.st-factors .st-card p { margin: -6px 0 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }

/* Visuals: color only */
.st-factors .st-vis { height: 44px; display: flex; align-items: center; }
.st-factors .st-strip { width: 100%; height: 28px; border-radius: 999px; }
.st-factors .st-undertone { background: linear-gradient(90deg, #E2B46A 0%, #DDB592 50%, #E3A4A6 100%); }
.st-factors .st-depth { display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; }
.st-factors .st-depth span:nth-child(1) { background: #F4DCC8; }
.st-factors .st-depth span:nth-child(2) { background: #E6BE9C; }
.st-factors .st-depth span:nth-child(3) { background: #C9956C; }
.st-factors .st-depth span:nth-child(4) { background: #A06D48; }
.st-factors .st-depth span:nth-child(5) { background: #6F4A30; }
.st-factors .st-depth span:nth-child(6) { background: #43291B; }
.st-factors .st-strip-labels { display: flex; justify-content: space-between; margin-top: -8px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--st-muted); }

.st-factors .st-pairs { gap: 22px; }
.st-factors .st-pair { display: flex; align-items: center; gap: 8px; }
.st-factors .st-pair-dots { display: flex; }
.st-factors .st-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--st-ring); }
.st-factors .st-pair-dots .st-dot + .st-dot { margin-left: -8px; }
.st-factors .st-pair-label { font-size: 12px; font-weight: 500; color: var(--st-muted); }

.st-factors .st-trio { gap: 10px; }
.st-factors .st-trio .st-dot { width: 36px; height: 36px; border: 0; }

/* ===== Skintonic trust strip — scoped under .st-trust =====
   Rewired to the site's single switch: [data-theme='dark'] on <html>. The
   design shipped a data-theme on the section plus a prefers-color-scheme
   block; both are gone, and the dark values come from css/tokens.css.

   NOTE: this REPLACES the hero's old four-item strip, which used the same
   .st-trust class name. Those rules have been deleted, not overridden. */
.st-trust {
  --st-text: var(--st-ink);
  --st-icon: var(--st-accent);
  --st-line: var(--st-border);
  box-sizing: border-box;
  background: var(--st-bg);
  padding: 24px 16px;
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-theme='dark'] .st-trust {
  /* The site's dark palette, not the design's navy. */
  --st-text: var(--st-ink);
  --st-icon: var(--st-accent);
  --st-line: var(--st-border);
}
.st-trust *, .st-trust *::before, .st-trust *::after { box-sizing: border-box; }
@media (min-width: 768px) { .st-trust { padding: 0 32px; } }

.st-trust .st-list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 10px;
}
.st-trust .st-item { grid-column: span 2; justify-content: center; text-align: left; }
.st-trust .st-item:nth-child(7) { grid-column: 2 / span 2; }
.st-trust .st-item:nth-child(9) { grid-column: 4 / span 2; }
@media (min-width: 768px) {
  .st-trust .st-item, .st-trust .st-item:nth-child(7), .st-trust .st-item:nth-child(9) { grid-column: auto; }
}
@media (min-width: 768px) {
  .st-trust .st-list {
    display: flex; justify-content: space-between; align-items: center; gap: 0;
    padding: 22px 0; border-top: 1px solid var(--st-line);
  }
}

.st-trust .st-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--st-text);
}
@media (min-width: 768px) {
  .st-trust .st-item { white-space: nowrap; }
  .st-trust .st-sep { display: block; flex: 0 1 auto; width: 1px; height: 18px; margin: 0 16px; background: var(--st-line); }
}
.st-trust .st-sep { display: none; }
@media (min-width: 768px) { .st-trust .st-sep { display: block; } }

.st-trust .st-item svg {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: var(--st-icon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ===== Skintonic pricing — scoped under .st-price =====
   On the site's single switch: [data-theme='dark'] on <html>. The design's own
   data-theme and prefers-color-scheme block are removed, and dark values come
   from css/tokens.css.

   NOTE: the hero's "Free result · $9 once" line used to be .st-price too; it
   has been renamed .st-pricenote so this section can own the name. */
.st-price {
  --st-card: var(--st-surface);
  --st-line: var(--st-border);
  --st-title: var(--st-ink);
  --st-text: var(--st-ink-dim);
  --st-muted: var(--st-ink-dim);
  --st-rust: var(--st-accent);
  --st-chip: #F1EBE1;
  --st-btn-bg: #1F2A44;
  --st-btn-bg-hover: #2A3758;
  --st-btn-text: #FFFFFF;
  box-sizing: border-box;
  background: var(--st-bg);
  padding: 72px 16px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--st-text);
  -webkit-font-smoothing: antialiased;
}
[data-theme='dark'] .st-price {
  /* The site's dark palette from css/tokens.css, not the design's navy. */
  --st-card: var(--st-surface); --st-line: var(--st-border);
  --st-title: var(--st-ink); --st-text: var(--st-ink-dim); --st-muted: var(--st-ink-dim);
  --st-rust: var(--st-accent); --st-chip: var(--st-border);
  --st-btn-bg: var(--st-ink); --st-btn-bg-hover: #FFFFFF; --st-btn-text: var(--st-bg);
}
.st-price *, .st-price *::before, .st-price *::after { box-sizing: border-box; }
@media (min-width: 768px) { .st-price { padding: 120px 32px; } }

.st-price .st-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 768px) { .st-price .st-inner { gap: 40px; } }

/* Steps */
.st-price .st-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--st-text);
}
@media (min-width: 768px) { .st-price .st-steps { font-size: 15px; gap: 10px 14px; } }
.st-price .st-step { display: flex; align-items: center; gap: 8px; }
.st-price .st-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--st-line); background: var(--st-card);
  font-size: 12px; font-weight: 600; color: var(--st-title);
}
.st-price .st-step:last-child .st-num { background: var(--st-rust); border-color: var(--st-rust); color: #FFFFFF; }
.st-price .st-arrow { width: 16px; height: 16px; flex: none; color: var(--st-muted); }

/* Card */
.st-price .st-card {
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: 28px;
  padding: 28px 22px 24px;
  box-shadow: 0 1px 2px rgba(20,15,10,.04), 0 20px 50px rgba(20,15,10,.07);
}
@media (min-width: 768px) { .st-price .st-card { padding: 40px 44px 32px; border-radius: 32px; } }

.st-price .st-swatches { display: flex; gap: 6px; }
.st-price .st-swatches span { flex: 1; height: 10px; border-radius: 999px; }

.st-price .st-amount { margin: 28px 0 0; display: flex; align-items: baseline; gap: 10px; }
.st-price .st-amount strong {
  font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: 88px; line-height: .9; letter-spacing: -0.03em; color: var(--st-title);
}
@media (min-width: 768px) { .st-price .st-amount strong { font-size: 112px; } }
.st-price .st-amount span { font-size: 20px; font-weight: 500; color: var(--st-rust); }

.st-price .st-title {
  margin: 20px 0 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--st-title); text-wrap: balance;
}
@media (min-width: 768px) { .st-price .st-title { font-size: 30px; } }
.st-price .st-text { margin: 12px 0 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }

.st-price .st-list {
  list-style: none; margin: 24px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--st-line);
  display: grid; gap: 12px;
}
.st-price .st-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--st-text); }
.st-price .st-check {
  flex: none; margin-top: 1px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--st-chip);
}
.st-price .st-check svg { width: 12px; height: 12px; fill: none; stroke: var(--st-rust); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.st-price .st-button {
  margin-top: 28px; width: 100%; min-height: 58px; padding: 0 28px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px;
  background: var(--st-btn-bg); color: var(--st-btn-text);
  font: 600 17px/1 "DM Sans", system-ui, sans-serif; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,15,10,.15), 0 8px 20px rgba(20,15,10,.14);
  transition: background .2s ease, transform .2s ease;
}
.st-price .st-button:hover { background: var(--st-btn-bg-hover); transform: translateY(-1px); }
.st-price .st-button:active { transform: translateY(0); }
.st-price .st-button:focus-visible { outline: 3px solid var(--st-rust); outline-offset: 3px; }
.st-price .st-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.st-price .st-facts {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  font-size: 13px; line-height: 1.3; color: var(--st-muted);
}
.st-price .st-facts li { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.st-price .st-facts svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- Language switch ------------------------------------------------------
   Its own copy, because this page does not load css/styles.css — it is a
   self-contained landing page with its own token set.

   Footer only. The switch was briefly in the header too; it is two links in
   the footer rhythm now, so there is no pill to style and .site-head is back
   to the single row it was before. */
.footer-lang { display: inline-flex; align-items: center; gap: 10px; }
.footer-lang a { color: var(--charcoal-2); text-decoration: none; }
.footer-lang a:hover { color: var(--charcoal); }
.footer-lang a[aria-current] {
  color: var(--charcoal); text-decoration: underline; text-underline-offset: 4px;
}

/* ===== Free vs paid, side by side — .split ==================================
   .gets goes two-up at 820px, which is right when it is one list and wrong
   when it is two: the free items and the paid items would interleave across
   the columns. So each list is pinned to one column with .gets--one and the
   two COLUMNS are what goes side by side instead.
========================================================================== */
.split { display: grid; gap: 28px; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: 44px; } }
.split .gets--one { grid-template-columns: 1fr; }
.split__h {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rust);
}
.split__col--paid .split__h { color: var(--navy); }

/* ===== Comparison table — .vstable ==============================================
   Same component as the one in css/styles.css, repeated here because this page
   deliberately does not load that stylesheet (see the header of this file).
   Colors come from the variables above, so dark mode is inherited rather than
   written twice.

   Four columns of prose have no honest rendering at 390px: sideways scrolling
   is how a comparison stops being read at all, and narrowing the columns turns
   every cell into a one-word-per-line ribbon. So on a phone the table stops
   being a grid. Each ROW becomes its own small card with the three options
   stacked inside it, labelled from data-opt. It still reads as a comparison
   because the three values stay adjacent — just vertically.
========================================================================== */
.vstable { width: 100%; margin: 24px 0 18px; border-collapse: collapse; font-size: 0.86rem; }
.vstable caption { text-align: left; font-size: 0.78rem; color: var(--charcoal-2); padding-bottom: 12px; }
.vstable th, .vstable td { text-align: left; padding: 12px 13px; vertical-align: top; border-top: 1px solid var(--line); }
.vstable thead th { border-top: 0; color: var(--charcoal); font-weight: 600; font-size: 0.8rem; }
.vstable tbody th { color: var(--charcoal-2); font-weight: 600; }
.vstable td { color: var(--charcoal-2); line-height: 1.5; }
.vstable .vstable__ours { color: var(--charcoal); background: var(--cream-2); }
.vstable-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 641px) {
  .vstable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vstable tbody th { white-space: nowrap; }
}
@media (max-width: 640px) {
  .vstable, .vstable tbody, .vstable tr, .vstable td { display: block; width: 100%; }
  .vstable thead { display: none; }
  /* A caption inside a display:block table is laid out as a narrow column and
     comes out one word per line. */
  .vstable caption { display: block; width: 100%; padding-bottom: 14px; }
  .vstable tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 15px 5px;
    margin-bottom: 11px;
    background: var(--cream);
  }
  .vstable tbody th {
    display: block; width: 100%;
    border: 0; padding: 0 0 9px;
    color: var(--charcoal); font-weight: 700; font-size: 0.92rem;
  }
  .vstable td { border: 0; padding: 0 0 11px; font-size: 0.84rem; }
  .vstable .vstable__ours { background: none; }
  .vstable td::before {
    content: attr(data-opt);
    display: block;
    font-size: 0.68rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--rust); margin-bottom: 3px;
  }
}