/* Tuskwood Aquascape Studio landing page.
   Everything is scoped under .tw-sl so it cannot restyle the rest of the storefront.
   Mechanism (sticky stages, cues, pan) comes from the scoped scrollcraft engine CSS. */

.tw-sl {
  --sc-canvas: #f6f6f2;
  --sc-surface: #ece8df;
  --sc-ink: #232521;
  --sc-ink-soft: #57554d;
  --sc-accent: #245f43;
  --sc-accent-ink: #f6f6f2;
  --sc-font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: Inter, "Helvetica Neue", Arial, sans-serif;
  --sc-shadow-color: 40 12% 30%;
  --sc-r-sm: 4px; --sc-r-md: 4px; --sc-r-lg: 4px;

  --tw-water: #15342a;
  --tw-water-ink: #eef1ea;
  --tw-water-soft: #b9c7bd;
  --tw-glass: #9fb9b3;
  --tw-sand: #d9ccae;
  --tw-top: 0px; /* sticky theme header height, set by page.js */

  position: relative;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.tw-sl * { box-sizing: border-box; }
.tw-sl :is(h1, h2, h3, p, figure, dl, dd, ul, ol, fieldset) { margin: 0; }
.tw-sl :is(ul, ol) { padding: 0; list-style: none; }
.tw-sl img { height: auto; }

/* Pinned stages sit below the storefront's sticky header, not under it. */
.tw-sl .sc-stage { top: var(--tw-top); height: calc(100svh - var(--tw-top)); }

/* ------------------------------------------------------------ type ---- */
.tw-sl-h1 {
  font-family: var(--sc-font-display);
  font-weight: 650;
  font-size: clamp(2.5rem, 1.1rem + 4.6vw, 6.1rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-wrap: balance;
  max-width: 14ch;
}
.tw-sl-h2 {
  font-family: var(--sc-font-display);
  font-weight: 650;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tw-sl-h3 {
  font-family: var(--sc-font-display);
  font-weight: 650;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.tw-sl-lede {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 36ch;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.tw-sl-body { max-width: 58ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.tw-sl-small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 60ch; }
.tw-sl-note {
  font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft);
  padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); max-width: 52ch;
}
.tw-sl-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------ links + CTA --- */
.tw-sl a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.tw-sl :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
.tw-sl-cta {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 3.1rem; padding: 0.85rem 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink) !important;
  border-radius: 4px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.tw-sl a.tw-sl-cta { text-decoration: none !important; }
.tw-sl-cta:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .tw-sl-cta:hover { background: #1c4d36; } }
.tw-sl-link {
  display: inline-block; font-weight: 600; color: var(--sc-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: text-decoration-thickness 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .tw-sl-link:hover { text-decoration-thickness: 2px; } }

.tw-sl-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.tw-sl-chapter { padding-block: clamp(4.5rem, 3rem + 7vw, 10rem); }

/* ------------------------------------------------------------ folio ---- */
.tw-sl-folio {
  position: fixed; z-index: 30; left: clamp(0.6rem, 1.2vw, 1.4rem); top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  display: flex; gap: 0.5em; align-items: center;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--sc-ink-soft); opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.tw-sl-folio.is-on { opacity: 1; }
.tw-sl-folio[data-tone="dark"] { color: var(--tw-water-soft); }
.tw-sl-folio__sep { opacity: 0.6; }
@media (max-width: 1199px) { .tw-sl-folio { display: none; } }

/* ======================================================= TITLE PAGE ==== */
.tw-sl-title { background: var(--sc-canvas); --p: var(--sc-p, 0); --q: calc(1 - var(--p)); --mx: 0; --my: 0; }
.tw-sl-title__stage { position: relative; overflow: clip; }

.tw-sl-title__light {
  position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 90%;
  background: radial-gradient(closest-side, rgb(255 255 250 / 0.95), rgb(246 246 242 / 0) 70%),
              radial-gradient(60% 50% at 70% 60%, rgb(159 185 179 / 0.18), transparent 70%);
  transform: translate3d(calc(var(--p) * -6vw), calc(var(--p) * 8vh), 0);
  pointer-events: none;
}

/* Far plane: the glass tank, a thin line drawing that comes forward as the root arrives. */
.tw-sl-title__tank {
  position: absolute; right: 5vw; bottom: 6vh; width: 50vw; height: auto;
  max-width: none; overflow: visible;
  opacity: calc(0.38 + var(--p) * 0.62);
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0) scale(calc(0.93 + var(--p) * 0.07));
  transform-origin: 50% 100%;
}
.tw-sl-tank__back { fill: rgb(234 244 242 / 0.35); stroke: var(--tw-glass); stroke-width: 1.2; opacity: 0.55; }
.tw-sl-tank__edge { fill: none; stroke: var(--tw-glass); stroke-width: 1.2; opacity: 0.6; }
.tw-sl-tank__front { fill: none; stroke: var(--tw-glass); stroke-width: 2.4; }
.tw-sl-tank__sand { fill: var(--tw-sand); opacity: calc(0.25 + var(--p) * 0.6); }
.tw-sl-tank__water {
  fill: none; stroke: #7fb3ae; stroke-width: 2;
  stroke-dasharray: 780; stroke-dashoffset: calc(780 - var(--p) * 780);
}

/* Mid plane: the masthead. Copy never moves. */
.tw-sl-title__copy {
  position: absolute; z-index: 2; left: var(--sc-gutter); top: clamp(1.5rem, 7vh, 5rem);
  display: grid; gap: clamp(1rem, 2.4vh, 1.6rem); justify-items: start;
  max-width: min(62rem, 64vw);
}

/* Subject: the real root. Its resting place is inside the tank on the sand;
   at p = 0 it is lifted out of the tank and lies across the end of the masthead. */
.tw-sl-title__root {
  position: absolute; z-index: 3;
  width: 26.5vw; max-width: none;
  left: 56.8vw; bottom: calc(6vh + 3.6vw);
  transform-origin: 50% 100%;
  --dx: 1.5vw; --dy: -31vh; --rot: -11deg; --sc: 0.42;
  transform:
    translate3d(calc(var(--q) * var(--dx) + var(--mx) * 14px), calc(var(--q) * var(--dy) + var(--my) * 9px), 0)
    rotate(calc(var(--q) * var(--rot)))
    scale(calc(1 + var(--q) * var(--sc)));
  filter: drop-shadow(0 calc(10px + var(--q) * 26px) calc(14px + var(--q) * 22px) rgb(60 48 30 / calc(0.16 + var(--p) * 0.1)));
  will-change: transform;
}

/* Near plane: a second real root, out of focus, passing the viewer faster than anything else. */
.tw-sl-title__near {
  position: absolute; z-index: 4; right: -9vw; bottom: -14vh; width: 34vw; max-width: none;
  filter: blur(7px); opacity: 0.88;
  transform: translate3d(calc(var(--p) * 9vw + var(--mx) * 30px), calc(var(--p) * -58vh + var(--my) * 18px), 0) rotate(-14deg);
  will-change: transform; pointer-events: none;
}

@media (max-width: 860px) {
  .tw-sl-title__copy { right: var(--sc-gutter); max-width: none; top: clamp(1.25rem, 4vh, 2.5rem); }
  .tw-sl-h1 { font-size: clamp(2.35rem, 1.2rem + 6.2vw, 3.4rem); }
  .tw-sl-title__tank { right: 4vw; left: 4vw; width: 92vw; bottom: 4vh; }
  .tw-sl-title__root { width: 49vw; left: 25.5vw; bottom: calc(4vh + 6.6vw); --dx: 6vw; --dy: -14vh; --rot: -9deg; --sc: 0.2; }
  .tw-sl-title__near { width: 56vw; right: -22vw; bottom: -8vh; }
}

/* ======================================================= CH: ROTEN ===== */
.tw-sl-root { background: var(--sc-surface); }
.tw-sl-root__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.tw-sl-root__figure { position: relative; padding: clamp(1rem, 4vw, 4rem) clamp(0.5rem, 3vw, 3rem) clamp(2.5rem, 6vw, 5rem); }
.tw-sl-root__figure::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: clamp(1.4rem, 3.4vw, 3rem); height: 22px;
  background: radial-gradient(closest-side, rgb(70 55 35 / 0.22), transparent); z-index: 0;
}
.tw-sl-root__figure img { position: relative; z-index: 1; width: 100%; }
.tw-sl-root__text { display: grid; gap: var(--sc-5); justify-items: start; }
.tw-sl-label {
  display: grid; width: 100%; max-width: 26rem; margin-top: var(--sc-3);
  border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm);
}
.tw-sl-label > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--sc-4); padding-block: 0.6rem; border-bottom: 1px solid var(--sc-hairline); }
.tw-sl-label dt { color: var(--sc-ink-soft); }
.tw-sl-label dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.tw-sl-label__note { grid-template-columns: 1fr !important; }
.tw-sl-label__note dd { color: var(--sc-accent); font-weight: 600; }
.tw-sl-label--out .tw-sl-label__note dd { color: #8a3b1e; }
@media (max-width: 860px) { .tw-sl-root__grid { grid-template-columns: 1fr; } }

/* ================================================== CH: DITT AKVARIUM == */
.tw-sl-tank { background: var(--sc-canvas); }
.tw-sl-tank__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.tw-sl-tank__text { display: grid; gap: var(--sc-5); align-content: start; }
.tw-sl-field { border: 0; padding: 0; display: grid; gap: var(--sc-3); min-width: 0; }
.tw-sl-field legend { padding: 0; margin-bottom: var(--sc-3); font-size: var(--sc-t-sm); font-weight: 600; }
.tw-sl-chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.tw-sl-chip {
  min-height: 2.75rem; padding: 0.55rem 0.95rem; border-radius: 4px; cursor: pointer;
  background: transparent; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink);
  font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; font-weight: 500;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
.tw-sl-chip:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .tw-sl-chip:hover { border-color: var(--sc-accent); } }
.tw-sl-chip[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.tw-sl-select { display: grid; gap: var(--sc-1); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 20rem; }
.tw-sl-select select {
  min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 4px; border: 1px solid var(--sc-hairline-strong);
  background: #fff; color: var(--sc-ink); font-variant-numeric: tabular-nums;
}
.tw-sl-tank__figure { display: grid; gap: var(--sc-4); }
.tw-sl-tank__svg { width: 100%; height: auto; overflow: visible; }
.tw-sl-tank__svg .t-back { fill: rgb(234 244 242 / 0.45); stroke: var(--tw-glass); stroke-width: 1.5; }
.tw-sl-tank__svg .t-edge { stroke: var(--tw-glass); stroke-width: 1.5; fill: none; }
.tw-sl-tank__svg .t-water { stroke: #7fb3ae; stroke-width: 2; fill: rgb(214 234 230 / 0.35); }
.tw-sl-tank__svg .t-sand { fill: var(--tw-sand); }
.tw-sl-tank__svg .t-front { fill: none; stroke: #86a8a1; stroke-width: 3; }
.tw-sl-tank__svg .t-dim { font: 600 20px/1 var(--sc-font-text); fill: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.tw-sl-tank__svg .t-tick { stroke: var(--sc-ink-soft); stroke-width: 1; opacity: 0.6; }
.tw-sl-tank__svg [data-tank-root] { transition: opacity 200ms var(--sc-ease-out); }
.tw-sl-tank__caption { display: grid; gap: var(--sc-1); }
.tw-sl-tank__caption [data-tank-line] { font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tw-sl-tank__caption [data-tank-line].is-warn { color: #8a3b1e; }
@media (max-width: 860px) { .tw-sl-tank__grid { grid-template-columns: 1fr; } .tw-sl-tank__figure { order: -1; } }

/* ============================================ HUSH + PEAK (water) ====== */
.tw-sl-hush, .tw-sl-peak { background: var(--tw-water); color: var(--tw-water-ink); }
.tw-sl-hush { min-height: 64svh; display: grid; align-items: center; padding: 12vh var(--sc-gutter); }
.tw-sl-hush__line {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.8rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
  max-width: 80rem; width: 100%; margin-inline: auto; color: var(--tw-water-ink);
}

.tw-sl-peak {
  --p: var(--sc-p, 0);
  /* Water level: nothing for the first ~quarter (the bare root holds), then it rises over half the act, then the result holds. */
  --w: clamp(0, calc((var(--p) - 0.24) * 1.9), 1);
}
.tw-sl-peak__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
  gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; align-content: center;
  padding: clamp(1rem, 4vh, 3rem) var(--sc-gutter);
}
.tw-sl-peak__figure { display: grid; gap: var(--sc-3); min-width: 0; }
.tw-sl-peak__frame {
  position: relative; aspect-ratio: 1600 / 894; width: 100%;
  max-height: calc(100svh - var(--tw-top) - 9rem); margin-inline: auto;
  border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
}
.tw-sl-peak__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.tw-sl-peak__after { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--w)) * 100%) 0 0 0); }
.tw-sl-peak__waterline {
  position: absolute; left: 0; right: 0; height: 3px; top: calc((1 - var(--w)) * 100% - 1px);
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.85) 12%, rgb(255 255 255 / 0.85) 88%, rgb(255 255 255 / 0));
  box-shadow: 0 0 18px 4px rgb(210 240 235 / 0.45);
  opacity: clamp(0, calc(min(var(--w), 1 - var(--w)) * 14), 1);
  pointer-events: none;
}
.tw-sl-peak__source { font-size: var(--sc-t-sm); color: var(--tw-water-soft); }
.tw-sl-peak__steps { display: grid; gap: var(--sc-6); counter-reset: s; }
.tw-sl-peak__steps li { font-size: var(--sc-t-base); line-height: 1.55; color: var(--tw-water-soft); padding-left: 1.1rem; border-left: 2px solid rgb(238 241 234 / 0.18); }
.tw-sl-peak__steps strong { display: block; color: var(--tw-water-ink); font-size: var(--sc-t-lg); line-height: 1.3; margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.tw-sl-peak__steps li[data-step="1"] { opacity: calc(1 - var(--w) * 0.55); border-left-color: rgb(238 241 234 / calc(0.8 - var(--w) * 0.62)); }
.tw-sl-peak__steps li[data-step="2"] { opacity: calc(0.45 + var(--w) * 0.55); border-left-color: rgb(238 241 234 / calc(0.18 + var(--w) * 0.62)); }
.tw-sl-peak__yours { grid-column: 1 / -1; font-size: var(--sc-t-sm); color: var(--tw-water-soft); max-width: 70ch; }
.tw-sl .tw-sl-peak :focus-visible { outline-color: var(--tw-water-ink); }
@media (max-width: 860px) {
  .tw-sl-peak__stage { grid-template-columns: 1fr; align-content: center; gap: var(--sc-5); }
  .tw-sl-peak__frame { max-height: none; }
  .tw-sl-peak__steps { gap: var(--sc-4); }
  .tw-sl-peak__steps li { font-size: var(--sc-t-sm); }
  .tw-sl-peak__steps strong { font-size: var(--sc-t-base); }
}

/* ======================================================= CH: STILAR ==== */
.tw-sl-styles { background: var(--sc-canvas); }
.tw-sl-styles__stage { display: flex; align-items: center; }
.tw-sl-rail { gap: clamp(1.25rem, 2.4vw, 2.5rem); padding-inline: var(--sc-gutter); align-items: start; }
.tw-sl-rail > * { flex: 0 0 auto; }
.tw-sl-rail__lead { width: clamp(17rem, 28vw, 25rem); display: grid; gap: var(--sc-4); align-self: center; padding-right: var(--sc-4); }
.tw-sl-style { width: clamp(17rem, 34vw, 31rem); display: grid; gap: var(--sc-2); }
.tw-sl-style img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; background: #e6e8e8; box-shadow: var(--sc-e1); }
.tw-sl-style h3, .tw-sl-layouts h3 { font-size: var(--sc-t-lg); font-weight: 650; letter-spacing: -0.015em; margin-top: var(--sc-2); }
.tw-sl-style p { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 36ch; }
.tw-sl-layouts { width: clamp(18rem, 36vw, 32rem); display: grid; gap: var(--sc-3); align-self: center; }
.tw-sl-layouts ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); }
.tw-sl-layouts li { display: grid; gap: var(--sc-1); font-size: var(--sc-t-sm); }
.tw-sl-layouts img { width: 100%; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .tw-sl-styles { --p: var(--sc-p, 0); }
  .tw-sl-style:nth-child(3) { opacity: clamp(0.55, calc(0.55 + var(--p) * 6), 1); }
  .tw-sl-style:nth-child(4) { opacity: clamp(0.55, calc(0.55 + (var(--p) - 0.12) * 5), 1); }
  .tw-sl-style:nth-child(5) { opacity: clamp(0.55, calc(0.55 + (var(--p) - 0.28) * 5), 1); }
  .tw-sl-style:nth-child(6) { opacity: clamp(0.55, calc(0.55 + (var(--p) - 0.44) * 5), 1); }
  .tw-sl-layouts { opacity: clamp(0.55, calc(0.55 + (var(--p) - 0.6) * 5), 1); }
}

/* ============================================== CH: TILL VARUKORGEN ==== */
.tw-sl-cart { background: var(--sc-surface); }
.tw-sl-cart__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.tw-sl-cart__text { display: grid; gap: var(--sc-5); position: sticky; top: calc(var(--tw-top) + 3rem); }
.tw-sl-list { display: grid; gap: var(--sc-4); }
.tw-sl-list__head { font-size: var(--sc-t-sm); font-weight: 600; }
.tw-sl-list__rows { border-top: 1px solid var(--sc-hairline-strong); }
.tw-sl-list__rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) 10rem 6.5rem; gap: var(--sc-4); align-items: baseline;
  padding-block: 0.8rem; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm);
}
.tw-sl-list__rows li > :nth-child(2) { color: var(--sc-ink-soft); }
.tw-sl-list__rows li > :nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tw-sl-list__rows a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--sc-hairline-strong); }
@media (hover: hover) and (pointer: fine) { .tw-sl-list__rows a:hover { text-decoration-color: currentColor; } }
.tw-sl-row--suggest { color: var(--sc-ink-soft); }
.tw-sl-row--suggest > :nth-child(3) { font-weight: 500 !important; }
.tw-sl-row--out > :nth-child(3) { color: #8a3b1e; }
@media (max-width: 860px) {
  .tw-sl-cart__grid { grid-template-columns: 1fr; }
  .tw-sl-cart__text { position: static; }
  .tw-sl-list__rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .tw-sl-list__rows li > :nth-child(2) { grid-row: 2; font-size: var(--sc-t-xs); }
  .tw-sl-list__rows li > :nth-child(3) { grid-row: 1 / span 2; grid-column: 2; }
}

/* ==================================================== FRÅGOR OCH SVAR == */
.tw-sl-faq { background: var(--sc-canvas); }
.tw-sl-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.tw-sl-faq__list { border-top: 1px solid var(--sc-hairline-strong); }
.tw-sl-faq__list > div { padding-block: var(--sc-5); border-bottom: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-2); }
.tw-sl-faq__list dt { font-weight: 650; font-size: var(--sc-t-lg); letter-spacing: -0.01em; line-height: 1.3; }
.tw-sl-faq__list dd { margin: 0; color: var(--sc-ink-soft); max-width: 60ch; }
@media (max-width: 860px) { .tw-sl-faq__grid { grid-template-columns: 1fr; } }

/* ========================================================= COLOPHON ==== */
.tw-sl-colophon { background: var(--sc-canvas); padding-block: clamp(5rem, 4rem + 8vw, 12rem) clamp(4rem, 3rem + 5vw, 8rem); border-top: 1px solid var(--sc-hairline); }
.tw-sl-colophon__inner { display: grid; gap: var(--sc-4); max-width: 56rem; }
.tw-sl-colophon__line { margin-block: var(--sc-5) var(--sc-3) !important; }
.tw-sl-bigl {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4.2rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--sc-accent) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em;
  transition: text-decoration-thickness 160ms var(--sc-ease-out);
}
.tw-sl-bigl span { display: inline-block; transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tw-sl-bigl:hover { text-decoration-thickness: 4px; }
  .tw-sl-bigl:hover span { transform: translateX(0.18em); }
}

/* ==================================================== REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .tw-sl-title { --p: 1; --q: 0; }
  .tw-sl .tw-sl-title__near { display: none; }
  .tw-sl-peak { --w: 1; }
  .tw-sl-peak__waterline { display: none; }
  .tw-sl-peak__steps li { opacity: 1 !important; }
}