/* Atlas public site: the shared styles for the inner pages and the new home sections.
   Mobile first (base = phone, then min-width steps). Colors and type come from styles.css?v=6e938ac4a7 tokens.
   No inline styles anywhere (the page CSP is style-src 'self'). */

/* ---------- Page hero (one screen) ---------- */
.phero { position: relative; overflow-x: clip; text-align: center; padding: 56px 0 40px; }
.phero > .wrap { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.phero h1 { font-size: 64px; letter-spacing: -0.05em; line-height: 1; max-width: 14em; margin-inline: auto; }
@media (max-width: 560px) { .phero h1 { font-size: 40px; } }
.phero .lead { max-width: 34em; margin: 22px auto 0; font-size: 18px; }
.phero .actions { margin-top: 28px; }
@media (min-width: 700px) { .phero { padding: 88px 0 56px; } .phero .lead { font-size: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .phero .eyebrow, .phero h1, .phero .lead, .phero .actions { animation: rise-in 800ms var(--ease-out) both; }
  .phero h1 { animation-delay: 60ms; } .phero .lead { animation-delay: 120ms; } .phero .actions { animation-delay: 180ms; }
}

/* ---------- Sections ---------- */
.sec { padding: 72px 0; }
.sec.alt, .area.alt-bg { background: var(--field); }
.area { padding: 56px 0; }
.sec h2, .area h2, .cta h2 { font-size: 44px; letter-spacing: -0.04em; line-height: 1.05; }
@media (max-width: 560px) { .sec h2, .area h2, .cta h2 { font-size: 28px; } }
.sec-head { max-width: 720px; margin: 0 0 40px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .lead { margin-top: 16px; }
.tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tag.center { justify-content: center; }
.tag .ic { color: var(--ink); }
.h-sm { font-size: 26px; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 18px; }
.more { margin-top: 28px; font-size: 16px; font-weight: 500; }
.more a { text-underline-offset: 4px; }
.sec-head.center + .more, .tiles + .more { text-align: center; }
.fine { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lead + .lead { margin-top: 16px; }
@media (min-width: 900px) { .sec { padding: 112px 0; } .area { padding: 72px 0; } }

.row { display: grid; gap: 36px; align-items: start; }
.row .lead { margin-top: 16px; }
@media (min-width: 900px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; }
  .row.flip > :first-child { order: 2; }
  .row.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.two { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; } }
.prose p { font-size: 18px; line-height: 1.6; color: #3d3b38; }
.prose p + p { margin-top: 16px; }
.prose a { text-underline-offset: 3px; }
.prose .h-sm:not(:first-child) { margin-top: 40px; }
.prose .points { margin-top: 0; }

.points { list-style: none; margin: 26px 0 0; padding: 0; }
.points li { padding: 16px 0; border-top: 1px solid var(--line); }
.points li:last-child { border-bottom: 1px solid var(--line); }
.points b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.points span { display: block; margin-top: 3px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.wide-points { margin-top: 48px; }
@media (min-width: 900px) {
  .wide-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
  .wide-points li, .wide-points li:last-child { border-bottom: 0; border-top: 1px solid var(--line); }
}

/* ---------- Cards and tiles ---------- */
.grid3, .grid4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .grid3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .grid4 { grid-template-columns: repeat(4, 1fr); } }
.tile, .card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 24px; }
.tile .ic, .card .ic { color: var(--ink); display: block; margin-bottom: 14px; }
.card .ic { width: 52px; height: 52px; padding: 13px; border-radius: 16px; background: var(--field); margin-bottom: 18px; }
.tile h3, .card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.tile p, .card p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.card h3 { font-size: 21px; }
.card p { font-size: 16px; }

/* ---------- Real screenshots in a window frame ---------- */
.shot { margin: 0; min-width: 0; }
.shot-win { border-radius: 18px; background: #fff; border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 1px 1px rgba(29, 28, 26, .04), 0 12px 32px -10px rgba(29, 28, 26, .14), 0 50px 90px -40px rgba(29, 28, 26, .28); }
.shot-bar { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #fbfbfa; }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e0da; }
.shot-view { position: relative; overflow: hidden; background: var(--field); }
.shot-view img { display: block; height: auto; max-width: none; }   /* no width here either (see the CLS note below) */
.shot figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.shot-full { display: inline-block; margin-left: 4px; color: var(--ink); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
.shot.wide { max-width: 760px; margin: 0 auto 48px; }
@media (min-width: 701px) { .shot-bar { height: 28px; } }

/* ---------- Atlas apps grid, modes, avatars ---------- */
.apps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; }
.apps-grid li { padding: 16px 0; border-top: 1px solid var(--line); }
.apps-grid b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.apps-grid span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 700px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }

.mode { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; counter-reset: m; }
.mode-step h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 6px; }
.mode-step p { font-size: 16px; color: var(--ink-2); margin-bottom: 18px; }
.mode-step .n { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }
@media (min-width: 900px) { .mode { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.avatars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; }
.avatars li { display: grid; justify-items: center; gap: 8px; width: 96px; font-size: 14px; color: var(--ink-2); text-align: center; }
.avatars img { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--line); object-fit: cover; }
.avatars .up .plus { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1.5px dashed var(--ink-3); font-size: 28px; color: var(--ink-2); line-height: 1; }

/* ---------- Buddies on the home page ---------- */
.buddies { padding: 88px 0; background: var(--field); }
.buddies .crew { margin-top: 0; }
@media (min-width: 900px) { .buddies { padding: 120px 0; } }

/* ---------- Home: the approval card on the dark band ---------- */
.card-shot img { width: 100%; max-width: 560px; border-radius: 22px; background: #fff; }

/* ---------- Closing call to action (inner pages) ---------- */
.cta { padding: 24px 0 0; }
.cta .wrap { background: var(--field); border-radius: 32px; text-align: center; padding: 64px 24px; }
.cta .lead { margin: 14px auto 0; max-width: 28em; }
.cta .actions { margin-top: 28px; }

/* ---------- Changelog ---------- */
.log { padding-top: 24px; }
.entry { display: grid; gap: 10px; padding: 32px 0; border-top: 1px solid var(--line); }
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry .when { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.entry h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; line-height: 1.15; margin: 10px 0 12px; }
.entry ul { margin: 0; padding-left: 20px; color: #3d3b38; }
.entry li { font-size: 16.5px; line-height: 1.55; }
.entry li + li { margin-top: 8px; }
.chip { display: inline-block; margin: 0; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; background: var(--field); color: var(--ink); }
.chip.new { background: var(--field); }
.chip.security { background: var(--ink); color: #fff; }
@media (min-width: 800px) { .entry { grid-template-columns: 180px minmax(0, 1fr); gap: 48px; padding: 40px 0; } .entry .when { padding-top: 6px; } }

/* ---------- Beta form ---------- */
.form-sec { padding-top: 24px; }
.two-form { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .two-form { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; } }
.beta-form { display: grid; gap: 8px; max-width: 480px; }
.beta-form label { font-size: 15px; font-weight: 600; margin-top: 12px; }
.beta-form label span { font-weight: 400; color: var(--ink-2); }
.beta-form input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; font: 400 17px/1 "Inter", system-ui, sans-serif; color: var(--ink); width: 100%; }
.beta-form input::placeholder { color: var(--ink-3); }
.beta-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.beta-form input[aria-invalid="true"] { border-color: #b3402f; }
.beta-form .btn { margin-top: 8px; justify-self: start; }
.err { margin: 0; font-size: 14px; color: #b3402f; }
.beta-form .btn[disabled] { opacity: .6; cursor: default; }
/* the bot check draws nothing unless Cloudflare asks for a click (interaction-only): no space is kept for it until then.
   Closed, it is a zero-height row, so the button's own 8px is dropped and the 16px above the button stays 16px. */
.beta-form .cf-turnstile { width: 100%; height: 0; margin: 0; overflow: hidden; }
.beta-form .cf-turnstile:not(.is-open) ~ .btn { margin-top: 0; }
.beta-form .cf-turnstile.is-open { height: auto; margin-top: 12px; overflow: visible; }
.tip { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tip:empty { display: none; }
.beta-form[hidden], .done[hidden] { display: none; }  /* display: grid / block above would otherwise win over [hidden] */
.done { max-width: 480px; }
.done p { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: #3d3b38; }
.done:focus { outline: none; }
.beta-form .pick { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; display: grid; gap: 4px; }
.beta-form .pick legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.beta-form .pick legend span { font-weight: 400; color: var(--ink-2); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.beta-form .opt { position: relative; display: inline-flex; margin: 0; font-weight: 500; }
.beta-form .opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 999px; opacity: 0; cursor: pointer; }
.beta-form .opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--ink); transition: background-color .15s, color .15s, border-color .15s; }
.beta-form .opt:hover input:not(:disabled):not(:checked) + span { border-color: var(--ink-3); }
.beta-form .opt input:checked + span { padding: 0 7px; background: #f3efe6; border-color: var(--ink); color: var(--ink); }
.beta-form .opt input:checked + span::before { content: ""; flex: none; box-sizing: border-box; width: 6px; height: 10px; margin: -3px 8px 0 4px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.beta-form .opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.beta-form .opt input:disabled { cursor: default; }
.beta-form .opt input:disabled + span { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .beta-form .opt span { transition: none; } }

/* the "You're on the list." popup: a native modal dialog (focus trap, Esc and the backdrop come with it) */
.modal { width: 440px; max-width: calc(100vw - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.modal::backdrop { background: rgba(29, 28, 26, .42); }
.modal-card { position: relative; padding: 36px 28px 28px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); }
.modal-card h2, .modal-card .modal-title { margin: 0 36px 10px 0; font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.035em; }
.modal-card p:not(.modal-title) { margin: 0 0 24px; color: #3d3b38; font-size: 17px; line-height: 1.55; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.modal-x:hover { background: var(--line); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in .24s var(--ease-out); }
  .modal[open]::backdrop { animation: modal-fade .24s ease-out; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  @keyframes modal-fade { from { opacity: 0; } }
}

/* ---------- Contact ---------- */
.contacts { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 900px; }
.contacts li { background: var(--field); border-radius: 22px; padding: 26px 26px 28px; }
.contacts .lbl { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.contacts a { display: inline-block; margin: 6px 0 8px; font-size: clamp(20px, 5.2vw, 26px); font-weight: 600; letter-spacing: -0.03em; text-underline-offset: 4px; word-break: break-word; }
.contacts p:last-child { color: var(--ink-2); font-size: 16px; }
@media (min-width: 700px) { .contacts { grid-template-columns: 1fr 1fr; } }

/* ---------- Trust / privacy tables outside .doc ---------- */
.wide-tbl { max-width: 960px; }
.wide-tbl th, .wide-tbl td { padding-right: 24px; }
.wide-tbl tbody th { width: 24%; }
@media (max-width: 560px) { .wide-tbl th, .wide-tbl td { padding-right: 0; } .wide-tbl tbody th { width: 100%; } }
.draft-note { margin: 24px 0 0; background: var(--soft); border-radius: 14px; padding: 14px 18px; }

/* ---------- Architecture diagram ---------- */
.arch { margin: 0; }
.arch svg { display: block; width: 100%; height: auto; }
.arch .arch-tall { max-width: 380px; margin: 0 auto; }
.arch .arch-wide { display: none; }
@media (min-width: 760px) { .arch .arch-wide { display: block; } .arch .arch-tall { display: none; } }
.arch .box { fill: #fff; stroke: #dedbd5; stroke-width: 1.5; }
.arch .box.accent { fill: #fbf1dd; stroke: #e5a030; }
.arch .t { font: 600 16px "Inter", system-ui, sans-serif; fill: #1d1c1a; letter-spacing: -0.01em; }
.arch .s { font: 400 13px "Inter", system-ui, sans-serif; fill: #6f6d68; }
.arch .note { font: 500 13px "Inter", system-ui, sans-serif; fill: #6f6d68; }
.arch .ln { fill: none; stroke: #6f6d68; stroke-width: 1.6; stroke-linejoin: round; }
.arch .ln.dash { stroke: #a9a69f; stroke-dasharray: 6 6; }

/* ---------- 404 ---------- */
.mc-lost { --mc: 150px; margin: 0 auto 8px; }
.lost { padding-bottom: 40px; }
.lost .actions { gap: 28px; }

/* ---------- Tablet and phone fixes for the home sections ---------- */
@media (max-width: 560px) {
  .tour .tab { font-size: 14px; }
  .cta .wrap { padding: 48px 20px; border-radius: 26px; }
  .sec-head { margin-bottom: 28px; }
  .evening { padding: 88px 0; }
  .tile, .card { padding: 20px; }
}

/* The first section after a page hero starts closer to it */
.phero + .sec, .phero + .area, .phero + .doc { padding-top: 24px; }
@media (min-width: 900px) { .phero + .sec, .phero + .area { padding-top: 40px; } }
.phero + .control { padding-top: 56px; }
@media (min-width: 900px) { .phero + .control { padding-top: 72px; } }

/* Grey draft pill (privacy, terms) */
.badge-grey { background: var(--field); color: var(--ink-2); font-weight: 500; }

/* Footer: a tagline, the link columns and the copyright line only */
.foot-brand p { font-size: 15px; color: var(--ink); max-width: 20em; }
.foot { padding-bottom: 40px; }

/* The hero rises in quickly: 400 ms, no delay */
@media (prefers-reduced-motion: no-preference) {
  .hero.h.h1b .h-chip, .hero.h.h1b h1, .hero.h.h1b .lead, .hero.h.h1b .actions, .hero.h.h1b .h-win { animation-duration: 400ms; animation-delay: 0ms; }
}

/* Phone: the tour shows a readable 1:1 detail of each screen */
@media (max-width: 560px) {
  .tour .pane, .tour .pane[hidden] { flex-basis: 100%; }
  .tour-view { aspect-ratio: auto; }
  .tour-view picture { display: block; }
  .tour-view img { position: static; inset: auto; top: auto; left: auto; max-width: 100%; height: auto; margin: 0 auto; }   /* no width: auto: the attributes reserve the box (CLS) */
}

/* The buddies' Pause sits inline under the grid (not pinned to the screen): a quiet text button, 44px tap area */
.mc-slot { display: flex; justify-content: center; margin-top: 20px; }
.mc-toggle.inline { position: static; opacity: 1; visibility: visible; transform: none; height: 44px; min-width: 44px; padding: 0 14px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; }
.lost .mc-slot { margin-top: 16px; }
@media (max-width: 560px) { .foot { padding-bottom: 40px; } }

/* The hero demo's pause: a 44x44 tap area centred on the mock's top bar, right end */
.demo-pause { position: absolute; z-index: 4; top: -8px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer; }
.demo-pause:hover { color: var(--ink); }
.demo-pause svg { width: 16px; height: 16px; }
@media (max-width: 560px), (prefers-reduced-motion: reduce) { .demo-pause { display: none; } }
/* Paused: the sky's clouds, stars and glow stop too */
.helpers-paused .hsky *, .helpers-paused .hsky-frame * { animation-play-state: paused !important; }

/* Atlas Shield: before / after strip */
.shield-swap { margin: 0 auto 36px; max-width: 760px; padding: 22px 22px 18px; border-radius: 22px; background: var(--ink); color: #f3efe6; }
.swap-row { display: grid; gap: 6px; padding: 6px 0; }
.swap-lab { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a9a59d; }
.swap-line { margin: 0; font: 500 clamp(14px, 3.9vw, 19px)/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -0.01em; overflow-wrap: anywhere; color: #f3efe6; }
.swap-row.ai .swap-line { color: #fff; }
.swap-line mark { background: rgba(255, 255, 255, .12); color: #f3efe6; padding: 1px 6px; border-radius: 6px; }
.swap-line .nw, .swap-line mark { white-space: nowrap; }
.swap-line br { display: none; }
@media (max-width: 560px) { .swap-line br { display: inline; } }
.swap-mid { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: #a9a59d; font-size: 13.5px; }
.swap-mid svg { flex: none; color: inherit; }
.swap figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid #353330; font-size: 14px; line-height: 1.5; color: #a9a59d; }
@media (min-width: 700px) { .swap { padding: 28px 32px 22px; } .swap-row { grid-template-columns: 120px 1fr; align-items: baseline; gap: 16px; } }
.shield .more { text-align: center; }

/* Hero H1 "Atlas: The AI workspace": on phones the break after "Atlas:" is deliberate */
.hero.h1b h1 .h1-b { white-space: nowrap; }
@media (max-width: 560px) { .hero.h1b h1 .h1-b { display: block; } .hero.h1b h1 { text-wrap: balance; } }


/* ---------- Header: one container, three columns (logo | links | Sign in + Join), 64px tall ---------- */
.nav a[aria-current="page"], .menu-sheet a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: var(--container); height: 64px; }
.nav .nav-logo { justify-self: start; }
.nav .nav-links { justify-self: center; gap: 32px; font-size: 15px; }
.nav .nav-end { justify-self: end; margin-left: 0; gap: 24px; }
.nav .btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
@media (max-width: 960px) {
  .nav-links, .nav-end .quiet { display: none; }
  .nav-menu { display: block; }
  .nav .nav-in { display: flex; gap: 12px; }
  .nav .nav-end { margin-left: auto; gap: 8px; }
}

/* ---------- Screenshots are never shown larger than their own size (1x and 2x files) ---------- */
.shot { display: flex; flex-direction: column; align-items: center; }
.shot-win { max-width: 100%; }
.shot figcaption { align-self: stretch; }
.shot-view img { display: block; position: static; inset: auto; max-width: 100%; height: auto; margin: 0 auto; }

/* =====================================================================
   2026-11-01 rebuild: shots, Product, tabs, strips (one container, one type scale)
   ===================================================================== */

/* Screenshots: every image is shown at one zoom (0.875 of the app) and never larger than its own file. No fake window bar except on full-screen frames. */
.shot { display: flex; flex-direction: column; align-items: center; margin: 0; min-width: 0; }
.shot-win { max-width: 100%; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 1px 1px rgba(29, 28, 26, .04), 0 10px 28px -10px rgba(29, 28, 26, .14), 0 36px 70px -36px rgba(29, 28, 26, .26); }
.shot.big .shot-win { border-radius: 20px; }
.shot.mobile .shot-win { border-radius: 30px; }
.shot-view { position: relative; overflow: hidden; background: var(--field); line-height: 0; }
.shot-view img, .shot-view picture { display: block; }
/* no width: auto here: the img's width/height attributes reserve its box before the file arrives (width: auto made it 0x0, then jump: CLS) */
.shot-view img { max-width: 100%; height: auto; margin: 0 auto; }
.shot figcaption { align-self: stretch; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.shot-bar { height: 28px; }

/* Tabs (Product workspace; same look as the home tour) */
.tabs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; max-width: 900px; }
.is-tabbed .tab, .tabs-row .tab { position: relative; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: 500 15px/1 "Inter", system-ui, sans-serif; letter-spacing: -0.01em; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.tabs-row .tab:hover { color: var(--ink); border-color: var(--ink-3); }
.tabs-row .tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs-row .tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ws-tabs:not(.is-tabbed) .tabs-row { display: none; }
.ws-panes { display: grid; gap: 56px; }
.ws-panes .pane { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ws-panes .pane[hidden] { display: none; }
.ws-panes figcaption { margin: 22px auto 0; max-width: 40em; text-align: center; font-size: 18px; line-height: 1.5; color: var(--ink-2); align-self: center; }
@media (prefers-reduced-motion: no-preference) { .is-tabbed .pane:not([hidden]) .shot-win { animation: tour-in .5s var(--ease-out) both; } }
@keyframes tour-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Product */
.lead-shot { padding: 8px 0 24px; }
.lead-shot .shot, .lead-shot .shot-win { margin-inline: auto; }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px 32px; }
.way { display: flex; flex-direction: column; min-width: 0; }
.way .tag { margin: 0 0 10px; }
.way h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; }
.way > p:not(.tag) { margin: 10px 0 28px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 26em; }
.way .shot { margin-top: auto; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles-shot { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px 32px; }
.tile-shot { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ts-text h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; }
.ts-text p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 32em; }
@media (min-width: 900px) {
  .tiles-shot { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile-shot { grid-column: span 2; }
  .tile-shot:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .tile-shot:first-child .shot { align-items: flex-end; }
}
.apps-cards .card { padding: 24px; }
.apps-cards .card .ic { width: 44px; height: 44px; padding: 10px; margin-bottom: 14px; border-radius: 14px; }
.apps-cards .card h3 { font-size: 18px; }
.apps-cards .card p { font-size: 15px; }
.strip { padding: 72px 0; border-top: 1px solid var(--line); }
.strip.alt { background: var(--field); border-top: 0; }
.strip-in { display: grid; gap: 28px; align-items: center; }
.strip h2 { font-size: 44px; letter-spacing: -0.04em; line-height: 1.05; max-width: 16em; }
.strip p { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.strip p a { color: var(--ink); text-underline-offset: 4px; }
.strip-icons { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.strip-icons li { display: grid; justify-items: center; gap: 8px; width: 104px; padding: 18px 8px 14px; border-radius: 18px; background: var(--field); font-size: 14px; font-weight: 500; }
.strip-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.strip-mark .ic { width: 32px; height: 32px; }
@media (min-width: 900px) { .strip-in { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }
@media (max-width: 560px) { .strip { padding: 56px 0; } .strip h2 { font-size: 28px; } .strip-icons li { width: 92px; } }

/* Home, Atlas Shield: the 3D glass-shield still in its figure slot, with a very small float (6 s, off for reduced motion) */
.shield-media { margin: 0 auto 8px; max-width: 1200px; text-align: center; }
.shield-media picture, .shield-media img { display: block; margin-inline: auto; }
.shield-media img { max-width: 100%; height: auto; }   /* no width: auto: the attributes reserve the box (CLS) */
.shield-media figcaption { max-width: 44em; margin: 20px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }
@media (prefers-reduced-motion: no-preference) { .shield-art { animation: shield-float 6s ease-in-out infinite; } }
@keyframes shield-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }

/* ---------- Shared: a 680px reading column ---------- */
.wrap-narrow { width: min(680px, var(--container)); margin-inline: auto; }
.todo { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--field); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.todo-link { color: var(--ink-3); font-size: 14px; }
.foot .todo-link { color: var(--ink-3); }
.links-row { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; font-weight: 500; }
.links-row a { text-underline-offset: 4px; }

/* ---------- Home ---------- */
.evening-in { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.evening-pic { display: block; }
.evening-pic picture, .evening-pic img { width: 100%; max-width: none; }
.evening-pic img { border-radius: 22px; box-shadow: 0 24px 64px -28px rgba(0, 0, 0, .55); background: #fff; }
.evening .steps { margin-top: 40px; }
.faq { padding: 120px 0 120px; }
@media (max-width: 960px) { .evening-in { grid-template-columns: 1fr; gap: 40px; } .faq { padding: 88px 0; } }
.part-chips { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 880px; }
.part-chips li { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.part-chips .ic { color: var(--ink); }
.control .control-head .more { margin-top: 24px; }

/* ---------- About ---------- */
.founder { display: grid; gap: 40px; align-items: center; }
.founder-photo { display: grid; place-items: center; width: 100%; max-width: 320px; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--field); border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 15px; font-weight: 500; }
.founder-text .lead { max-width: 36em; }
.founder-text h2 { margin: 0 0 16px; }
@media (min-width: 900px) { .founder { grid-template-columns: 320px minmax(0, 1fr); gap: 80px; } }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; counter-reset: f; }
.flow-step { position: relative; padding: 24px 24px 26px; min-height: 100%; border-radius: 20px; background: #fff; border: 1px solid var(--line-2); }
.flow-step h3 { font-size: 20px; letter-spacing: -0.025em; line-height: 1.15; }
.flow-step p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.flow-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.flow-step.wait { border-color: var(--sun); background: var(--soft); }
.flow-step.wait .flow-n { background: var(--sun); color: var(--ink); }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateX(-50%) rotate(45deg); }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 50%; bottom: -26px; width: 1.5px; height: 24px; background: var(--ink-3); transform: translateX(-50%); display: none; }
.flow-note { margin: 40px auto 0; max-width: 40em; text-align: center; font-size: 15px; color: var(--ink-2); }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 56px; }
  .flow-step { padding: 28px 28px 30px; }
  .flow-step:not(:last-child)::after { left: auto; right: -34px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .flow-step:nth-child(3)::after { display: none; }
}

/* ---------- Blog ---------- */
.pc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pc-meta a { color: var(--ink-2); text-decoration: none; }
.pc-meta a::after { content: "/"; margin-left: 12px; color: var(--ink-3); }
.pill-draft { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--field); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.pc-date { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.featured { display: grid; gap: 28px; align-items: center; }
.featured img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); }
.feat-cover { display: block; }
.feat-text h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.035em; }
.feat-text h2 a, .post-card a { text-decoration: none; }
.feat-sum { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 900px) { .featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.all-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.chipfs { display: none; flex-wrap: wrap; gap: 8px; }
.is-filter .chipfs { display: flex; }
.chipf { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: 500 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.chipf[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chipf:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card[hidden] { display: none; }
.pc-link { display: block; color: inherit; }
.pc-link img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 18px; }
.post-card h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; }
.pc-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.pc-sum { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rss { margin-top: 32px; font-size: 14px; }
/* post */
.post-head { padding: 56px 0 8px; }
.post-head h1 { font-size: 48px; line-height: 1.05; letter-spacing: -0.045em; margin: 6px 0 0; text-wrap: balance; }
.post-sum { margin-top: 20px; font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.by-photo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--field); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.by-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.by-meta { margin: 0; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.draft-banner { margin: 28px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--field); font-size: 14px; line-height: 1.5; }
.post-cover { margin-top: 40px; }
.post-cover img { display: block; width: 100%; max-width: 1120px; height: auto; margin-inline: auto; border-radius: 22px; border: 1px solid var(--line); }
.post-grid-body { display: grid; gap: 0; margin-top: 56px; }
.post-body { width: min(680px, 100%); margin-inline: auto; }
.post-body p, .post-body li { font-size: 18px; line-height: 1.6; color: #3d3b38; }
.post-body p { margin: 0 0 20px; }
.post-body h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; margin: 48px 0 16px; scroll-margin-top: 88px; }
.post-body ul { margin: 0 0 20px; padding-left: 22px; }
.post-body li + li { margin-top: 10px; }
.post-body a { text-underline-offset: 3px; }
.post-body b { color: var(--ink); font-weight: 600; }
.post-fig { margin: 40px 0; }
.post-fig .shot { align-items: center; }
.post-fig figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-2); }
.post-toc { display: none; }
.post-toc h2 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; line-height: 1.3; font-weight: 600; }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.4; }
.post-toc a { color: var(--ink-2); text-decoration: none; }
.post-toc a:hover { color: var(--ink); }
@media (min-width: 1200px) {
  .post-grid-body { grid-template-columns: 1fr 680px 1fr; gap: 0 48px; }
  .post-grid-body aside { grid-column: 1; justify-self: end; width: 200px; }
  .post-body { grid-column: 2; }
  .post-toc { display: block; position: sticky; top: 96px; }
  .post-fig { margin-inline: -140px; }
}
.post-end { padding-top: 24px; }
.pn-row { display: grid; gap: 12px; padding-top: 32px; border-top: 1px solid var(--line); }
.pn { display: block; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line-2); text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.pn span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pn:hover { border-color: var(--ink-3); }
@media (min-width: 640px) { .pn-row { grid-template-columns: 1fr 1fr; } .pn-next { grid-column: 2; text-align: right; } .pn-prev:only-child { grid-column: 1; } }
@media (max-width: 560px) { .post-head h1 { font-size: 34px; } .post-sum { font-size: 18px; } .post-body h2 { font-size: 24px; } .feat-text h2 { font-size: 26px; } }

/* ---------- Changelog: a 680px column, the date 14px above each heading, a link on each entry ---------- */
.log { padding-top: 24px; }
.entry { display: block; padding: 40px 0; border-top: 1px solid var(--line); }
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.entry h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 14px; }
.entry h2 a { text-decoration: none; }
.entry h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 800px) { .entry { display: block; padding: 48px 0; } }
@media (max-width: 560px) { .entry h2 { font-size: 24px; } }

/* ---------- Beta: What you get sticks beside the form (and sits above it on phones) ---------- */
.beta-side { position: static; }
@media (max-width: 899px) { .beta-side { order: -1; } }
@media (min-width: 900px) { .beta-side { position: sticky; top: 96px; } }

/* ---------- Contact: the site's width, four cards in a row ---------- */
.contacts { max-width: none; margin: 0; }
@media (min-width: 700px) { .contacts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .contacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.contacts a { font-size: 20px; letter-spacing: -0.02em; overflow-wrap: anywhere; }

/* ---------- Privacy and Terms: sticky contents (240px) beside a 680px text column ---------- */
.doc-wrap { display: grid; gap: 32px; }
.doc .doc-wrap { max-width: none; }
.doc-side .toc { margin: 0; padding: 20px 22px; }
@media (min-width: 1000px) {
  .doc-wrap { grid-template-columns: 240px 680px; gap: 80px; justify-content: center; align-items: start; }
  .doc-side { position: sticky; top: 88px; }
  .doc-side .toc { padding: 0; background: none; border-radius: 0; }
  .doc-side .toc ol { columns: 1; padding-left: 0; list-style: none; font-size: 14px; line-height: 1.4; display: grid; gap: 10px; }
  .doc-side .toc a { color: var(--ink-2); }
  .doc-side .toc a:hover { color: var(--ink); text-decoration: none; }
}
.doc-main { min-width: 0; }
.doc-main section:first-of-type { padding-top: 48px; }
.doc ol:not(.toc-list) { padding-left: 22px; }

/* ---------- 404: no pause control, 56px title ---------- */
.lost .lead { max-width: 28em; }
@media (max-width: 560px) { .lost h1 { font-size: 40px; } }
.foot-grid > nav ul { gap: 10px; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .toc-inline { display: none; } }
@media (max-width: 999px) { .doc-side { display: none; } }
.doc-main .toc-inline { margin-top: 32px; }

/* About: the small founder note, at the bottom (approved copy) */
.founder-note { padding: 48px 0 40px; }
.fn-card { display: flex; align-items: flex-start; gap: 24px; max-width: 760px; margin-inline: auto; padding: 32px 0 0; border-top: 1px solid var(--line); }
.fn-photo { flex: none; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--field); }
.fn-card .h-sm { margin: 0 0 10px; }
.fn-card p { margin: 0; font-size: 17px; line-height: 1.6; color: #3d3b38; max-width: 36em; }
.fn-card .links-row { margin-top: 16px; }
@media (max-width: 560px) { .fn-card { flex-direction: column; gap: 16px; } }

/* 404: the pause control stays (WCAG 2.2.2), small and quiet under the buttons */
.lost .mc-slot { margin-top: 8px; }
.lost .mc-toggle.inline { height: 36px; padding: 0 10px; font-size: 13px; color: var(--ink-2); }   /* ink-3 was 2.4:1 on white (axe) */
.lost .mc-toggle.inline:hover { color: var(--ink); }

/* review fixes 2026-11-02 */
.tile-shot .shot { align-items: flex-start; }
.part-chips + .more { text-align: center; }
.fn-card .h-sm { font-size: 26px; line-height: 1.15; }
.shield-media img { border-radius: 24px; }

/* round 2 (critic): neutral chips, one-line strip, phone frames, carousel controls */
.oneline { padding: 56px 0 24px; text-align: center; }
.oneline p { max-width: 40em; margin-inline: auto; font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.oneline a { color: var(--ink); text-underline-offset: 4px; white-space: nowrap; }
.mode-step p { margin-bottom: 18px; }
@media (min-width: 900px) { .mode-step p { min-height: 4.8em; } }
.mode-step .shot { align-items: center; }
.tour-ctl { display: none; }
@media (max-width: 560px) {
  .tour .h-bar, .shot-bar { display: none; }
  .tour-win { border-radius: 28px; }
  .shot-win, .shot.big .shot-win { border-radius: 28px; }
  .tour-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
  .tc-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
  .tc-btn:focus-visible, .tour-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .tour-dots { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
  .tour-dots button { width: 24px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
  .tour-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background-color .2s, transform .2s; }
  .tour-dots button[aria-current="true"]::before { background: var(--ink); transform: scale(1.25); }
  .tour .tour-hint { display: none; }
}

/* round 3 (critic): two-column build captions, one-line control links, avatars row */
.two-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oneline-links { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 20px 56px; max-width: 980px; }
.oneline-links li { padding-top: 16px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.oneline-links a { color: var(--ink); text-underline-offset: 4px; white-space: nowrap; }
@media (min-width: 900px) { .oneline-links { grid-template-columns: 1fr 1fr; } }
.avatars { margin-top: 8px; }

/* Follow links (LinkedIn, Instagram): monochrome, neutral grey, ink on hover, 44px targets */
.soc-row { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.soc { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.soc:hover, .soc:focus-visible { color: var(--ink); }
.soc .ic { flex: none; }
.foot-follow { margin-top: 28px; }
.foot-follow .foot-h { margin-bottom: 4px; }
.foot-follow .soc-row { gap: 0 20px; }
.soc-min { font-size: 15px; }
.follow-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 14px; padding: 26px; border-radius: 22px; background: var(--field); }
.follow-card .h-sm { margin: 0 0 6px; font-size: 22px; line-height: 1.15; }
.follow-card p { margin: 0; font-size: 16px; color: var(--ink-2); }
.cta .cta-follow { margin: 20px 0 0; font-size: 14px; color: var(--ink-2); }
.cta .cta-follow a { color: var(--ink-2); text-underline-offset: 3px; }
.cta .cta-follow a:hover { color: var(--ink); }
.done .follow-along, .modal-card .follow-along { margin: 22px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.modal-card p.follow-along { margin: 0 0 4px; font-size: 14px; }
.done .soc-row, .modal-card .soc-row { margin: 0 0 20px; }
.modal-card .soc-row { margin-bottom: 22px; }

/* =====================================================================
   CP2 (Ishan 2026-11-02): phones are SHORT, SIMPLE and calm. Below 768px every page shows the essentials: desktop screenshots scaled into a
   simple laptop frame (never cramped phone crops, except screens that are phones by nature), at most one image per section, 18px text.
   Desktop (768px and up) is untouched.
   ===================================================================== */
.m-only { display: none; }
.m-line { display: none; }
@media (max-width: 767px) {
  body { font-size: 18px; line-height: 1.6; }
  .lead, .prose p, .points span, .entry li { font-size: 18px; }
  p { max-width: 32em; }
  .sec, .area { padding: 56px 0; }
  .phero { padding: 40px 0 24px; }
  .phero h1, .hero.h1b h1 { font-size: 40px; }
  .sec h2, .area h2, .cta h2, .strip h2 { font-size: 28px; }
  .sec-head { margin-bottom: 28px; }
  .m-only { display: block; }
  .m-line { display: block; margin: 14px auto 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); }

  /* the laptop frame: a dark bezel, a thin base, no window dots */
  .shot.big .shot-win { border: 6px solid #1d1c1a; border-radius: 14px 14px 4px 4px; background: #fff;
    box-shadow: 0 7px 0 -1px #d9d6cf, 0 9px 0 -1px #bdbab3, 0 26px 30px -20px rgba(29, 28, 26, .35); }
  .shot.big .shot-bar, .shot-bar { display: none; }
  .shot.big { padding-bottom: 12px; }
  .m-laptop { padding: 8px 0 32px; }
  .ws-panes figcaption { font-size: 18px; margin-top: 28px; }

  /* Home: hero, one laptop, Shield (glass + heading + one line), agents as three lines, buddies as one strip, CTA, footer */
  .page-home .tour, .page-home #works, .page-home #workspace, .page-home #how, .page-home #faq { display: none; }
  .hero.h1b { padding-top: 40px; padding-bottom: 8px; }
  .shield { padding-bottom: 24px; }
  .shield .lead, .shield .points, .shield .more, .shield-media figcaption { display: none; }
  .shield .sec-head { margin-bottom: 20px; }
  .shield-media { margin-bottom: 0; }
  #agents .wrap.row > :last-child, #agents .lead, #agents .more, #agents .points span { display: none; }
  #agents .points { margin-top: 20px; }
  #agents .points li { padding: 14px 0; }
  #agents .points b { font-size: 19px; }
  .buddies { padding: 56px 0; }
  .buddies .lead { display: none; }
  .crew { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .crew li { padding: 0; background: none; border: 0; box-shadow: none; width: 58px; }
  .crew li b, .crew li .line { display: none; }
  .crew .mc { --mc: 58px; width: 58px; height: 58px; }
  .faq { padding: 0; }

  /* Product: one laptop, three ways as short text, tabs, apps as plain names, one line */
  .way .shot, #around .shot { display: none; }
  .tiles-shot { gap: 28px; }
  .way > p:not(.tag) { margin-bottom: 0; }
  .ways { gap: 32px; }
  .apps-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .apps-cards .card { padding: 14px; }
  .apps-cards .card p { display: none; }
  .apps-cards .card .ic { margin-bottom: 8px; width: 40px; height: 40px; padding: 9px; }
  .apps-cards .card h3 { font-size: 16px; }
  .tabs-row .tab { height: 44px; }

  /* Agents: the build laptop, then text; approvals and schedules lose their pictures; one phone screen for Ask, Run, Done */
  #build .points, #schedules .shot, #approvals .shot, #approvals .points { display: none; }
  .mode { gap: 24px; }
  .mode-step .shot, #faces .avatars { display: none; }
  .mode-step p { min-height: 0; margin-bottom: 14px; }

  /* Trust and About: text first, pictures out */
  #standing .shot, #shield .row .shot, #models .shot { display: none; }
  #blog .pc-link img { display: none; }
  #blog .post-grid { gap: 28px; }
  .flow { gap: 28px; }

  /* tap targets of at least 44px, text of at least 14px */
  .nav .btn-sm { height: 44px; }
  .nav-menu summary { width: 44px; height: 44px; }
  .chipf { height: 44px; }
  .chip, .flow-n, .pill-draft, .swap-lab { font-size: 14px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot ul .todo-link { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-legal { gap: 8px; }
  .soc { min-height: 44px; }
  .links-row a, .more a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
  .foot ul a, .foot ul .todo-link { min-width: 44px; }
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .h-chip, .h-chip b, .h-chip .cs, .pn span, .tbl thead th, .wide-tbl th { font-size: 14px; }
  .entry h2 a { display: inline-block; padding: 6px 0; }
  .contacts a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
  .pc-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .more a, .pn { min-height: 44px; }
}
@media (max-width: 767px) { .lost .quiet { display: inline-flex; align-items: center; min-height: 44px; } }