/* WAVEBREAK site, aurora rebuild. One stylesheet, dark only, brand palette:
   ink #020507, ice #c4f4f7, cyan #83e5ed, deep teal #0d8d93, mint #55f2bc. */
:root {
  --bg: #020507;
  --bg-2: #04080c;
  --panel: #061217;
  --paper: #eef2f3;
  --text: #d7dee1;
  --muted: #8fa1a7;
  --ice: #c4f4f7;
  --cyan: #83e5ed;
  --teal: #0d8d93;
  --mint: #55f2bc;
  --line: rgba(196, 244, 247, .12);
  --line-strong: rgba(196, 244, 247, .26);
  --glass: rgba(196, 244, 247, .04);
  --display: 'Michroma', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vw 50vh at 88% 0%, rgba(131, 229, 237, .08), transparent 70%),
    radial-gradient(60vw 60vh at 0% 70%, rgba(13, 141, 147, .10), transparent 70%);
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--paper); text-wrap: balance; }
em { font-family: var(--serif); font-style: italic; font-weight: 440; color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--cyan); color: #021014; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.wb-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* buttons and links */
.wb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 600 14px/1 var(--sans); padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.wb-btn--primary { background: var(--cyan); color: #021014; }
.wb-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(131, 229, 237, .3); }
.wb-btn--outline { background: var(--glass); color: var(--paper); border-color: var(--line-strong); }
.wb-btn--outline:hover { border-color: var(--cyan); background: rgba(131, 229, 237, .08); }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--cyan); font-weight: 600; font-size: 15px; }
.text-link:hover { color: var(--ice); }
.download-discover { display: inline-flex; align-items: center; gap: 10px; color: var(--ice); font-weight: 600; border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; }
.download-discover:hover { border-color: var(--cyan); }

/* header */
.wb-header { position: sticky; top: 0; z-index: 50; background: rgba(2, 5, 7, .62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.wb-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.wb-brand { display: inline-flex; align-items: center; gap: 12px; }
.wb-brand img { display: block; width: 42px; height: auto; }
.wb-brand-name { font: 400 15px/1 var(--display); letter-spacing: .06em; color: var(--paper); }
.wb-brand-name span { color: var(--cyan); }
.wb-nav-panel { display: flex; align-items: center; gap: 26px; }
.wb-links { display: flex; gap: 4px; }
.wb-links a { padding: 9px 16px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .2s, background .2s; }
.wb-links a:hover { color: var(--paper); }
.wb-links a.is-active { color: var(--paper); background: rgba(131, 229, 237, .1); }
.wb-lang { display: flex; gap: 2px; font: 500 12px/1 var(--mono); }
.wb-lang a { padding: 8px 9px; border-radius: 8px; color: var(--muted); text-transform: uppercase; }
.wb-lang a:hover { color: var(--paper); }
.wb-lang a.is-active { color: var(--cyan); background: rgba(131, 229, 237, .08); }
.wb-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--glass); cursor: pointer; position: relative; }
.wb-burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform .2s, top .2s; }
.wb-burger span:first-child { top: 17px; }
.wb-burger span:last-child { top: 25px; }
.nav-open .wb-burger span:first-child { top: 21px; transform: rotate(45deg); }
.nav-open .wb-burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* hero, shared by every page */
.site-hero, .download-hero { position: relative; isolation: isolate; overflow: hidden; }
.site-hero-inner, .download-hero-inner { position: relative; z-index: 1; padding-block: clamp(48px, 8vw, 104px) clamp(48px, 7vw, 88px); display: grid; gap: 28px; }
.site-hero--compact .site-hero-inner { padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5vw, 64px); }
.wb-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s cubic-bezier(.23, 1, .32, 1); }
.wb-backdrop.is-ready { opacity: 1; }
/* the hero bundle runs down the whole page and scrolls with it natively; JS keeps this
   screen-and-a-half tall layer under the viewport and draws the bundle in page coordinates */
.wb-backdrop--hero { position: absolute; inset: 0 0 auto; height: 150vh; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .wb-backdrop { opacity: 1; transition: none; } }
.download-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.download-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: ping 2.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(131, 229, 237, 0); } 100% { box-shadow: 0 0 0 0 rgba(131, 229, 237, 0); } }
.hero-copy, .download-intro { display: grid; gap: 22px; max-width: 760px; }
.hero-copy h1, .download-intro h1, .site-hero h1 { font: 500 clamp(2rem, 5.4vw, 4rem)/1.06 var(--sans); letter-spacing: -.03em; }
.hero-description, .download-intro > p { max-width: 54ch; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero-secondary { color: var(--ice); font-weight: 600; }
.hero-secondary:hover { color: var(--cyan); }
.hero-bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-bottom a { color: var(--cyan); }

/* home: wordmark that fills with a moving wave, clipped to the letters */
.wordmark {
  --w1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6V12H0Z' fill='%2383e5ed'/%3E%3C/svg%3E");
  --w2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q15 12 30 6T60 6T90 6T120 6V12H0Z' fill='%2355f2bc' fill-opacity='.5'/%3E%3C/svg%3E");
  font: 400 clamp(1.6rem, 9.2vw, 7.2rem)/1.12 var(--display); letter-spacing: 0; white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(131, 229, 237, .38);
  background-color: rgba(196, 244, 247, .1);
  background-image: var(--w2), var(--w1), linear-gradient(#83e5ed, #0d8d93);
  background-size: 1.5em .17em, 1.5em .17em, 100% calc(50% + .08em);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-position: 0 calc(50% - .105em), 0 calc(50% - .085em), 0 100%;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 26px rgba(131, 229, 237, .2));
  animation: tide 7s linear infinite;
  user-select: none;
}
@keyframes tide { to { background-position: -1.5em calc(50% - .105em), 1.5em calc(50% - .085em), 0 100%; } }
.hero-home h1 { font: 500 clamp(1.8rem, 4.6vw, 3.4rem)/1.08 var(--sans); letter-spacing: -.03em; }
.hero-home .hero-copy { max-width: 820px; }
.hero-card { max-width: 520px; display: grid; gap: 16px; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(196, 244, 247, .08), rgba(196, 244, 247, .02)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hero-card-state { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--paper); }
.hero-card-state b { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.hero-card-tags { display: flex; gap: 8px; font: 500 11px/1 var(--mono); color: var(--muted); }
.hero-card-tags span { white-space: nowrap; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
.hero-card-place { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(2, 5, 7, .5); border: 1px solid var(--line); }
.hero-card-place small { display: block; color: var(--muted); font-size: 12px; }
.hero-card-place strong { color: var(--paper); }
.hero-card-place i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line-strong); font-style: normal; }
.hero-card p { color: var(--muted); font-size: 13px; }

.statement { padding-block: clamp(40px, 7vw, 96px) 0; }
.statement p { font: 500 clamp(2.2rem, 7vw, 5.6rem)/1.02 var(--sans); letter-spacing: -.04em; color: var(--paper); max-width: 14ch; }
.statement em { font-weight: 440; }

/* sections */
.site-section { padding-block: clamp(44px, 7vw, 96px); }
.site-section--tight { padding-block: clamp(24px, 4vw, 48px); }
.section-heading { display: grid; gap: 16px; margin-bottom: clamp(24px, 4vw, 44px); max-width: 760px; }
.section-heading h2, .faq-layout > h2, .steps-layout h2, .product-band h2, .site-cta h2, .download-release h2 { font: 500 clamp(1.7rem, 3.8vw, 2.9rem)/1.1 var(--sans); letter-spacing: -.03em; }
.section-number { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); filter: brightness(1.6); }
.section-copy { color: var(--muted); max-width: 58ch; margin-bottom: 20px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid article, .plan, .download-more, .plans-unavailable { border: 1px solid var(--line); background: var(--glass); border-radius: 22px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; align-content: start; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, background .2s; }
.choice-grid article:hover { border-color: var(--line-strong); background: rgba(131, 229, 237, .05); }
.choice-grid h3 { font: 500 1.35rem/1.2 var(--sans); letter-spacing: -.02em; }
.choice-grid p { color: var(--muted); }
.choice-grid .text-link { margin-top: 8px; }
.app-text-layout, .faq-layout, .steps-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 6vw, 80px); align-items: start; }
.product-band { background: linear-gradient(180deg, transparent, rgba(13, 141, 147, .08), transparent); border-block: 1px solid var(--line); }
.faq-list { display: grid; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font-weight: 600; color: var(--paper); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; box-sizing: border-box; }
/* the cross is two lines, so it sits dead centre; it turns into an x while the item is open and
   turns back the moment closing starts (.is-closing), not when the height animation ends */
.faq-list summary::after { background: linear-gradient(var(--cyan), var(--cyan)) center / 12px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) center / 2px 12px no-repeat; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.faq-list details[open]:not(.is-closing) summary::after { transform: rotate(45deg); }
.faq-list details p { overflow: hidden; padding-bottom: 22px; color: var(--muted); max-width: 62ch; }
.faq-list a, .download-release a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li > span { font: 500 13px/1.6 var(--mono); color: var(--cyan); }
.steps h3 { font: 600 1.1rem/1.3 var(--sans); margin-bottom: 6px; }
.steps p { color: var(--muted); }
.site-cta { padding-block: clamp(56px, 9vw, 120px); text-align: center; position: relative; }
.site-cta .wb-container { display: grid; gap: 28px; justify-items: center; }
.site-cta h2 { max-width: 20ch; }

/* download page */
.download-signal { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.download-signal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.download-signal b { color: var(--cyan); font-weight: 500; }
.download-platforms { display: grid; gap: 16px; }
.download-platform-pick { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.download-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.download-tile { position: relative; display: grid; gap: 4px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, background .2s, transform .2s; }
a.download-tile:hover { border-color: var(--cyan); background: rgba(131, 229, 237, .07); transform: translateY(-3px); }
.download-tile-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--line-strong); color: var(--cyan); }
.download-tile b { font: 600 1.15rem/1.2 var(--sans); color: var(--paper); }
.download-tile small { color: var(--muted); font-size: 13px; }
.download-tile em { margin-top: 14px; font: 600 13px/1 var(--sans); font-style: normal; color: var(--cyan); }
.download-tile--soon { opacity: .55; }
.download-more { margin-top: 4px; gap: 18px; }
.download-more-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.download-more-row a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(2, 5, 7, .4); transition: border-color .2s; }
.download-more-row a:hover { border-color: var(--cyan); }
.download-more-row b { color: var(--paper); font-weight: 600; }
.download-more-row span { color: var(--muted); font-size: 13px; }
.download-more-help { color: var(--muted); font-size: 14px; }
.download-tv-urls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.download-tv-url { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(2, 5, 7, .5); border: 1px solid var(--line); min-width: 0; }
.download-tv-url small { color: var(--muted); font-size: 12px; }
.download-tv-url code { font: 500 13px/1.4 var(--mono); color: var(--ice); overflow-wrap: anywhere; }
.download-manifest { border-block: 1px solid var(--line); background: rgba(196, 244, 247, .02); }
.download-manifest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); padding-block: clamp(36px, 5vw, 64px); }
.download-manifest-grid span { font: 500 12px/1 var(--mono); color: var(--cyan); }
.download-manifest-grid h3 { margin: 12px 0 8px; font: 600 1.15rem/1.3 var(--sans); }
.download-manifest-grid p { color: var(--muted); }
.download-release { padding-block: clamp(44px, 7vw, 96px); }
.download-release .wb-container { display: grid; gap: 16px; max-width: 820px; }
.download-release p { color: var(--muted); }

/* pricing */
.period-radio { position: absolute; opacity: 0; pointer-events: none; }
.period-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 28px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); }
.period-switch label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; font-size: 14px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.period-badge { font: 600 11px/1 var(--sans); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--cyan); color: var(--cyan); }
#period-month:checked ~ .period-switch label[for="period-month"],
#period-year:checked ~ .period-switch label[for="period-year"] { background: rgba(131, 229, 237, .16); color: var(--paper); }
#period-month:focus-visible ~ .period-switch label[for="period-month"],
#period-year:focus-visible ~ .period-switch label[for="period-year"] { outline: 2px solid var(--cyan); outline-offset: 2px; }
.plan-catalog--switch .plan-offer--year { display: none; }
#period-year:checked ~ .plan-grid .plan-offer--year { display: flex; }
#period-year:checked ~ .plan-grid .plan-offer--month { display: none; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.plan h2 { font: 600 1.5rem/1.2 var(--sans); letter-spacing: -.02em; }
.plan-offer { display: flex; flex-direction: column; gap: 10px; }
.plan-price { font: 500 clamp(2rem, 4vw, 2.8rem)/1.05 var(--sans); letter-spacing: -.03em; color: var(--paper); }
.plan-price span { color: var(--cyan); font-size: .6em; }
.plan-price--none { color: var(--muted); }
.plan-period, .plan-equiv { color: var(--muted); font-size: 14px; }
.plan-equiv b { color: var(--mint); font-weight: 600; }
.plan dl { margin: 6px 0 12px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.plan dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plan dt { color: var(--muted); }
.plan dd { margin: 0; color: var(--paper); font-weight: 600; }
.price-note { margin-top: 22px; color: var(--muted); font-size: 13px; max-width: 70ch; }
.plans-unavailable { max-width: 560px; }

/* legal documents */
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
.legal-toc { position: sticky; top: 100px; }
.legal-body, .legal-toc { min-width: 0; overflow-wrap: anywhere; }
.legal-toc ol { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--line); }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: block; padding: 6px 0 6px 16px; font-size: 13px; line-height: 1.45; color: var(--muted); transition: color .2s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero) "  "; font: 10px var(--mono); color: var(--teal); filter: brightness(1.5); }
.legal-toc a:hover { color: var(--paper); }
.legal-body { max-width: 760px; font-size: 15px; line-height: 1.8; color: var(--text); }
.legal-body > p, .legal-body section > p, .legal-body ul { margin-top: 14px; }
.legal-body .legal-meta { margin-top: 0; font: 11px/1.6 var(--mono); color: var(--muted); }
.legal-body section { padding-top: 44px; scroll-margin-top: 100px; }
.legal-body h2 { font: 500 1.7rem/1.2 var(--sans); letter-spacing: -.02em; }
.legal-body h3 { margin-top: 26px; font-size: 16px; font-weight: 600; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-top: 6px; }
.legal-body li::marker { color: var(--cyan); }
.legal-body strong { color: var(--paper); font-weight: 600; }
.legal-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.legal-table { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table th { font: 10px/1.6 var(--mono); text-transform: uppercase; color: var(--muted); background: var(--panel); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-hero .site-hero-inner { padding-bottom: 40px; }

/* footer and cookie notice */
.site-footer { margin-top: clamp(24px, 4vw, 56px); border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(13, 141, 147, .07)); }
.footer-top { display: grid; gap: 18px; padding-block: 48px 28px; }
.footer-top p { color: var(--muted); max-width: 46ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; padding-block: 22px 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.footer-bottom nav, .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.footer-bottom a:hover { color: var(--paper); }
.wb-cookie { position: fixed; z-index: 80; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
.wb-cookie[hidden] { display: none; }
.wb-cookie-inner { display: flex; align-items: center; gap: 18px; max-width: 720px; padding: 14px 16px 14px 22px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(6, 18, 23, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 14px; }
.wb-cookie-inner a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* responsive */
@media (max-width: 960px) {
  .download-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid--three, .download-manifest-grid { grid-template-columns: 1fr; }
  .app-text-layout, .faq-layout, .steps-layout { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .legal-toc { position: static; }
  .legal-toc ol { columns: 2; column-gap: 24px; }
  .legal-toc li { break-inside: avoid; }
}
@media (max-width: 820px) {
  .wb-burger { display: block; }
  .wb-nav-panel { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px var(--gutter) 24px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); display: none; }
  .nav-open .wb-nav-panel { display: flex; }
  .wb-links { flex-direction: column; }
  .wb-links a { padding: 14px 16px; font-size: 16px; }
  .wb-lang { justify-content: flex-start; }
  .wb-nav-panel .wb-btn { width: 100%; }
}
@media (max-width: 640px) {
  .choice-grid { grid-template-columns: 1fr; }
  .download-more-row, .download-tv-urls { grid-template-columns: 1fr; }
  .wb-cookie-inner { flex-direction: column; align-items: stretch; padding: 16px; }
  .legal-toc ol { columns: 1; }
}
@media (max-width: 420px) {
  .download-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark, .download-kicker span { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* cartoon layer: panels are inked comic cards, not glass */
.choice-grid article, .plan, .download-tile, .download-more, .plans-unavailable, .hero-card {
  --tilt: 0deg; --ink-shadow: var(--teal);
  position: relative; background: var(--panel); border: 2px solid var(--ice);
  border-radius: 26px 18px 30px 16px / 18px 28px 16px 30px;
  box-shadow: 7px 7px 0 var(--ink-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: rotate(var(--tilt));
  transition: transform .28s cubic-bezier(.3, 1.7, .5, 1), box-shadow .2s ease, border-color .2s ease;
}
.choice-grid article:nth-child(odd), .plan:nth-child(odd), .download-tile:nth-child(odd) { --tilt: -.9deg; }
.choice-grid article:nth-child(even), .plan:nth-child(even), .download-tile:nth-child(even) { --tilt: .7deg; --ink-shadow: #2fbf8f; }
.choice-grid--three article:nth-child(3) { --tilt: -.5deg; --ink-shadow: #2b7fbf; }
.download-more, .plans-unavailable { --tilt: .25deg; }
.choice-grid article::after, .plan::after, .download-tile::after, .hero-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, rgba(131, 229, 237, .28) 1.2px, transparent 1.7px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 58%);
  mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 58%);
}
.choice-grid article:hover, .plan:hover, a.download-tile:hover {
  transform: rotate(0deg) translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink-shadow);
  border-color: var(--cyan); background: var(--panel);
}
.download-tile--soon { opacity: .6; }
.download-tile--soon::before { content: "!"; position: absolute; top: -12px; right: 14px; width: 28px; height: 28px; display: grid; place-items: center; font: 800 17px/1 var(--sans); color: #021014; background: var(--mint); border: 2px solid #021014; border-radius: 50%; transform: rotate(12deg); }
.download-tile-icon { border: 2px solid var(--ice); border-radius: 16px 10px 16px 12px; background: rgba(131, 229, 237, .1); box-shadow: 3px 3px 0 var(--teal); }

/* stickers */
.section-number, .download-manifest-grid span, .steps li > span {
  display: inline-block; justify-self: start; width: fit-content; filter: none;
  padding: 5px 11px; border-radius: 8px 12px 9px 12px; transform: rotate(-2.5deg);
  background: var(--cyan); color: #021014; font: 700 11px/1.2 var(--mono); letter-spacing: .1em;
  border: 2px solid #021014; box-shadow: 2px 2px 0 var(--ice);
}
.choice-grid article:nth-child(even) .section-number { background: var(--mint); transform: rotate(2deg); }

/* speech bubble for the hero card */
.hero-card { border-radius: 30px 22px 30px 22px / 22px 30px 22px 30px; --tilt: -.6deg; --ink-shadow: var(--teal); margin-bottom: 18px; }
.hero-card::before { content: ""; position: absolute; left: 44px; bottom: -15px; width: 26px; height: 26px; background: var(--panel); border-right: 2px solid var(--ice); border-bottom: 2px solid var(--ice); transform: rotate(45deg) skew(8deg, 8deg); border-bottom-right-radius: 6px; z-index: 1; }
.hero-card-place { background: rgba(131, 229, 237, .07); border: 2px dashed var(--line-strong); border-radius: 14px 10px 14px 12px; }
.hero-card-tags span { border: 2px solid var(--line-strong); font-weight: 700; color: var(--ice); transform: rotate(-1.5deg); }
.hero-card-tags span + span { transform: rotate(1.5deg); }

/* chunky buttons */
.wb-btn { border: 2px solid #021014; border-radius: 14px 10px 14px 10px / 10px 14px 10px 14px; font-weight: 700; }
.wb-btn--primary { box-shadow: 4px 4px 0 var(--teal); }
.wb-btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--teal); }
.wb-btn--primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--teal); }
.wb-btn--outline { border-color: var(--ice); background: var(--panel); box-shadow: 4px 4px 0 var(--teal); }
.wb-btn--outline:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--teal); background: var(--panel); border-color: var(--cyan); }
.wb-header .wb-btn { padding-block: 11px; }

/* hand-drawn squiggle under accent words */
.statement em, .hero-copy h1 em, .download-intro h1 em {
  padding-bottom: .1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4' fill='none' stroke='%2355f2bc' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 24px 8px;
}
.faq-list summary::before { border: 2px solid var(--ice); border-radius: 50% 46% 52% 48%; background: var(--panel); box-shadow: 2px 2px 0 var(--teal); }
.download-more-row a, .download-tv-url { border: 2px solid var(--line-strong); border-radius: 14px 10px 14px 12px; background: rgba(131, 229, 237, .05); }
.download-more-row a:hover { transform: rotate(-.6deg); }

@media (max-width: 640px) {
  .choice-grid article, .plan, .download-tile, .hero-card { box-shadow: 5px 5px 0 var(--ink-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .choice-grid article, .plan, .download-tile, .hero-card { transform: none; }
}
.steps li > span { align-self: start; justify-self: start; margin-top: 2px; }
.download-manifest-grid span { margin-bottom: 4px; }

/* Phones: the header's backdrop blur re-blurred the constantly redrawn WebGL canvases behind it on
   every scrolled frame. An almost opaque fill looks the same on this dark page and is free. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .wb-header { background: rgba(2, 5, 7, .94); }
  .wb-header, .wb-nav-panel, .wb-cookie-inner, .hero-card, .choice-grid article, .plan,
  .download-more, .plans-unavailable, .download-tile { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .wb-nav-panel, .wb-cookie-inner { background-color: rgba(2, 5, 7, .97); }
}