/* MaiCreator website. The page is staged like a production, because MaiCreator is an AI director: takes for the
   steps, a director's monitor showing the real app, a film strip of real rendered frames, and a cinema ticket for the
   licence. Colours are the app's own candy palette (grape, butter, mint, bubblegum, sky) on ink. The "studio"
   sections stay dark in both themes, so the app's dark screens sit naturally on them; everything else follows the
   visitor's light or dark setting. No external requests: fonts and icons ship with the site. */

@font-face {
  font-family: 'Fredoka';
  src: url('assets/fonts/fredoka-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* The app's candy colours. */
  --ink: #1d1442;
  --grape: #7b5cff;
  --grape-deep: #5a3ee6;
  --butter: #ffd23f;
  --mint: #3ddc97;
  --pink: #ff7ac6;
  --sky: #3db8ff;
  --tangerine: #ff9f1c;
  /* Theme: light. */
  --bg: #ffffff;
  --bg-soft: #f6f3ff;
  --panel: #ffffff;
  --fg: #1d1442;
  --fg-2: #534b78;
  --faint: #8a83ab;
  --hair: #e9e4fb;
  --edge: #1d1442;
  --ledge: #1d1442;
  --tile: #f1edff;
  /* Studio: always dark. */
  --studio: #120d2e;
  --studio-2: #1b1442;
  --studio-fg: #f4f1ff;
  --studio-fg-2: #b9b1e3;
  --studio-hair: #2f2766;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0a22;
    --bg-soft: #140f33;
    --panel: #19133d;
    --fg: #f4f1ff;
    --fg-2: #bdb6e4;
    --faint: #8d85bd;
    --hair: #2a2360;
    --edge: #a891ff;
    --ledge: #05030f;
    --tile: #231a55;
    --studio: #0a0719;
    --studio-2: #150f35;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font:
    17px/1.6 'Manrope',
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
img,
svg,
video {
  max-width: 100%;
  display: block;
}
a {
  color: var(--grape);
  font-weight: 700;
  text-underline-offset: 3px;
}
h1,
h2,
h3 {
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(44px, 7vw, 84px);
}
h2 {
  font-size: clamp(34px, 4.8vw, 56px);
}
h3 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.narrow {
  max-width: 780px;
}
.icon {
  width: 1em;
  height: 1em;
  flex: none;
}
.mono {
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* A hand-drawn underline, like the one on the app's home screen. */
.underline {
  position: relative;
  white-space: nowrap;
}
.underline svg {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.32em;
  overflow: visible;
}
.underline path {
  fill: none;
  stroke: var(--butter);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Take labels: a little clapperboard. */
.take {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: 20px;
  border: 2px solid var(--edge);
  border-radius: 9px;
  overflow: hidden;
  font: 600 12.5px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--panel);
  box-shadow: 0 3px 0 var(--ledge);
}
.take::before {
  content: '';
  width: 30px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, #fff 6px 12px);
  border-right: 2px solid var(--edge);
}
.take span {
  padding: 8px 11px;
  color: var(--fg);
}
.studio .take {
  border-color: #fff;
  background: var(--studio-2);
  box-shadow: 0 3px 0 #000;
}
.studio .take::before {
  border-color: #fff;
}
.studio .take span {
  color: #fff;
}

/* ── Header ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--studio) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  color: var(--studio-fg);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font: 700 22px 'Fredoka', sans-serif;
}
.brand img {
  width: 30px;
  height: 30px;
}
.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.top nav a:not(.btn) {
  color: var(--studio-fg-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.15s;
}
.top nav a:not(.btn):hover {
  color: #fff;
}
@media (max-width: 800px) {
  .top nav a:not(.btn) {
    display: none;
  }
}

/* ── Buttons (the app's chunky candy buttons) ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  background: #fff;
  color: var(--ink);
  font: 800 16px 'Manrope', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink);
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}
.btn .icon {
  width: 19px;
  height: 19px;
}
.btn.grape {
  background: var(--grape);
  color: #fff;
}
.btn.sun {
  background: var(--butter);
}
.studio .btn {
  border-color: #000;
  box-shadow: 0 4px 0 #000;
}
.studio .btn:hover {
  box-shadow: 0 6px 0 #000;
}
.btn.small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14.5px;
  border-radius: 11px;
  box-shadow: 0 3px 0 #000;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.fineprint {
  font-size: 14px;
  color: var(--faint);
}

/* ── Studio sections (always dark) ──────────────────────────────────────────────────────────────────────────── */
.studio {
  position: relative;
  background:
    radial-gradient(900px 500px at 85% 10%, rgb(123 92 255 / 0.28), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, rgb(255 122 198 / 0.12), transparent 70%),
    var(--studio);
  color: var(--studio-fg);
  overflow: hidden;
}
.studio p {
  color: var(--studio-fg-2);
}
/* Faint film grain-like dot grid, like the app's backdrop. */
.studio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.studio > * {
  position: relative;
}

/* ── Hero ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero {
  padding: 72px 0 96px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
.hero .lead {
  font-size: clamp(18px, 1.6vw, 20.5px);
  max-width: 31em;
  margin-bottom: 34px;
}
.hero h1 {
  color: #fff;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--studio-fg);
}
.chips .icon {
  color: var(--mint);
  width: 16px;
  height: 16px;
}
@media (max-width: 960px) {
  .hero {
    padding-top: 44px;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* The set: the phone playing the real Short, with real pieces of the app around it. */
.set {
  position: relative;
  justify-self: center;
  width: min(520px, 100%);
  aspect-ratio: 1 / 1.08;
}
.phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 56%;
  aspect-ratio: 9 / 19;
  padding: 9px;
  border-radius: 40px;
  background: #07050f;
  box-shadow:
    inset 0 0 0 1.5px #2e2a44,
    0 40px 80px -20px rgb(0 0 0 / 0.7),
    0 0 0 6px rgb(255 255 255 / 0.03);
}
.phone::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  translate: -50% 0;
  width: 30%;
  height: 20px;
  border-radius: 20px;
  background: #07050f;
  z-index: 2;
}
.phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 31px;
  background: #000;
}
.play-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.play-toggle .icon {
  width: 15px;
  height: 15px;
}
.piece {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.8);
  background: #120f2a;
}
.piece.script {
  width: 44%;
  left: -6%;
  top: 6%;
  rotate: -5deg;
  opacity: 0.92;
}
.piece.scene {
  width: 50%;
  right: -5%;
  top: 56%;
  rotate: 3deg;
}
.piece.cost {
  width: 60%;
  right: -5%;
  top: 4%;
  z-index: 3;
  rotate: 3deg;
}
.mai-peek {
  position: absolute;
  z-index: 4;
  width: 24%;
  left: 2%;
  bottom: 4%;
  rotate: -6deg;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.5));
}
.set figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -46px;
  text-align: center;
  font-size: 13px;
  color: var(--studio-fg-2);
}
/* Narrow screens: no collage. The phone, then the cost card tucked under its bottom edge. */
@media (max-width: 640px) {
  .set {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .phone {
    position: relative;
    left: auto;
    translate: none;
    width: min(300px, 74%);
  }
  .piece.script,
  .piece.scene {
    display: none;
  }
  .piece.cost {
    position: relative;
    width: 100%;
    right: auto;
    bottom: auto;
    margin-top: -56px;
    rotate: 1.5deg;
  }
  .mai-peek {
    width: 76px;
    left: -4px;
    bottom: auto;
    top: 14%;
  }
  .set figcaption {
    position: static;
    margin-top: 18px;
  }
}

/* ── Sections ───────────────────────────────────────────────────────────────────────────────────────────────── */
section {
  padding: 112px 0;
}
section.soft {
  background: var(--bg-soft);
}
.head {
  max-width: 44em;
  margin-bottom: 64px;
}
.head.center {
  text-align: center;
  margin-inline: auto;
}
.head p {
  font-size: 19px;
  color: var(--fg-2);
}
.studio .head p {
  color: var(--studio-fg-2);
}

/* ── How it works: takes beside a sticky director's monitor ─────────────────────────────────────────────────── */
.shoot {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
.takes {
  display: grid;
}
.take-step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  opacity: 0.4;
  transition: opacity 0.35s;
}
.take-step.on,
.no-sticky .take-step {
  opacity: 1;
}
.take-step h3 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.take-step p {
  color: var(--fg-2);
  font-size: 18px;
  max-width: 28em;
}
.take-step ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fg-2);
}
.take-step li {
  display: flex;
  gap: 9px;
}
.take-step li .icon {
  width: 19px;
  height: 19px;
  color: var(--mint);
  margin-top: 2px;
}
.take-step .take {
  align-self: flex-start;
}
.take-step .inline-shot {
  display: none;
}
.monitor-col {
  position: relative;
}
.monitor {
  position: sticky;
  top: calc(50vh - 250px);
  border-radius: 22px;
  padding: 14px;
  background: var(--studio);
  border: 2px solid var(--edge);
  box-shadow:
    0 6px 0 var(--ledge),
    0 40px 80px -40px rgb(29 20 66 / 0.55);
}
.monitor-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 12px;
  font: 600 12px 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--studio-fg-2);
}
.rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff6b6b;
}
.rec::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b6b;
  animation: blink 1.6s steps(2, start) infinite;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
.monitor-top .tc {
  margin-left: auto;
}
.screen-stack {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0820;
}
.screen-stack > * {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.45s,
    transform 0.6s;
  display: grid;
  /* A fixed cell, so a tall screenshot or the three frames fit inside instead of growing past the monitor. */
  grid-template: 100% / 100%;
  place-items: center;
}
.screen-stack > .on {
  opacity: 1;
  transform: none;
}
.screen-stack > figure > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.screen-stack .trio {
  display: flex;
  gap: 10px;
  padding: 16px;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.screen-stack .trio img {
  height: 100%;
  width: auto;
  min-width: 0;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
}
@media (max-width: 960px) {
  .shoot {
    grid-template-columns: 1fr;
  }
  .monitor-col {
    display: none;
  }
  .take-step {
    min-height: 0;
    opacity: 1;
    padding: 0 0 64px;
  }
  .take-step .inline-shot {
    display: block;
    margin-top: 22px;
    border-radius: 14px;
    border: 2px solid var(--edge);
    overflow: hidden;
    box-shadow: 0 5px 0 var(--ledge);
    background: var(--studio);
  }
}

/* ── Film strip of real frames ──────────────────────────────────────────────────────────────────────────────── */
.film {
  position: relative;
  padding: 30px 0;
  background: #050310;
  border-block: 2px solid #000;
  overflow-x: auto;
  scrollbar-width: none;
}
.film::-webkit-scrollbar {
  display: none;
}
.film::before,
.film::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background-image: radial-gradient(circle at 50% 50%, #f4f1ff 0 4px, transparent 4.5px);
  background-size: 26px 14px;
  opacity: 0.85;
  min-width: 100%;
}
.film::before {
  top: 8px;
}
.film::after {
  bottom: 8px;
}
.film .reel {
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 0 auto;
  padding: 0 20px;
}
.film img {
  width: 196px;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
}
.film-note {
  margin-top: 22px;
  font-size: 14px;
  text-align: center;
}

/* ── Feature kit ────────────────────────────────────────────────────────────────────────────────────────────── */
.kit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tool {
  padding: 26px;
  border-radius: 20px;
  background: var(--panel);
  border: 1.5px solid var(--hair);
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.tool:hover {
  transform: translateY(-4px);
  border-color: var(--edge);
  box-shadow: 0 6px 0 var(--ledge);
}
.tool .tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  margin-bottom: 18px;
}
.tool .tile .icon {
  width: 22px;
  height: 22px;
}
.tool h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.tool p {
  margin: 0;
  color: var(--fg-2);
  font-size: 15.5px;
}
@media (max-width: 900px) {
  .kit {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .kit {
    grid-template-columns: 1fr;
  }
}

/* ── Costs ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.bills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bill {
  position: relative;
  padding: 28px 26px 24px;
  border-radius: 20px;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: 0 5px 0 var(--ledge);
}
.bill .amount {
  font: 700 clamp(48px, 5.4vw, 64px) / 1 'Fredoka', sans-serif;
  letter-spacing: -0.03em;
  margin: 10px 0 14px;
}
.bill .what {
  font: 600 12.5px 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.bill p {
  margin: 0;
  color: var(--fg-2);
  font-size: 15.5px;
}
.bill.free {
  background: var(--mint);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
}
.bill.free .what,
.bill.free p {
  color: var(--ink);
}
@media (max-width: 860px) {
  .bills {
    grid-template-columns: 1fr;
  }
}
.keybox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 28px;
  padding: 28px;
  border-radius: 22px;
  background: var(--panel);
  border: 1.5px solid var(--hair);
}
.keybox img {
  border-radius: 14px;
  border: 1.5px solid var(--hair);
}
.keybox p {
  color: var(--fg-2);
}
@media (max-width: 860px) {
  .keybox {
    grid-template-columns: 1fr;
  }
}
.costs-note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--faint);
}

/* ── Pricing: a cinema ticket ───────────────────────────────────────────────────────────────────────────────── */
.ticket {
  --notch: 18px;
  display: grid;
  grid-template-columns: 1fr 300px;
  max-width: 940px;
  margin: 0 auto;
  filter: drop-shadow(0 6px 0 var(--ledge));
}
.ticket > div {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 40px;
}
.ticket .main {
  border-radius: 24px 0 0 24px;
  border-right: 0;
  /* Half-circle notches where the stub tears off. */
  mask: radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket .stub {
  border-radius: 0 24px 24px 0;
  border-left: 2.5px dashed var(--edge);
  background: var(--butter);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.admit {
  font: 600 12.5px 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 4px;
}
.price strong {
  font: 700 84px/1 'Fredoka', sans-serif;
  letter-spacing: -0.04em;
}
.price .was {
  font: 500 22px 'Geist Mono', ui-monospace, monospace;
  color: var(--faint);
  text-decoration: line-through;
}
.price small {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-2);
}
.launch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0 26px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tile);
  font: 500 13px 'Geist Mono', ui-monospace, monospace;
  color: var(--fg-2);
}
.launch b {
  color: var(--fg);
  font-weight: 700;
}
.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.ticks li {
  display: flex;
  gap: 10px;
  font-weight: 700;
  font-size: 15.5px;
}
.ticks .icon {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  margin-top: 1px;
}
.stub .admit {
  color: var(--ink);
  opacity: 0.7;
}
.stub h3 {
  font-size: 28px;
  margin: 10px 0 8px;
}
.stub p {
  font-size: 15px;
  color: var(--ink);
  opacity: 0.85;
}
.stub img {
  width: 76px;
  margin-bottom: 6px;
}
.stub .actions {
  margin-top: auto;
}
@media (max-width: 820px) {
  .ticket {
    grid-template-columns: 1fr;
  }
  .ticket .main {
    border-radius: 24px 24px 0 0;
    border-right: 2px solid var(--edge);
    border-bottom: 0;
    mask: radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat;
  }
  .ticket .stub {
    border-radius: 0 0 24px 24px;
    border-left: 2px solid var(--edge);
    border-top: 2.5px dashed var(--edge);
    mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat;
  }
  .ticket > div {
    padding: 30px 24px;
  }
  .ticks {
    grid-template-columns: 1fr;
  }
}

/* ── FAQ ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.faq details {
  border-radius: 18px;
  background: var(--panel);
  border: 1.5px solid var(--hair);
  margin-bottom: 12px;
  padding: 0 22px;
  transition: border-color 0.2s;
}
.faq details[open] {
  border-color: var(--edge);
}
summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 20px 0;
  font: 600 19px 'Fredoka', sans-serif;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tile);
  font: 600 18px/1 'Manrope', sans-serif;
  transition: rotate 0.2s;
}
details[open] summary::after {
  rotate: 45deg;
}
details p {
  color: var(--fg-2);
  padding-right: 30px;
}
.note {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 2px dashed var(--hair);
  font-size: 15.5px;
  color: var(--fg-2);
}
.note .icon {
  width: 22px;
  height: 22px;
  color: var(--fg);
  margin-top: 2px;
}
.note strong {
  color: var(--fg);
}
.note p {
  margin: 0;
}

/* ── Closing ────────────────────────────────────────────────────────────────────────────────────────────────── */
.closing {
  text-align: center;
  padding: 120px 0;
}
.closing .mai {
  width: 128px;
  margin: 0 auto 18px;
}
.closing h2 {
  color: #fff;
  max-width: 14em;
  margin-inline: auto;
}
.closing p {
  font-size: 19px;
}
.closing .actions {
  justify-content: center;
  margin-top: 30px;
}

/* ── Gentle reveal on scroll ────────────────────────────────────────────────────────────────────────────────── */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ── Document pages ─────────────────────────────────────────────────────────────────────────────────────────── */
.doc {
  padding: 56px 0 88px;
}
.doc h1 {
  font-size: clamp(38px, 5vw, 56px);
}
.doc h2 {
  font-size: 26px;
  margin-top: 1.7em;
}
.doc p,
.doc li {
  color: var(--fg-2);
}
.doc .meta {
  color: var(--faint);
  font-size: 14.5px;
}
.doc dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
}
.doc dt {
  font-weight: 800;
}
.doc dd {
  margin: 0;
  color: var(--fg-2);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.doc th,
.doc td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.doc th {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
}
.doc .table-wrap {
  overflow-x: auto;
}
@media (max-width: 520px) {
  .doc dl {
    grid-template-columns: 1fr;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────────────────────────────────────────── */
footer {
  padding: 56px 0 64px;
  background: var(--studio);
  color: var(--studio-fg-2);
  font-size: 14.5px;
}
footer .wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
}
footer .brand {
  color: #fff;
  margin-bottom: 12px;
}
footer nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px 36px;
  justify-content: end;
}
footer a {
  color: var(--studio-fg-2);
  font-weight: 600;
  text-decoration: none;
}
footer a:hover {
  color: #fff;
}
@media (max-width: 640px) {
  footer .wrap {
    grid-template-columns: 1fr;
  }
  footer nav {
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .underline path {
    stroke-dashoffset: 0;
  }
}