/* Turnly: 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: #5ee6c4;   /* buttons, links, prices, highlights: Turnly mint */
  --accent-2: #b892ff; /* the "AI" in the big headline, focus rings: violet */
  --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;
}
.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; }
/* Wide screens: the headline stays beside the (taller) generator while scrolling, instead of leaving an empty column. */
@media (min-width: 961px) { .hero-trend .hero-copy { position: sticky; top: 28px; } }
.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; }
@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);
  rotate: .6deg;
}
@media (max-width: 960px) { .ticket { rotate: none; } } /* a full-width card tilted reads as crooked */
.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-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%);
}

/* ---------- 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); }
.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); }
  /* No "Real result" caption on phones: it pushed the upload box below the first screen (the gallery says it). */
  .hero-trend .hd-photo i, .hero-trend .hd-arrow, .hero-trend .hd-cap { display: none; }
}

.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; }
.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); }
.sample-cap { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.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; }
@media (max-width: 560px) {
  .gallery-center { padding-top: 54px; }
  .gallery-center > h2 { text-align: left; margin-bottom: 20px; }
  .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; }
}

/* ---------- 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; color: var(--muted); font-weight: 700; font-size: 14px; letter-spacing: .06em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: " ▾"; font-size: 11px; }
.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: 1px solid var(--line); background: none; color: var(--muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; flex: none; }
.theme-btn:hover { color: var(--text); }
.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); }
@media (max-width: 860px) { .nav-menu { display: block; } }
@media (max-width: 560px) { .site-nav > .theme-btn { display: none; } .menu-theme { display: block; } }
.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; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; margin: -4px 0 14px; }
.effect-tabs a { flex: none; }
.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 and its credits (rapduo); 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; min-height: 52px; padding: 8px 12px; }
.opt-more summary::-webkit-details-marker { display: none; }
.opt-more[open] summary { border-bottom: 1px solid rgba(13, 11, 18, .1); }
.opt-text { min-width: 0; display: grid; gap: 1px; }
.opt-text b { font-size: 14px; font-weight: 700; }
.opt-text small { font-size: 12px; color: #6e6578; text-decoration: underline; text-underline-offset: 2px; }
.opt-credits { flex: none; font-size: 13px; font-weight: 800; padding: 5px 9px; border-radius: 8px; background: #f1ece2; white-space: nowrap; }
.opt-credits::after { content: " ▾"; font-size: 11px; }
.opt-more[open] .opt-credits::after { content: " ▴"; }
.opt-more .opt-grid { padding: 12px; gap: 14px; }
.opt-more .seg span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.seg input:disabled + span { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.opt-models { grid-template-columns: minmax(0, 1fr); }
.model-list { display: grid; gap: 6px; }
.model-row { position: relative; cursor: pointer; }
.model-row input { position: absolute; opacity: 0; pointer-events: none; }
.model-row span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); }
.model-row b { font-size: 15px; }
.model-row i { font-style: normal; font-size: 14px; font-weight: 800; white-space: nowrap; }
.model-row em { grid-column: 1 / -1; font: 400 12px/1.3 var(--sans); color: #6e6578; }
.model-row input:checked + span { border-color: var(--ink); background: var(--accent); }
.model-row input:checked + span em { color: #2d3a35; }
.model-row input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
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; }
.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; }
.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; }
.cost-table tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.cost-table td small { font-size: 12px; color: var(--muted); }
/* 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-card .tag { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800; }

/* 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; }

/* Phones, after the AI vocals site and RapDuo (10-28): the header stays pinned, opaque, with an Upload button that
   opens the photo picker (studio.js); sections alternate two backgrounds edge to edge, each led by a small tag; the
   template wall is two columns of small cards; long FAQs show their first questions (app.js fold). */
:root { --alt-bg: #17161b; --alt-card: #0d0d10; }
:root[data-theme="light"] { --alt-bg: #efe9dd; --alt-card: #ffffff; }
.sec-alt { --ink-2: var(--alt-card); background: var(--alt-bg); box-shadow: 0 0 0 100vmax var(--alt-bg); clip-path: inset(0 -100vmax); }
.sec-tag { display: inline-block; margin: 0 0 14px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.fold-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 860px; 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); }
.faq-wrap.fold:not(.unfolded) .faq > details:nth-child(n+7) { display: none; }
.nav-cta-short { display: none; }
@media (max-width: 960px) {
  body { overflow-x: clip; padding-top: 65px; }
  html { scroll-padding-top: 76px; }
  body::before { top: 65px; }
  .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 45; width: auto; height: 65px; padding: 10px max(20px, (100% - 1180px) / 2); background: var(--alt-bg); border-bottom: 1px solid var(--line); }
  .site-header .site-nav { gap: 8px; }
  .site-header .site-nav > .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .site-header .site-nav > .nav-cta:hover { color: var(--ink); background: var(--accent); } /* a tap leaves :hover stuck on phones */
  .site-nav > .nav-account { display: none; }
  .nav-cta .nav-cta-text { display: none; }
  .nav-cta .nav-cta-short { display: inline; }
  .site-nav .nav-menu > ul > li:first-child { display: none; } /* the same button is in the header */
  .hero { padding-bottom: 40px; }
  .hero-trend .eyebrow { margin-bottom: 10px; }
  .lede { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 560px) {
  /* The headline already says it: drop the ticket's "Make your video" stub so the upload box makes the first screen. */
  .ticket { padding-top: 16px; }
  .ticket::before, .ticket::after, .ticket-kicker { display: none; }
  .ticket-head { padding: 0; margin: 0; border: 0; }
  .hero { gap: 16px; }
  .facts { margin-top: 8px; }
  .price-card { padding: 18px 18px 16px; }
  .price-card .price-amount { font-size: 42px; margin: 6px 0 2px; }
}

/* Template cards after RapDuo's effect grid (10-28): a poster tile with the name over a dark fade, two lines below.
   3:4 tiles keep a desktop row at six cards; posters are 9:16, so the crop sits a little above center (faces). */
.effect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 14px; }
.effect-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
.effect-card[hidden] { display: none; }
.ec-media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); transition: border-color .2s; }
.ec-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ec-media::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8, 7, 10, .82)); }
.ec-media b { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; font: 900 21px/1 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.effect-card .tag { position: absolute; top: 10px; left: 10px; z-index: 1; }
.ec-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.effect-card i { padding: 0 2px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--accent-text); }
.effect-card:hover .ec-media, .effect-card:focus-visible .ec-media { border-color: var(--accent); }
.effect-card:hover .ec-media img { transform: scale(1.04); }
.wall-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.wall-filter button { min-height: 40px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 600 14px/1 var(--sans); cursor: pointer; }
.wall-filter button:hover { border-color: var(--accent); }
.wall-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.tpl-head { width: var(--wrap); margin: 0 auto 26px; padding-top: 30px; }
@media (max-width: 960px) {
  .effect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 10px; }
  .ec-media { border-radius: 12px; }
  .ec-media b { left: 10px; right: 10px; bottom: 9px; font-size: 17px; }
  .ec-sum { font-size: 13px; line-height: 1.4; }
  .wall-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 16px; padding: 0 20px 4px; scrollbar-width: none; }
  .wall-filter button { flex: none; }
}
/* Desktop: the hero's two columns stay inside the page (a grid item's min-content, here the studio's long template
   chips, would otherwise widen the right column past the screen edge), and the chips wrap instead of scrolling. */
.hero > * { min-width: 0; }
@media (min-width: 961px) { .effect-tabs { flex-wrap: wrap; overflow: visible; } }
.tpl-head + .effects-more { border-top: 0; padding-top: 6px; }
@media (min-width: 961px) {
  .hero .hero-copy { position: sticky; top: 28px; } /* the studio is the taller column; the copy and its sample stay beside it */
  .effect-tabs a { padding: 6px 11px; font-size: 13.5px; }
}
/* Footer: templates get their own column so the product list stays short (four columns from 1000px). */
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }