/* Coffee Making AI: dark stage, one accent color.
   Per site, change --accent and --accent-2 below (and site/static/og.png, favicon.svg) so it doesn't look like the other sites. */
/* Fonts are self-hosted (SIL OFL, from Google Fonts; latin + latin-ext subsets) so text paints without waiting on another origin. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/familjen-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/familjen-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #0b0b0c;
  --ink-2: #141416;
  --ink-3: #1e1e22;
  --line: #2c2c33;
  --cream: #f4f1ea;
  --muted: #a4a1aa;
  --text-2: #e6dff0; /* body text on dark panels */
  /* Page colors that flip in the light theme (bottom of this file). --ink and --cream stay fixed: they are the dark
     and light of buttons, the ticket and text on the accent color. */
  --bg: var(--ink);
  --text: var(--cream);
  --accent-text: var(--accent); /* accent-colored text on the page */
  --accent: #d6e84a;   /* buttons, links, prices, highlights */
  --accent-2: #f2a33a; /* the "AI" in the big headline, focus rings */
  --accent-3: #ff7a9c; /* small marks */
  --sky: #8fd3ff;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Familjen Grotesk", "Helvetica Neue", sans-serif;
  --r: 18px;
  --wrap: min(1180px, 100% - 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { /* film grain */
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .5em; }
h2 { font: 900 clamp(34px, 5vw, 60px)/.95 var(--display); text-transform: uppercase; letter-spacing: .5px; }
h3 { font: 600 20px/1.2 var(--sans); }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--accent); color: var(--ink); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- header ---------- */
.site-header {
  width: var(--wrap); margin: 0 auto; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative; z-index: 5;
}
/* Computers: the bar stays at the top while the page scrolls, and the page scrolls as one (no sticky hero column:
   on the AI vocals site the card sliding under a still headline looked broken, 10-30). Phones have their fixed bar. */
@media (min-width: 961px) {
  html { scroll-padding-top: 80px; }
  /* body's overflow-x: hidden (with html's clip below) makes body its own scroll box, which never scrolls, so the bar
     would never stick; clip hides the same overflow without that (found on photopatternmaker, 10-31). */
  body { overflow-x: clip; }
  .site-header { position: sticky; top: 0; z-index: 45; width: auto; padding: 12px max(20px, (100% - 1480px) / 2); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .lang-banner { position: relative; }
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent)); }
/* A long site name gives way (…) before the button does. */
.brand-word { font: 900 24px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-word em { color: var(--accent-text); text-transform: none; font-size: 26px; margin-left: 2px; }
.site-nav { display: flex; flex: none; align-items: center; gap: 22px; font-size: 15px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--text); }
.site-nav .nav-cta { color: var(--ink); background: var(--accent); padding: 9px 16px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.site-nav .nav-cta:hover { color: var(--ink); background: var(--cream); }
@media (max-width: 860px) { .site-nav .nav-link { display: none; } }
@media (max-width: 480px) {
  .site-header { gap: 10px; }
  .brand-word { font-size: 20px; } .brand-word em { font-size: 22px; }
  .site-nav .nav-cta { padding: 8px 12px; font-size: 14px; }
}

/* ---------- hero ---------- */
.hero {
  width: var(--wrap); margin: 0 auto; padding: 36px 0 70px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start;
  position: relative;
}
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
  margin: 6px 0 18px;
}
.hero h1 {
  font: 900 clamp(64px, 10.5vw, 148px)/.84 var(--display);
  text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 22px;
}
.hero h1 em { display: block; text-transform: none; font-size: .5em; line-height: 1; color: var(--accent-2); margin-top: 6px; letter-spacing: 0; }
/* --fit is the longest word's length (set in the template), so names like "Rumpelstiltskin" still fit the column. */
.hero-trend h1 { font-size: clamp(40px, min(8vw, calc(min(1180px, 100vw - 40px) / var(--fit, 1))), 110px); }
/* Chinese headings break at spaces and punctuation, not inside words (影片), unless a word can't fit. */
h1:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
/* The display font only has Latin; Chinese, Japanese, Korean and Thai fall back to system fonts whose glyphs fill the
   whole em box (Thai adds marks above and below), so the .84–1 Latin leading made wrapped lines touch and the first
   line hit the header. These headings get real leading in those languages; Latin pages keep the tight look. */
html:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, .doc.guide h1, .doc h2, .sub-h, .how-grid b, .effect-card b, .sample-cap b, .hd-cap b) { line-height: 1.15; }
html:lang(th) :is(h1, h2, .doc.guide h1, .doc h2, .sub-h, .how-grid b, .effect-card b, .sample-cap b, .hd-cap b) { line-height: 1.25; }
.lede { font-size: 20px; max-width: 34ch; color: var(--text-2); }
.lede em { color: var(--accent-text); font-size: 1.15em; }
.facts { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--text-2); }

.hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-tool { animation: rise .8s .2s cubic-bezier(.2, .7, .2, 1) both; }
/* On phones a visible first-step action sits before the sample, while desktop keeps the two-column layout. */
.hero-start { display: none; }
@media (max-width: 960px) {
  .hero-start { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 18px; margin: 15px 0 0; border-radius: 12px; color: var(--ink); background: var(--accent); font-weight: 800; text-decoration: none; text-align: center; }
  .hero-start:hover { color: var(--ink); background: var(--cream); }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 10px; }
  .lede { max-width: none; font-size: 18px; margin-bottom: 0; }
  .hero h1 { font-size: clamp(52px, 15vw, 96px); margin-bottom: 14px; }
  .hero-trend h1 { font-size: clamp(30px, min(15vw, calc((100vw - 40px) / (var(--fit, 1) * .46))), 96px); }
}

/* ---------- ticket (maker form) ---------- */
.ticket {
  background: var(--cream); color: var(--ink);
  border-radius: 22px; padding: 22px 22px 18px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
/* No tilt: on the AI vocals site it read as crooked, on phones and then on computers (10-30 主人「电脑版怎么会歪的」). */
.ticket::before, .ticket::after { /* perforation notches */
  content: ""; position: absolute; top: 56px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg);
}
.ticket::before { left: -11px; }
.ticket::after { right: -11px; }
.ticket-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px dashed rgba(13, 11, 18, .25);
}
.ticket-kicker { font: 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.ticket-no { font: 600 12px/1 var(--sans); letter-spacing: .2em; color: #6e6578; }
.ticket-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.step-label { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.step-label span { display: inline-block; font: 900 15px/1 var(--display); background: var(--ink); color: var(--accent); padding: 4px 6px; border-radius: 6px; margin-right: 6px; }

.drop {
  display: block; position: relative; cursor: pointer;
  border: 2px dashed rgba(13, 11, 18, .3); border-radius: 14px;
  min-height: 108px; overflow: hidden; background: #fff8ec;
  transition: border-color .2s, background .2s;
}
.drop:hover, .drop.drag { border-color: var(--accent-2); background: #fff2df; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-empty { display: flex; align-items: center; gap: 14px; padding: 18px; font-size: 15px; }
.drop-empty small { color: #6e6578; }
.drop-or { font-weight: 400; color: #6e6578; }
@media (hover: none) { .drop-or { display: none; } } /* touch screens have nothing to drag */
@media (min-width: 961px) { .drop { min-height: 88px; } .drop-empty { padding: 14px 18px; } }
.drop-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ink); color: var(--accent); font-size: 26px; flex: none; }
.drop-preview { width: 100%; max-height: 240px; object-fit: contain; background: #1c1724; }
.drop.has-photo .drop-empty { display: none; }
/* Once a photo is in, the box still says whose it is and that a tap swaps it. */
.drop-tag { display: none; position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 8px; border-radius: 8px; background: rgba(13, 11, 18, .78); color: var(--cream); font: 700 12px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.drop.has-photo .drop-tag { display: block; }
/* One box per photo slot; two or three sit side by side, labels stack inside. */
.drops { display: grid; grid-template-columns: repeat(var(--slots, 1), minmax(0, 1fr)); gap: 10px; }
.drops[style*="--slots:2"] .drop-empty, .drops[style*="--slots:3"] .drop-empty { flex-direction: column; align-items: flex-start; padding: 14px; font-size: 14px; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 16px 0 12px; color: #3d3547; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.consent-line { margin: 16px 0 10px; font-size: 12px; line-height: 1.45; color: #4d4558; text-align: center; text-wrap: balance; }

.btn-go {
  width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: 14px;
  background: var(--ink); color: var(--cream);
  font: 900 24px/1 var(--display); text-transform: uppercase; letter-spacing: .5px;
  transition: transform .15s, background .15s;
}
.btn-go:hover { background: #241d30; transform: translateY(-1px); }
.btn-go:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-go-price { background: var(--accent); color: var(--ink); padding: 6px 10px; border-radius: 8px; font-size: 20px; }
.btn-small { font-size: 18px; padding: 12px 16px; justify-content: center; }
.form-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 14px; color: #b3261e; }
.ticket-fine { margin: 6px 0 0; text-align: center; font-size: 12px; color: #6e6578; letter-spacing: .02em; }

/* ---------- answer block ---------- */
.answer {
  width: var(--wrap); margin: 0 auto; padding: 70px 0;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: center;
  border-top: 1px solid var(--line);
}
.answer-inner h2 { margin-bottom: .4em; }
.answer-lead { font-size: 21px; color: var(--text-2); }
.answer-inner h3 { margin-top: 1.6em; }
.plain-steps, .beats { padding-left: 1.2em; }
.plain-steps li, .beats li { margin: 6px 0; }
.beats li::marker { color: var(--accent-text); font-weight: 700; }
@media (max-width: 860px) { .answer { grid-template-columns: 1fr; } .phone { margin: 0 auto; } }
@media (max-width: 560px) { .answer-lead { font-size: 18px; } }

/* phone frame around the first real sample */
.phone {
  width: 250px; aspect-ratio: 9 / 18; border-radius: 34px; padding: 10px;
  background: linear-gradient(160deg, #2a2335, #120f18); box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px #3a3149;
  rotate: -4deg;
}
.phone-screen {
  position: relative; height: 100%; border-radius: 26px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #3b1d4d 0%, #120f18 70%);
}
.phone-caption {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center;
  font: 900 18px/1 var(--display); text-transform: uppercase; letter-spacing: 1px; color: var(--accent);
}

/* ---------- sections ---------- */
.how, .pricing, .faq-wrap, .more, .effects-more { width: var(--wrap); margin: 0 auto; padding: 70px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.section-head h2 { margin: 0; }

.chip { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; align-self: flex-start; }
.chip-hot { background: var(--ink); color: var(--accent); }
.chip-cooling { background: rgba(13, 11, 18, .78); color: var(--sky); }
.chip-evergreen { background: rgba(13, 11, 18, .78); color: var(--cream); }
.eyebrow .chip-hot { background: var(--accent); color: var(--ink); }
.eyebrow .chip-cooling { background: var(--sky); color: var(--ink); }
.eyebrow .chip-evergreen { background: var(--cream); color: var(--ink); }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.price-pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 50px color-mix(in srgb, var(--accent) 8%, transparent); }
.price-flag { position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--ink); font: 700 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; }
.price-name { font: 900 26px/1 var(--display); text-transform: uppercase; margin: 0; }
.price-amount { font: 900 64px/1 var(--display); margin: 10px 0 4px; color: var(--accent-text); }
.price-per { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.price-list { margin: 0; padding-left: 1.1em; font-size: 15px; }
.price-list li { margin: 4px 0; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font: 900 24px/1 var(--display); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--text-2); }

/* Links to the question pages as cards with an arrow, two or three to a row (rapduo's guide cards): big enough to tap. */
.more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
ul.more-list > li { margin: 0; }
.more-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); color: var(--text); font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color .15s; }
.more-list a::after { content: "→"; flex: none; font-weight: 700; color: var(--accent-text); }
.more-list a:hover { border-color: var(--accent); color: var(--text); }
.crumbs { width: var(--wrap); margin: 0 auto; font-size: 14px; color: var(--muted); padding-top: 4px; }
.crumbs a { color: var(--muted); }

/* ---------- docs ---------- */
.doc { width: min(760px, 100% - 40px); margin: 0 auto; padding: 40px 0 80px; }
.doc h1 { font: 900 clamp(44px, 7vw, 76px)/.95 var(--display); text-transform: uppercase; }
.doc h2 { font: 900 30px/1 var(--display); margin-top: 1.6em; }
.doc li { margin: 6px 0; }

.order-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 280px)); gap: 18px; }
@media (max-width: 560px) { .order-videos { grid-template-columns: minmax(0, 300px); justify-content: center; } }
.vid { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vid video, .vid .vid-wait { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.vid-wait { display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(circle at 50% 30%, #3b1d4d, #120f18 70%); }
.vid-wait b { font: 900 26px/1 var(--display); text-transform: uppercase; color: var(--accent); display: block; margin-top: 12px; }
.vid-meta { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.vid-meta a { font-weight: 700; }
.vid-ios { padding: 0 14px 14px; display: grid; gap: 8px; }
.vid-ios p { margin: 0; }
.vid-save, .vid-save:hover { background: var(--accent); color: var(--ink); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .15); border-top-color: var(--accent); animation: spin 1s linear infinite; margin: 0 auto; }
/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 46px 0 30px; }
.footer-grid { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.footer-brand em { color: var(--accent-text); text-transform: none; }
.footer-h { font-weight: 700; margin: 0 0 8px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-guides { grid-column: 1 / -1; }
.footer-guides .footer-links { columns: 280px 2; column-gap: 30px; }
.footer-guides .footer-links li { break-inside: avoid; margin: 0 0 12px; }
.footer-links li { margin: 6px 0; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
/* Languages: one pill under the links that opens the list upward (after the AI vocals site), not a column of names. */
.footer-language-nav { position: relative; display: flex; justify-content: flex-end; width: var(--wrap); margin: 28px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.footer-language-menu { position: relative; width: max-content; max-width: 100%; }
.footer-language-menu summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: transparent; font-size: 14px; line-height: 1.25; list-style: none; cursor: pointer; }
.footer-language-menu summary::-webkit-details-marker { display: none; }
.footer-language-menu summary svg { width: 16px; height: 16px; flex: none; }
.footer-language-menu summary span { flex: 1; }
.footer-language-menu summary:hover, .footer-language-menu[open] summary { border-color: var(--accent); background: var(--ink-2); }
.footer-language-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer-language-menu[open] summary svg:last-child { rotate: 180deg; }
.footer-language-menu ul { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 100%; max-height: min(60vh, 360px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.footer-language-menu li a { display: block; min-height: 44px; padding: 12px 14px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.footer-language-menu li a:hover, .footer-language-menu li a[aria-current] { background: var(--ink-3); }
@media (max-width: 760px) { .footer-language-nav { justify-content: stretch; } .footer-language-menu { width: 100%; } }
:root[data-theme="light"] .footer-language-menu ul { box-shadow: 0 16px 40px rgba(40, 30, 10, .15); }
.studio-toast[hidden] { display: none; }
/* The pay window and the hidden deal (studio.js paywall, maybeDeal), after the AI vocals site's and RapDuo's: cream like
   the ticket, the video about to be bought on top, cards with the led one in the sticker shadow.
   height: fit-content: iPhone Safari otherwise stretches a modal dialog to the full screen and spreads its rows apart. */
.gate { width: min(420px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 24px); overflow-y: auto; align-content: start; padding: 22px 20px 16px; border: 0; border-radius: 22px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); outline: none; }
/* Taller than the screen: iPhone Safari leaves the strip under its toolbar uncovered otherwise. */
.gate::backdrop { inset: -25vh 0; background: rgba(8, 6, 12, .65); backdrop-filter: blur(4px); }
.gate[open] { display: grid; gap: 12px; }
.gate-close { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; color: #5c5566; cursor: pointer; }
.gate-close:hover { background: rgba(13, 11, 18, .07); }
.gate-title { margin: 4px 0 0; padding-right: 40px; font: 700 24px/1.15 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.gate-text { margin: 0; font-size: 15px; line-height: 1.45; color: #4d4558; }
.gate-video { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 2px 0 0; padding: 10px 12px; border: 2px dashed rgba(13, 11, 18, .22); border-radius: 16px; background: #fff8ee; }
.gate-video img { width: 40px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--ink); }
.gate-video img[hidden] { display: none; }
.gate-video-text { display: grid; gap: 2px; min-width: 0; }
.gate-video-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.gate-video-text small { font-size: 13px; line-height: 1.3; color: #6e6578; }
.gate-no { justify-self: center; min-height: 44px; padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 14px; color: #6e6578; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pay { width: min(440px, calc(100vw - 32px)); }
.pay[open] { gap: 10px; }
.pay-note { margin: -4px 0 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: #1f6e3f; }
.pay-note::before { content: "✓ "; }
.pay-starts { margin: -2px 0 2px; font-size: 13px; line-height: 1.4; color: #6e6578; }
.pay-cards { display: grid; gap: 12px; }
.pay-card { position: relative; display: grid; gap: 2px; padding: 14px 16px 16px; border: 2px solid rgba(13, 11, 18, .2); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, transform .12s; }
.pay-card:hover { border-color: var(--ink); }
.pay-card.lead { margin: 6px 4px 6px 0; border-color: var(--ink); box-shadow: 4px 5px 0 var(--ink); }
.pay-card.lead:hover { transform: translateY(-1px); }
.pay-badge { position: absolute; top: -12px; right: 12px; padding: 3px 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--accent); color: var(--ink); font: 800 12px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.pay-name { font: 700 15px/1.3 var(--sans); }
.pay-price { display: flex; align-items: baseline; gap: 6px; }
.pay-price b { font: 800 30px/1.1 var(--sans); letter-spacing: -.01em; }
.pay-price small { font-size: 14px; color: #6e6578; }
.pay-card-note { font-size: 13px; line-height: 1.4; color: #6e6578; }
.pay-cta { display: grid; place-items: center; width: 100%; min-height: 46px; margin-top: 10px; border: 2px solid var(--ink); border-radius: 12px; background: none; color: var(--ink); font: 800 15px/1.1 var(--sans); cursor: pointer; }
.pay-card.lead .pay-cta { background: var(--accent); }
.pay-fine { margin: 2px 0 0; text-align: center; font-size: 12px; line-height: 1.4; color: #6e6578; }
.pay-all { justify-self: center; padding: 4px 2px 6px; color: var(--ink); font-size: 14px; font-weight: 700; text-underline-offset: 3px; }
.pay-all:hover { color: var(--ink); }
@media (min-width: 760px) {
  .pay { width: min(760px, calc(100vw - 48px)); padding: 24px 24px 18px; }
  .pay-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .pay-card { align-content: start; }
  .pay-cta { align-self: end; }
}
.deal-badge { justify-self: start; margin: 4px 0 0; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--accent); color: var(--ink); font: 800 13px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
.deal-badge::before { content: "✦ "; }
.deal-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 6px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--accent); color: var(--ink); font: 800 17px/1.1 var(--sans); box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.deal-go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
@media (max-width: 360px) { .gate { padding: 18px 16px 12px; } }
@media (max-width: 960px) {
  .studio-toast { position: fixed; top: 72px; left: 12px; right: 12px; z-index: 60; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff1f0; color: #b42318; border: 1px solid #f4b4ae; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: 15px; font-weight: 600; line-height: 1.35; }
}
.footer-fine { width: var(--wrap); margin: 30px auto 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- account additions ---------- */
.btn-inline { display: inline-flex; width: auto; text-decoration: none; margin-top: 4px; }
.post-tips { margin-top: 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; }
.post-tips h2 { font-size: 28px; margin-bottom: .3em; }
.post-tips ul { margin: 0; padding-left: 1.1em; color: var(--text-2); }
.post-tips li { margin: 6px 0; }
.form-msg.ok { color: #1f7a3a; }
.doc .form-msg.ok { color: var(--accent-text); }

/* ---------- misc ---------- */
.phone-video { width: 100%; height: 100%; object-fit: cover; }
.updated { font-size: 14px; margin: 10px 0 0; }
.origin-link { font-size: 15px; color: var(--muted); }
/* "What's new on this page" (catalog.js / guides.mjs changes) */
.changes { list-style: none; padding: 0; margin: .4em 0 0; }
.changes li { margin: 6px 0; }
.changes time { display: inline-block; min-width: 6.4em; color: var(--muted); font-variant-numeric: tabular-nums; }

.phone-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sample-note { max-width: 300px; text-align: center; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

.answer-solo { grid-template-columns: 1fr; }
.answer-solo .answer-inner { max-width: 820px; }

/* The hero floor is wider than the screen on purpose (perspective). Clipping on <html> keeps the page
   exactly screen-wide, which body overflow alone does not guarantee on iOS Safari. */
html { overflow-x: clip; }

/* ---------- first-screen proof: the photo and the video it became ---------- */
.hero-demo { margin: 26px 0 0; display: flex; align-items: center; gap: 12px; }
.hd-tile { position: relative; display: block; width: 96px; flex: none; }
.hd-tile img, .hd-tile video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.hd-video video { border: 2px solid var(--accent); }
.hd-tile i { position: absolute; left: 6px; top: 6px; font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: rgba(13, 11, 18, .78); color: var(--cream); padding: 4px 6px; border-radius: 6px; }
.hd-video i { background: var(--accent); color: var(--ink); }
.hd-arrow { font: 900 28px/1 var(--display); color: var(--accent-text); }
.hd-cap { max-width: 24ch; margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.hd-cap b { display: block; margin-bottom: 4px; font: 900 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--text); }
.hd-cap .hd-src { display: block; margin-top: 4px; font-size: 12px; }
/* Photos, arrow and clip lay out as one row with the caption; phones turn this into a box (below). */
.hd-media { display: contents; }
.hero-trend .hero-demo { margin: 18px 0 4px; }
@media (max-width: 960px) {
  /* Home on phones: the clip sits beside the headline, the source photo tucked into its corner. */
  .hero:not(.hero-trend) .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
  .hero:not(.hero-trend) .hero-copy > * { grid-column: 1 / -1; }
  .hero:not(.hero-trend) .hero-copy > h1 { grid-column: 1; grid-row: 2; align-self: center; }
  .hero:not(.hero-trend) .hero-demo { grid-column: 2; grid-row: 2; align-self: center; position: relative; display: block; width: clamp(84px, 27vw, 120px); margin: 0 0 14px; }
  .hero:not(.hero-trend) .hd-video { width: 100%; }
  .hero:not(.hero-trend) .hd-photo { position: absolute; left: -18px; bottom: -10px; width: 40%; z-index: 1; }
  .hero:not(.hero-trend) .hd-photo img { border: 2px solid var(--cream); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  .hero:not(.hero-trend) .hd-photo i, .hero:not(.hero-trend) .hd-arrow, .hero:not(.hero-trend) .hd-cap { display: none; }
  .hero-trend .hd-cap { font-size: 13px; }
}
/* The photos stack beside the video and the video is as tall as the stack: the result is the biggest thing in the proof. */
.hero-trend .hero-demo { --hd: 84px; }
.hero-trend .hd-photos { display: grid; gap: 8px; flex: none; }
.hero-trend .hd-photo { width: var(--hd); }
.hero-trend .hd-video { width: calc(var(--hd) * 2 + 4.5px); }
/* Whose photo it is, along the bottom (over the clothes, not the face). */
.hero-trend .hd-photo i { top: auto; left: 4px; right: 4px; bottom: 4px; text-align: center; line-height: 1.15; padding: 3px 4px; }
@media (max-width: 1100px) { .hero-trend .hero-demo { --hd: 72px; } }
/* Phones: the clip sits beside the headline with its photos tucked into the corner, so the upload box still makes
   the first screen (rapduo, hotellobbyvideo and airaindance all show theirs without scrolling). */
@media (max-width: 560px) {
  .hero-trend .hero-copy:has(.hero-demo) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .hero-trend .hero-copy:has(.hero-demo) > * { grid-column: 1 / -1; }
  .hero-trend .hero-copy:has(.hero-demo) > h1 { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 10px; font-size: clamp(24px, min(13vw, calc((100vw - 160px) / (var(--fit, 1) * .46))), 96px); }
  /* The caption goes under the headline, not under the narrow clip. */
  .hero-trend .hero-copy > .hero-demo { display: contents; }
  .hero-trend .hd-media { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: block; position: relative; width: 104px; margin: 0 0 14px; }
  .hero-trend .hd-video { width: 100%; }
  .hero-trend .hd-photos { position: absolute; left: -12px; bottom: -8px; z-index: 1; width: 38%; gap: 4px; }
  .hero-trend .hd-photo { width: 100%; }
  .hero-trend .hd-photo img { border: 2px solid var(--cream); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  .hero-trend .hd-photo i, .hero-trend .hd-arrow, .hero-trend .hd-what { display: none; }
  .hero-trend .hd-cap { grid-column: 1; grid-row: 3; align-self: start; margin: 0 0 14px; font-size: 12px; line-height: 1.35; }
  .hero-trend .hd-cap b { font-size: 14px; margin-bottom: 2px; }
  .hero-trend .hd-cap .hd-src { margin-top: 0; font-size: 12px; }
}
/* Phones: the headline and the clip beside it say it (as on the AI vocals site): no kicker or facts line, so the upload
   box comes up; the headline and its clip take the first grid row (they were placed in row 2, under the kicker). */
@media (max-width: 960px) {
  .hero .eyebrow, .hero .facts { display: none; }
  .hero:not(.hero-trend) .hero-copy > h1, .hero:not(.hero-trend) .hero-demo { grid-row: 1; }
}
@media (max-width: 560px) {
  .hero-trend .hero-copy:has(.hero-demo) > h1 { grid-row: 1; }
  .hero-trend .hd-media { grid-row: 1 / span 2; }
  .hero-trend .hd-cap { grid-row: 2; }
}

.drop-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.4; color: #6e6578; }
.drop-note b { color: #3d3547; }

/* What you get + the refund promise, right above the fine print: small print, not another box. */
.ticket-assure { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.4; color: #4d4558; }
.ticket-assure li { position: relative; padding-left: 18px; }
.ticket-assure li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: #1f9d55; }
.ticket-assure a { color: inherit; }
.ticket-assure + .ticket-fine { margin-top: 10px; }

/* The source photo in the corner of a sample video. */
.result-media { position: relative; display: block; }
.photo-inset { position: absolute; left: 10px; bottom: 12px; display: block; width: 27%; max-width: 72px; }
.photo-inset img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; border: 2px solid var(--cream); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.photo-inset i { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; font: 700 9px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--cream); color: var(--ink); padding: 3px 5px; border-radius: 5px; }
.phone { position: relative; }
.phone .photo-inset { left: -30px; bottom: 56px; width: 76px; max-width: none; rotate: 6deg; }
/* Two or more source photos go under the video, each named like its upload box (parts.mjs madeFrom). */
.made-from { margin: 10px 0 0; }
.mf-head { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mf-row { display: flex; gap: 10px; }
.mf-tile { display: block; width: 72px; flex: none; }
.mf-tile img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); }
.mf-tile i { display: block; margin-top: 4px; font: 600 11px/1.25 var(--sans); font-style: normal; color: var(--text-2); }
.phone-figure .made-from { text-align: center; }
.phone-figure .mf-row { justify-content: center; }

.link-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: #ff8a80; }
.link-btn:disabled { opacity: .6; cursor: progress; }
.form-msg.hint { color: #7a5b00; }

/* At-a-glance facts on effect pages. */
.glance { margin: 18px 0 30px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.glance div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 14px; background: var(--ink-2); }
.glance dt { font: 900 16px/1.4 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--accent-text); }
.glance dd { margin: 0; font-size: 15px; color: var(--text-2); }
@media (max-width: 520px) { .glance div { grid-template-columns: 1fr; gap: 2px; } }

/* Sound toggle on sample videos. */
.sound-btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  background: rgba(13, 11, 18, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.sound-btn[aria-pressed="true"] { background: var(--accent); }
.hd-tile .sound-btn { width: 28px; height: 28px; font-size: 13px; right: 6px; bottom: 6px; }
/* The first-screen sample's sound button says "Play with sound" (parts.mjs soundButton labelled); once on, just 🔊. */
.hd-tile .sound-labelled { width: auto; height: 28px; padding: 0 10px 0 8px; gap: 5px; border-radius: 999px; display: inline-flex; align-items: center; left: 6px; right: 6px; justify-content: center; font: 700 12px/1 var(--sans); color: #fff; white-space: nowrap; }
.hd-tile .sound-labelled[aria-pressed="true"] { left: auto; width: 28px; padding: 0; }
.sound-labelled .sb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sound-labelled[aria-pressed="true"] .sb-text { display: none; }
@media (max-width: 560px) {
  .hd-tile .sound-labelled { left: auto; width: 28px; padding: 0; }
  .hd-tile .sound-labelled .sb-text { display: none; }
}
.phone-screen .sound-btn { right: 12px; bottom: 44px; }

/* Real results (parts.mjs sampleGallery): on the home page right under the generator, centered; phones show two side by
   side, and more than two scroll sideways with the next one peeking in. */
.gallery { width: var(--wrap); margin: 0 auto; padding: 10px 0 50px; }
.gallery-center { padding: 64px 0 70px; border-top: 1px solid var(--line); }
.gallery-center > h2 { text-align: center; margin-bottom: 30px; }
.gallery-row { display: flex; flex-wrap: wrap; gap: 26px 18px; }
.gallery-center .gallery-row { justify-content: center; }
.gallery-item { margin: 0; width: 260px; min-width: 0; }
.gallery-item video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); }
.gallery-note { margin: 18px auto 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* Title, then the settings on their own line under it (after the AI vocals site, 10-30): side by side, a short title
   kept them on its right and a long one pushed them under, so the cards didn't line up. */
.sample-cap { margin: 12px 0 0; display: grid; gap: 4px; }
.sample-cap b { font: 900 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.sample-cap span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gallery-item .sample-note { margin: 8px 0 0; text-align: left; max-width: none; }
.sample-use { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; color: var(--accent-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.sample-use:hover { text-decoration: underline; }
/* Phones only (the cards scroll sideways there): which card is in view, and the page with all of them (after the AI vocals site). */
.sample-pager { display: none; }
@media (max-width: 560px) {
  .gallery-center { padding-top: 54px; }
  .gallery-center > h2 { text-align: left; margin-bottom: 20px; }
  .gallery-center > .gallery-note { margin-left: 0; text-align: left; }
  .gallery-row { flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .gallery-row::-webkit-scrollbar { display: none; }
  .gallery-center .gallery-row { justify-content: flex-start; margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; }
  .gallery-item { flex: 0 0 42%; width: auto; scroll-snap-align: start; }
  .gallery-row[style*="--n:1;"] .gallery-item { flex-basis: 64%; }
  .gallery-row[style*="--n:2;"] .gallery-item { flex-basis: calc(50% - 6px); }
  .sample-cap b { font-size: 19px; }
  .gallery-item .mf-row { gap: 8px; }
  .gallery-item .mf-tile { flex: 1 1 0; width: auto; max-width: 72px; }
  .sample-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--muted); }
  .sample-count { flex: none; font-variant-numeric: tabular-nums; }
  .sample-dots { display: flex; gap: 5px; flex: 1; min-width: 0; }
  .sample-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
  .sample-dots i.on { background: var(--accent); }
  .sample-pager a { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 700; text-decoration: none; }
}

/* ---------- question pages ---------- */
.doc.guide h1 { font-size: clamp(34px, 5.4vw, 54px); line-height: 1; }
.doc.guide .answer-lead { margin: 18px 0 16px; }
.guide-demo { margin: 34px 0 10px; display: flex; justify-content: center; }
.guide-studio { margin: 24px 0 36px; }
.guide-cta { display: inline-block; background: var(--accent); color: var(--ink); padding: 14px 20px; border-radius: 14px; font: 900 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; text-decoration: none; }
.guide-cta:hover { background: var(--cream); color: var(--ink); }

/* ---------- header: language, theme, account ---------- */
.site-nav { gap: 18px; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); background: var(--ink-2); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 150px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.lang-menu li a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.lang-menu li a:hover, .lang-menu li a[aria-current] { background: var(--ink-3); }
.theme-btn { border: 0; background: none; color: var(--muted); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; padding: 0; display: grid; place-items: center; flex: none; }
.theme-btn:hover { color: var(--text); background: var(--ink-2); }
.site-nav > .lang-menu .menu-ico, .site-nav > .theme-btn .menu-ico { width: 20px; height: 20px; }
.site-nav .nav-account { color: var(--text); font-weight: 600; white-space: nowrap; }
.site-nav .nav-account.signed-in { color: var(--accent-text); }
@media (max-width: 560px) {
  .site-nav { gap: 10px; }
  .site-nav .nav-cta { display: none; }
  .theme-btn { width: 28px; height: 28px; font-size: 14px; }
  .lang-menu summary { padding: 5px 7px; font-size: 13px; }
}
/* Phones and tablets: the page links move into a menu, as on all three reference sites; on phones the theme switch
   goes in there too, so the header keeps the site name, language, sign-in and the menu. */
.nav-menu { position: relative; display: none; }
.nav-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 18px; line-height: 1; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--ink-3); }
.nav-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 220px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.site-nav .nav-menu a, .nav-menu .menu-theme .theme-btn { display: block; width: 100%; height: auto; padding: 10px 12px; border: 0; border-radius: 8px; color: var(--text); font: inherit; font-size: 16px; text-align: left; text-decoration: none; }
.site-nav .nav-menu a:hover, .nav-menu .menu-theme .theme-btn:hover { background: var(--ink-3); }
.site-nav .nav-menu li:first-child a { color: var(--accent-text); font-weight: 700; }
.menu-theme { display: none; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sun, :root[data-theme="light"] .ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: block; }
.nav-menu .menu-theme .theme-btn { gap: 10px; }
.nav-menu .menu-theme .menu-ico { width: 20px; height: 20px; flex: none; }
@media (max-width: 860px) { .nav-menu { display: block; } }
@media (max-width: 560px) {
  .site-nav > .theme-btn { display: none; }
  .menu-theme { display: block; }
  /* Larger phone targets without moving the upload form further down the first screen. */
  .site-header { padding: 13px 0; }
  .lang-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .site-nav .nav-account { display: inline-flex; align-items: center; min-height: 44px; padding: 0 3px; }
  .nav-menu summary { width: 44px; height: 44px; }
  .site-nav .nav-menu a, .nav-menu .menu-theme .theme-btn { display: flex; align-items: center; min-height: 44px; }
  .pack-line .link-btn, .need-packs { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 0; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 0; }
}
.lang-banner {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 44px 10px 16px; background: var(--accent); color: var(--ink); font-size: 15px; font-weight: 600;
}
.lang-banner a { color: var(--ink); text-decoration: underline; }
.lang-banner button { position: absolute; right: 10px; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }

/* ---------- studio (generator) ---------- */
.ticket-balance { font: 900 18px/1 var(--display); color: var(--ink); text-decoration: none; background: var(--accent); padding: 6px 10px; border-radius: 999px; }
.ticket-balance:hover { color: var(--ink); background: #fff; }
.effect-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; }
.effect-tabs a { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(13, 11, 18, .2); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.effect-tabs a[aria-current] { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 8px 12px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .15s, background .15s; }
.seg span i { font-style: normal; font-size: 12px; color: #1f7a3a; }
.seg input:checked + span { border-color: var(--ink); background: var(--accent); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.seg-wide { margin-bottom: 10px; }
.seg-wide label { flex: 1; } .seg-wide span { text-align: center; }
.seg-ver span { white-space: normal; padding: 9px 10px; }
.seg-ver b { display: block; font-size: 15px; }
.seg-ver small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.seg-ver small i { font-size: 13px; font-weight: 800; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span { display: block; padding: 7px 12px; border-radius: 999px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); font-size: 14px; }
.chip-opt span i { font-style: normal; font-weight: 700; color: #7a5b00; }
.chip-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.chip-opt input:checked + span i { color: var(--accent); }
.chip-opt input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.opt-grid { display: grid; gap: 10px; }
/* The video options on one line with what's picked; a tap opens the choices. */
.opt-more { border: 2px solid rgba(13, 11, 18, .14); border-radius: 12px; background: #fff; }
.opt-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 12px; font-size: 14px; font-weight: 600; }
.opt-more summary::-webkit-details-marker { display: none; }
.opt-more[open] summary { border-bottom: 1px solid rgba(13, 11, 18, .1); }
.opt-change { flex: none; font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: #f1ece2; }
.opt-change::after { content: " ▾"; font-size: 11px; }
.opt-more[open] .opt-change::after { content: " ▴"; }
.opt-more .opt-grid { padding: 12px; }
p.opt-sum { margin: 0; font-size: 14px; font-weight: 600; }
.opt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.opt legend { float: left; padding: 0; font-size: 13px; font-weight: 700; color: #4d4558; }
.text-opt { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 700; color: #4d4558; }
.text-opt input { font: inherit; font-size: 16px; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .2); background: #fff; color: var(--ink); }
.text-opt small { font-weight: 400; color: #6e6578; }
.drop-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 11, 18, .45); }
.go-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.go-row.go-solo { grid-template-columns: minmax(0, 1fr); }
.btn-preview { border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 14px; padding: 8px 10px; cursor: pointer; display: grid; align-content: center; gap: 2px; text-align: center; }
.btn-preview-label { font: 900 19px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.btn-preview small { font-size: 12px; color: #4d4558; }
.btn-preview:hover { background: var(--accent); }
.btn-go-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio.busy .btn-go, .studio.busy .btn-preview { opacity: .6; cursor: progress; }
.cost-line { margin: 10px 0 0; font-size: 13px; color: #4d4558; text-align: center; }
.pack-line { margin: 10px 0 0; text-align: center; }
.pack-line .link-btn { color: var(--ink); font-weight: 700; }
.made-line { margin: 6px 0 0; font-size: 12px; color: #4d4558; text-align: center; }
.made-line::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #1f9d55; vertical-align: 1px; }
.need { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff2df; border: 1px solid rgba(13, 11, 18, .12); display: grid; gap: 8px; text-align: center; }
.need-text { margin: 0; font-weight: 700; font-size: 14px; }
.need .btn-go { justify-content: space-between; }
.need-packs { color: var(--ink); font-size: 14px; }
.result { margin-top: 12px; display: grid; gap: 10px; }
.result .vid-wait { border-radius: 14px; aspect-ratio: auto; min-height: 180px; color: var(--cream); }
.result video { width: 100%; max-height: 420px; border-radius: 14px; background: #000; }
.result-h { margin: 0; font: 900 22px/1 var(--display); text-transform: uppercase; }
.result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.result-actions .btn-go { width: auto; text-decoration: none; }
.result-actions a:not(.btn-go) { color: var(--ink); }
@media (max-width: 400px) { .go-row { grid-template-columns: minmax(0, 1fr); } .opt { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inner pages ---------- */
.wrap { width: var(--wrap); margin: 0 auto; padding: 30px 0 80px; }
.wrap.narrow { width: min(720px, 100% - 32px); }
.center { text-align: center; }
.page-head { margin-bottom: 26px; }
.page-head h1, .wrap > h1, .signin h1 { font: 900 clamp(44px, 7vw, 84px)/.92 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.page-head .lede, .signin .lede { max-width: 60ch; }
.sub-h { font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; margin: 40px 0 10px; }
.panel .sub-h { margin-top: 0; font-size: 24px; }
.wrap .form-msg { color: #ff8a80; }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 18px; }
.btn-inline { display: inline-flex; width: auto; text-decoration: none; }

/* pricing */
.price-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.price-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .price-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-grid-2, .price-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.price-card { display: flex; flex-direction: column; }
.price-card .price-amount { font-size: 54px; }
.price-amount small { font: 600 15px/1 var(--sans); color: var(--muted); margin-left: 4px; }
.price-credits { margin: 0 0 4px; font-weight: 700; }
.price-about { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.price-card .btn-go { margin-top: auto; background: var(--accent); color: var(--ink); }
.price-card .btn-go:hover { background: var(--text); color: var(--bg); }
.price-card .price-list { margin-bottom: 16px; }
.price-flag-save { background: var(--accent-2); }
.price-more { margin-top: 22px; }
/* "Just one video" above the packs (hotellobbyvideo's "Start with one video"), and the checkout promises under them. */
.one-video { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 4px 0 8px; padding: 22px 24px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--ink-2); }
.one-video .price-name { margin-bottom: 8px; }
.one-video p.muted { margin: 0; max-width: 62ch; }
.one-video-spec { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.one-video-spec b { color: var(--text); }
.one-video-spec span { white-space: nowrap; }
.trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.trust li::before { content: "✓ "; color: var(--accent-text); font-weight: 700; }

/* The last call on effect pages, as on all three reference sites. */
.final { width: var(--wrap); margin: 0 auto; padding: 70px 0 60px; border-top: 1px solid var(--line); text-align: center; }
.final p { max-width: 46ch; margin: 0 auto 22px; font-size: 18px; color: var(--text-2); }
.final .final-go { display: flex; justify-content: center; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin: 0 auto; max-width: none; }
.period-switch { margin: 6px 0 22px; }
.period-switch span { background: var(--ink-2); color: var(--text); border-color: var(--line); }
.period-switch span i { color: var(--accent-text); }
.period-switch input:checked + span { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.period-switch input:checked + span i { color: var(--ink); }
.gift-toggle { color: var(--text-2); font-size: 15px; margin-top: 18px; }
/* The site's own checkbox instead of the browser's white one (after the AI vocals site). */
.gift-toggle input { appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--text-2); border-radius: 6px; background: transparent; cursor: pointer; }
.gift-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.gift-toggle input:checked::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.gift-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pricing page, wide screens: heading on the left, cards or questions on the right (the home page FAQ's layout),
   so two plan cards and the FAQ don't sit against the left edge with a third of the row empty. */
@media (min-width: 1100px) {
  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-auto-rows: min-content; column-gap: 56px; align-items: start; margin-top: 40px; }
  .split > * { grid-column: 1; }
  .split > .sub-h { margin-top: 0; }
  .split > .price-grid, .split > .faq { grid-column: 2; grid-row: 1 / span 4; max-width: none; }
}
/* A long list of questions on phones: the first four, then "Show N more" (guide.mjs guideList, app.js). */
.fold-btn { display: none; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 10px; padding: 10px 16px; border: 1px dashed color-mix(in srgb, var(--text) 28%, transparent); border-radius: 14px; background: transparent; color: var(--text); font: 700 15px/1.2 var(--sans); cursor: pointer; }
.fold-btn:hover { border-color: var(--accent); }
@media (max-width: 560px) {
  .more.fold:not(.unfolded) .more-list > li:nth-child(n+5) { display: none; }
  .more.fold:not(.unfolded) > .fold-btn { display: flex; }
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; max-width: 620px; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cost-table th, .cost-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cost-table thead th { background: var(--ink-2); font-weight: 700; }
.cost-table tbody tr:last-child > * { border-bottom: 0; }
/* Guide tables (the apps compared page): wide, scrolls sideways on phones inside .table-wrap */
.table-wide { max-width: none; margin: 14px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 8.5em; }
.data-table thead th { background: var(--ink-2); font-weight: 700; white-space: nowrap; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
/* Phones: one card per row, each value under its column name (guide.mjs sets data-label) */
@media (max-width: 560px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; min-width: 0; }
  .data-table tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table th, .data-table td { padding: 4px 14px; border-bottom: 0; }
  .data-table th[scope="row"] { padding-top: 10px; font-size: 15px; }
  .data-table td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
  .data-table td::before { content: attr(data-label); color: var(--muted); }
}

/* how it works + other effects on the home page */
.how-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: how; }
.how-grid li { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; counter-increment: how; }
.how-grid li::before { content: "0" counter(how); display: block; font: 900 34px/1 var(--display); color: var(--accent-text); margin-bottom: 10px; }
.how-grid b { font: 900 24px/1.05 var(--display); text-transform: uppercase; }
.how-grid p { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
@media (max-width: 800px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }
.effect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.effect-card { display: grid; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.effect-card img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; }
.effect-card b { font: 900 22px/1 var(--display); text-transform: uppercase; }
.effect-card span { font-size: 14px; color: var(--muted); }
.effect-card i { font-style: normal; font-weight: 700; color: var(--accent-text); }

/* sign-in */
.signin { max-width: 460px; margin: 20px auto; }
.signin form { display: grid; gap: 10px; }
.signin label { font-weight: 700; font-size: 14px; }
.signin input, .gift-form input { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: #fff; color: #1f1f1f; font-weight: 700; text-decoration: none; border: 1px solid #dadce0; }
.btn-google:hover { color: #1f1f1f; background: #f4f4f4; }
.btn-google span { font: 900 20px/1 var(--sans); color: #4285f4; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin .btn-go, .gift-form .btn-go, .panel .btn-go { background: var(--accent); color: var(--ink); }

/* account */
.account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.account-head h1 { font: 900 clamp(44px, 7vw, 84px)/.92 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.account-head p { margin: 0; }
.balance-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line); }
.balance-label { margin: 0; font-size: 13px; color: var(--muted); }
.balance-n { margin: 0; font: 900 40px/1 var(--display); color: var(--accent-text); white-space: nowrap; }
.balance-card .btn-go { width: auto; margin-left: auto; background: var(--accent); color: var(--ink); text-decoration: none; }
.notice { padding: 12px 16px; border-radius: 12px; background: var(--accent); color: var(--ink); font-weight: 600; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
.vid-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 0; font-size: 14px; }
.vid-actions a { font-weight: 700; }
.vid-actions .btn-go { width: auto; font-size: 16px; padding: 10px 12px; background: var(--accent); color: var(--ink); text-decoration: none; }
.vid-meta span { color: var(--muted); }
.empty { padding: 30px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; }
.ledger, .gift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; }
.ledger .plus { color: #4ccf7a; } .ledger .minus { color: var(--muted); }
.gift-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gift-link { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.sub-actions { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; margin: 0; }
.account-side .panel p { margin: 0 0 10px; }

/* gift */
.gift-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.gift-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.gift-form input { width: 140px; }
.gift-form .btn-go { width: auto; }
.gift-new { margin-top: 14px; display: grid; gap: 8px; }
.gift-new p { margin: 0; font-weight: 700; }
.gift-new .btn-go { width: auto; justify-self: start; }
.gift-badge { font-size: 64px; margin: 10px 0 0; }
#redeem .btn-go { background: var(--accent); color: var(--ink); }

/* mock checkout */
.mock .btn-go { max-width: 360px; background: var(--accent); color: var(--ink); }

/* ---------- light theme ---------- */
:root[data-theme="light"] {
  --bg: #f7f4ee;
  --text: #17151c;
  --ink-2: #ffffff;
  --ink-3: #efeae0;
  --line: #ddd6c8;
  --muted: #625d69;
  --text-2: #2f2b36;
  --accent-text: color-mix(in srgb, var(--accent) 40%, #1b1a10);
  color-scheme: light;
}
:root[data-theme="light"] body::before { opacity: .025; }
:root[data-theme="light"] .ticket { box-shadow: 0 24px 60px rgba(40, 30, 10, .16), 0 0 0 1px rgba(13, 11, 18, .08); }
:root[data-theme="light"] .phone { box-shadow: 0 30px 60px rgba(40, 30, 10, .25); }
:root[data-theme="light"] .lang-menu ul, :root[data-theme="light"] .nav-menu ul { box-shadow: 0 16px 40px rgba(40, 30, 10, .15); }
:root[data-theme="light"] .ledger .plus { color: #1f7a3a; }
:root[data-theme="light"] .wrap .form-msg { color: #b3261e; }
:root[data-theme="light"] .price-pop { box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgba(40, 30, 10, .1); }

/* "Photo on your phone?" / "Get your videos on your phone" (computers): the button and the QR code dialog (app.js
   phoneQR), and /phone/, the page the code opens on the phone (phone.js). */
.phone-line { margin: 8px 0 0; }
.phone-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff8ec; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.phone-btn:hover { background: var(--accent); }
.post-tips .phone-btn { margin-bottom: 12px; }
.phone-dialog { width: min(360px, 100% - 32px); padding: 22px; border: 0; border-radius: 18px; background: var(--cream); color: var(--ink); text-align: center; }
.phone-dialog::backdrop { background: rgba(11, 11, 12, .72); }
.phone-title { margin: 0 0 6px; font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.phone-how { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #3d3547; }
.phone-qr { width: 220px; height: 220px; margin: 0 auto; }
.phone-qr svg { display: block; width: 100%; height: 100%; }
.phone-wait { margin: 12px 0 10px; font-size: 13px; color: #6e6578; }
.phone-wait:empty { display: none; }
.phone-dialog .phone-close { color: #3d3547; }
.phone-pick { position: relative; justify-content: center; margin-top: 8px; }
.phone-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.phone-pick.is-busy { opacity: .6; pointer-events: none; }
.phone-preview { display: block; width: 100%; max-height: 300px; object-fit: contain; margin-top: 14px; border-radius: 12px; background: #1c1724; }
.form-msg.ok { color: #3f8f2a; font-weight: 600; }