@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  button, input { font: inherit; }
  button { border: 0; }
  a { color: inherit; text-decoration: none; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light;
    --paper: #f8f5ef;
    --paper-raised: #fffdf9;
    --paper-muted: #eee9e1;
    --ink: #252423;
    --ink-soft: #625f5a;
    --line: #d9d3ca;
    --accent: #d76445;
    --accent-soft: #f2d8cd;
    --navy: #071821;
    --navy-raised: #0c2430;
    --cream: #f8f3eb;
    --green: #2f8f66;
    --blue: #5c83f4;
    --shell: min(1240px, calc(100vw - 48px));
    --radius: 22px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #15191b;
    --paper-raised: #1b2023;
    --paper-muted: #242a2d;
    --ink: #f4efe7;
    --ink-soft: #ada8a0;
    --line: #373d3f;
    --accent: #ef8a69;
    --accent-soft: #4d2e27;
  }

  body {
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: "Manrope", "Avenir Next", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--accent-soft); color: var(--ink); }
  img, video, svg { display: block; max-width: 100%; }
  button, a { -webkit-tap-highlight-color: transparent; }

  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent), transparent 30%);
    outline-offset: 4px;
  }

  .shell { width: var(--shell); margin-inline: auto; }
  .skip-link {
    position: fixed;
    z-index: 2000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--paper-raised);
    color: var(--ink);
    transform: translateY(-150%);
  }
  .skip-link:focus { transform: translateY(0); }

  .eyebrow {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .js [data-reveal] { opacity: 0; transform: translateY(20px); }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 650ms ease, transform 750ms var(--ease); }
  .reveal { animation: rise-in 760ms var(--ease) both; animation-delay: var(--delay, 0ms); }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(24px); }
  }
}

@layer components {
  .button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding-inline: 25px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
  }
  .button:hover { transform: translateY(-2px); }
  .button-light { background: var(--cream); color: #111b20; }
  .button-light:hover { background: transparent; color: var(--cream); }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 750;
  }
  .text-link span { color: var(--accent); transition: transform 180ms var(--ease); }
  .text-link:hover span { transform: translateX(4px); }
  .text-link-light { color: var(--cream); }

  .hero-brief {
    padding-block: calc(var(--global-header-height, 76px) + clamp(54px, 7vw, 92px)) clamp(18px, 2.5vw, 34px);
  }
  .hero-brief-inner { display: grid; justify-items: center; text-align: center; }
  .hero-brief h1 {
    max-width: 900px;
    font-size: clamp(3.4rem, 7.5vw, 6.4rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.92;
  }
  .hero-brief-sub {
    max-width: 620px;
    margin-top: 26px;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.6;
  }
  .hero-brief-actions { margin-top: 34px; }
  .button-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .button-dark:hover { background: transparent; color: var(--ink); }
  .hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px 28px; margin-top: 34px; color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; }
  .hero-proof span { display: inline-flex; align-items: center; gap: 9px; }
  .hero-proof span::before { width: 6px; height: 6px; border-radius: 50%; background: #63c990; content: ""; }

  .product-proof { padding-block: clamp(100px, 12vw, 180px); }
  #how-it-works { scroll-margin-top: calc(var(--global-header-height, 76px) + 20px); }
  .quiet-heading { max-width: 780px; margin-bottom: clamp(46px, 6vw, 80px); }
  .quiet-heading h2, .privacy-copy h2, .faq-heading h2 {
    margin-top: 18px;
    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.98;
  }
  .quiet-heading h2 span { color: var(--accent); }
  .quiet-heading > p:last-child { max-width: 650px; margin-top: 24px; color: var(--ink-soft); font-size: clamp(1.02rem, 1.5vw, 1.22rem); }

  .stage-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 1px solid var(--line);
  }
  .stage-tabs button {
    position: relative;
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .stage-tabs button + button { border-left: 1px solid var(--line); }
  .stage-tabs button::after { position: absolute; right: 18%; bottom: -1px; left: 18%; height: 3px; background: var(--accent); content: ""; opacity: 0; transform: scaleX(0.4); transition: opacity 180ms ease, transform 250ms var(--ease); }
  .stage-tabs button[aria-selected="true"] { color: var(--ink); }
  .stage-tabs button[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); }
  .stage-tabs span { color: var(--accent); font-size: 0.7rem; font-weight: 800; }
  .stage-tabs strong { font-size: 0.87rem; }

  .workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.75fr);
    min-height: 660px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--paper-raised);
    box-shadow: 0 30px 80px rgba(29, 25, 20, 0.08);
  }
  .surface-bar, .rail-head {
    display: flex;
    height: 66px;
    align-items: center;
    justify-content: space-between;
    padding-inline: 26px;
    border-bottom: 1px solid var(--line);
  }
  .surface-who { font-size: 0.82rem; font-weight: 800; }
  .surface-bar small { color: var(--ink-soft); font-size: 0.7rem; }
  .chat-canvas { position: relative; display: grid; min-height: 594px; place-items: center; padding: 40px 46px 132px; background: color-mix(in srgb, var(--paper) 82%, var(--paper-raised)); }
  .chat-empty { color: var(--ink-soft); text-align: center; }
  .chat-empty span { display: block; margin-bottom: 16px; color: var(--accent); font-size: 2rem; }
  .chat-empty p { font-size: clamp(1.3rem, 2vw, 1.8rem); }
  .chat-result { width: min(560px, 100%); }
  .result-label { color: var(--accent); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
  .result-was { margin-top: 15px; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.035em; }
  .result-note { max-width: 430px; margin-top: 12px; color: var(--ink-soft); }
  .composer {
    position: absolute;
    right: 46px;
    bottom: 38px;
    left: 46px;
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px 18px 23px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper-raised);
    box-shadow: 0 12px 34px rgba(26, 23, 19, 0.07);
  }
  .composer p { max-height: 114px; overflow: auto; font-size: 0.94rem; line-height: 1.45; }
  .composer > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--ink); color: var(--paper); }

  .alide-rail { background: var(--navy); color: var(--cream); }
  .rail-head { border-color: rgba(255, 255, 255, 0.12); }
  .mini-brand { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 800; }
  .mini-brand svg { width: 22px; fill: currentColor; }
  .mini-brand span span { color: #ef8a69; }
  .rail-head small { display: flex; align-items: center; gap: 7px; color: #83d7a7; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .rail-head small i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(131, 215, 167, 0.1); }
  .rail-body { padding: 28px; }
  .strength { display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 0.67rem; }
  .strength > span { color: rgba(248, 243, 235, 0.56); font-weight: 700; }
  .strength > strong { font-weight: 750; }
  .strength > i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
  .strength > i b { display: block; width: 32%; height: 100%; border-radius: inherit; background: #ef8a69; transition: width 450ms var(--ease), background-color 300ms ease; }
  [data-stage="ready"] .strength > i b { background: #65c98f; }
  .rail-state { animation: rail-in 320ms var(--ease) both; }
  @keyframes rail-in { from { opacity: 0; transform: translateY(8px); } }
  .rail-kicker { margin-top: 56px; color: #ef8a69; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
  .rail-state h3 { margin-top: 14px; font-size: clamp(1.55rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1.1; }
  .missing-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .missing-parts span { padding: 8px 11px; border: 1px solid rgba(239, 138, 105, 0.45); border-radius: 999px; color: #fac0ac; font-size: 0.68rem; font-weight: 750; }
  .rail-primary { width: 100%; min-height: 48px; margin-top: 36px; border-radius: 12px; background: #f4eee5; color: #17232a; font-size: 0.76rem; font-weight: 800; cursor: pointer; transition: transform 160ms var(--ease), background-color 160ms ease; }
  .rail-primary:hover { transform: translateY(-2px); background: white; }
  .rail-primary:disabled { opacity: 0.72; cursor: default; transform: none; }
  .choice-list { display: grid; gap: 8px; margin-top: 24px; }
  .choice-list button { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 10px; background: transparent; color: rgba(248, 243, 235, 0.76); font-size: 0.7rem; text-align: left; cursor: pointer; }
  .choice-list button[aria-pressed="true"] { border-color: #ef8a69; background: rgba(239, 138, 105, 0.1); color: white; }
  .choice-list small { color: #ef8a69; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; }
  .brief-preview { display: grid; gap: 10px; margin-top: 24px; }
  .brief-preview div { padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
  .brief-preview span { color: #ef8a69; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .brief-preview p { margin-top: 4px; color: rgba(248, 243, 235, 0.72); font-size: 0.65rem; line-height: 1.45; }

  .platform-strip { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 34px; }
  .platform-strip > p { color: var(--ink); font-size: 0.82rem; font-weight: 800; }
  .platform-strip > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; }

  .product-film {
    padding-block: clamp(40px, 5vw, 72px) clamp(100px, 11vw, 160px);
    /* The desert, whispered: a paper-colored veil over the still keeps the
       film window the subject while the brand atmosphere sits around it.
       The veil is opaque at both edges so the section dissolves into the
       page instead of starting a stripe. */
    background:
      linear-gradient(
        180deg,
        var(--paper) 0%,
        color-mix(in srgb, var(--paper) 76%, transparent) 26%,
        color-mix(in srgb, var(--paper) 76%, transparent) 74%,
        var(--paper) 100%
      ),
      url("hero-poster.jpg") center 42% / cover no-repeat;
  }
  .film-window { overflow: hidden; border: 1px solid rgba(255,255,255,0.13); border-radius: 20px; background: var(--navy); box-shadow: 0 32px 90px rgba(25,22,18,0.16); }
  .film-chrome { display: grid; height: 48px; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 18px; border-bottom: 1px solid rgba(255,255,255,0.11); color: rgba(248,243,235,0.48); font-size: 0.62rem; }
  .film-chrome > span { display: flex; gap: 6px; }
  .film-chrome > span i { width: 7px; height: 7px; border-radius: 50%; background: rgba(248,243,235,0.24); }
  .film-chrome small { justify-self: end; }
  .film-video-shell { position: relative; aspect-ratio: 1710 / 918; overflow: hidden; background: #171715; }
  .film-video-shell video { transition: transform 1400ms var(--ease); transform-origin: 28% 60%; }
  .film-video-shell.is-zoom video { transform: scale(1.5); }
  .film-video-shell.is-zoom .film-cursor { opacity: 0; }
  .film-video-shell video { display: block; width: 100%; height: 100%; object-fit: contain; }
  .film-cursor {
    position: absolute;
    z-index: 3;
    top: 57%;
    left: 30%;
    width: 24px;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    transition: left 900ms var(--ease), top 900ms var(--ease);
  }
  .film-cursor svg { fill: #f8f3eb; stroke: #10222b; stroke-width: 1.4; }
  .film-cursor::after {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(248, 243, 235, 0.65);
    border-radius: 50%;
    content: "";
    opacity: 0;
    transform: scale(0.5);
  }
  .film-cursor.is-arrived::after { animation: cursor-ping 1100ms var(--ease) 750ms; }
  .film-cursor.is-click svg { animation: cursor-press 420ms var(--ease); }
  .film-cursor.is-click::after { animation: cursor-ping 620ms var(--ease); }
  @keyframes cursor-press { 35% { transform: scale(0.78); } }
  .film-fill { position: absolute; z-index: 4; right: 49%; bottom: 7.5%; left: 18%; padding: 9px 12px; border-radius: 10px; background: rgba(32, 32, 36, 0.96); color: rgba(236, 232, 226, 0.92); font-size: clamp(9px, 0.85vw, 13px); line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms var(--ease); pointer-events: none; }
  .film-fill.is-on { opacity: 1; transform: none; }
  @keyframes cursor-ping {
    0% { opacity: 0.9; transform: scale(0.45); }
    100% { opacity: 0; transform: scale(1.15); }
  }
  .film-window.is-paused .film-cursor { opacity: 0; transition: opacity 200ms ease; }
  @media (prefers-reduced-motion: reduce) { .film-cursor { display: none; } }
  .film-vignette { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(90deg, rgba(0,0,0,0.08), transparent 18%, transparent 82%, rgba(0,0,0,0.08)); pointer-events: none; }
  .film-real-badge { position: absolute; top: 14px; left: 12px; display: flex; min-width: 112px; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(7,24,33,0.94); color: #f8f3eb; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(8px); }
  .film-real-badge i { width: 7px; height: 7px; border-radius: 50%; background: #65c98f; box-shadow: 0 0 0 5px rgba(101,201,143,0.14); animation: film-live-pulse 1.8s ease-in-out infinite; }
  @keyframes film-live-pulse { 50% { box-shadow: 0 0 0 9px rgba(101,201,143,0); } }
  .film-controls { display: grid; min-height: 118px; grid-template-columns: 44px minmax(0, 1fr) minmax(190px, 0.45fr); align-items: center; gap: 24px; padding: 20px 22px; border-top: 1px solid rgba(255,255,255,0.11); color: #f8f3eb; }
  .film-toggle { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,0.23); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .film-toggle span::before, .film-toggle span::after { display: inline-block; width: 3px; height: 12px; margin-inline: 2px; background: currentColor; content: ""; }
  .film-window.is-paused .film-toggle span::before { width: 0; height: 0; margin-left: 3px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; background: transparent; }
  .film-window.is-paused .film-toggle span::after { display: none; }
  .film-timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .film-timeline button { display: grid; gap: 9px; background: transparent; color: rgba(248,243,235,0.46); font-size: 0.58rem; text-align: left; cursor: pointer; }
  .film-timeline button i { position: relative; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,0.13); }
  .film-timeline button i::after { position: absolute; inset: 0; background: #ef8a69; content: ""; transform: scaleX(0); transform-origin: left; }
  .film-timeline button.is-past i::after { transform: scaleX(1); }
  .film-timeline button[aria-selected="true"] { color: #fff; }
  .film-timeline button[aria-selected="true"] i::after { transform: scaleX(var(--film-chapter-progress, 0)); }
  .film-controls > p { color: rgba(248,243,235,0.66); font-size: 0.7rem; line-height: 1.55; }
  .film-cta { display: grid; justify-items: center; margin-top: clamp(44px, 5.5vw, 68px); }
  .film-cta .hero-proof { margin-top: 26px; }
  .film-after { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 28px; color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; }
  .film-after a { margin-left: auto; color: var(--ink); }

  .prompt-library { padding-block: clamp(76px, 9vw, 130px); border-top: 1px solid var(--line); background: var(--paper-raised); }
  .prompt-library .quiet-heading { margin-bottom: clamp(26px, 3.5vw, 40px); }
  .library-heading { max-width: none; text-align: center; }
  .lib-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .lib-tile { display: flex; flex-direction: column; flex: 0 0 calc((100% - 28px) / 3); padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised); box-shadow: 0 14px 44px rgba(29, 25, 20, 0.06); }
  .lib-logos { display: flex; gap: 8px; }
  .lib-lg { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(29, 25, 20, 0.08); }
  .lib-lg svg { width: 19px; height: 19px; }
  .lib-tile h3 { margin-top: 15px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
  .lib-tile > p { margin-top: 6px; margin-bottom: 16px; color: var(--ink-soft); font-size: 0.83rem; }
  .lib-teaser { display: grid; gap: 4px; align-content: start; width: 100%; min-height: 128px; margin-top: auto; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--lib-hue) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--lib-hue) 7%, var(--paper-muted)); text-align: left; cursor: pointer; transition: border-color 170ms ease, background-color 170ms ease, transform 170ms var(--ease); }
  .lib-teaser:hover { border-color: var(--lib-hue); background: color-mix(in srgb, var(--lib-hue) 12%, var(--paper-muted)); transform: translateY(-2px); }
  .lib-teaser b { color: var(--ink); font-size: 0.85rem; }
  .lib-teaser span { color: var(--ink-soft); font-size: 0.76rem; line-height: 1.5; }
  .lib-teaser em { margin-top: 5px; color: var(--lib-hue); font-size: 0.66rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }


  .mini-mega { padding-block: 0 clamp(90px, 10vw, 140px); }
  .mm-stage + .mm-stage { margin-top: clamp(52px, 6.5vw, 84px); }
  .mm-cases { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: clamp(34px, 4.5vw, 54px); }
  .mm-cases button { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 18px; border: 1px solid color-mix(in srgb, var(--mm-hue) 42%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--mm-hue) 7%, var(--paper-raised)); color: var(--ink); font-size: 0.8rem; font-weight: 800; cursor: pointer; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease, transform 170ms var(--ease); }
  .mm-cases button svg { width: 17px; height: 17px; fill: none; stroke: var(--mm-hue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 170ms ease; }
  .mm-cases button:hover { transform: translateY(-2px); }
  .mm-cases button[aria-selected="true"] { border-color: var(--mm-hue); background: var(--mm-hue); color: #fcf6f0; }
  .mm-cases button[aria-selected="true"] svg { stroke: #fcf6f0; }
  .mm-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
  .mm-tag span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid color-mix(in srgb, var(--mm-hue, var(--accent)) 55%, var(--line)); border-radius: 50%; color: var(--mm-hue, var(--accent)); font-size: 0.64rem; }
  .mm-flow { display: grid; grid-template-columns: minmax(230px, 0.5fr) auto minmax(0, 1fr); align-items: start; gap: clamp(18px, 3vw, 34px); }
  .mm-label { margin-bottom: 10px; color: var(--ink-soft); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .mm-bubble { padding: 17px 20px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--paper-raised); font-size: 0.95rem; }
  .mm-arrow { align-self: center; color: var(--mm-hue, var(--accent)); font-size: 1.6rem; font-weight: 700; }
  .mm-mega { overflow: hidden; border: 1px solid color-mix(in srgb, var(--mm-hue, var(--accent)) 30%, var(--line)); border-radius: 16px; background: var(--paper-raised); box-shadow: 0 22px 60px rgba(29, 25, 20, 0.07); }
  .mm-mega-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .mm-mega-head span { color: var(--mm-hue, var(--accent)); }
  .mm-mega-head em { color: var(--green); font-style: normal; }
  .mm-clip pre { max-height: 150px; margin: 0; padding: 16px 18px 8px; overflow: hidden; color: var(--ink-soft); font-family: inherit; font-size: 0.8rem; line-height: 1.62; white-space: pre-wrap; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 97%); mask-image: linear-gradient(180deg, #000 55%, transparent 97%); }
  .mm-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(82vh, 900px); padding: 0; border: 1px solid color-mix(in srgb, var(--mm-hue, var(--accent)) 40%, var(--line)); border-radius: 18px; background: var(--paper-raised); color: var(--ink); box-shadow: 0 40px 120px rgba(10, 8, 6, 0.35); }
  .mm-dialog::backdrop { background: rgba(8, 7, 6, 0.55); backdrop-filter: blur(3px); }
  .mm-dialog-head { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--paper-raised); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .mm-dialog-head span { color: var(--mm-hue, var(--accent)); }
  .mm-dialog-head em { color: var(--ink-soft); font-style: normal; }
  .mm-dialog-close { display: grid; width: 34px; height: 34px; margin-left: auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 1.05rem; cursor: pointer; }
  .mm-dialog-close:hover { border-color: var(--mm-hue, var(--accent)); color: var(--ink); }
  .mm-dialog pre { margin: 0; padding: 18px 20px; overflow: auto; max-height: calc(min(82vh, 900px) - 128px); color: var(--ink-soft); font-family: inherit; font-size: 0.84rem; line-height: 1.66; white-space: pre-wrap; }
  .mm-dialog-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
  .mm-dialog-copy { padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--mm-hue, var(--accent)) 55%, var(--line)); border-radius: 999px; background: transparent; color: var(--mm-hue, var(--accent)); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
  .mm-dialog-copy:hover { background: var(--mm-hue, var(--accent)); color: #fcf6f0; }
  .mm-expand { display: block; margin: 10px 18px 15px; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--mm-hue, var(--accent)) 55%, var(--line)); border-radius: 999px; background: transparent; color: var(--mm-hue, var(--accent)); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
  .mm-expand:hover { background: var(--mm-hue, var(--accent)); color: #fcf6f0; }
  .mm-chain { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.08fr); align-items: start; gap: clamp(14px, 2.5vw, 26px); }
  .mm-chain .mm-arrow { align-self: center; }
  .mm-sent { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--mm-hue, var(--accent)) 8%, var(--paper-raised)); color: var(--ink-soft); font-size: 0.8rem; line-height: 1.6; }
  .mm-reply { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-raised); }
  .mm-reply strong { display: block; font-size: 0.85rem; }
  .mm-reply p { margin-top: 7px; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.6; }
  .mm-posters { display: grid; overflow: hidden; border-radius: 14px; }
  .mm-posters button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 10px 16px; background: color-mix(in srgb, var(--mm-hue, #7a56c9) 10%, var(--paper-raised)); color: color-mix(in srgb, var(--mm-hue, #7a56c9) 72%, var(--ink)); font-size: 0.8rem; font-weight: 800; text-align: left; cursor: default; }
  .mm-posters button:nth-child(2) { background: color-mix(in srgb, var(--mm-hue, #7a56c9) 17%, var(--paper-raised)); }
  .mm-posters button.is-best { background: var(--mm-hue, #7a56c9); color: #fcf6f0; }
  .mm-posters button i { flex: 0 0 auto; font-size: 0.54rem; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }

  .privacy-promise { padding-block: clamp(100px, 12vw, 180px); }
  .privacy-layout { max-width: 780px; }
  .privacy-copy h2 { margin-top: 18px; }
  .privacy-lede { max-width: 520px; margin-top: 22px; color: var(--ink-soft); font-size: 1.08rem; }
  .privacy-copy ul { margin-top: 42px; border-top: 1px solid var(--line); }
  .privacy-copy li { display: grid; gap: 7px; padding-block: 21px; border-bottom: 1px solid var(--line); }
  .privacy-copy li strong { font-size: 0.88rem; }
  .privacy-copy li span { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.6; }
  .privacy-copy .text-link { margin-top: 30px; }

  .home-faq { padding-block: clamp(90px, 11vw, 160px); border-top: 1px solid var(--line); }
  .faq-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(50px, 10vw, 150px); }
  .faq-heading h2 { max-width: 420px; }
  .faq-list { border-top: 1px solid var(--line); }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { position: relative; padding: 25px 50px 25px 0; font-size: 0.96rem; font-weight: 700; list-style: none; cursor: pointer; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::before, .faq-list summary::after { position: absolute; top: 50%; right: 3px; width: 15px; height: 1px; background: var(--ink); content: ""; transition: transform 220ms var(--ease); }
  .faq-list summary::after { transform: rotate(90deg); }
  .faq-list details[open] summary::after { transform: rotate(0); }
  .faq-list details p { max-width: 680px; padding: 0 56px 25px 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.7; }

  .final-cta { position: relative; min-height: 620px; overflow: hidden; background: var(--navy); color: var(--cream); }
  .final-media, .final-shade { position: absolute; inset: 0; }
  .final-media img, .final-media video { width: 100%; height: 100%; object-fit: cover; }
  .final-shade { background: linear-gradient(90deg, rgba(2, 14, 19, 0.9), rgba(2, 14, 19, 0.42)); }
  .final-content { position: relative; display: grid; min-height: 620px; align-content: center; }
  .final-content .eyebrow { color: #ffae91; }
  .final-content h2 { max-width: none; margin-top: 20px; font-size: clamp(2.5rem, 7.2vw, 6.8rem); font-weight: 500; letter-spacing: -0.07em; line-height: 0.94; }
  .final-content h2 span { white-space: nowrap; }
  .final-actions { display: flex; align-items: center; gap: 28px; margin-top: 42px; }

  .site-footer { border-top: 1px solid rgba(255,255,255,0.08); background: var(--navy); color: var(--cream); }
  .footer-row { display: grid; min-height: 126px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
  .footer-brand { display: flex; width: fit-content; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 800; }
  .footer-brand svg { width: 24px; fill: currentColor; }
  .footer-brand span span { color: #ef8a69; }
  .site-footer nav { display: flex; gap: 28px; color: rgba(248,243,235,0.62); font-size: 0.72rem; }
  .site-footer nav a:hover { color: var(--cream); }
  .site-footer small { justify-self: end; color: rgba(248,243,235,0.44); font-size: 0.68rem; }
}

@layer responsive {
  @media (max-width: 960px) {
    :root { --shell: min(100% - 36px, 760px); }
    .workbench { grid-template-columns: 1fr; }
    .film-controls { grid-template-columns: 44px minmax(0,1fr); }
    .film-controls > p { grid-column: 1 / -1; padding-left: 68px; }
    .chat-surface { min-height: 500px; }
    .alide-rail { min-height: 560px; }
    .faq-layout { grid-template-columns: 1fr; }
    .lib-tile { flex-basis: calc((100% - 14px) / 2); }
    .mm-flow, .mm-chain { grid-template-columns: 1fr; }
    .mm-arrow { justify-self: start; transform: rotate(90deg); }
    .faq-layout { gap: 50px; }
  }

  @media (max-width: 640px) {
    :root { --shell: calc(100vw - 28px); }
    .hero-brief h1 { font-size: clamp(2.9rem, 13vw, 4.2rem); }
    .hero-brief-actions .button { width: 100%; }
    .hero-proof { gap: 10px 18px; margin-top: 28px; }
    .product-proof, .prompt-library, .privacy-promise, .home-faq { padding-block: 86px; }
    .product-film { padding-block: 86px; }
    .film-window { border-radius: 14px; }
    .film-chrome { grid-template-columns: 1fr auto; }
    .film-chrome > p { display: none; }
    .film-real-badge { top: 8px; left: 8px; min-width: 94px; padding: 7px 9px; font-size: 0.52rem; }
    .film-controls { grid-template-columns: 42px 1fr; gap: 16px; padding: 18px; }
    .film-timeline { grid-template-columns: repeat(2, 1fr); gap: 15px 10px; }
    .film-controls > p { padding-left: 0; }
    .film-cta { display: grid; justify-items: center; margin-top: clamp(44px, 5.5vw, 68px); }
  .film-cta .hero-proof { margin-top: 26px; }
  .film-after { align-items: flex-start; flex-direction: column; }
    .film-after a { margin-left: 0; }
    .quiet-heading h2, .privacy-copy h2, .faq-heading h2 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
    .stage-tabs button { min-height: 76px; flex-direction: column; gap: 4px; }
    .stage-tabs strong { font-size: 0.68rem; }
    .workbench { min-height: 0; border-radius: 0 0 16px 16px; }
    .chat-canvas { min-height: 450px; padding: 34px 18px 118px; }
    .composer { right: 18px; bottom: 22px; left: 18px; }
    .alide-rail { min-height: 560px; }
    .rail-body { padding: 24px; }
    .platform-strip { align-items: flex-start; flex-direction: column; }
    .platform-strip > div { justify-content: flex-start; }
    .lib-tile { flex-basis: 100%; }
    .prompt-card { grid-template-columns: 34px 1fr; gap: 13px; padding: 28px 24px; }
    .prompt-card > span { width: 30px; height: 30px; }
    .final-cta, .final-content { min-height: 560px; }
    .final-actions { align-items: flex-start; flex-direction: column; }
    .footer-row { min-height: 230px; grid-template-columns: 1fr; align-content: center; }
    .site-footer nav { flex-wrap: wrap; }
    .site-footer small { justify-self: start; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
  }
}