/* The landing page at "/" (T-051). Built on theme.css: its tokens, Archivo, the platinum material, the spotlight and grain.
   Platinum stays on the main action (Start free trial), the logo, progress bars and the selected style card, as in the app.
   Every demo is drawn in HTML and CSS; landing.js runs them. Reduced motion shows each demo's finished frame. */

.lp { font-size: 16px; line-height: 1.55; }
.lp main { padding: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { position: relative; z-index: 1; width: min(1200px, 100%); margin: 0 auto; padding: 0 32px; }

/* ---------- Top bar ---------- */
.lp-top { position: sticky; top: 0; z-index: 20; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 max(32px, env(safe-area-inset-left, 0px));
  background: rgba(10, 10, 11, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lp-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); opacity: 0; transition: opacity 300ms ease; }
.lp-top.scrolled::after { opacity: 1; }
.lp-nav { display: flex; align-items: center; gap: 8px; }
.lp-login { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 520; transition: color 150ms ease; }
.lp-login:hover { color: var(--text); transition-duration: 0ms; }
.lp-cta-sm { height: 40px; padding: 0 18px; font-size: 11.5px; }
.lp-top .logo .word { display: inline; }

/* ---------- Hero ---------- */
/* The hero stops short of the fold so the top of the video editing section shows below it on the first screen. */
.lp-hero { position: relative; min-height: calc(100vh - 68px - 190px); min-height: calc(100svh - 68px - 190px); display: grid; align-items: center; overflow: hidden; padding: 56px 0 96px; }
.lp-hero .curves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%); }
.hero-in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 28px; padding: 0 24px; }
.hero-h { margin: 0; font-size: clamp(34px, 5vw, 76px); line-height: 1.02; letter-spacing: 0.01em; text-wrap: balance; }
.hero-h .ln { display: block; white-space: nowrap; }
.hero-sub { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text-2); text-wrap: balance; }
.cta-block { display: grid; justify-items: center; gap: 14px; }
.lp-cta { height: 54px; padding: 0 30px; font-size: 13px; }
.terms { margin: 0; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.works { margin: 12px 0 0; color: var(--text-3); }

/* A quiet scroll cue: a hairline with a light that runs down it. It fades once the page scrolls. */
.cue { position: absolute; left: 50%; bottom: 18px; z-index: 1; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; padding: 6px 12px; text-decoration: none; transition: opacity 400ms ease; }
.cue .caps { font-size: 10px; color: var(--text-3); }
.cue i { position: relative; width: 1px; height: 40px; overflow: hidden; background: var(--line-2); }
.cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: linear-gradient(180deg, transparent, #EDEDEF, transparent); animation: cueRun 2200ms var(--ease) infinite; }
@keyframes cueRun { from { transform: translateY(-14px); } to { transform: translateY(40px); } }
.cue:hover .caps { color: var(--text); }
.scrolled-away .cue { opacity: 0; pointer-events: none; }

/* Hero entrance: the headline settles, then the line, then the action. */
.hero-in > * { animation: lpIn 900ms var(--ease) both; }
.hero-in > :nth-child(2) { animation-delay: 120ms; }
.hero-in > :nth-child(3) { animation-delay: 220ms; }
.hero-in > :nth-child(4) { animation-delay: 320ms; }
@keyframes lpIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.sec { position: relative; padding: 128px 0; scroll-margin-top: 68px; }
.lp-hero + .sec { padding-top: 40px; }
.lp-hero + .sec::before { display: none; }
.sec + .sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1136px, calc(100% - 64px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.h2 { margin: 0; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.02; letter-spacing: 0.01em; text-wrap: balance; }
.h3 { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--text); }
.lead { margin: 22px 0 0; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.sec-head { max-width: 860px; margin-bottom: 56px; }
.edit .sec-head { max-width: 1040px; } /* room for "Integrated agentic" on one line */

/* Scroll reveal: each block rises once. */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- The demo frame: a window onto the product ---------- */
.stage { position: relative; border-radius: 20px; background: #0F0F11; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px rgba(0, 0, 0, 0.55); }
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 70%); }

/* A tile in the demos: an image placeholder that develops, or a frame being made (a quote, a platinum bar). */
.tl { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #141416; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.tl .lb { position: absolute; left: 8px; bottom: 7px; z-index: 3; font-size: 11px; font-weight: 640; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.tl .mk { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; background: linear-gradient(180deg, #17171A, #111113); opacity: 0; transition: opacity 300ms ease; }
/* A quote never breaks inside a word: landing.js shrinks it per tile until its longest word fits. */
.tl .mq { font-size: 12px; line-height: 1.18; text-align: center; text-wrap: balance; overflow-wrap: normal; word-break: keep-all; hyphens: none; color: var(--text); }
.bar { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--chrome); transform-origin: left; transform: scaleX(0.03); }
.tl .ph { opacity: 1; }
.tl.making .mk { opacity: 1; }
.tl.making .ph, .tl.making .lb { opacity: 0; }
.tl.making .bar i { transform: scaleX(1); transition: transform var(--make, 1800ms) cubic-bezier(0.3, 0.6, 0.4, 1); }
.tl.empty .ph, .tl.empty .lb, .tl.empty .mk { opacity: 0; }
.tl.reveal .ph { animation: develop 620ms var(--ease) both; }

/* Real Create Studio outputs (made-up products Lull, Halo and Arc), served from web/landing/. */
.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #141416; }

/* ---------- How it works ---------- */
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { position: relative; counter-increment: s; padding: 20px 0 20px 52px; color: var(--text-2); font-size: 16px; line-height: 1.55; border-top: 1px solid var(--line); text-wrap: pretty; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 19px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); font-variant-numeric: tabular-nums; }
.steps b { display: block; color: var(--text); font-weight: 600; font-size: 17px; margin-bottom: 2px; }

.agent { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.chat { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #0C0C0E; min-width: 0; }
.chat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.app-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--raise); color: var(--text); font-weight: 600; font-size: 12.5px; transition: opacity 200ms ease; }
.conn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.chat-body { flex: 1; min-height: 300px; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; font-size: 13.5px; line-height: 1.5; }
.m { max-width: 92%; transition: opacity 300ms ease, transform 400ms var(--ease); }
.m.me { align-self: flex-end; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--raise); color: var(--text); min-height: 42px; }
.m.ai { color: var(--text); }
.m.tool { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 11px; border-radius: 8px; font-size: 12px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.m.tool i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.m.tool.busy i { border-top: 1.5px solid var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); animation: spin 800ms linear infinite; }
.m.hid { opacity: 0; transform: translateY(8px); }
@keyframes spin { to { transform: rotate(360deg); } }
.caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--text); opacity: 0; }
.typing .caret { opacity: 1; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.dash { padding: 14px 16px 18px; min-width: 0; }
.d-tabs { display: flex; gap: 4px; overflow: hidden; white-space: nowrap; margin-bottom: 18px; font-size: 12px; color: var(--text-3); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.d-tabs span { padding: 5px 10px; border-radius: 999px; }
.d-tabs .on { color: var(--text); background: var(--raise); font-weight: 600; }
.d-title { font-size: 14px; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.regen { position: absolute; top: 7px; left: 7px; right: 7px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10px; font-weight: 560; color: var(--text); background: rgba(10, 10, 11, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(-4px); transition: opacity 250ms ease, transform 300ms var(--ease); }
.regen i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text); }
.tl.asking .regen { opacity: 1; transform: none; }

/* ---------- Video editing ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.2fr); }
.pane { padding: 18px; min-width: 0; }
.pane + .pane { border-left: 1px solid var(--line); }
.pane-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.pane-h b { color: var(--text); font-weight: 600; font-size: 13.5px; }
.pane-h span { overflow: hidden; text-overflow: ellipsis; }
.bin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bi { position: relative; min-width: 0; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); transition: opacity 300ms ease, transform 450ms var(--ease); }
.bi.bi-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bi.bi-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%, transparent 65%, rgba(0, 0, 0, 0.55)); }
.bi .nm, .bi .du { z-index: 2; }
.bi.bi-clip::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-40%, -50%); border-left: 9px solid rgba(255, 255, 255, 0.75); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.bi .nm { position: absolute; left: 6px; bottom: 5px; font-size: 10.5px; font-weight: 640; color: #fff; }
.bi .du { position: absolute; right: 6px; top: 5px; font-size: 9.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wave { position: absolute; inset: 30% 18% 38%; display: flex; align-items: center; justify-content: space-between; }
.wave i { width: 2px; border-radius: 2px; background: var(--text-2); height: 40%; }
.wave i:nth-child(2n) { height: 80%; } .wave i:nth-child(3n) { height: 60%; } .wave i:nth-child(4) { height: 100%; }
.lines { position: absolute; inset: 24% 20% auto; display: grid; gap: 6px; }
.lines i { height: 2px; border-radius: 2px; background: var(--text-3); } .lines i:nth-child(2n) { width: 70%; }
.bi.off { opacity: 0; transform: translateY(-14px) scale(0.96); }

.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sc { position: relative; overflow: hidden; padding: 9px 10px; border-radius: 9px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); font-variation-settings: "wdth" 125; font-weight: 640; text-transform: uppercase; letter-spacing: 0.02em; font-size: 10.5px; line-height: 1.2; color: var(--text-2);
  white-space: normal; transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease), color 250ms ease; }
.sc.on { background: var(--menu); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--text); }
.sc.on::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--chrome); }
.note { margin-top: 14px; min-height: 40px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; color: var(--text); }
.go { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
.go-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 640; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-variation-settings: "wdth" 112; transition: transform 140ms var(--ease); }
.go-btn.press, .gen.press, .f-dl.press { transform: scale(0.94); }

.ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad { position: relative; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; background: #141416; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ad .foot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #141416; opacity: 0; transition: opacity 400ms ease; }
.ad.done::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.55)); }
.ad .hook, .ad .cap, .ad .lb, .ad .bar { z-index: 2; }
.ad .hook { position: absolute; left: 10%; right: 10%; top: 12%; padding: 4px 5px; border-radius: 4px; background: #fff; color: #111; font-size: clamp(8px, 0.7vw, 10px); font-weight: 700; line-height: 1.2; text-align: center; opacity: 0; }
.ad .cap { position: absolute; left: 6%; right: 6%; top: 60%; text-align: center; font-weight: 800; font-size: clamp(9px, 0.95vw, 13px); line-height: 1.1; text-transform: uppercase; color: #fff; text-shadow: 0 0 1px #000, 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.7); opacity: 0; }
.ad .bar { bottom: 22px; left: 8px; right: 8px; }
.ad .lb { position: absolute; left: 8px; bottom: 7px; font-size: 10.5px; font-weight: 640; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); opacity: 0; }
.ad.making::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.6s infinite linear; }
.ad.making::after { content: "Rendering"; position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-size: 10.5px; color: var(--text-3); }
.ad.making .bar i { transform: scaleX(1); transition: transform var(--make, 2200ms) cubic-bezier(0.3, 0.6, 0.4, 1); }
.ad.done .bar { opacity: 0; }
.ad.done .foot, .ad.done .hook, .ad.done .cap, .ad.done .lb { opacity: 1; }
.cap.pop { animation: pop 260ms var(--ease) both; }
@keyframes pop { from { transform: scale(0.82); opacity: 0; } to { transform: none; opacity: 1; } }

.styles-block { margin-top: 56px; }
.style-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.style-list li { position: relative; display: grid; align-content: start; gap: 2px; padding: 16px 0 16px 18px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 15px; line-height: 1.5; transition: color 300ms ease; text-wrap: pretty; }
.style-list li::before { content: ""; position: absolute; left: 0; top: 23px; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--text-3); transition: background-color 300ms ease, box-shadow 300ms ease; }
.style-list li b { color: var(--text-2); font-weight: 600; font-size: 16px; transition: color 300ms ease; }
.style-list li.on { color: var(--text-2); }
.style-list li.on b { color: var(--text); }
.style-list li.on::before { background: var(--text); box-shadow: none; }
.aside { margin: 28px 0 0; font-size: 16px; color: var(--text-2); }
.aside b { color: var(--text); font-weight: 600; }

/* ---------- Images and video ---------- */
.maker { padding: 22px 22px 0; }
.mk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 760px; margin: 0 auto; }
.cbar { position: relative; max-width: 820px; margin: 22px auto -1px; padding: 14px 14px 12px; border-radius: 18px 18px 0 0; background: rgba(20, 20, 22, 0.92); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.cb-top { display: flex; gap: 12px; align-items: flex-start; }
.ref { position: relative; flex: none; width: 46px; height: 46px; border-radius: 11px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.ref .ph { transform: none; }
.ref .n { position: absolute; left: 3px; bottom: 3px; z-index: 2; padding: 0 5px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.6); }
.cb-prompt { flex: 1; min-width: 0; min-height: 46px; padding-top: 3px; font-size: 15px; line-height: 1.45; color: var(--text); }
.mention { padding: 1px 7px; border-radius: 6px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 560; }
.cb-ctl { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: nowrap; }
.ctl { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); }
.ctl em { font-style: normal; color: var(--text-3); }
.ctl b { font-weight: 560; color: var(--text); transition: opacity 200ms ease; }
.gen { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-variation-settings: "wdth" 112; font-weight: 640; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 140ms var(--ease); }
.swap { opacity: 0; }

.lists { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 48px; margin-top: 64px; }
.list ul { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { padding: 9px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.list dl { margin: 0; display: grid; }
.list dl > div { padding: 10px 0; border-top: 1px solid var(--line); }
.list dt { color: var(--text); font-weight: 600; font-size: 15px; }
.list dd { margin: 2px 0 0; color: var(--text-2); font-size: 15px; }
.facts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.facts li { padding: 18px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 16px; text-wrap: pretty; }
.facts b { color: var(--text); font-weight: 600; }

/* ---------- The rest ---------- */
.rest-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.rows { margin: 40px 0 0; display: grid; }
.rows > div { padding: 22px 0; border-top: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 1px solid var(--line); }
.rows dt { color: var(--text); font-weight: 600; font-size: 18px; }
.rows dd { margin: 6px 0 0; color: var(--text-2); font-size: 16px; max-width: 54ch; text-wrap: pretty; }

.cleaner { padding: 26px; display: grid; gap: 20px; }
.file { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.f-thumb { position: relative; flex: none; width: 44px; height: 56px; border-radius: 8px; overflow: hidden; }
.f-thumb .ph { transform: none; filter: none; }
.f-info { flex: 1; min-width: 0; display: grid; font-size: 13px; color: var(--text-3); }
.f-info b { color: var(--text); font-weight: 600; font-size: 14px; }
.f-dl { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 560; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 140ms var(--ease); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.tag { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 560; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transition: opacity 400ms ease, color 300ms ease; }
.tag::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.tag.gone { color: var(--text-3); opacity: 0.45; }
.tag.gone::after { transform: scaleX(1); background: var(--text-3); }
.f-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); min-height: 22px; transition: opacity 300ms ease; }
.f-status i { width: 18px; height: 18px; border-radius: 50%; background: var(--text); position: relative; flex: none; }
.f-status i::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.f-status.wait { opacity: 0; }

/* ---------- Closing band ---------- */
.close { position: relative; padding: 160px 0 144px; text-align: center; overflow: hidden; }
.close::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 38% at 50% 42%, rgba(255, 255, 255, 0.045), transparent 100%); }
.close-h { margin: 0 auto 56px; font-size: clamp(28px, 5.6vw, 80px); line-height: 1.06; letter-spacing: 0.01em; display: grid; justify-items: center; gap: 0.16em; }
.close-h .cl { white-space: nowrap; }
.close-h .metal { padding: 0.06em 0.22em 0.04em; border-radius: 0.12em; }
.close-h .w { display: inline-block; opacity: 0.28; transition: opacity 700ms var(--ease); }
.close-h .w.lit { opacity: 1; }
.close-h .metal.wipe { clip-path: inset(0 100% 0 0 round 0.12em); }
.close-h .metal.wipe.swept { clip-path: inset(0 0 0 0 round 0.12em); transition: clip-path 900ms var(--ease); }
.close-h .metal.swept::after { transform: translateX(120%); transition: transform 1100ms var(--ease) 500ms; }
.close-h .metal .w { opacity: 1; }

/* ---------- Footer ---------- */
.lp-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 32px max(32px, env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.foot-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-3); text-decoration: none; font-size: 14px; }
.foot-nav a:hover { color: var(--text); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .how-grid, .rest-grid { grid-template-columns: 1fr; gap: 48px; }
  .editor { grid-template-columns: 1fr 1fr; }
  .editor .out { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .editor .out .ads { max-width: 520px; margin: 0 auto; }
  .lists { grid-template-columns: 1fr 1fr; }
  .lists .styles3 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .lp-top { height: 60px; padding: 0 12px 0 16px; }
  .lp-login { padding: 0 12px; }
  .lp-cta-sm { height: 44px; padding: 0 16px; font-size: 11px; letter-spacing: 0.1em; }
  .lp-hero { min-height: calc(100svh - 60px - 210px); padding: 28px 0 76px; }
  .hero-in { gap: 24px; padding: 0 16px; }
  .hero-h { font-size: clamp(30px, 9.4vw, 46px); }
  .hero-h .ln { display: inline; white-space: normal; }
  .lp-cta { width: 100%; max-width: 340px; }
  .sec { padding: 88px 0; }
  .sec + .sec::before { width: calc(100% - 32px); }
  .h2 { font-size: clamp(28px, 8.2vw, 40px); }
  .lead { font-size: 17px; }
  .sec-head { margin-bottom: 36px; }
  .agent { grid-template-columns: 1fr; min-height: 0; }
  .chat { border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-body { min-height: 228px; }
  .editor { grid-template-columns: 1fr; }
  .pane + .pane { border-left: 0; border-top: 1px solid var(--line); }
  .bin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .bi .du { display: none; }
  .sc { font-size: 10px; white-space: normal; }
  .ctl em { display: none; }
  .style-list { grid-template-columns: 1fr; }
  .maker { padding: 14px 14px 0; }
  .mk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cbar { padding: 12px 12px 10px; }
  .cb-prompt { font-size: 14px; }
  .hide-s { display: none; }
  .lists { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .facts { grid-template-columns: 1fr; margin-top: 40px; }
  .cleaner { padding: 18px; }
  .close { padding: 112px 0 104px; }
  /* On a phone both lines break in two so the payoff stays as big as the line above it. */
  .close-h { font-size: clamp(28px, 10vw, 46px); line-height: 1.04; margin-bottom: 40px; }
  .close-h .cl { white-space: normal; text-wrap: balance; max-width: 100%; }
  .close-h .metal { padding: 0.08em 0.24em 0.06em; }
  .lp-foot { justify-content: center; text-align: center; padding-left: 16px; padding-right: 16px; }
  .foot-nav { justify-content: center; }
  .tl .mq { font-size: 11px; }
  .ad .cap { font-size: 11px; }
  .ad .hook { font-size: 8px; }
  .lp-hero + .sec { padding-top: 32px; }
  .cue { bottom: 12px; }
  .cue i { height: 28px; }
}
@media (max-width: 440px) {
  .lp-top .logo .word { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv { transform: none; transition: opacity 300ms ease; }
  .hero-in > * { animation: none; }
  .close-h .w { opacity: 1; transition: none; }
  .close-h .metal.wipe { clip-path: none; }
  .cue i::after { animation: none; transform: translateY(13px); }
}

/* ---------- Dropdowns on phones (Christian, 2026-10-30: the lists ran too long) ----------
   On a wide screen the buttons read as plain headings and every list shows. On a phone (landing.js adds .acc-ready
   under 721px) each list and feature row is a closed row that opens on tap. */
.acc-btn { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; padding: 0; margin: 0; background: none; border: 0; cursor: default; display: inline; }
.acc-i { display: none; }
.facts .acc-panel, .facts .acc-in { display: inline; }
.acc-ready .acc-btn { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acc-ready .acc-btn:focus-visible { outline-offset: -2px; border-radius: 6px; }
.acc-ready .acc-i { display: block; position: relative; flex: none; width: 13px; height: 13px; }
.acc-i::before, .acc-i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: var(--text-2); transition: transform 320ms var(--ease), opacity 220ms ease; }
.acc-i::after { transform: rotate(90deg); }
.acc.open .acc-i::after { transform: rotate(0deg); opacity: 0; }
.acc-ready .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease); }
.acc-ready .acc.open .acc-panel { grid-template-rows: 1fr; }
.acc-ready .acc-in { display: block; min-height: 0; overflow: hidden; }
.acc-ready .acc-in::after { content: ""; display: block; height: 14px; }
.acc-ready .lists { gap: 0; }
.acc-ready .list.acc, .acc-ready .styles-block .acc { border-top: 1px solid var(--line); }
.acc-ready .list.acc:last-child, .acc-ready .styles-block .acc { border-bottom: 1px solid var(--line); }
.acc-ready .list .h3, .acc-ready .styles-block .h3 { margin: 0; font-size: 16px; }
.acc-ready .facts { margin-top: 0; }
.acc-ready .facts li:first-child { border-top: 0; }
.acc-ready .facts li { padding: 0; }
.acc-ready .facts li:last-child { border-bottom: 1px solid var(--line); }
.acc-ready .facts b { font-size: 16px; }

/* The closing bar on a phone: two lines, the bar hugging the words inside the side gutter. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
@media (max-width: 720px) {
  .close-h .metal { width: max-content; max-width: 100%; white-space: nowrap; padding: 0.1em 0.32em 0.08em; }
  .close-h .metal .bl { display: block; }
}