/* Shared styles for the v2 site (copied from the homepage). Pages add their own small <style>. */
:root {
        --paper: #ffffff;
        --ink: #231f20;
        --orange: #f5b01b;
        --night: #0f0d0e;
        --night-2: #181516;
        --text: #f4f1ec;
        --dim: #9a9396;
        --line: rgba(255, 255, 255, 0.08);
        --max: 1160px;
        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--night);
        color: var(--text);
        font-family: "Inter", "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        opacity: 0;
        animation: pagein 0.9s var(--ease) 0.05s forwards;
      }
      body.leaving { animation: pageout 0.35s var(--ease) forwards; }
      @keyframes pagein { to { opacity: 1; } }
      @keyframes pageout { from { opacity: 1; } to { opacity: 0; } }
      a { color: inherit; text-decoration: none; }
      :focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }
      .skip { position: fixed; left: 16px; top: -60px; z-index: 99; background: var(--orange); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
      .skip:focus { top: 12px; }
      .shell { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }

      /* cursor glow */
      .glow {
        position: fixed; inset: 0; pointer-events: none; z-index: 0;
        background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(245, 176, 27, 0.11), transparent 60%);
        transition: background 0.1s linear;
      }
      .grid-bg {
        position: fixed; inset: 0; pointer-events: none; z-index: 0;
        background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%);
        -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%);
      }

      /* nav */
      header {
        position: fixed; top: 0; left: 0; right: 0; z-index: 20;
        transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
        border-bottom: 1px solid transparent;
      }
      header.scrolled { background: rgba(15, 13, 14, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
      header.light { background: rgba(247, 245, 242, 0.85); border-color: rgba(35, 31, 32, 0.08); }
      header.light .brand { color: #231f20; }
      header.light .brand img { filter: none; }
      header.light .navlinks a:not(.btn) { color: #686164; }
      header.light .navlinks a:not(.btn):hover { color: #231f20; }
      nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
      .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
      .brand img { height: 26px; width: auto; filter: brightness(0) invert(1); }
      .navlinks { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--dim); }
      .navlinks a:hover { color: var(--text); }
      .btn {
        position: relative; display: inline-flex; align-items: center; gap: 8px;
        padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
        background: var(--orange); color: var(--ink);
        transition: transform 0.25s var(--ease), box-shadow 0.25s;
        will-change: transform;
      }
      .btn:hover { box-shadow: 0 10px 40px rgba(245, 176, 27, 0.35); }
      .btn.ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18); }
      .btn.ghost:hover { box-shadow: none; border-color: rgba(255,255,255,0.4); }
      .btn.sm { padding: 9px 16px; font-size: 14px; }
      @media (max-width: 760px) { .navlinks .hide-m { display: none; } }

      main { position: relative; z-index: 1; }
      section { padding: 64px 0; }

      /* hero: one search bar, answer drops into the connected box */
      .hero { padding: 168px 0 72px; text-align: center; }
      .hero-in { max-width: 760px; }
      .sbox { text-align: left; border-radius: 16px; background: #fff; color: #0f1115; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 30px 80px -20px rgba(0,0,0,0.7); overflow: hidden; }
      .sbar { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 10px 0 22px; }
      .sbar svg { width: 20px; height: 20px; color: #8b909a; flex: none; }
      .sbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 clamp(16px, 2vw, 20px) Inter, system-ui, sans-serif; color: #0f1115; letter-spacing: -0.01em; }
      .sbar input::placeholder { color: #8b909a; font-weight: 400; }
      .sbar button { height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: #0f1115; color: #fff; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; }
      .sbar button:hover { background: #262a33; }
      .sstage { height: 404px; }
      .sbox { transition: box-shadow 0.4s var(--ease); position: relative; }
      .sprog { position: absolute; left: 0; top: 67px; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #f5b01b, transparent); background-size: 40% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity 0.2s; z-index: 1; }
      .sbox.think .sprog { opacity: 1; animation: sweep 0.9s linear infinite; }
      @keyframes sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
      .sbox { --spring: cubic-bezier(0.32, 0.72, 0, 1); }
      .sdrop-w { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.62s var(--spring); }
      .sbox.open .sdrop-w { grid-template-rows: 1fr; }
      .sdrop { min-height: 0; overflow: hidden; border-top: 1px solid transparent; padding: 0 24px; font-feature-settings: "tnum", "cv11"; transition: border-color 0.4s var(--spring), padding 0.62s var(--spring); }
      .sbox.open .sdrop { border-color: #eceae6; padding: 20px 24px 22px; }
      .sdrop .page > * { opacity: 0; transform: translateY(8px); filter: blur(3px); transition: opacity 0.5s var(--spring), transform 0.6s var(--spring), filter 0.5s var(--spring); }
      .sbox.open .sdrop .page > * { opacity: 1; transform: none; filter: none; }
      .sbox.open .sdrop .page > :nth-child(1) { transition-delay: 0.10s; }
      .sbox.open .sdrop .page > :nth-child(2) { transition-delay: 0.16s; }
      .sbox.open .sdrop .page > :nth-child(3) { transition-delay: 0.22s; }
      .sbox.open .sdrop .page > :nth-child(4) { transition-delay: 0.40s; }
      .sd-rows > div { opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--spring), transform 0.55s var(--spring); }
      .sbox.open .sd-rows > div { opacity: 1; transform: none; }
      .sbox.open .sd-rows > div:nth-child(1) { transition-delay: 0.24s; }
      .sbox.open .sd-rows > div:nth-child(2) { transition-delay: 0.30s; }
      .sbox.open .sd-rows > div:nth-child(3) { transition-delay: 0.36s; }
      /* exit: content dissolves first, then the box folds up */
      .sbox.leaving .sdrop .page > *, .sbox.leaving .sd-rows > div { opacity: 0; transform: translateY(-4px); filter: blur(2px); transition: opacity 0.22s ease-out, transform 0.3s ease-out, filter 0.22s ease-out; transition-delay: 0s !important; }
      /* answer charts */
      .sv { margin-top: 16px; font-size: 13px; color: #5a5e66; }
      .sv > *, .sv .bar, .sv .lane { opacity: 0; transition: opacity 0.4s var(--spring) 0.22s; }
      .sbox.open .sv > *, .sbox.open .sv .bar, .sbox.open .sv .lane { opacity: 1; }
      .sbox.leaving .sv > * { opacity: 0; transition-delay: 0s; }
      .sv-bars { display: grid; gap: 9px; }
      .bar { display: grid; grid-template-columns: 120px 1fr 132px; align-items: center; gap: 12px; }
      .bar b { color: #0f1115; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .bar span { text-align: right; color: #3a3e46; font-weight: 500; white-space: nowrap; }
      .bar .tr { display: block; height: 10px; border-radius: 5px; background: #f2f1ee; overflow: hidden; }
      .bar .fl { display: block; height: 100%; width: var(--w); border-radius: 5px; background: #c9ccd3; transform-origin: left; transform: scaleX(0); transition: transform 0.8s var(--spring); }
      .bar .fl.ok { background: linear-gradient(90deg, #12936a, #0f7a55); } .bar .fl.warn { background: #e4572e; }
      .sbox.open .bar .fl { transform: scaleX(1); }
      .seg { display: flex; gap: 3px; height: 14px; }
      .seg i { flex-basis: 0; border-radius: 4px; background: #c9ccd3; transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--spring); }
      .sbox.open .seg i { transform: scaleX(1); }
      .seg i.brand, .leg i.brand { background: #f5b01b; } .seg i.warn, .leg i.warn { background: #e4572e; } .seg i.ok, .leg i.ok { background: #0f7a55; }
      .leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
      .leg span { display: inline-flex; align-items: center; gap: 7px; }
      .leg i { width: 9px; height: 9px; border-radius: 3px; background: #c9ccd3; }
      .leg em { font-style: normal; } .leg b { color: #0f1115; font-weight: 600; }
      .sv-lanes { position: relative; display: grid; gap: 7px; }
      .lane { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
      .lane b { color: #0f1115; font-weight: 600; } .lane b.mut { color: #8b909a; font-weight: 500; }
      .lt { position: relative; height: 22px; border-radius: 6px; background: #f6f5f2; }
      .lt i { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: #d9dbe0; }
      .lt i.free { background: #e8f6ef; box-shadow: inset 0 0 0 1.5px #0f7a55; }
      .at { position: absolute; top: -4px; bottom: 18px; width: 2px; margin-left: -1px; background: #f5b01b; border-radius: 2px; }
      .ax { display: flex; justify-content: space-between; margin-left: 96px; font-size: 11px; color: #a3a7af; }
      .sv-pace svg { display: block; width: 100%; height: 118px; overflow: visible; }
      .sv-pace .grid { stroke: #f0efec; stroke-width: 1; }
      .sv-pace .last { fill: none; stroke: #c9ccd3; stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
      .sv-pace .proj { fill: none; stroke: #f5b01b; stroke-width: 2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; opacity: 0.8; }
      .sv-pace .area { fill: rgba(245, 176, 27, 0.14); }
      .sv-pace .cur { fill: none; stroke: #e69a00; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--spring) 0.25s; }
      .sbox.open .sv-pace .cur { stroke-dashoffset: 0; }
      .sv-pace .dot { fill: #fff; stroke: #e69a00; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
      .sv-pace .leg i.cur { background: #e69a00; } .sv-pace .leg i.last { background: #c9ccd3; } .sv-pace .leg i.proj { background: rgba(245,176,27,0.5); }
      .sv-draft .to { display: flex; gap: 8px; font-size: 12px; color: #8b909a; } .sv-draft .to b { color: #0f1115; font-weight: 600; }
      .sv-draft .bub { margin: 10px 0 0; max-width: 520px; padding: 12px 15px; border-radius: 16px 16px 16px 5px; background: #f2f3f5; color: #0f1115; font-size: 14.5px; line-height: 1.45; }
      .sv-draft .note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #b4530f; font-weight: 500; }
      .sv-draft .note i { width: 7px; height: 7px; border-radius: 50%; background: #f5b01b; animation: pulse 1.6s ease-in-out infinite; }
      @media (max-width: 600px) { .bar { grid-template-columns: 84px 1fr; } .bar span { grid-column: 1 / -1; text-align: left; margin-top: -4px; font-size: 12px; } .lane { grid-template-columns: 64px 1fr; } .ax { margin-left: 76px; } .at { left: calc(76px + (100% - 76px) * 0.666) !important; } }
      .pages { position: relative; }
      .sd-head .miss { font-size: 16px; color: #3a3e46; font-weight: 500; max-width: 52ch; }
      .sd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
      .sd-chips button { font: 500 12.5px Inter, system-ui, sans-serif; color: #3a3e46; background: #fff; border: 0; box-shadow: 0 0 0 1px #e9eaee; border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: background 0.12s, color 0.12s; }
      .sd-chips button:hover { background: #0f1115; color: #fff; box-shadow: none; }
      .page.pre .bar .fl, .page.pre .seg i { transform: scaleX(0) !important; }
      .page.pre .sv-pace .cur { stroke-dashoffset: 1 !important; }
      .page.pre .sv > *, .page.pre .sd-rows > div { opacity: 0 !important; }
      .sbar button { transition: transform 0.18s var(--spring), background 0.18s, box-shadow 0.3s; }
      .sbar button.press { transform: scale(0.92); background: #2b303b; box-shadow: 0 0 0 6px rgba(245, 176, 27, 0.22); }
      .sbar input.auto { caret-color: transparent; }
      .sd-meta { display: flex; align-items: center; gap: 8px; color: #8b909a; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
      .sd-meta i { width: 7px; height: 7px; border-radius: 50%; background: #f5b01b; box-shadow: 0 0 0 3px rgba(245, 176, 27, 0.18); }
      .sd-meta em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: #a3a7af; }
      .sd-head { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
      .sd-head b { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
      .sd-head b.word { font-size: 34px; letter-spacing: -0.035em; }
      .sd-head b.warn { color: #c2410c; } .sd-head b.ok { color: #0f7a55; } .sd-head b.brand { color: #b7791f; }
      .sd-head span { color: #3a3e46; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; max-width: 40ch; }
      .sd-rows { margin-top: 14px; }
      .sd-rows > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f2f1ee; font-size: 14px; color: #5a5e66; }
      .sd-rows > div:last-child { border-bottom: 0; }
      .sd-rows b { color: #0f1115; font-weight: 600; }
      .sd-rows .v { color: #0f1115; font-weight: 500; }
      .sd-rows .t { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #f2f3f5; color: #464a53; min-width: 64px; text-align: center; }
      .sd-rows .t.warn { background: #fff1e6; color: #c2410c; } .sd-rows .t.ok { background: #e8f6ef; color: #0f7a55; }
      .sd-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
      .sd-foot small { margin-right: auto; color: #8b909a; font-size: 12px; }
      .sd-foot span { padding: 8px 14px; border-radius: 9px; background: linear-gradient(#262a33, #0f1115); color: #fff; font-size: 13px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(15,17,21,0.2); }
      .hero-h { margin: 24px auto 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 650; }
      .hero-h span { color: var(--dim); }
      .hero .cta-row { margin-top: 26px; justify-content: center; }
      @media (max-width: 600px) { .hero { padding: 92px 0 48px; } .hero-h { margin: 28px auto 0; font-size: 28px; } .hero .cta-row { margin-top: 20px; } .sbar { height: 60px; padding-left: 16px; } .sbar button { padding: 0 16px; } .sbox.open .sdrop { padding: 16px; } .sstage { height: auto; min-height: 340px; } .sd-head b { font-size: 34px; } .sd-rows > div { grid-template-columns: 1fr auto; } .sd-rows .v { display: none; } .sd-foot small { display: none; } }
      .console { --bg: #fbfbfc; --panel: #fff; --line: #e9eaee; --line2: #f2f3f5; --ink: #0f1115; --ink2: #464a53; --ink3: #8b909a; --warn: #b4530f; --warn-soft: #fff5eb; --ok: #13795b; --ok-soft: #ecf8f3; --hover: #f8f9fb; text-align: left; }
      /* the console: the actual product, not an illustration */
      .console { margin-top: 48px; background: var(--bg); color: var(--ink); border-radius: 14px; overflow: hidden; font-size: 13px; line-height: 1.45; font-feature-settings: "tnum", "cv11", "ss01";
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 120px -20px rgba(0,0,0,0.7); }
      .console .c-top { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
      .console .org { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
      .console .org i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font: 600 10px Inter; font-style: normal; color: #fff; background: #1f2937; }
      .console .org small { font-weight: 400; color: var(--ink3); }
      .console .tabs { display: flex; gap: 2px; background: var(--line2); padding: 3px; border-radius: 9px; margin-left: auto; }
      .console .tabs span { padding: 4px 10px; border-radius: 7px; color: var(--ink2); font-weight: 500; }
      .console .tabs span.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(15,17,21,0.06); }

      .console .c-ask { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 0 6px 0 14px; height: 48px; background: var(--panel); border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(15,17,21,0.04); transition: box-shadow 0.12s; }
      .console .c-ask:focus-within { box-shadow: 0 0 0 1px #c9a24a, 0 0 0 4px rgba(245,176,27,0.18); }
      .console .c-ask svg { width: 16px; height: 16px; color: var(--ink3); flex: none; }
      .console .c-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px Inter, sans-serif; color: var(--ink); }
      .console .c-ask input::placeholder { color: var(--ink3); font-weight: 400; }
      .console kbd { font: 500 11px Inter, sans-serif; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--ink3); background: #fff; }
      .console .c-ask button { height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: linear-gradient(#262a33, #0f1115); color: #fff; font: 600 13px Inter; cursor: pointer; }

      .console .sugs { display: flex; gap: 6px; padding: 0 14px 12px; overflow-x: auto; scrollbar-width: none; }
      .console .sugs::-webkit-scrollbar { display: none; }
      .console .sugs button { flex: none; border: 0; background: transparent; font: 500 12.5px Inter, sans-serif; color: var(--ink2); padding: 6px 10px; border-radius: 7px; cursor: pointer; box-shadow: 0 0 0 1px var(--line); transition: background 0.1s, color 0.1s; }
      .console .sugs button:hover { background: var(--hover); color: var(--ink); }
      .console .sugs button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }

      .console .c-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; border-top: 1px solid var(--line); min-height: 380px; }
      .console .answer { padding: 22px 24px 20px; background: var(--panel); transition: opacity 0.12s; }
      .console .answer.swap { opacity: 0.35; }
      .console .meta { display: flex; align-items: center; gap: 8px; color: var(--ink3); font-size: 12px; }
      .console .meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
      .console .headline { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
      .console .headline b { font-size: 40px; line-height: 1; font-weight: 650; letter-spacing: -0.035em; }
      .console .headline span { font-size: 15px; color: var(--ink2); max-width: 46ch; }
      .console table { width: 100%; border-collapse: collapse; margin-top: 18px; }
      .console th { text-align: left; font-weight: 500; color: var(--ink3); font-size: 11.5px; padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
      .console td { padding: 0 10px; height: 40px; border-bottom: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
      .console th:first-child, .console td:first-child { padding-left: 0; }
      .console .r { text-align: right; }
      .console td.n { color: var(--ink); font-weight: 550; }
      .console .c-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 5px; background: var(--line2); color: var(--ink2); }
      .console .c-tag.warn { background: var(--warn-soft); color: var(--warn); } .c-tag.ok { background: var(--ok-soft); color: var(--ok); }
      .console .more { color: var(--ink3); font-size: 12px; padding-top: 10px; }
      .console .a-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
      .console .a-foot .src { color: var(--ink3); font-size: 12px; margin-right: auto; }
      .console .a-foot button { height: 32px; padding: 0 12px; border-radius: 7px; font: 500 12.5px Inter; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); }
      .console .a-foot button.go { background: linear-gradient(#262a33, #0f1115); color: #fff; border-color: #0f1115; }
      .console .a-foot button.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

      .console .rail { border-left: 1px solid var(--line); padding: 18px 18px 14px; background: var(--bg); }
      .console .rail h3 { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--ink3); display: flex; justify-content: space-between; }
      .console .log { list-style: none; margin: 0; padding: 0; }
      .console .log li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
      .console .log li:last-child { border: 0; }
      .console .log time { color: var(--ink3); font-size: 12px; }
      .console .log p { margin: 0; color: var(--ink2); }
      .console .log p b { color: var(--ink); font-weight: 550; }
      .console .log a { color: var(--ink3); font-size: 12px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; cursor: pointer; }
      .console .log a:hover { color: var(--ink); }
      .console .log li.new { animation: slide 0.3s ease-out; }
      .console @keyframes slide { from { opacity: 0; transform: translateY(-4px); } }

      @media (max-width: 960px) { .console .c-body { grid-template-columns: 1fr; } .console .rail { border-left: 0; border-top: 1px solid var(--line); } .console .tabs { display: none; } }
      @media (max-width: 600px) { .console { margin-inline: -8px; } .console .answer { padding: 18px 16px; } .console .headline b { font-size: 32px; } .console .hm { display: none; } .console .c-ask kbd { display: none; } }

      .tag {
        display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
        border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--dim); font-size: 13px;
      }
      .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
      .hero .second { margin-top: 36px; font-size: clamp(28px, 4.4vw, 52px); font-weight: 650; letter-spacing: -0.035em; }
      .hero .second span { color: var(--orange); font-variant-numeric: tabular-nums; }
      .hero .sub { margin: 22px auto 0; color: var(--dim); font-size: 18px; max-width: 44ch; }
      .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
      .scroll-hint { margin-top: 72px; color: var(--dim); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
      .scroll-hint::after { content: ""; display: block; width: 1px; height: 48px; margin: 14px auto 0; background: linear-gradient(var(--orange), transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; }
      @keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

      /* facts wall */
      .kicker { color: var(--orange); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
      .h2 { margin: 16px auto 0; text-align: center; font-size: clamp(36px, 5.6vw, 72px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; max-width: 20ch; }
      .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; perspective: 1200px; }
      .fact {
        position: relative; padding: 40px 32px; border-radius: 24px; border: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
        transform-style: preserve-3d; transition: transform 0.4s var(--ease), border-color 0.3s;
        overflow: hidden;
      }
      .fact::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
        background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(245, 176, 27, 0.16), transparent 60%);
      }
      .fact:hover { border-color: rgba(245, 176, 27, 0.35); }
      .fact:hover::before { opacity: 1; }
      .fact b { display: block; font-size: clamp(44px, 5vw, 64px); letter-spacing: -0.05em; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
      .fact span { display: block; margin-top: 14px; color: var(--dim); font-size: 16px; }
      .fact em { display: block; margin-top: 28px; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.35); letter-spacing: 0.04em; }
      .fact.big { grid-column: span 2; }
      .fact.big b { font-size: clamp(56px, 8vw, 104px); color: var(--orange); }
      .note { margin-top: 28px; text-align: center; color: rgba(255,255,255,0.32); font-size: 12px; }
      @media (max-width: 860px) { .facts { grid-template-columns: 1fr; } .fact.big { grid-column: auto; } }

      /* how */
      .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 56px; }
      .step { text-align: center; }
      .icon {
        width: 72px; height: 72px; margin: 0 auto; display: grid; place-items: center; border-radius: 22px;
        background: rgba(245, 176, 27, 0.1); border: 1px solid rgba(245, 176, 27, 0.25); color: var(--orange);
        transition: transform 0.4s var(--ease);
      }
      .step:hover .icon { transform: translateY(-6px) rotate(-4deg); }
      .icon svg { width: 30px; height: 30px; }
      .step h3 { margin: 28px 0 0; font-size: 26px; letter-spacing: -0.03em; font-weight: 650; }
      .step p { margin: 10px auto 0; color: var(--dim); font-size: 17px; max-width: 22ch; line-height: 1.45; }
      .step .n { display: block; margin-bottom: 18px; color: rgba(255,255,255,0.25); font-size: 13px; font-variant-numeric: tabular-nums; }
      @media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 80px; } }

      /* features */
      .net { position: relative; margin-top: 48px; }
      .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
      .wires path { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1.4; transition: stroke 0.4s; }
      .wires path.flow { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 12; animation: flow 1.6s linear infinite; opacity: 0.55; transition: opacity 0.4s; }
      .wires path.flow.hot { opacity: 1; }
      @keyframes flow { to { stroke-dashoffset: -34; } }
      .feats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
      .feat { transition: background 0.3s, box-shadow 0.4s; }
      .feat.hot { background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(245,176,27,0.45); }
      .core-row { display: grid; place-items: center; height: 240px; }
      .core {
        position: relative; width: min(100%, 440px); padding: 22px 26px; border-radius: 22px; text-align: left;
        background: var(--night-2); border: 1px solid rgba(245,176,27,0.4);
        box-shadow: 0 0 0 8px rgba(245,176,27,0.04), 0 0 80px rgba(245,176,27,0.18);
      }
      .core-head { display: flex; align-items: center; gap: 10px; font-size: 17px; }
      .core-head img { height: 18px; width: auto; filter: brightness(0) invert(1); }
      .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }
      .live i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; animation: pulse 1.6s ease-in-out infinite; }
      @keyframes pulse { 50% { opacity: 0.3; } }
      .insight { margin: 16px 0 0; min-height: 48px; font-size: 16px; line-height: 1.45; transition: opacity 0.35s, transform 0.35s var(--ease); }
      .insight.swap { opacity: 0; transform: translateY(6px); }
      .insight em { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(245,176,27,0.14); color: var(--orange); vertical-align: 2px; }
      .feat { background: var(--night); padding: 40px 28px; transition: background 0.3s; }
      .feat:hover { background: var(--night-2); }
      .feat svg { width: 26px; height: 26px; color: var(--orange); }
      .feat h4 { margin: 22px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
      .feat p { margin: 6px 0 0; color: var(--dim); font-size: 15px; }
      @media (max-width: 960px) { .feats { grid-template-columns: repeat(2, 1fr); } .core-row { height: 200px; } }
      @media (max-width: 520px) { .feats { grid-template-columns: 1fr; } }

      /* Operator chat */
      .ask { margin: 40px auto 0; max-width: 640px; }
      .bubble { padding: 18px 22px; border-radius: 20px; font-size: 17px; line-height: 1.45; width: fit-content; max-width: 90%; }
      .bubble.q { margin-left: auto; background: var(--orange); color: var(--ink); border-bottom-right-radius: 6px; font-weight: 500; }
      .bubble.a { margin-top: 14px; background: var(--night-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
      .bubble.a strong { color: var(--orange); }
      .bubble.a .act { display: inline-block; margin-top: 12px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(245,176,27,0.4); color: var(--orange); font-size: 14px; }
      .hero-rot { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.45s var(--ease); }
      .hero-rot.swap { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
      .hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
      .hero-dots i { width: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; position: relative; }
      .hero-dots i.on::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform-origin: left; animation: dotfill var(--hold, 5s) linear forwards; }
      @keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      .hero-q {
        display: block; width: fit-content; margin: 32px auto 0; padding: 12px 20px; border-radius: 20px 20px 6px 20px;
        background: var(--orange); color: var(--ink); font-size: clamp(16px, 2vw, 20px); font-weight: 550;
      }
      .thread {
        height: 400px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden;
        padding: 0 4px 4px;
        mask-image: linear-gradient(transparent, #000 34%); -webkit-mask-image: linear-gradient(transparent, #000 34%);
      }
      .msg {
        flex: none; max-width: 78%; padding: 12px 17px; border-radius: 22px; font-size: 17px; line-height: 1.4;
        transform-origin: bottom left;
      }
      .msg.q { align-self: flex-end; background: var(--orange); color: var(--ink); border-bottom-right-radius: 6px; font-weight: 500; transform-origin: bottom right; }
      .msg.a { align-self: flex-start; background: var(--night-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
      .msg.q + .msg.a, .msg.a + .msg.q { margin-top: 10px; }
      .msg .act { display: block; width: fit-content; margin-top: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(245,176,27,0.4); color: var(--orange); font-size: 14px; }
      .msg.pop { animation: pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25); }
      @keyframes pop { from { opacity: 0; transform: scale(0.82) translateY(10px); } to { opacity: 1; transform: none; } }
      .msg.dots { display: flex; gap: 5px; padding: 16px 18px; }
      .msg.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); animation: bob 1.1s ease-in-out infinite; }
      .msg.dots i:nth-child(2) { animation-delay: 0.15s; }
      .msg.dots i:nth-child(3) { animation-delay: 0.3s; }
      @keyframes bob { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
      @media (max-width: 640px) { .thread { height: 480px; } .msg { max-width: 88%; font-size: 16px; } }
      .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px auto 0; max-width: 760px; }
      .chips button {
        font: inherit; font-size: 14px; color: var(--dim); background: transparent; cursor: pointer;
        border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; transition: color 0.2s, border-color 0.2s, background 0.2s;
      }
      .chips button:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
      .chips button[aria-pressed="true"] { color: var(--ink); background: var(--orange); border-color: var(--orange); }
      .typing::after { content: "▍"; color: var(--orange); animation: blink 1s steps(1) infinite; margin-left: 2px; }
      @keyframes blink { 50% { opacity: 0; } }

      /* team chat */
      .tchat { max-width: 720px; margin: 40px auto 0; text-align: left; background: #fff; color: #0f1115; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(35,31,32,0.08), 0 30px 80px -30px rgba(35,31,32,0.35); font-feature-settings: "tnum"; }
      .tc-top { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px; border-bottom: 1px solid #eceae6; }
      .tc-top b { font-weight: 650; } .tc-top span { color: #8b909a; font-size: 13px; }
      .tc-feed { height: 430px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 16px 20px; overflow: hidden;
        mask-image: linear-gradient(transparent, #000 22%); -webkit-mask-image: linear-gradient(transparent, #000 22%); }
      .tm { display: grid; grid-template-columns: 32px 1fr; gap: 10px; flex: none; }
      .tm .av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 650; color: #fff; }
      .tm .who { font-size: 13px; font-weight: 650; } .tm .who em { font-style: normal; font-weight: 400; color: #a3a7af; margin-left: 6px; font-size: 12px; }
      .tm p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: #2b2f36; }
      .tm .mention { color: #9a5b00; background: #fff4dc; border-radius: 5px; padding: 0 4px; font-weight: 600; }
      .tm.op .av { background: #0f1115; } .tm.op .av img { width: 18px; filter: brightness(0) invert(1); }
      .tm .card { margin-top: 8px; border: 1px solid #eceae6; border-radius: 12px; padding: 12px 14px; background: #fbfbfa; max-width: 460px; }
      .tm .card .num { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
      .tm .card .num.warn { color: #c2410c; } .tm .card .num.ok { color: #0f7a55; }
      .tm .card .ln { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #f2f1ee; font-size: 13.5px; color: #464a53; }
      .tm .card .ln:first-of-type { margin-top: 8px; } .tm .card .ln b { color: #0f1115; font-weight: 600; }
      .tm .card .go { display: inline-block; margin-top: 10px; padding: 6px 11px; border-radius: 8px; background: #0f1115; color: #fff; font-size: 12.5px; font-weight: 600; }
      .tm .card .scope { margin-top: 8px; font-size: 12px; color: #8b909a; }
      .tm.pop { animation: tpop 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
      @keyframes tpop { from { opacity: 0; transform: translateY(14px); } }
      .tm.typing p { display: flex; gap: 4px; padding-top: 8px; } .tm.typing p i { width: 6px; height: 6px; border-radius: 50%; background: #b8bcc4; animation: bob 1.1s ease-in-out infinite; } .tm.typing p i:nth-child(2) { animation-delay: 0.15s; } .tm.typing p i:nth-child(3) { animation-delay: 0.3s; }
      .tc-compose { display: flex; justify-content: space-between; align-items: center; margin: 0 16px 16px; padding: 12px 14px; border-radius: 10px; box-shadow: 0 0 0 1px #e9eaee; color: #a3a7af; font-size: 14px; }
      .tc-compose kbd { font: 600 12px Inter, sans-serif; color: #9a5b00; background: #fff4dc; border-radius: 5px; padding: 1px 6px; }
      @media (max-width: 600px) { .tc-feed { height: 470px; padding: 14px; } .tm p { font-size: 14.5px; } }

      /* switch */
      .logos { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
      .logos span { padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); font-size: 15px; transition: color 0.2s, border-color 0.2s; }
      .logos span:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
      .switch-sub { margin: 28px auto 0; text-align: center; color: var(--dim); font-size: 18px; }

      /* final */
      .final { text-align: center; padding-bottom: 96px; }
      .final .h2 { max-width: 14ch; }
      .final .h2 span { color: var(--orange); }

      /* photo slots: swap the gradient for <img> when real shots arrive */
      .photo {
        position: relative; margin: 0; border-radius: 28px; overflow: hidden;
        background:
          radial-gradient(120% 80% at 70% 10%, rgba(245, 176, 27, 0.35), transparent 60%),
          radial-gradient(90% 70% at 10% 100%, rgba(120, 72, 30, 0.55), transparent 70%),
          linear-gradient(160deg, #3a2f28, #1c1714);
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
      }
      .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.9s var(--ease), transform 6s linear; }
      .photo img.on { opacity: 1; transform: scale(1); }
      .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45)); }
      .photo-tag {
        position: absolute; left: 20px; bottom: 20px; z-index: 1; padding: 8px 14px; border-radius: 999px;
        background: rgba(255,255,255,0.92); color: var(--ink); font-size: 14px; font-weight: 600;
        transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
      }
      .photo-tag.swap { opacity: 0; transform: translateY(8px); }
      .photo-note {
        position: absolute; left: 20px; top: 20px; padding: 6px 12px; border-radius: 999px;
        background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.75); font-size: 12px; backdrop-filter: blur(6px);
      }
      .quote-card {
        position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 20px 22px; border-radius: 20px;
        background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
      }
      .quote-card.swap { opacity: 0; transform: translateY(10px); }
      .quote-card b { display: block; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 650; }
      .quote-card span { display: block; margin-top: 8px; color: #686164; font-size: 14px; }

      /* warm sections: owner-world palette */
      .warm {
        --text: #231f20; --dim: #686164; --line: rgba(35, 31, 32, 0.1);
        --night: #f7f5f2; --night-2: #ffffff; --accent: #9a5b00;
        position: relative; background: #f7f5f2; color: var(--text);
      }
      section.warm, .warm section { background: #f7f5f2; }
      .warm .kicker, .warm .act, .warm .insight em, .warm .feat svg, .warm .icon { color: var(--accent); }
      .warm .icon { background: rgba(245, 176, 27, 0.16); border-color: rgba(154, 91, 0, 0.2); }
      .warm .act { border-color: rgba(154, 91, 0, 0.35); }
      .warm .insight em { background: rgba(245, 176, 27, 0.2); }
      .warm .core { background: #231f20; color: #f4f1ec; --text: #f4f1ec; --dim: #9a9396; }
      .warm .core .insight em { color: var(--orange); background: rgba(245, 176, 27, 0.14); }
      .warm .core-head img { filter: brightness(0) invert(1); }
      .warm .msg.a { box-shadow: 0 6px 20px rgba(35, 31, 32, 0.06); }
      .warm .wires path { stroke: rgba(35, 31, 32, 0.14); }
      .warm .chips button { background: #fff; }
      .warm .chips button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #231f20; }
      .warm .logos span { background: #fff; }
      .warm .btn.ghost { color: var(--text); border-color: rgba(35, 31, 32, 0.2); }
      .warm .step .n { color: rgba(35, 31, 32, 0.3); }

      footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 40px 0; color: var(--dim); font-size: 14px; }
      footer .shell { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
      footer nav { height: auto; gap: 12px 24px; justify-content: flex-start; flex-wrap: wrap; }
      footer a:hover { color: var(--text); }
      footer .foot-label { opacity: 0.7; margin-left: 12px; }

      /* reveal */
      .r { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease), transform 0.65s var(--ease); transition-delay: calc(var(--d, 0s) * 0.5); }
      .r.in { opacity: 1; transform: none; filter: none; }

      @media (max-width: 640px) { section { padding: 52px 0; } }
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; }
        body { opacity: 1; }
        .r { opacity: 1; transform: none; filter: none; }
      }