/* ==========================================================================
   Video Chats — design system
   Palette: Peach Cloud · Direction: Paper Layers · Type: Tektur + Fira Sans
   Edges: friendly layered (24/16/12 + two-layer shadow)
   Accent strategy: tinted section surfaces
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --bg:       #FBF5F0;
  --surface:  #FFFDFB;
  --text:     #33231B;
  --muted:    #6E5A4D;
  /* Peach Cloud's accent, walked one step darker (bank value #B05C3E).
     The bank only guarantees white-on-accent >= 4.5; as *text* the original
     measured 4.37 on --bg and 4.03 on --tint, which fails AA for body links
     and the comparison headings. #A04F34 is the nearest shade of the same
     clay hue that clears 4.5 against bg, surface and both tints, and it
     lifts white-on-accent to 5.73. */
  --accent:   #A04F34;
  --accent2:  #F2C4A8;
  --on-accent:#FFFFFF;

  --tint:     #F6EBE2;
  --tint-2:   #F1E2D6;
  --hair:     rgba(51, 35, 27, .12);
  --hair-soft:rgba(51, 35, 27, .07);
  --sheet:    #F3E4D9;

  --grad: linear-gradient(135deg, #FDF1E7, #F9E0CD 50%, #F3CDB2);

  /* Edges — friendly layered */
  --r-card: 24px;
  --r-btn:  16px;
  --r-chip: 12px;
  --shadow:      0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-lift: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 40px rgba(16, 24, 40, .11);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type scale, ratio 1.25 */
  --fs-1: .8rem;
  --fs-0: 1rem;
  --fs-1u: 1.25rem;
  --fs-2u: 1.5625rem;

  --font-head: "Tektur", system-ui, sans-serif;
  --font-body: "Fira Sans", system-ui, -apple-system, sans-serif;

  --col: 44rem;
  --header-h: 76px;
}

[data-theme="dark"] {
  --bg:       #1E1611;
  --surface:  #281D16;
  --text:     #F2E7DF;
  --muted:    #C4AB9B;
  --accent:   #D9835C;
  --accent2:  #E0A983;
  --on-accent:#20130C;

  --tint:     #2E2119;
  --tint-2:   #35271D;
  --hair:     rgba(242, 231, 223, .16);
  --hair-soft:rgba(242, 231, 223, .09);
  --sheet:    #3A2A20;

  --grad: linear-gradient(135deg, #2C1F17, #35251B 50%, #402C21);
  --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .42);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  /* margin-block only — margin shorthand would zero margin-inline and break
     the centred reading column. */
}

h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.15vw, 1.9rem); }
h3 { font-size: var(--fs-1u); font-weight: 500; letter-spacing: 0; }

a { color: var(--accent); text-underline-offset: .18em; }

::selection { background: var(--accent2); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* F-12 — custom scrollbar */
* { scrollbar-color: var(--accent2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--accent2);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.stb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--surface);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-chip);
}
.stb-skip:focus { left: var(--space-4); top: var(--space-4); }

/* --------------------------------------------------------------------------
   3. F-2 — scroll progress
   -------------------------------------------------------------------------- */

.stb-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 40;
  pointer-events: none;
  background: transparent;
}

.stb-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   4. Header — floating pill
   -------------------------------------------------------------------------- */

.stb-header {
  position: sticky;
  top: 12px;
  z-index: 30;
  padding: 12px clamp(12px, 4vw, 32px) 0;
}

.stb-header__pill {
  max-width: 1140px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--hair-soft);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

@supports not (backdrop-filter: blur(2px)) {
  .stb-header__pill { background: var(--surface); }
}

/* Brand — one icon, one wordmark, never repeated */
.stb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}

.stb-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.stb-brand__mark svg { width: 32px; height: 32px; }

.stb-brand__sheet { fill: var(--accent2); }
.stb-brand__face  { fill: var(--accent); }
.stb-brand__lens  { fill: var(--surface); }
.stb-brand__wing  { fill: var(--accent); }

.stb-brand__word {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(.95rem, .82rem + .5vw, 1.15rem);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.stb-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   5. Icon-only buttons
   Fixed box + inline-grid. Never let an svg inherit max-width:100% here — on
   iOS Safari a shrink-to-fit flex button clamps its only svg child to 0 width
   and leaves a tall empty pill.
   -------------------------------------------------------------------------- */

.stb-icobtn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 999px;
  color: var(--text);
  transition: background-color .18s ease;
}
.stb-icobtn:hover { background: var(--tint); }
.stb-icobtn svg { width: 20px; height: 20px; }

.stb-theme__sun,
.stb-theme__moon {
  grid-area: 1 / 1;
  transition: opacity .22s ease, transform .32s ease;
}
[data-theme="light"] .stb-theme__moon,
:root:not([data-theme="dark"]) .stb-theme__moon { opacity: 0; transform: rotate(-45deg) scale(.7); }
[data-theme="dark"] .stb-theme__sun { opacity: 0; transform: rotate(45deg) scale(.7); }

.stb-burger__box {
  display: grid;
  gap: 5px;
  width: 18px;
}
.stb-burger__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .26s ease;
}
.stb-burger[aria-expanded="true"] .stb-burger__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.stb-burger[aria-expanded="true"] .stb-burger__bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Language switcher
   -------------------------------------------------------------------------- */

.stb-lang { position: relative; }

.stb-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 44px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  font-size: .92rem;
  color: var(--text);
  transition: background-color .18s ease;
}
.stb-lang__btn:hover { background: var(--tint); }
.stb-lang__chev { width: 16px; height: 16px; transition: transform .22s ease; }
.stb-lang__btn[aria-expanded="true"] .stb-lang__chev { transform: rotate(180deg); }

.stb-lang__pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-lift);
  z-index: 31;
}
.stb-lang__pop[hidden] { display: none; }

.stb-lang__list { list-style: none; margin: 0; padding: 0; }

.stb-lang__list li a,
.stb-lang__list li > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--r-chip);
  text-decoration: none;
  color: var(--text);
  font-size: .95rem;
}
.stb-lang__list li a:hover { background: var(--tint); }
.stb-lang__list img { width: 18px; height: auto; border-radius: 2px; }

/* TranslatePress shortcode fallback */
.trp-language-switcher-container { padding: var(--space-2); }
.trp-language-switcher-container select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
  background: var(--surface);
}

/* Hide only the DESKTOP dropdown on small screens — scoped to the header so
   the identical markup inside the sheet stays visible. */
@media (max-width: 860px) {
  .stb-header__actions .stb-lang { display: none; }
}

/* --------------------------------------------------------------------------
   7. Sheet + scrim
   -------------------------------------------------------------------------- */

.stb-scrim {
  position: fixed;
  inset: 0;
  z-index: 41;
  background: rgba(30, 22, 17, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .26s ease;
}
.stb-scrim[hidden] { display: none; }
.stb-scrim.is-open { opacity: 1; }

.stb-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 42;
  max-height: 82vh;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-lift);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.stb-sheet[hidden] { display: none; }
.stb-sheet.is-open { transform: translateY(0); }

.stb-sheet__grip {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--space-4);
  border-radius: 999px;
  background: var(--hair);
}

.stb-sheet__x {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.stb-sheet__label {
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: var(--space-4) var(--space-2);
}

.stb-sheet__links { list-style: none; margin: 0; padding: 0; }
.stb-sheet__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--r-chip);
  text-decoration: none;
  color: var(--text);
}
.stb-sheet__links a:hover { background: var(--tint); }

@media (min-width: 861px) {
  .stb-burger { display: none; }
}

/* --------------------------------------------------------------------------
   8. Entry + the reading column
   Every block shares one centred 44rem column. Only the gate opts out (it is
   a full card with its own wider, still-centred max-width).
   -------------------------------------------------------------------------- */

.stb-main { padding-block: var(--space-6) var(--space-8); }

.stb-entry {
  padding-inline: clamp(16px, 4vw, 32px);
}

.stb-entry > :where(*:not(.stb-gate)) {
  max-width: var(--col);
  margin-inline: auto;
}

.stb-entry h1 { margin-block: var(--space-7) var(--space-5); scroll-margin-top: calc(var(--header-h) + 16px); }
.stb-entry h2 { margin-block: var(--space-7) var(--space-4); scroll-margin-top: calc(var(--header-h) + 16px); }
.stb-entry h3 { margin-block: 0 var(--space-2); }
.stb-entry p  { margin-block: 0 var(--space-4); color: var(--text); }

.stb-entry > p:last-child { margin-block-end: 0; }

/* Body links are accented and underlined — but a link that carries a class is
   a button, and must keep its own colour and lose the underline gradient. */
.stb-entry a:not([class]) {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .28s ease;
}
.stb-entry a:not([class]):hover { background-size: 100% 1.5px; }

/* Gutenberg lists carry .wp-block-list — ul:not([class]) never catches them. */
.stb-entry .wp-block-list {
  margin-block: 0 var(--space-5);
  padding-left: var(--space-5);
  list-style: none;
}
.stb-entry .wp-block-list li {
  position: relative;
  margin-block-end: var(--space-3);
  padding-left: var(--space-4);
}
.stb-entry .wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent2);
  transform: rotate(45deg);
}
.stb-entry .wp-block-list strong { color: var(--text); font-weight: 500; }

/* --------------------------------------------------------------------------
   9. Paper-layer surface (the direction)
   A card is a sheet with a second sheet settled under it.
   -------------------------------------------------------------------------- */

/* The back sheet and the front sheet are both painted by pseudo-elements and
   the content is lifted above them. Doing it this way (rather than a
   negative z-index behind the element's own background) keeps the effect
   correct on cards that create a stacking context — e.g. the tilted ones. */
.stb-paper {
  position: relative;
  background: transparent;
}
.stb-paper::before,
.stb-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}
.stb-paper::before {
  z-index: 0;
  translate: 6px 6px;
  rotate: .6deg;
  background: var(--sheet);
}
.stb-paper::after {
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  box-shadow: var(--shadow);
}
.stb-paper > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   10. Age gate — boarding pass
   -------------------------------------------------------------------------- */

.stb-gate {
  max-width: 60rem;
  margin-inline: auto;
  margin-block-end: var(--space-7);
  perspective: 900px;
}

.stb-gate__ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  isolation: isolate;
}

/* The moving dashes are the one animated decoration on this screen.
   Painted as an overlay ring (masked to the 1.5px border) rather than a
   negative-z-index layer, which the ticket's own panels would cover. */
.stb-gate__ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: var(--r-card);
  padding: 1.5px;
  background: repeating-linear-gradient(
    45deg,
    var(--accent2) 0 10px,
    transparent 10px 20px
  );
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: stb-dash 20s linear infinite;
}

@keyframes stb-dash {
  to { background-position: 200% 0; }
}

.stb-gate__main {
  background: var(--grad);
  padding: clamp(var(--space-5), 5vw, var(--space-7));
}

.stb-gate__kicker {
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--space-3);
}

.stb-gate__q {
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2rem);
  margin-block-end: var(--space-3);
  color: var(--text);
}

.stb-gate__note {
  color: var(--muted);
  margin-block-end: var(--space-5);
  max-width: 34rem;
}

.stb-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  background-image: none;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stb-gate__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.stb-gate__alt {
  display: inline-block;
  margin-block-start: var(--space-4);
  margin-inline-start: var(--space-4);
  color: var(--muted);
  font-size: .92rem;
  text-underline-offset: .2em;
}

/* the stub */
.stb-gate__stub {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--tint);
  border-top: 2px dashed var(--hair);
}

/* perforation cut-outs */
.stb-gate__stub::before,
.stb-gate__stub::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg);
  top: -10px;
}
.stb-gate__stub::before { left: -10px; }
.stb-gate__stub::after  { right: -10px; }

.stb-gate__stamp {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 2px dashed var(--accent);
  border-radius: var(--r-btn);
  rotate: -6deg;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
}

.stb-gate__stubword {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 768px) {
  .stb-gate__ticket { grid-template-columns: 1fr 216px; }

  .stb-gate__stub {
    border-top: 0;
    border-left: 2px dashed var(--hair);
  }
  .stb-gate__stub::before,
  .stb-gate__stub::after {
    top: auto;
    left: -10px;
    right: auto;
  }
  .stb-gate__stub::before { top: -10px; }
  .stb-gate__stub::after  { bottom: -10px; }
}

/* --------------------------------------------------------------------------
   11. Illustration
   -------------------------------------------------------------------------- */

.stb-illus-wrap {
  margin-block: var(--space-6);
  padding: var(--space-4);
  background: var(--tint);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-card);
}

.stb-illus { width: 100%; height: auto; }

.stb-illus__sheet { fill: var(--surface); stroke: var(--hair-soft); stroke-width: 1.5; }
.stb-illus__sheet--back { fill: var(--sheet); stroke: none; }
.stb-illus__dot   { fill: var(--accent); }
.stb-illus__rule  { fill: var(--hair-soft); }
.stb-illus__bar   { fill: var(--accent2); }
.stb-illus__bar--long { fill: var(--accent); }
.stb-illus__base  { fill: var(--hair); }
.stb-illus__tagbox { fill: var(--surface); stroke: var(--hair); stroke-width: 1.2; }
.stb-illus__live   { fill: var(--accent); }
.stb-illus__tagline { fill: var(--muted); }

/* --------------------------------------------------------------------------
   12. Quote callout
   -------------------------------------------------------------------------- */

.stb-entry .wp-block-quote {
  position: relative;
  margin-block: var(--space-7);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--tint-2);
  border: 0;
  border-radius: var(--r-card);
  rotate: -.4deg;
}
.stb-entry .wp-block-quote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: var(--space-4);
  font-family: var(--font-head);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent2);
}
.stb-entry .wp-block-quote p {
  position: relative;
  font-size: var(--fs-1u);
  line-height: 1.5;
  margin: 0;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   13. Feature cards (+ F-7 hover tilt)
   -------------------------------------------------------------------------- */

.stb-cards {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5) var(--space-6);
}

@media (min-width: 640px) {
  .stb-cards { grid-template-columns: repeat(3, 1fr); }
}

.stb-card {
  position: relative;
  padding: var(--space-5);
  background: transparent;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .28s ease;
}
.stb-card::before,
.stb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}
.stb-card::before {
  z-index: 0;
  translate: 5px 5px;
  rotate: .5deg;
  background: var(--sheet);
}
.stb-card::after {
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  box-shadow: var(--shadow);
  transition: box-shadow .22s ease;
}
.stb-card > * { position: relative; z-index: 2; }
.stb-card:nth-child(2n)::before { rotate: -.5deg; }
.stb-card:hover::after { box-shadow: var(--shadow-lift); }

.stb-card__ico {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block-end: var(--space-3);
  border-radius: var(--r-chip);
  background: var(--tint);
  color: var(--accent);
}
.stb-card__ico svg { width: 20px; height: 20px; }

.stb-card__h { margin-block-end: var(--space-2); }
.stb-card p { font-size: .95rem; color: var(--muted); margin: 0; }

@media (hover: none) {
  .stb-card { transform: none; }
}

/* --------------------------------------------------------------------------
   14. Comparison
   -------------------------------------------------------------------------- */

.stb-vs {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5) var(--space-6);
}

@media (min-width: 640px) {
  .stb-vs { grid-template-columns: 1fr 1fr; }
}

.stb-vs__card {
  position: relative;
  padding: var(--space-5);
  background: transparent;
}
.stb-vs__card::before,
.stb-vs__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}
.stb-vs__card::before {
  z-index: 0;
  translate: 5px 5px;
  rotate: -.5deg;
  background: var(--sheet);
}
.stb-vs__card::after {
  z-index: 1;
  border: 1px solid var(--hair-soft);
  box-shadow: var(--shadow);
}
.stb-vs__card > * { position: relative; z-index: 2; }
.stb-vs__card--old::after { background: var(--tint); }
.stb-vs__card--new::after { background: var(--surface); }
.stb-vs__card--new::before { rotate: .5deg; }

.stb-vs__h {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-bottom: 1px solid var(--hair-soft);
}
.stb-vs__card--new .stb-vs__h { color: var(--accent); }

.stb-vs__list { margin: 0; }
.stb-vs__list dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-head);
}
.stb-vs__list dd {
  margin: 0 0 var(--space-4);
  font-size: .95rem;
}
.stb-vs__list dd:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Buttons
   -------------------------------------------------------------------------- */

.stb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--on-accent);
  background-image: none;
  font-family: var(--font-head);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stb-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.stb-footer {
  margin-block-start: var(--space-8);
  padding: var(--space-6) clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--hair-soft);
  background: var(--tint);
}

.stb-footer__inner {
  max-width: 1140px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.stb-footer__copy { font-size: .9rem; color: var(--muted); margin: 0; }

.stb-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.stb-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9rem;
  color: var(--muted);
  text-decoration: none;
}
.stb-footer__list a:hover { color: var(--accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. Cookie notice — floating corner card
   -------------------------------------------------------------------------- */

.stb-cookie {
  position: fixed;
  z-index: 39;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.stb-cookie[hidden] { display: none; }
.stb-cookie.is-in { opacity: 1; transform: translateY(0); }

.stb-cookie__card {
  max-width: 400px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}

.stb-cookie__text { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.6; }
.stb-cookie__text a { color: var(--accent); }

.stb-cookie__ok {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .92rem;
}

@media (min-width: 640px) {
  .stb-cookie { left: auto; right: var(--space-5); bottom: var(--space-5); max-width: 400px; }
}

/* --------------------------------------------------------------------------
   18. 404
   -------------------------------------------------------------------------- */

.stb-404 { text-align: center; padding-block: var(--space-7); }

.stb-404__stack {
  position: relative;
  display: grid;
  place-items: center;
  margin-block-end: var(--space-5);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4.5rem, 3rem + 12vw, 9rem);
  line-height: 1;
}
.stb-404__ghost,
.stb-404__num { grid-area: 1 / 1; }
.stb-404__ghost { color: var(--accent2); rotate: -3deg; translate: 6px 6px; }
.stb-404__num   { color: var(--accent); }

.stb-404 .stb-btn { margin-inline: auto; }

/* --------------------------------------------------------------------------
   19. Reveal
   -------------------------------------------------------------------------- */

.js-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .stb-gate__ticket::before { animation: none; }
  .js-reveal { opacity: 1; transform: none; }
  .stb-card { transform: none !important; }
}