/* boring2exciting.com — one stylesheet for every page.
 *
 * Dark is the default (the family plate); light is chosen, never inferred,
 * and stored as `b2e-style`. --ink is the whole mechanism: every tint on the
 * site is rgba(var(--ink), a), so one declaration per theme moves all of
 * them. The brand ramp is in brand/tokens.css and repeated here so the site
 * renders from one file.
 *
 * The page's own promise — "boring in, exciting out" — is carried by two
 * things: the .morph demo in the hero (a grey document that ignites) and the
 * .studio, which is the product itself. Everything else is quiet on purpose:
 * a site that shouts everywhere has nowhere left to shout from.
 */

/* ---------- the typeface, served from here ----------
 *
 * Outfit used to come from fonts.googleapis.com, which meant every visitor's
 * browser announced their IP address to Google in the United States before
 * they had agreed to anything — on a site whose privacy notice names each
 * processor one by one and never named that one. Two files on our own origin
 * end the transfer rather than disclose it.
 *
 * It is a VARIABLE font: the same file covers 400 to 700, which is why
 * Google's eight @font-face blocks collapse to two here — one per subset.
 * Outfit is Latin-only by design, so pages in Greek, Cyrillic, Arabic or CJK
 * fall through to the stack in --font exactly as they always did.
 *
 * The unicode-range pairs are Google's own, so a page of plain English never
 * downloads the accented subset. SIL Open Font License 1.1; the licence
 * travels with the files in assets/fonts/OFL.txt, as it requires.
 *
 * A side effect worth having: the link tag lived in index.html alone, so the
 * privacy, terms and accessibility pages were quietly rendering in the system
 * font. Declared here, the brand typeface is on every page.
 */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/outfit-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: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/outfit-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand-1: #0891B2;
  --brand-2: #22D3EE;
  --brand-3: #A5F3FC;
  /* The fill under white/near-black ink on a solid button. Dark theme pairs
     the bright cyan with near-black; the light theme needs a deeper teal to
     carry white text at 4.5:1 (#0891B2 only reaches 3.68). */
  --accent-fill: #22D3EE;
  --boring: #3A414E;
  --boring-soft: #8A93A2;

  --bg: #0b0c10;
  --bg-raise: #101218;
  --surface: #14161d;
  --surface-2: #1a1d26;
  --ink: 255, 255, 255;
  --text: #f2f3f7;
  --sub: #b9bcc7;
  --muted: #858a99;
  --border: rgba(var(--ink), 0.09);
  --border-strong: rgba(var(--ink), 0.16);
  --accent: var(--brand-2);
  --accent-text: var(--brand-2);
  --on-accent: #06141a;
  --word-boring: #8a93a2;
  --grad: linear-gradient(100deg, #22d3ee 0%, #a5f3fc 55%, #ffe66d 120%);
  --spark: linear-gradient(120deg, #ff3d81, #ffb02e, #22d3ee, #7c4dff);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  --radius: 18px;
  --wrap: 1160px;
  --font: "Outfit", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fbfbfd;
  --bg-raise: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f4f5f9;
  --ink: 14, 16, 24;
  --text: #0e1018;
  --sub: #3d4353;
  --muted: #6b7184;
  --border: rgba(var(--ink), 0.1);
  --border-strong: rgba(var(--ink), 0.2);
  --accent-fill: #0E7490;
  --accent: var(--brand-1);
  --accent-text: #0e7490;
  --on-accent: #ffffff;
  --word-boring: #6e7787;
  --grad: linear-gradient(100deg, #0891b2 0%, #22d3ee 60%, #f59e0b 130%);
  --shadow: 0 30px 80px -40px rgba(20, 30, 60, 0.35);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }

/* Parked above the viewport, never a negative inline offset — the site has
   seven right-to-left languages and `left:-9999px` scrolls those sideways. */
.skip { position: absolute; inset-inline-start: 1rem; top: 0; transform: translateY(-120%); background: var(--accent-fill); color: var(--on-accent); padding: 0.6rem 1rem; border-radius: 0 0 10px 10px; z-index: 100; }
.skip:focus { transform: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); }
.top-in { display: flex; align-items: center; gap: 1.2rem; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none !important; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.wordmark { font-weight: 700; font-size: 1.22rem; letter-spacing: -0.03em; white-space: nowrap; }
.wordmark b { font-weight: 700; }
.w-boring { color: var(--word-boring); }
.w-2 { color: var(--accent-text); }
.w-exciting { color: var(--text); }
.nav { display: flex; gap: 0.2rem; margin-inline-start: 0.5rem; }
.nav a { color: var(--sub); padding: 0.45rem 0.7rem; border-radius: 10px; font-size: 0.95rem; white-space: nowrap; }
.nav a:hover { color: var(--text); background: rgba(var(--ink), 0.06); text-decoration: none; }
.top-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.btn.burger { display: none; }
/* The header is a blur over whatever scrolls behind it, so its one outline-only
   button needs a fill of its own. Two classes, because plain .btn is declared
   just below with a transparent background and would otherwise win on order. */
.btn.burger { background: var(--surface); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.15rem; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-weight: 600; cursor: pointer; text-decoration: none !important; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; white-space: nowrap; }
.btn:hover { background: rgba(var(--ink), 0.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--brand-3); }
/* The light theme overrides the fill here; it must use the deeper teal too,
   or white text on it measures 3.68:1 (needs 4.5). */
:root[data-theme="light"] .btn-primary { background: var(--accent-fill); color: #fff; }
:root[data-theme="light"] .btn-primary:hover { background: #0e7490; }
.btn-ghost { border-color: transparent; color: var(--sub); }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.1rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* The language picker: a <details>, so it works with script blocked. */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.8rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.92rem; color: var(--sub); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--text); }
.lang[open] summary { color: var(--text); border-color: var(--brand-2); }
.lang-flag { display: inline-block; min-width: 1.3em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); text-transform: uppercase; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: min(30rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow: auto; margin: 0; padding: 0.5rem; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; z-index: 60; }
.lang-list a { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.55rem; border-radius: 8px; color: var(--text); font-size: 0.9rem; text-decoration: none !important; }
.lang-list a:hover, .lang-list a[aria-current="true"] { background: rgba(var(--ink), 0.07); }
.lang-list a[aria-current="true"] .lang-name { color: var(--accent-text); font-weight: 600; }
.lang-list .lang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--sub); }
.theme:hover { color: var(--text); background: rgba(var(--ink), 0.06); }
.theme svg { width: 18px; height: 18px; }
.theme .sun { display: none; }
:root[data-theme="light"] .theme .sun { display: block; }
:root[data-theme="light"] .theme .moon { display: none; }

/* account chip + menu */
.acct { position: relative; }
.acct summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.8rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.9rem; color: var(--text); max-width: 14rem; }
.acct summary::-webkit-details-marker { display: none; }
.acct summary #acct-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 10px var(--brand-2); flex: none; }
.acct-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 16rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); display: grid; gap: 2px; z-index: 60; }
.acct-menu a, .acct-menu button { display: block; width: 100%; text-align: start; padding: 0.55rem 0.7rem; border-radius: 8px; color: var(--text); background: transparent; border: 0; font: inherit; cursor: pointer; text-decoration: none !important; }
.acct-menu a:hover, .acct-menu button:hover { background: rgba(var(--ink), 0.07); }
.acct-line { padding: 0.4rem 0.7rem 0.6rem; font-size: 0.85rem; color: var(--accent-text); font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; }

/* packs, under the PRO tier card */
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
.packs[hidden] { display: none; }
.packs label { position: relative; cursor: pointer; }
.packs input { position: absolute; opacity: 0; inset: 0; }
.packs span { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg); font-size: 0.9rem; }
.packs span b { font-weight: 600; }
.packs span i { font-style: normal; color: var(--accent-text); font-weight: 700; }
.packs input:checked + span { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); }
.packs input:focus-visible + span { outline: 3px solid var(--brand-2); outline-offset: 2px; }

/* saved pages */
.plans.plans-3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
#mine[hidden] { display: none; }
.mine-empty { color: var(--muted); margin-bottom: 1rem; }
.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.mine-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.mine-meta { flex: 1 1 18rem; display: grid; gap: 0.15rem; min-width: 0; }
.mine-meta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-meta span { color: var(--muted); font-size: 0.85rem; }
.mine-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mine-actions .btn { padding: 0.45rem 0.8rem; font-size: 0.88rem; }

/* ---------- hero ---------- */
#hero { position: relative; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero-aura { position: absolute; inset: -20% -10%; pointer-events: none; z-index: 0; opacity: 0.55; filter: saturate(1.2); }
.hero-aura i { position: absolute; border-radius: 50%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.55), transparent 62%); animation: drift 34s ease-in-out infinite alternate; }
.hero-aura i:nth-child(2) { inset-inline-start: 55%; top: 30%; background: radial-gradient(circle at 60% 40%, rgba(255, 61, 129, 0.35), transparent 60%); animation-duration: 41s; }
.hero-aura i:nth-child(3) { inset-inline-start: 25%; top: 55%; width: 30vw; height: 30vw; background: radial-gradient(circle at 50% 50%, rgba(255, 176, 46, 0.32), transparent 60%); animation-duration: 27s; }
:root[data-theme="light"] .hero-aura { opacity: 0.35; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, -8%) scale(1.12); } }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1rem; }
.kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--grad); }
.hero-copy h1 { margin-bottom: 1.1rem; }
.hero-copy h1 .dull { color: var(--word-boring); font-weight: 500; }
.hero-copy h1 .bright { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--sub); max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; align-items: center; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; color: var(--muted); font-size: 0.92rem; }
.hero-trust li { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust ul { display: contents; }
.hero-trust li::before { content: "✓"; color: var(--accent-text); font-weight: 700; }

/* The morph: a boring document that ignites into a page. Two layers, the
   exciting one revealed by a clip-path wipe that JS toggles with .is-lit. */
.morph { position: relative; aspect-ratio: 5 / 4; max-width: 560px; margin-inline: auto; width: 100%; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border-strong); background: #e9ebef; isolation: isolate; }
.morph-doc { position: absolute; inset: 0; padding: 7% 8%; background: #f4f5f7; color: #5f6673; font-family: Georgia, "Times New Roman", serif; }
.morph-doc .m-title { height: 14px; width: 55%; background: #9aa0ab; border-radius: 3px; margin-bottom: 6%; }
.morph-doc .m-line { height: 8px; background: #cfd3da; border-radius: 3px; margin-bottom: 3.2%; }
.morph-doc .m-line.short { width: 70%; }
.morph-doc .m-line.shorter { width: 45%; }
.morph-doc table { width: 100%; border-collapse: collapse; margin-top: 6%; font-size: clamp(9px, 1.6vw, 12px); }
.morph-doc td, .morph-doc th { border: 1px solid #d5d8de; padding: 3% 4%; text-align: start; color: #5f6673; }
.morph-doc th { background: #e6e8ec; font-weight: 600; }
.morph-page { position: absolute; inset: 0; padding: 7% 8%; background: radial-gradient(120% 90% at 10% 0%, #123 0%, #0b0c10 55%); color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1); display: flex; flex-direction: column; gap: 5%; }
.morph.is-lit .morph-page { clip-path: inset(0 0 0 0); }
.morph-page .p-title { font-weight: 700; font-size: clamp(1.2rem, 3.2vw, 2rem); letter-spacing: -0.03em; line-height: 1.05; background: var(--spark); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 6s linear infinite; }
@keyframes sheen { to { background-position: 200% 0; } }
.morph-page .p-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.morph-page .p-tile { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 6% 8%; }
.morph-page .p-num { font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.6rem); color: var(--brand-2); font-variant-numeric: tabular-nums; }
.morph-page .p-lab { font-size: clamp(8px, 1.4vw, 11px); color: #b9bcc7; text-transform: uppercase; letter-spacing: 0.08em; }
.morph-page .p-bars { flex: 1; display: flex; align-items: flex-end; gap: 4%; padding-top: 2%; }
.morph-page .p-bar { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #22d3ee, #0891b2); height: 10%; transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 0 24px rgba(34, 211, 238, 0.35); }
.morph-page .p-bar:nth-child(2) { background: linear-gradient(180deg, #ff3d81, #b8004f); box-shadow: 0 0 24px rgba(255, 61, 129, 0.35); }
.morph-page .p-bar:nth-child(3) { background: linear-gradient(180deg, #ffb02e, #d97706); box-shadow: 0 0 24px rgba(255, 176, 46, 0.35); }
.morph-page .p-bar:nth-child(4) { background: linear-gradient(180deg, #7c4dff, #3b18c9); box-shadow: 0 0 24px rgba(124, 77, 255, 0.35); }
.morph.is-lit .p-bar { height: var(--h); transition-delay: calc(var(--i) * 120ms + 500ms); }
.morph-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.morph-badge { position: absolute; inset-inline-end: 4%; bottom: 4%; z-index: 3; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; background: rgba(0, 0, 0, 0.66); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); }
.morph-badge b { color: var(--brand-2); font-weight: 700; }
.morph.is-lit .morph-badge .before, .morph:not(.is-lit) .morph-badge .after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .morph-page { transition: none; }
  .hero-aura i { animation: none; }
  .morph-page .p-title { animation: none; }
}

/* ---------- sections ---------- */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sec-head { max-width: 40rem; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.sec-head p { color: var(--sub); margin-top: 0.8rem; font-size: 1.08rem; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in, .no-io .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- the studio (the product) ---------- */
#studio { padding-top: 0; }
.studio { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.studio-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg-raise); }
.studio-head h2 { font-size: 1.15rem; }
.studio-head .dots { display: flex; gap: 6px; }
.studio-head .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--boring-soft); opacity: 0.5; }
.studio-head .dots i:nth-child(2) { background: var(--brand-1); opacity: 0.9; }
.studio-head .dots i:nth-child(3) { background: var(--brand-2); opacity: 1; }
.studio-allow { margin-inline-start: auto; font-size: 0.88rem; color: var(--muted); }
.studio-allow b { color: var(--text); }
/* The house round: while the day's budget holds, a free page is written by a
   model we pay for and arrives in about a minute. That is the strongest
   reason to press the button now, so it reads as a small gift rather than as
   another grey note — in --accent-text, the pair already measured against
   both themes. */
.house-note { font-size: 0.85rem; font-weight: 600; color: var(--accent-text); }
.house-note::before { content: "\2726\00a0"; }
.studio-body { display: grid; grid-template-columns: 1.25fr 0.9fr; }
.studio-in { padding: 1.5rem; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem; }
.studio-opts { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.3rem; background: var(--surface-2); }
.field-label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.55rem; }
textarea.paste { width: 100%; min-height: 190px; resize: vertical; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.5; }
textarea.paste:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }
textarea.paste::placeholder { color: var(--muted); }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 1.6rem 1rem; border: 2px dashed var(--border-strong); border-radius: 16px; text-align: center; cursor: pointer; color: var(--sub); transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.drop:hover, .drop:focus-within { border-color: var(--brand-2); background: rgba(34, 211, 238, 0.05); }
.drop.is-over { border-color: var(--brand-2); background: rgba(34, 211, 238, 0.12); transform: scale(1.01); border-style: solid; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop .drop-icon { width: 44px; height: 44px; color: var(--accent-text); }
.drop strong { color: var(--text); font-weight: 600; }
.drop small { color: var(--muted); font-size: 0.85rem; }
.drop u { text-decoration: underline; text-underline-offset: 3px; color: var(--accent-text); }
.files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.files:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem 0.35rem 0.7rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border-strong); font-size: 0.88rem; max-width: 100%; }
.chip .kind { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--brand-2); padding: 0.1rem 0.4rem; border-radius: 6px; }
:root[data-theme="light"] .chip .kind { background: var(--brand-1); color: #fff; }
.chip .kind.img { background: #ff3d81; color: #fff; }
.chip .kind.doc { background: #7c4dff; color: #fff; }
.chip .kind.xls { background: #16a34a; color: #fff; }
.chip .kind.ppt { background: #f59e0b; color: #1a1200; }
.chip .kind.pdf { background: #dc2626; color: #fff; }
.chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.chip .size { color: var(--muted); font-size: 0.8rem; }
.chip button { border: 0; background: transparent; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.chip button:hover { background: rgba(var(--ink), 0.08); color: var(--text); }
.vibes { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.vibes label { position: relative; }
.vibes input { position: absolute; opacity: 0; inset: 0; }
/* The hidden radio lies over the whole chip, so it is the element under the mouse. */
.vibes input, .formats input, .packs input, .engine input { cursor: pointer; }
.vibes span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.9rem; cursor: pointer; color: var(--sub); transition: all 0.15s; }
.vibes span:hover { color: var(--text); border-color: var(--brand-2); }
.vibes input:checked + span { background: var(--brand-2); color: var(--on-accent); border-color: transparent; font-weight: 600; }
:root[data-theme="light"] .vibes input:checked + span { background: var(--brand-1); color: #fff; }
.vibes input:focus-visible + span { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.tier { position: relative; display: block; cursor: pointer; }
.tier input { position: absolute; opacity: 0; inset: 0; }
/* The card and its lines are <span>s inside a <label>, so each needs its
   display set — inline spans stack their text on one line and the two tiers
   shipped overlapping before this. */
.tier-card { display: block; border: 1px solid var(--border-strong); border-radius: 14px; padding: 0.85rem 0.95rem; background: var(--bg); transition: all 0.15s; height: 100%; }
.tier:hover .tier-card { border-color: var(--brand-2); }
.tier input:checked + .tier-card { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); }
.tier input:focus-visible + .tier-card { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.tier-name { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; }
.tier-price { color: var(--accent-text); font-weight: 700; }
.tier-desc { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.4; }
.tier-pro .tier-name { background: var(--spark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-pro .tier-price { color: var(--text); -webkit-text-fill-color: var(--text); }
.tier[data-unavailable="true"] .tier-card { opacity: 0.6; }
.go { width: 100%; padding: 1.05rem 1.3rem; border-radius: 16px; font-size: 1.12rem; font-weight: 700; border: 0; cursor: pointer; color: var(--on-accent); background: var(--accent-fill); position: relative; overflow: hidden; transition: transform 0.15s, filter 0.2s; }
.go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); }
.go:hover { transform: translateY(-2px); filter: brightness(1.06); }
.go:hover::after { animation: shine 0.9s ease; }
@keyframes shine { to { transform: translateX(120%); } }
.go[disabled] { cursor: progress; filter: saturate(0.5); transform: none; }
/* The hover on the button that IS the product: the brand colour blooms out
   from behind it and then breathes, while the shine sweeps across — the thing
   you are about to press looks like it is warming up. It has to be a
   box-shadow: .go clips its own children (that is what keeps the shine
   inside), so a blurred layer within it would never be seen. */
.go { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); transition: transform 0.15s, filter 0.2s, box-shadow 0.3s; }
.go:not([disabled]):focus-visible { box-shadow: 0 10px 34px -6px rgba(34, 211, 238, 0.65); animation: breathe 2.4s ease-in-out 0.35s infinite; }
.go.is-pro:not([disabled]):focus-visible { box-shadow: 0 10px 34px -6px rgba(217, 70, 239, 0.6); animation: sheen 5s linear infinite, breathe-pro 2.4s ease-in-out 0.35s infinite; }
@media (hover: hover) {
  .go:not([disabled]):hover { box-shadow: 0 10px 34px -6px rgba(34, 211, 238, 0.65); animation: breathe 2.4s ease-in-out 0.35s infinite; }
  .go.is-pro:not([disabled]):hover { box-shadow: 0 10px 34px -6px rgba(217, 70, 239, 0.6); animation: sheen 5s linear infinite, breathe-pro 2.4s ease-in-out 0.35s infinite; }
}
@keyframes breathe-pro { 50% { box-shadow: 0 14px 44px -4px rgba(217, 70, 239, 0.85); } }
.go:not([disabled]):active { transform: translateY(0) scale(0.995); }
.go .go-label { display: inline-block; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.go:not([disabled]):hover .go-label { transform: translateY(-1px); }
/* Only the glow breathes; the lift stays put, so the button never wanders. */
@keyframes breathe { 50% { box-shadow: 0 14px 44px -4px rgba(34, 211, 238, 0.85); } }

/* The header's "Make it exciting" leads here. When the box is already on
   screen a plain #studio link did nothing at all, so the box now answers:
   a wash of light rises from underneath it and its edge lights up once. */
.prompt-box { position: relative; }
.prompt-box::before { content: ""; position: absolute; inset-inline: 4%; bottom: -12px; height: 58px; z-index: -1; border-radius: 50%; background: var(--spark); filter: blur(15px); opacity: 0; }
.prompt-box.is-called::before { animation: rise 1.4s ease-out; }
.prompt-box.is-called { animation: called 1.4s ease-out; }
@keyframes rise { 0% { opacity: 0; transform: translateY(24px) scaleX(0.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scaleX(1.15); } }
@keyframes called { 0%, 100% { border-color: var(--border-strong); box-shadow: var(--shadow); } 25% { border-color: var(--brand-2); box-shadow: var(--shadow), 0 0 0 5px rgba(34, 211, 238, 0.18); } 60% { border-color: var(--brand-2); box-shadow: var(--shadow), 0 0 0 3px rgba(34, 211, 238, 0.1); } }
.go.is-pro { background: var(--spark); color: #fff; background-size: 220% 100%; animation: sheen 5s linear infinite; }
:root[data-theme="light"] .go { background: var(--accent-fill); color: #fff; }
:root[data-theme="light"] .go.is-pro { background: var(--spark); background-size: 220% 100%; }
.go .go-note { display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.85; margin-top: 0.15rem; }
.status { min-height: 1.4em; font-size: 0.92rem; color: var(--sub); }
.status.is-error { color: #ff6b6b; }
:root[data-theme="light"] .status.is-error { color: #b91c1c; }
.status .err-list { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; }
.pro-note { font-size: 0.85rem; color: var(--muted); }
.pro-note.ok { color: var(--accent-text); font-weight: 600; }

/* progress: a bar that never stalls — it eases toward 92% and only reaches 100 on done. */
.progress { display: none; padding: 1.4rem 1.5rem 1.6rem; border-top: 1px solid var(--border); background: var(--bg-raise); }
.progress.is-on { display: block; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.progress-stage { font-weight: 600; display: flex; align-items: center; gap: 0.6rem; }
.progress-stage .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(var(--ink), 0.15); border-top-color: var(--brand-2); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-meta { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar { height: 8px; border-radius: 999px; background: rgba(var(--ink), 0.08); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--spark); background-size: 200% 100%; animation: sheen 3s linear infinite; transition: width 0.6s ease; }
.lanes { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lanes:empty { display: none; }
.lane { display: flex; align-items: center; gap: 0.5rem; }
.lane::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ink), 0.2); flex: none; }
.lane.is-generating::before { background: var(--brand-2); animation: pulse 1.2s ease-in-out infinite; }
.lane.is-done::before { background: var(--brand); }
.lane.is-failed::before { background: var(--danger, #d33); }
.lane b { color: var(--text); font-weight: 600; }
@keyframes pulse { 50% { opacity: 0.35; } }
.options { display: none; gap: 0.4rem; padding: 0.8rem 1.5rem 0; background: var(--bg-raise); }
.options.is-on { display: flex; flex-wrap: wrap; }
.options button { font: inherit; font-size: 0.9rem; padding: 0.5rem 0.9rem; border-radius: 999px 999px 0 0; border: 1px solid var(--border); border-bottom: 0; background: transparent; color: var(--muted); cursor: pointer; }
.options button b { font-weight: 600; color: inherit; }
.options button[aria-selected="true"] { background: var(--bg); color: var(--text); border-color: var(--brand-2); }
.result.is-full .options { display: none; }
.progress-quip { margin-top: 0.7rem; color: var(--sub); font-size: 0.95rem; min-height: 1.4em; }
.progress-quip span { display: inline-block; animation: quip 0.5s ease; }
@keyframes quip { from { opacity: 0; transform: translateY(6px); } }

/* the result */
.result { display: none; border-top: 1px solid var(--border); }
.result.is-on { display: block; }
.result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.9rem 1.5rem; background: var(--bg-raise); border-bottom: 1px solid var(--border); }
.result-bar .made { font-size: 0.88rem; color: var(--muted); margin-inline-end: auto; }
.result-bar .made b { color: var(--text); font-weight: 600; }
.result-bar .btn { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
/* The page is deleted after two hours; this is the only place that says so
   while somebody is looking at one, and the only place that offers to keep it. */
.result-bar .keep { flex: 1 1 100%; order: 9; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0; padding-top: 0.7rem; border-top: 1px dashed var(--border); font-size: 0.9rem; color: var(--sub); }
.result-bar .keep .btn { margin-inline-start: auto; }
.result-frame { position: relative; background: #fff; }
.result-frame iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #fff; }
.result-notes { padding: 0.8rem 1.5rem; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--border); }
.result-notes ul { margin: 0.3rem 0 0; padding-inline-start: 1.1rem; }
.result.is-full { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; }
.result.is-full .result-frame { flex: 1; }
.result.is-full .result-frame iframe { height: 100%; }
.result.is-full .result-notes { display: none; }

/* ---------- how / formats / pricing / faq ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: step; }
.step { position: relative; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; inset-inline-end: 1rem; top: 0.6rem; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.05em; color: rgba(var(--ink), 0.06); }
.step .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(34, 211, 238, 0.12); color: var(--accent-text); margin-bottom: 1rem; }
.step .ic svg { width: 24px; height: 24px; }
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--sub); font-size: 0.98rem; }

/* Big tiles, not pills: the badge is the picture, the label sits under it.
   The fold's picker reuses the .formats class, so these rules stay scoped
   to the section by the #formats-title landmark's parent. */
#formats .formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 46%), 1fr)); gap: 1rem; }
#formats .formats .format { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; min-height: 11rem; padding: 1.6rem 1rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 1.1rem; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
#formats .formats .format:hover { transform: translateY(-4px); border-color: rgba(var(--ink), 0.2); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45); }
.format .kind { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.65rem 1.1rem; border-radius: 14px; background: var(--brand-2); color: var(--on-accent); }
:root[data-theme="light"] .format .kind { background: var(--brand-1); color: #fff; }
.format .kind.img { background: #ff3d81; color: #fff; }
.format .kind.doc { background: #7c4dff; color: #fff; }
.format .kind.xls { background: #16a34a; color: #fff; }
.format .kind.ppt { background: #f59e0b; color: #1a1200; }
.format .kind.pdf { background: #dc2626; color: #fff; }
.formats-note { margin-top: 1.2rem; color: var(--muted); font-size: 0.95rem; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 56rem; }
.plan { padding: 1.8rem 1.7rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; }
.plan.plan-pro { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spark) border-box; border: 2px solid transparent; }
.plan-name { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.plan-price { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; margin: 0.4rem 0 0.2rem; }
.plan-price small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-tag { color: var(--sub); margin-bottom: 1.2rem; }
.plan ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; }
.plan li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--sub); }
.plan li::before { content: "✓"; color: var(--accent-text); font-weight: 700; flex: none; }
.plan .models { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.4rem; }
.plan .models span { font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 8px; background: rgba(var(--ink), 0.07); }
.plan-fine { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }
/* The pricing section: cards stretch to one height so the buttons line up,
   the best-value card is lifted and wears a ribbon, and the reassurance strip
   answers the three questions people ask before they pay. */
.plans-3 .plan { display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; }
.plans-3 .plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.5); }
.plans-3 .plan ul { flex: 1; }
.plans-3 .plan .btn { justify-content: center; width: 100%; font-size: 1.05rem; padding: 0.9rem 1.2rem; }
.plan-per { font-weight: 600; margin: 0 0 0.5rem; }
.plan-best { transform: translateY(-10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
.plan-best:hover { transform: translateY(-14px); }
.plan-badge { position: absolute; top: 1.2rem; inset-inline-end: -2.2rem; transform: rotate(38deg); padding: 0.3rem 3rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--spark); color: #fff; margin: 0; }
.assure { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.assure li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic title" "ic text"; column-gap: 0.8rem; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(var(--ink), 0.04); }
.assure i { grid-area: ic; font-style: normal; font-size: 1.5rem; line-height: 1; margin-top: 0.15rem; }
.assure b { grid-area: title; font-weight: 700; }
.assure span { grid-area: text; color: var(--sub); font-size: 0.92rem; }

.faq { display: grid; gap: 0.6rem; max-width: 52rem; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 1.2rem; }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-weight: 700; font-size: 1.3rem; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.1rem; color: var(--sub); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--border); padding: 3rem 0 2.5rem; color: var(--muted); font-size: 0.92rem; }
/* Four children since the family column landed: brand, Site, Legal, Also from
   castomo. The last is wider because its links carry a domain AND a
   description — at 1fr every one of them wrapped onto three lines. */
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 2rem; }
.foot-in h2 { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-bottom: 0.7rem; }
.foot-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.foot-in a { color: var(--sub); }
.foot-blurb { color: var(--muted); max-width: 26rem; margin-top: 0.8rem; }
.foot-legal { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.foot-legal a { color: var(--sub); }

/* ---------- legal pages ---------- */
.prose { max-width: 46rem; padding: clamp(2rem, 5vw, 4rem) 0; }
.prose h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.6rem; }
.prose .standfirst { color: var(--sub); font-size: 1.1rem; margin-bottom: 2rem; }
.prose h2 { font-size: 1.35rem; margin: 2rem 0 0.6rem; }
.prose p, .prose li { color: var(--sub); margin-bottom: 0.8rem; }
.prose ul { padding-inline-start: 1.2rem; }
.prose .updated { font-size: 0.85rem; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .steps { grid-template-columns: 1fr; }
  .studio-body { grid-template-columns: 1fr; }
  .studio-in { border-inline-end: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 1200px) {
  .nav { display: none; }
  .btn.burger { display: inline-flex; }
  .top-in { flex-wrap: wrap; }
  body.nav-open .nav { display: flex; flex-direction: column; width: 100%; order: 10; padding: 0.5rem 0 1rem; }
  body.nav-open .nav a { padding: 0.7rem 0.4rem; font-size: 1.05rem; }
}
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .morph { max-width: 100%; }
  .top-tools .btn-primary { display: none; }
  .plans, .plans.plans-3 { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .top-tools #signin { display: none; }
  body.nav-open .top-tools #signin { display: inline-flex; }
  /* Hidden in the bar for room, but the open menu must still offer the one
     thing the site is for — it now scrolls to the box and wakes it. */
  body.nav-open .top-tools { flex-wrap: wrap; }
  body.nav-open .top-tools .btn-primary { display: inline-flex; flex: 1 1 100%; order: 11; margin-bottom: 0.4rem; }
  .lang-list { grid-template-columns: repeat(2, 1fr); }
}
@media (pointer: coarse) {
  .vibes span, .formats span, .attach { min-height: 44px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .theme { width: 44px; height: 44px; }
  .lang summary { min-height: 44px; }
  #formats .formats .format { min-height: 9.5rem; }
  .engine { padding: 4px; }
  .engine .tier span { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (min-width: 620px) and (max-width: 900px) {
  .plans.plans-3 { grid-template-columns: 1fr 1fr; }
  .plans.plans-3 .plan-best { grid-column: 1 / -1; }

}
@media (max-width: 560px) {
  body { font-size: 16px; }
  /* "EN English" costs a whole header row on a phone; the code alone says it,
     and the full name is one tap away in the list. */
  .lang summary .lang-name { display: none; }
  .lang summary { padding-inline: 0.7rem; }
  /* … and with the code alone the header fits one row again, once the wordmark
     and the gaps give back the last thirty pixels. */
  .top-in { gap: 0.5rem; }
  .wordmark { font-size: 1.05rem; }
  .brand img { width: 26px; height: 26px; }
  .tiers { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .lang-list { grid-template-columns: 1fr; inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); }
  [dir="rtl"] .lang-list { transform: translateX(50%); }
  .result-bar .made { flex-basis: 100%; }
  .result-frame iframe { height: 70vh; }
  .morph { aspect-ratio: 4 / 3.6; }
}

/* ---------- above the fold: the studio first (2026-09-06) ---------- */
.fold, #studio.fold { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0 0; overflow: hidden; isolation: isolate; scroll-margin-top: 80px; }
section[id], .prompt, .prompt .result, .prompt .progress { scroll-margin-top: 78px; }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.sky-chase { z-index: 0; }
.fold-in, .examples { position: relative; z-index: 1; }
.fold-in { position: relative; text-align: center; }
.fold-title { font-size: clamp(2.3rem, 6vw, 4.2rem); margin-bottom: 0.7rem; }
.fold-title .dull { color: var(--word-boring); font-weight: 500; }
.fold-title .bright { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fold-sub { font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: var(--sub); max-width: 40rem; margin: 0 auto 1.8rem; }
.prompt { max-width: 56rem; margin: 0 auto; text-align: start; }
.prompt-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 26px; box-shadow: var(--shadow); padding: 0.9rem 0.9rem 0.7rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.prompt-box:focus-within { border-color: var(--brand-2); box-shadow: var(--shadow), 0 0 0 4px rgba(34, 211, 238, 0.16); }
.prompt-box.is-over { border-color: var(--brand-2); border-style: dashed; background: rgba(34, 211, 238, 0.08); transform: scale(1.005); }
.prompt-box textarea.paste { min-height: 118px; border: 0; background: transparent; padding: 0.6rem 0.7rem; font-size: 1.08rem; resize: vertical; }
.prompt-box textarea.paste:focus { box-shadow: none; border: 0; }
.prompt-box .files { padding: 0 0.5rem 0.6rem; }
.prompt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.attach { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--sub); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.attach:hover { color: var(--text); border-color: var(--brand-2); }
.attach svg { width: 18px; height: 18px; }
.attach input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.prompt-hint { flex: 1 1 12rem; font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.engine { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.engine .tier { position: relative; display: block; cursor: pointer; }
.engine .tier input { position: absolute; opacity: 0; inset: 0; }
.engine .tier span { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--sub); }
.engine .tier input:checked + span { background: rgba(var(--ink), 0.1); color: var(--text); }
.engine .tier-pro input:checked + span { background: var(--spark); background-size: 220% 100%; animation: sheen 5s linear infinite; color: #fff; }
.engine .tier input:focus-visible + span { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.engine .tier[data-unavailable="true"] span { opacity: 0.55; }
.prompt-bar .go { width: auto; padding: 0.6rem 1.25rem; border-radius: 999px; font-size: 1rem; text-align: start; }
.prompt-bar .go .go-note { font-size: 0.7rem; margin-top: 0; }
/* Everything a click changes says so with the cursor — the chips are labels
   over hidden radios, and a label's default cursor is the text one. */
.formats label, .formats span, .formats span *, .vibes label, .vibes span, .vibes span *, .packs label, .packs span, .packs span *, .engine .tier, .engine .tier span, .attach, .attach *, .ex, .ex *, .options button, .go, .go * { cursor: pointer; }
.formats-set { border: 0; padding: 0; margin: 1rem 0 0; }
.formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
/* Inside the composer (Maciej, 2026-09-06): what to make is a property of the
   thing being written, so it belongs in the box with it rather than floating
   underneath. It becomes the composer's own row, above the attach line and
   sharing that row's rule, and reads left-to-right with the text above it. */
.prompt-box .formats-set { margin: 0; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.prompt-box .formats { justify-content: flex-start; gap: 0.4rem; }
.prompt-box .formats span { padding: 0.4rem 0.75rem; border-radius: 12px; font-size: 0.88rem; }
.prompt-box .formats span i { font-size: 0.95rem; }
/* The chips carry a shadow out on the moving fold background; in here they sit
   on the box's own surface, where a shadow only muddies the row. */
.fold .prompt-box .formats span { box-shadow: none; }
.fold .prompt-box .formats input:checked + span { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); }
.formats label { position: relative; }
.formats input { position: absolute; opacity: 0; inset: 0; }
.formats span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 0.95rem; cursor: pointer; color: var(--sub); transition: all 0.15s; }
.formats span b { font-weight: 600; color: var(--text); }
.formats span em { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--spark); color: #fff; }
.formats span:hover { border-color: var(--brand-2); }
.formats input:checked + span { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); }
.formats input:focus-visible + span { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.vibes-set { border: 0; padding: 0; margin: 0.7rem 0 0; }
.prompt .vibes { justify-content: center; }
.vibes span { --tint: hsl(var(--hue, 190) 90% 60%); }
.vibes span:hover { border-color: var(--tint); color: var(--text); }
/* A chosen chip: white on a DEEP tint, ringed in the vivid one. White on the
   bright fill measured 1.7:1 where 4.5 is the bar — and white on a yellow or
   green chip cannot be fixed by nudging. The deep fill clears 4.5 for every
   hue we ship, and the ring keeps the chip as loud as it was. */
.vibes input:checked + span, :root[data-theme="light"] .vibes input:checked + span { background: hsl(var(--hue, 190) 90% 27%); border-color: var(--tint); box-shadow: 0 0 0 1px var(--tint), 0 4px 14px -6px var(--tint); color: #fff; font-weight: 600; }
.under { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.2rem; margin-top: 0.8rem; min-height: 1.6rem; text-align: center; }
.under .studio-allow, .under .house-note { flex: 1 1 100%; margin: 0; text-align: center; }
/* The consent line: a real, visible checkbox (a legal act, so nothing hidden or pre-ticked). */
.consent { flex: 1 1 100%; display: flex; gap: 0.6rem; align-items: flex-start; max-width: 46rem; margin: 0.2rem auto 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); text-align: start; cursor: pointer; }
.consent input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--brand-2); cursor: pointer; }
.consent a { color: var(--sub); text-decoration: underline; }
.consent:hover { color: var(--sub); }

/* ---------- contrast over the living background ---------- */
/* The fold paints #sky's blobs and #chase's field and comet BEHIND everything
   on it, so a control that is nothing but a border lets that light through and
   stops reading as a control — worst in dark mode, where the comet is
   brightest (Maciej, 2026-09-06, with a screenshot of an invisible mood chip).
   Every control on the fold therefore carries a surface of its own, and no
   state over the canvas is translucent. The :not() guards are what keep a
   chosen chip's own fill: without them these rules tie on specificity and,
   being later in the file, would win and flatten it. */
.fold .btn:not(.btn-primary), .fold .attach, .fold .engine,
.fold .vibes input:not(:checked) + span,
.fold .options button:not([aria-selected="true"]),
.fold .studio-allow, .fold .house-note, .fold .consent { background: var(--surface); }
/* .btn's hover is a translucent wash, which would undo the surface again. */
.fold .btn:not(.btn-primary):hover, .fold .attach:hover { background: var(--surface-2); }
.fold .studio-allow { flex: 0 0 auto; margin-inline: auto; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); }
.fold .house-note { flex: 0 1 auto; margin-inline: auto; padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-fill) 45%, transparent); }
.fold .consent { padding: 0.75rem 0.95rem; border-radius: 14px; border: 1px solid var(--border); color: var(--sub); }
.fold .consent a { color: var(--text); }
/* A chip's shadow lifts it off the moving light rather than blending into it. */
.fold .vibes span, .fold .formats span, .fold .attach, .fold .engine { box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.5); }
.under .packs { margin: 0; grid-template-columns: repeat(2, minmax(9rem, 1fr)); flex: 1 1 100%; max-width: 26rem; margin-inline: auto; }
.under .status { flex: 1 1 100%; text-align: center; }
.prompt .progress, .prompt .result { margin-top: 1rem; border: 1px solid var(--border-strong); border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.prompt .progress { border-top: 1px solid var(--border-strong); }
.prompt .result.is-full { border-radius: 0; margin: 0; }
.prompt .result-frame iframe { height: min(60vh, 680px); }
.prompt .result.is-full .result-frame iframe { height: 100%; }

/* the examples strip */
.examples { margin-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); scroll-margin-top: 78px; }
.examples-head { text-align: center; font-weight: 600; margin-bottom: 1rem; }
.examples-hint { color: var(--muted); font-weight: 400; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 1rem; width: max-content; padding: 0.4rem 0; animation: slide var(--marquee-s, 60s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } .marquee-track { animation: none; } }
.ex { --tint: hsl(var(--hue) 85% 60%); --tint-2: hsl(calc(var(--hue) + 40) 85% 55%); flex: none; width: 15.5rem; text-align: start; padding: 0; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); color: var(--text); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; font: inherit; }
.ex:hover { transform: translateY(-3px); border-color: var(--tint); }
.ex-art { position: relative; display: block; height: 7.2rem; background: linear-gradient(135deg, var(--tint), var(--tint-2)); padding: 0.9rem; overflow: hidden; }
.ex-art i { display: block; position: absolute; border-radius: 6px; background: rgba(255, 255, 255, 0.85); }
.ex-art .a-title { top: 0.9rem; inset-inline-start: 0.9rem; width: 55%; height: 10px; border-radius: 5px; background: #0b0c10; opacity: 0.85; }
.ex-art .a-tiles { top: 2.2rem; inset-inline-start: 0.9rem; inset-inline-end: 0.9rem; height: 1.7rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.9) 0 30%, transparent 30% 35%); border-radius: 0; }
.ex-art .a-bars { bottom: 0.7rem; inset-inline-start: 0.9rem; inset-inline-end: 0.9rem; height: 2.2rem; background: linear-gradient(0deg, rgba(0,0,0,0.35) 0 100%) 0 100% / 12% 40% no-repeat, linear-gradient(0deg, rgba(0,0,0,0.35) 0 100%) 22% 100% / 12% 65% no-repeat, linear-gradient(0deg, rgba(0,0,0,0.35) 0 100%) 44% 100% / 12% 50% no-repeat, linear-gradient(0deg, rgba(0,0,0,0.35) 0 100%) 66% 100% / 12% 85% no-repeat, linear-gradient(0deg, rgba(0,0,0,0.35) 0 100%) 88% 100% / 12% 100% no-repeat; border-radius: 0; }
.ex-art .a-photo { top: 2.2rem; inset-inline-start: 0.9rem; width: 34%; height: 3.6rem; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
.ex-art .a-lines { top: 2.5rem; inset-inline-start: 46%; inset-inline-end: 0.9rem; height: 3rem; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.9) 0 7px, transparent 7px 15px); border-radius: 0; }
.ex-art .a-menu { top: 2.2rem; inset-inline-start: 0.9rem; inset-inline-end: 0.9rem; height: 3.6rem; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.9) 0 8px, transparent 8px 16px); border-radius: 0; }
.ex-art .a-cycle { top: 1.9rem; inset-inline-start: 50%; transform: translateX(-50%); width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 10px solid rgba(255, 255, 255, 0.85); border-top-color: rgba(0, 0, 0, 0.3); background: transparent; animation: spin 6s linear infinite; }
.ex-art .a-confetti { inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.95) 0 3px, transparent 4px) 10% 30% / 22% 40% repeat, radial-gradient(circle, rgba(0,0,0,0.3) 0 3px, transparent 4px) 40% 70% / 30% 35% repeat; border-radius: 0; }
.ex-art .a-map { top: 2rem; inset-inline-start: 0.9rem; inset-inline-end: 0.9rem; bottom: 0.7rem; background: linear-gradient(90deg, transparent 0 48%, rgba(0,0,0,0.3) 48% 52%, transparent 52%), linear-gradient(0deg, transparent 0 48%, rgba(0,0,0,0.3) 48% 52%, transparent 52%), rgba(255,255,255,0.5); border-radius: 8px; }
.ex-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); padding: 0.75rem 0.9rem 0; }
.ex-title { font-weight: 700; font-size: 1.02rem; padding: 0.15rem 0.9rem 0; }
.ex-sub { color: var(--muted); font-size: 0.86rem; padding: 0.15rem 0.9rem 0.9rem; }

/* the story below the fold keeps the old hero's look */
.story .story-title { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 1.1rem; }
.story .story-title .dull { color: var(--word-boring); font-weight: 500; }
.story .story-title .bright { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pricing, in one line */
.pricing-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.price-cell { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "name price" "line line" "btn btn"; align-items: baseline; gap: 0.2rem 0.8rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.price-cell.is-pro { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spark) border-box; }
.price-cell b { grid-area: name; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.price-cell .price { grid-area: price; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; text-align: end; }
.price-cell .price small { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-cell .line { grid-area: line; color: var(--sub); font-size: 0.92rem; margin: 0.3rem 0 0.8rem; }
.price-cell .btn { grid-area: btn; justify-self: start; }
.price-cell .models { grid-area: line; }
.pricing-fine { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 900px) {
  .pricing-row, .assure { grid-template-columns: 1fr; }
  .plan-best { transform: none; }
  .prompt-hint { display: none; }
  .prompt-bar .go { flex: 1 1 100%; text-align: center; }
}

/* Last in the file on purpose: these answer the hover bloom and the "called"
   glow declared above, and a cascade tie goes to whichever came last. */
@media (prefers-reduced-motion: reduce) {
  .go, .go .go-label { transition: none; animation: none !important; }
  .prompt-box.is-called::before { animation: none !important; }
  /* The box still says it was called — it just says it without moving. */
  .prompt-box.is-called { animation: called 0.9s steps(2, end) !important; }
}

/* After the second max-width:900 block further up, which stacks this strip for
   phones — three one-line facts fit across a tablet perfectly well. */
@media (min-width: 620px) and (max-width: 900px) {
  .assure { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1600px) {
  :root { --wrap: 1320px; }
  .fold-title { font-size: clamp(4.2rem, 4.2vw, 5.4rem); }
  .fold-sub { font-size: 1.35rem; max-width: 46rem; }
  .prompt { max-width: 64rem; }
  .prompt-box textarea.paste { min-height: 140px; font-size: 1.15rem; }
  /* auto-fill would make six tracks in the wider column and leave a ragged
     row of four; ten tiles want five and five. */
  #formats .formats { grid-template-columns: repeat(5, 1fr); }
  /* 40rem was measured against the old column: on a wide screen it drops a
     word onto a line by itself. */
  .sec-head { max-width: 52rem; }
}