/* The home page (2026-11-12 redesign; direction and craft notes in site-sketch/NOTES.md).
   A quiet white page ruled like a grid: full-bleed horizontal hairlines between sections, the column bounded by
   vertical hairlines. Color lives only in the hero field, the card backgrounds and the one accent (style.css).
   Shared colors, type, nav, buttons and footer are in style.css. */

main { max-width: none; padding: 0; }
main > section { padding: 0; }
main > section:not(.hero) { border-top: 1px solid var(--line); }
main > .hero + section { border-top: 0; }
.col { max-width: 1120px; margin: 0 auto; padding: 104px 72px; border-inline: 1px solid var(--line); }
.col + .col { border-top: 1px solid var(--line); }
.center { text-align: center; }
.eyebrow { margin: 0 0 14px; font-size: 14px; }
.eyebrow a, .section-link a, .faq-list p a { color: var(--accent); }
.eyebrow a:hover, .section-link a:hover, .faq-list p a:hover { text-decoration: underline; text-underline-offset: 4px; }
.section-lede { max-width: 620px; margin: 16px 0 0; color: var(--muted); font-size: 17px; text-wrap: balance; }
.center .section-lede { margin-inline: auto; }
.label { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.head { margin-bottom: 56px; }
.head h2, .split h2 { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.prose { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.prose.small { font-size: 16px; }
.prose b, .cap b, .cap h2, .f-text h3, .facts dt, .facts b, .settings-preview b { color: var(--text); font-weight: 600; }

/* ---------- nav: transparent over the hero, white with a hairline once scrolled (page.js nav()); the links sit right,
   so the middle of the bar stays free for the notch, the way the Mac menu bar works ---------- */
.nav { position: sticky; top: 0; z-index: 20; max-width: none; padding: 0 34px; transition: background-color .2s ease, box-shadow .2s ease; }
.nav.is-scrolled { background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand img { border-radius: 6px; }

/* the phone's menu (user, 2026-10-12: the hero has Download already; the top shows the rest) */
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border-radius: 10px; color: var(--text); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: rgba(255, 255, 255, .7); }
.nav .menu nav { position: absolute; right: -8px; top: calc(100% + 8px); z-index: 20; display: grid; gap: 0; min-width: 196px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .25); }
.nav .menu nav a { display: block; padding: 10px 12px; border-radius: 9px; font-size: 16px; color: var(--text); }
.nav .menu nav a:hover { background: var(--surface); }

/* ---------- hero: a painted dusk field edge to edge (no clouds), one dark pill, and the product rising from the
   bottom edge: a showcase render of a Mac desktop that carries its own menu bar and notch ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; margin: -54px 10px 0; padding: 132px 24px 0; border-radius: 22px; text-align: center;
  background:
    radial-gradient(30% 24% at 50% 21%, rgba(255, 255, 255, .92), transparent 70%),
    radial-gradient(40% 58% at 3% 30%, #95a2c8, transparent 70%),
    radial-gradient(36% 52% at 98% 20%, #bfa9d4, transparent 70%),
    radial-gradient(34% 22% at 70% 42%, #f2c2a4, transparent 72%),
    radial-gradient(30% 22% at 28% 40%, #c5cde6, transparent 72%),
    radial-gradient(44% 40% at 6% 78%, #3a3a6e, transparent 72%),
    radial-gradient(44% 40% at 95% 74%, #57386e, transparent 72%),
    linear-gradient(180deg, #e7e9f2 0%, #d3d4e7 26%, #a9a4c8 50%, #4b4572 76%, #1f1b38 100%); }
.hero::before { /* paper grain, so the field reads painted rather than vector (data: images are allowed by the CSP) */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero h1 { margin-bottom: 28px; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fineprint { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #4a4a54; }

/* the new-release pill over the hero (NCH-178): page.js refreshes its words from changelog.json */
.pill-wrap { margin: 0 0 22px; }
.pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); font-size: 12.5px; color: #2a2a30; transition: background-color .2s ease; }
.pill:hover { background: rgba(255, 255, 255, .8); }
.pill-tag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--text); color: #fff; font-size: 11px; font-weight: 600; }
.pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-arrow { flex: none; transition: transform .2s ease; }
.pill:hover .pill-arrow, .pill:focus-visible .pill-arrow { transform: translateX(2px); }

.film { width: min(1240px, 100%); margin: 52px auto 0; overflow: hidden; border-radius: 14px 14px 0 0; background: #111113;
  box-shadow: 0 -18px 60px -10px rgba(25, 18, 60, .45), 0 0 0 1px rgba(255, 255, 255, .28); }
.film .shot { display: block; width: 100%; height: auto; }   /* the render's own shape (2400×1272; the phone crop 800×807) */

/* ---------- UI fragments on soft pastel: a still of the current app (renders of its own scenes, 2x webp)
   sits like a window, clipped at the right edge only ---------- */
.frag { position: relative; overflow: hidden; border-radius: 6px; }
.frag .shot { position: absolute; display: block; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #111113;
  box-shadow: 0 18px 40px -16px rgba(20, 16, 50, .55), 0 0 0 1px rgba(255, 255, 255, .5); }
.tint-lilac { background: radial-gradient(80% 70% at 15% 0%, #fdfcff, transparent 60%), linear-gradient(150deg, #ece8f7, #c9cfe9); }
.tint-sand  { background: radial-gradient(80% 70% at 15% 0%, #fffdfa, transparent 60%), linear-gradient(150deg, #f6e8de, #dcd3e8); }
.tint-sage  { background: radial-gradient(80% 70% at 15% 0%, #fbfdfc, transparent 60%), linear-gradient(150deg, #e3eee8, #cbd5e7); }
.tint-mist  { background: radial-gradient(80% 70% at 15% 0%, #fdfeff, transparent 60%), linear-gradient(150deg, #e6ecf4, #cdd3e4); }
.tint-rose  { background: radial-gradient(80% 70% at 15% 0%, #fffcfd, transparent 60%), linear-gradient(150deg, #f4e4ea, #d8d4ea); }
/* a caption is a bold lead and grey text in one run */
.cap, .f-text { margin: 18px 0 0; padding: 0 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.cap h2, .cap p, .f-text h3, .f-text p { display: inline; margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.section-link { margin: 10px 4px 0; font-size: 14px; }

/* canvas → crew → decisions: three use cases across */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 80px -52px 0; }
.story .frag { aspect-ratio: 1 / .88; }
.story .frag .shot { left: 9%; top: 14%; width: 128%; }

/* ---------- agents: the agent desk (a Mac desktop, wallpaper, menu bar and the open notch holding the crew;
   person's request 11-06) carried over as it was ---------- */
/* The silhouette follows NotchShape, not a rounded rectangle. Only the decorative layer folds.
   NotchMetrics: top 15 / bottom 20 (expanded), top 6 / bottom 14 (collapsed), in SVG units.
   The stage size, entry timings and web button sizes are illustration/layout choices, not app measurements. */
.agent-desk { --wall: radial-gradient(120% 90% at 18% 12%, #ffd9b8 0, transparent 55%), radial-gradient(100% 80% at 85% 20%, #b9c8ff 0, transparent 60%), linear-gradient(160deg, #e8dcff, #9fb6f0 55%, #f3c7d6);
  position: relative; max-width: 1040px; margin: 56px auto 0; padding: 0 0 40px; border-radius: 14px; overflow: hidden; background: var(--wall);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 30px 70px -36px rgba(30, 24, 70, .45); text-align: left; }
.desk-bar { display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 16px; background: rgba(255, 255, 255, .42); color: #1d1d1f; font-size: 13px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.desk-app { font-weight: 650; }
.desk-clock { margin-left: auto; }
.agent-stage { position: relative; isolation: isolate; width: min(600px, calc(100% - 32px)); margin: -30px auto 0; }
.agent-shell { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transform-origin: 50% 0; fill: #000; }
.agent-fold { position: absolute; top: 0; left: calc(50% - 100px); width: 200px; height: 32px; fill: #000; opacity: 0; pointer-events: none; }
.agent-content { padding: 44px 40px 26px; }
.agent-caption { margin: 0; text-align: center; color: #8e8e93; font-size: 13px; }
/* Toys spilled into the notch: uneven spots, 0.8–1.5x sizes, some tucked into the curved corners or leaning on a neighbour.
   Positions are percentages of the open notch. Only Pi and Hermes lean (their kits set no rule against it); every other mark stays upright. */
.agent-grid { position: relative; height: 250px; margin: 0; padding: 0; list-style: none; }
.agent-toy { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r, 0deg); }
.agent-toy[data-toy="claude"] { --x: 23%; --y: 28%; --h: 40px; }
.agent-toy[data-toy="codex"] { --x: 83%; --y: 15%; --h: 34px; z-index: 1; }
.agent-toy[data-toy="cursor"] { --x: 52%; --y: 42%; --h: 30px; z-index: 1; }
.agent-toy[data-toy="muse"] { --x: 64%; --y: 74%; --h: 54px; }
.agent-toy[data-toy="opencode"] { --x: 84%; --y: 52%; --h: 22px; z-index: 1; }
.agent-toy[data-toy="antigravity"] { --x: 16%; --y: 88%; --h: 15px; }
.agent-toy[data-toy="hermes"] { --x: 39%; --y: 72%; --h: 22px; --r: 6deg; z-index: 1; }
.agent-toy[data-toy="pi"] { --x: 93%; --y: 90%; --h: 40px; --r: -9deg; }
.agent-button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 14px; background: none; color: #f4f4f5; font: inherit; cursor: pointer; transition: background-color .18s ease-out, border-color .18s ease-out; -webkit-tap-highlight-color: transparent; }
.agent-button[aria-pressed="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.agent-button.is-preview { border-color: var(--ok); }
.agent-mark { display: block; height: var(--h); width: auto; max-width: 220px; object-fit: contain; }
.agent-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.agent-view { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: #6e6e73; font-size: 12px; }
/* Symbol-only brands (Pi, Hermes, Ollama) pair their official symbol with a typeset name; Muse has no official mark yet. */
.agent-lockup { display: flex; align-items: center; gap: calc(var(--h, 16px) * .3); color: #f4f4f5; font-weight: 600; font-size: calc(var(--h, 16px) * .72); letter-spacing: -.01em; white-space: nowrap; }
/* OpenAI (Codex) and Meta (Muse): the official mark alone, the product name as a small caption below its clear space. */
.agent-stack { display: grid; justify-items: center; gap: calc(var(--h) * .22); color: #c7c7cc; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.agent-stack .agent-padded { margin: calc(var(--h) * -.2) 0; }   /* Meta's artboard already carries its clear space */
.agent-view > img, .agent-view > .agent-lockup { --h: 14px; box-sizing: content-box; height: 14px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .12); }
.agent-view .agent-lockup img { height: 14px; width: auto; }
.agent-selection { max-width: 640px; min-height: 104px; margin: 24px auto 0; color: var(--muted); font-size: 15px; }
.agent-selection p { margin: 0; }
.agent-selection b { display: block; margin-bottom: 6px; color: var(--text); }
.agent-limits { max-width: 600px; margin: 16px auto 0; color: var(--muted); font-size: 14px; }
.notes-col { padding-top: 40px; padding-bottom: 56px; }
.agent-notes summary { cursor: pointer; padding: 8px 0; font-size: 14px; color: var(--accent); }
.agent-notes .facts { margin-top: 18px; }

/* fact lists: a bold lead and grey text, in a ruled grid */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts.one { grid-template-columns: 1fr; }
.facts > div, .facts > li { padding: 16px 0; border-top: 1px solid var(--line); }
.facts dd { margin: 4px 0 0; }

/* ---------- features: eight views as fragments, two across (the vertical tabs are gone) ---------- */
.tour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; margin: 0 -52px; }
.tour .frag, .settings-preview .frag { aspect-ratio: 16 / 10.8; }
.tour .frag .shot { left: 7%; top: 9%; width: 104%; }
.f-kicker { margin: 18px 4px -10px; font-size: 13px; color: var(--soft); }   /* a quiet label in sentence case; most name the screen the sentence does not */
.settings-preview { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; margin: 72px -52px 0; }
.settings-preview .frag .shot { left: 8%; top: 9%; width: 100%; }
.settings-preview figcaption { max-width: 420px; color: var(--muted); font-size: 17px; }
.also-col { padding-top: 64px; padding-bottom: 88px; }
.also h3 { margin: 0 0 18px; font-size: 13px; font-weight: 400; letter-spacing: normal; color: var(--muted); }

/* ---------- trust: four small monochrome cards ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 -52px; }
.mono-art { display: grid; place-items: center; aspect-ratio: 1 / .92; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.mono-art svg { width: 78%; height: auto; }
.mono-art .s { fill: #fff; stroke: #b9b9c0; stroke-width: 1.4; }
.mono-art .f { fill: #e6e6ea; }
.mono-art .k { fill: #1d1d20; }
.mono-art .d { fill: none; stroke: var(--soft); stroke-width: 1.4; stroke-dasharray: 3 4; }
.mono-art .k2 { fill: none; stroke: #1d1d20; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scard .cap { font-size: 14px; }

/* the power comparison: one accent bar, the rest grey; 4px rounded ends; labels in ink, never in the bar's color.
   Scale 0–80 mW; the figures are the Oct 2 replay stated below (0.1 mW; 26–77 mW). */
.chart { margin: 0; }
.bar-row, .axis { display: grid; grid-template-columns: 210px minmax(0, 1fr) 84px; gap: 20px; align-items: center; }
.bar-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.bar-row:first-child { border-top: 1px solid var(--line); }
.bar-name { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.bar-name img { border-radius: 4px; }
.track { position: relative; height: 14px; }
.bar { position: absolute; top: 0; height: 100%; border-radius: 4px; background: #dcdce1; }
.bar-notch { left: 0; width: max(4px, calc(0.1 / 80 * 100%)); background: var(--ok); }
.bar-terminal { left: calc(26 / 80 * 100%); width: calc(51 / 80 * 100%); }
.bar-val { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.axis { padding-top: 8px; font-size: 11.5px; color: var(--soft); }
.ticks { position: relative; height: 16px; }
.ticks i { position: absolute; translate: -50% 0; font-style: normal; }
.ticks i:nth-child(1) { left: 0; }
.ticks i:nth-child(2) { left: 25%; }
.ticks i:nth-child(3) { left: 50%; }
.ticks i:nth-child(4) { left: 75%; }
.ticks i:nth-child(5) { left: 100%; }
.unit { text-align: right; }
.chart figcaption { margin-top: 18px; font-size: 13px; color: var(--muted); }
.method { margin-top: 48px; padding-top: 16px; font-size: 14.5px; color: var(--muted); border-top: 1px solid var(--line); }
.method summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.method p { max-width: 760px; margin: 14px 0 0; }
.method b { color: var(--text); }
.nb { white-space: nowrap; }

/* ---------- pricing: the page's one dark card. The license card keeps its twinkling dots and turning badge
   (user, 2026-10-11: "vibeisland.app 처럼 동적이고 깔끔하게"); still with Reduce Motion ---------- */
.col.flush { padding: 0; }
.price-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.price-words { padding: 104px 56px 88px 72px; }
.price-words h2 { margin-bottom: 40px; }
.soft { color: var(--soft); }
.price-panel { display: grid; place-items: center; padding: 72px 48px; background: radial-gradient(70% 60% at 70% 20%, #2a2a33, transparent 70%), #0b0b0d; }
.price-card { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 380px; padding: 30px 28px 26px; color: #f4f4f5;
  background: #141416; border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px; box-shadow: 0 30px 70px -30px #000; }
.price-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.price-label { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.price-badge { flex: none; width: 76px; height: 76px; margin: -12px -12px 0 0; }
.price-badge text { font: 600 8.4px var(--mono); fill: #a1a1aa; }
.price-ring { transform-box: view-box; transform-origin: 50px 50px; animation: price-turn 16s linear infinite; }
@keyframes price-turn { to { transform: rotate(360deg); } }
.price { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.price-amount { font-size: 60px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-once { font-size: 15px; color: #a1a1aa; }
.price-meta { margin: 0 0 20px; font: 12px var(--mono); color: #a1a1aa; }
.price-list { margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; }
.price-list li { display: flex; gap: 10px; padding: 5px 0; }
.price-list li::before { content: "✓"; color: var(--ok); font-weight: 600; }
.price-cta { display: block; padding: 12px 18px; border-radius: 999px; text-align: center; font-weight: 500; background: #f4f4f5; color: #111113; transition: transform .2s ease; }
.price-cta:hover { transform: translateY(-1px); }
.price-cta:active { transform: none; }

/* ---------- FAQ: the heading on the left, ruled questions on the right ---------- */
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--soft); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: -4px 0 20px; max-width: 620px; color: var(--muted); font-size: 15px; }
/* Community is a secondary action inside the FAQ. */
.community { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.community p { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- the last word: one more way to download, on a soft band (NCH-178) ---------- */
.band-col { padding: 72px 56px 96px; }
.band { padding: 112px 24px; border-radius: 18px; text-align: center;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, #b7c0db, transparent 70%),
    radial-gradient(40% 70% at 100% 100%, #d4c4dd, transparent 70%),
    radial-gradient(60% 50% at 50% 110%, #f0cbb4, transparent 70%),
    linear-gradient(180deg, #f3f4f8, #dcdcea); }
.band h2 { margin: 0; }
.band .section-lede { margin: 16px auto 32px; }
.band .fineprint { color: var(--muted); }

/* ---------- footer: quiet columns ---------- */
footer.site-foot { display: block; max-width: none; padding: 0; border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 64px 72px 40px; font-size: 14px; color: var(--text); }
.foot-brand { margin: 0; }
.foot nav { display: grid; align-content: start; gap: 10px; }
.foot nav p { margin: 0 0 4px; color: var(--soft); font-size: 13px; }
.foot nav a:hover { color: var(--accent); }
.foot-copy { grid-column: 1 / -1; margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--soft); font-size: 13px; }

/* ---------- sections rise in (page.js); shown anyway if it never runs ---------- */
html.js .reveal:not(.is-in) { opacity: 0; }
html.js:not(.page-ok) .reveal { animation: show-in 0s 3s forwards; }
@keyframes show-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .price-ring { animation: none; }
  .pill-arrow, .price-cta, .nav { transition: none; }
  .pill:hover .pill-arrow, .pill:focus-visible .pill-arrow, .price-cta:hover { transform: none; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .nav { padding: 0 20px; }
  .nav > nav { display: none; }
  .menu { display: block; }
  .hero { margin-inline: 6px; padding: 112px 16px 0; border-radius: 18px; background-size: 100% 135%; background-position: top; }   /* the dusk stays under the film, not under the fine print */
  /* each phrase on its own balanced lines, so no word is left alone at the end of one ("Your agents. A") */
  .hero h1 br { display: none; }
  .hero h1 span { display: block; text-wrap: balance; }
  .film { margin-top: 40px; }   /* the whole render, scaled; same frame as on desktop */
  .col { margin-inline: 10px; padding: 64px 16px; }
  .col.flush { padding: 0; }
  .split, .price-split, .settings-preview { grid-template-columns: 1fr; gap: 24px; }
  .prose { font-size: 17px; }
  .section-lede { font-size: 16px; }
  .cards3, .tour, .cards4, .settings-preview { margin-inline: 0; }
  .cards3, .tour { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .tour { margin-top: 0; }
  .cards4 { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .facts, .facts.three { grid-template-columns: 1fr; }
  .head { margin-bottom: 36px; }
  .agent-desk { padding-bottom: 32px; }
  .desk-bar span { visibility: hidden; }   /* the notch covers the middle of a phone-sized bar */
  .agent-content { padding: 40px 12px 20px; }
  .agent-grid { height: 300px; }
  .agent-toy[data-toy="claude"] { --x: 35%; --y: 10%; --h: 30px; }
  .agent-toy[data-toy="codex"] { --x: 84%; --y: 13%; --h: 26px; z-index: 1; }
  .agent-toy[data-toy="cursor"] { --x: 63%; --y: 33%; --h: 24px; z-index: 1; }
  .agent-toy[data-toy="opencode"] { --x: 37%; --y: 48%; --h: 21px; }
  .agent-toy[data-toy="muse"] { --x: 80%; --y: 62%; --h: 42px; }
  .agent-toy[data-toy="antigravity"] { --x: 30%; --y: 67%; --h: 13px; z-index: 1; }
  .agent-toy[data-toy="hermes"] { --x: 50%; --y: 83%; --h: 16px; --r: 6deg; z-index: 1; }
  .agent-toy[data-toy="pi"] { --x: 15%; --y: 90%; --h: 32px; --r: -9deg; }
  .agent-selection { min-height: 150px; }
  .bar-row, .axis { grid-template-columns: minmax(0, 1fr) 76px; gap: 8px 12px; }
  .bar-name { grid-column: 1 / -1; }
  .axis > span:first-child { display: none; }
  .price-words { padding: 64px 16px 40px; }
  .price-panel { padding: 40px 16px; }
  .band-col { padding: 40px 0 56px; }
  .band { padding: 72px 20px; border-radius: 14px; }
  .foot { grid-template-columns: 1fr 1fr; padding: 48px 16px 32px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- small phones: each app picture whole inside its card, centred with even padding (no bleed, no offset) ---------- */
@media (max-width: 600px) {
  .frag, .story .frag, .tour .frag, .settings-preview .frag { display: grid; place-items: center; padding: 14px; aspect-ratio: auto; }
  .frag .shot, .story .frag .shot, .tour .frag .shot, .settings-preview .frag .shot { position: static; width: 100%; border-radius: 6px; }
}

/* SITE-V2: eight full-size app views, each kept whole inside its pastel card. */
.hero-subline { max-width: 600px; margin: 0 auto 28px; color: #4a4a54; font-size: 18px; line-height: 1.55; text-wrap: balance; }
.showcase-copy { max-width: 690px; }
.showcase-copy h2 { margin: 0; }
.showcase-copy .eyebrow { color: var(--accent); }
.showcase-visual { display: grid; place-items: center; margin: 40px -32px 0; padding: 32px; border-radius: 14px; }
.showcase-visual .shot { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 18px 40px -16px rgba(20, 16, 50, .35); }
#sessions .showcase-visual .shot { width: min(100%, 400px); }
.showcase .agent-selection { min-height: 0; margin-bottom: 0; text-align: center; }
.band .ctas { margin-top: 32px; }
@media (max-width: 760px) {
  .hero-subline { font-size: 16px; }
  .showcase-visual { margin: 28px 0 0; padding: 14px; border-radius: 10px; }
}

/* Section videos share the 16:10 frame of the stills (16:9 sources are centre-cropped). */
.showcase-visual video.shot-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }