/* Scaffold's site, set out like runaligned.app (2026-11-11).

   Loaded after styles.css by pages whose <html> has class="aligned". One warm
   off-white surface; headlines in a serif at regular weight, their second line in
   grey; body in the site's sans, in a soft grey; black pill buttons; product
   mocks in soft white cards; links in the header split by thin rules; and a
   rounded panel to close. Coral stays for the agent, inside the mocks.

   Headlines are EB Garamond and everything else Inter (see the font faces
   below). The hero shows Scaffold for Mac on a soft
   backdrop, drawn at one size and scaled to fit (play.js), so its pointer lands
   where it should. */

/* Two typefaces, as runaligned.app has: EB Garamond for headlines (a free old-style
   Garamond close to its Bureau Serif) and Inter for everything else. Both SIL Open Font License, self-hosted
   (fonts/licenses). Code alone stays monospace. The Mac app keeps its own fonts. */
@font-face { font-family: "Inter"; src: url("./fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("./fonts/EBGaramond-var.woff") format("woff"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("./fonts/EBGaramond-Italic-var.woff") format("woff"); font-weight: 400 800; font-style: italic; font-display: swap; }

.aligned {
  --paper: #f8f8f4;
  --paper-2: #f1f1eb;
  --panel: #ffffff;       /* cards */
  --panel-2: #f4f4ee;     /* a panel inside a card */
  --ink: #1b1c16;
  --ink-soft: #2a2b24;
  --graphite: #45463e;
  --mute: #8b8c82;
  --label: #6a6b61;       /* small text: 5.4:1 on paper */
  --hairline: #e7e7e0;
  --hairline-2: #d8d8cf;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: "EB Garamond", "Garamond", ui-serif, Georgia, serif;
  --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --mono: var(--sans);    /* labels set in mono elsewhere take Inter here; code uses --code */
  --shadow-card: 0 1px 2px rgba(27, 28, 22, .04), 0 18px 40px -24px rgba(27, 28, 22, .18);
  --on-coral: #1b1c16;

  background: var(--paper);
}
.aligned body { background: var(--paper); color: var(--ink); letter-spacing: -.011em; }
.aligned code, .aligned pre, .aligned kbd, .aligned .code-card, .aligned .cmds code, .aligned .mo-text { font-family: var(--code); letter-spacing: 0; }

/* ---- type: a serif for headlines, at regular weight ------------------------- */
.aligned h1, .aligned h2, .aligned .ftitle, .aligned .doc h1, .aligned .doc h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
/* Headlines in a soft dark-olive gradient, lighter at the top, with a 1px shadow under the
   letters: the slightly pressed look runaligned.app's have. The grey second line keeps its grey. */
.aligned h1, .aligned h2, .aligned .ftitle {
  background: linear-gradient(180deg, #4a4b43 0%, #33342c 38%, #24251e 70%, #1b1c14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(20, 22, 17, .16));
  /* The gradient paints only inside the box; tight leading leaves g, y and p hanging below
     it, so the box reaches down to take them in, and gives the space back. */
  padding-bottom: .16em; margin-bottom: -.16em;
}
.aligned h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.aligned h2 .dim, .aligned h1 .dim {
  display: block;
  /* Its own grey gradient: a see-through grey would let the headline's dark gradient show through. */
  background: linear-gradient(180deg, #aaaba3 0%, #9c9d95 55%, #91928a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.aligned .lede { color: rgba(27, 28, 22, .72); font-size: 1.125rem; line-height: 1.6; }
/* A highlighted word, in the serif's italic rather than a block of colour. */
.aligned .hl { padding: 0; color: inherit; font-style: italic; }
.aligned .hl::before { display: none; }
/* No numbered labels over sections: the headline says it. */
.aligned .eyebrow { display: none; }
.aligned .chapter-head .lede { margin-top: 20px; }
/* How it works and Pro say it in two lines, balanced; a phone wraps them as they fall. */
.aligned #how .chapter-head .lede, .aligned #product .chapter-head .lede { max-width: 80ch; text-wrap: balance; }
.aligned .chapter-body { margin-top: 64px; }
.aligned .chapter, .aligned .rows { padding: 120px 0; }
.aligned .band-paper, .aligned .band-ink { background: transparent; color: var(--ink); }
.aligned .band-ink .chapter-head h2, .aligned .band-ink .go { color: var(--ink); }
.aligned .band-ink .lede { color: rgba(27, 28, 22, .72); }
.aligned .hl-soft { background: rgba(27, 28, 22, .06); }

/* ---- header: links split by thin rules, a black pill ------------------------ */
.aligned header { background: rgba(248, 248, 244, .86); }
.aligned header.is-scrolled { border-bottom-color: var(--hairline); box-shadow: none; }
.aligned .nav { height: 64px; }
.aligned .nav-links { gap: 0; margin: 0 auto; font-size: 0.875rem; color: rgba(27, 28, 22, .65); }
.aligned .nav-links a { padding: 0 18px; line-height: 14px; }
.aligned .nav-links a + a { border-left: 1px solid var(--hairline-2); }
.nav-signin { font-size: 0.875rem; color: rgba(27, 28, 22, .65); transition: color .16s var(--ease-out); }
.aligned .nav .nav-signin + .btn { margin-left: var(--md); }
@media (hover: hover) and (pointer: fine) { .nav-signin:hover { color: var(--ink); } }

/* ---- buttons: black pills, an outline beside them --------------------------- */
.aligned .btn-chip { display: none; }
.aligned .btn-start { height: 48px; padding: 0 24px; gap: 0; border-radius: var(--full); background: var(--ink); color: #fff; font-size: 1rem; }
.aligned .btn-start-sm { height: 38px; padding: 0 18px; font-size: 0.875rem; }
.btn-ghost { height: 48px; padding: 0 24px; border-radius: var(--full); border: 1px solid var(--hairline-2); background: transparent; color: var(--ink); font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .aligned .btn-start:hover, .aligned .btn-primary:hover { background: #33342c; }
  .btn-ghost:hover { border-color: var(--mute); background: rgba(27, 28, 22, .03); }
}

/* ---- hero: centred, then the app on a soft backdrop ------------------------- */
.aligned .hero { padding: 120px 0 40px; background: var(--paper); }
.aligned .hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 1120px; margin: 0 auto; text-align: center; }
@media (min-width: 761px) { .aligned .hero h1 .h1-lead { white-space: nowrap; } }
.aligned .hero h1 { font-size: clamp(46px, 6.6vw, 84px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.aligned .hero .lede { margin: 28px auto 0; max-width: 54ch; font-size: 1.1875rem; line-height: 1.6; }
.aligned .hero .actions { justify-content: center; margin-top: 36px; }
/* The lede breaks before "efficiently" where it has room; on a phone it wraps as it falls. */
@media (max-width: 760px) { .lede-break { display: none; } }
/* The tally, as a small pill over the headline. */
.aligned .hero-pill { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; margin: 0 0 32px; padding: 6px 14px 6px 12px; border: 1px solid var(--hairline-2); border-radius: var(--full); background: var(--panel); }
.aligned .hero-pill[hidden] { display: none; }
.aligned .hero-pill .tally-num { font-size: 0.875rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.aligned .hero-pill .tally-label { font-size: 0.875rem; color: var(--label); }

/* The app's window in a landscape drawn in SVG: back hills, the window, then front
   hills over its foot. On load the window rises from behind the front hills, as
   runaligned.app's dashboard does. Drawn at 1240px and scaled to nearly the full width by
   play.js, so the demo's pointer lands where it should. */
/* The scene spans nearly the whole window, past the page's column, so the app is most of the screen. */
.mb-fit { position: relative; left: 50%; width: min(100vw - 48px, 1640px); max-width: none; margin: 24px 0 0; translate: -50% 0; }
/* On the note's line, under the scene. */
.mb-fit .mac-play { top: auto; bottom: -30px; right: 0; }
.macbook { position: relative; isolation: isolate; }
.mb-fit.is-scaled .macbook { width: 1240px; transform: scale(var(--mb-scale, 1)); transform-origin: top left; }
/* Scaled, the window keeps its desktop layout at every screen width. */
.mb-fit.is-scaled .mac { height: 650px; }
.mb-fit.is-scaled .mac-body { grid-template-columns: 172px minmax(0, 1fr); }
.mb-fit.is-scaled .mac-side { display: flex; }
.mb-fit.is-scaled .mac-main { padding: 16px 18px 18px; }
.mb-fit.is-scaled .mac-facts .mf-chip { display: inline-flex; }
.mb-fit.is-scaled .mac-cols { grid-template-columns: minmax(0, 1fr) 196px 196px; gap: 10px; }
.mb-fit.is-scaled .mac-out { display: flex; }
.mb-fit.is-scaled .mac-canvas { gap: 22px; }
.mb-fit.is-scaled .mac-canvas::before { top: 24%; bottom: 24%; }
.mb-fit.is-scaled .mn { width: 196px; font-size: 0.75rem; }
.mb-fit.is-scaled .mr em { display: inline; }
/* The landscape fades into the page at its sides and foot, rather than stopping at an edge. */
.hero-scene {
  height: 860px; overflow: hidden; background: var(--paper);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%);
          mask-composite: intersect;
}
/* The valley's layers, back to front: mountains, rocks, pines, then the window, then the
   foreground. The painting's greens are softened to sit on the off-white page. */
.scene-layer { position: absolute; left: 0; width: 1240px; height: auto; max-width: none; pointer-events: none; filter: saturate(.62) brightness(1.04); }
/* Multiplied onto the page, the painting's white sky disappears and its peaks stay. */
.l-mountains { top: -90px; opacity: .8; mix-blend-mode: multiply; }
.l-rocks { top: 290px; }
.l-pines { top: 520px; }
/* The foreground sits low: the grass and the pine's tip over the window's foot, as front hills. */
.l-front { bottom: -120px; z-index: 2; filter: saturate(.5) brightness(1.3); }
.scene-window { position: absolute; top: 110px; left: 104px; z-index: 1; width: 1032px; }
.scene-window .window.mac { border-radius: 14px; box-shadow: 0 0 0 9px rgba(255, 255, 255, .7), 0 0 0 10px rgba(27, 28, 22, .08), 0 34px 70px -34px rgba(27, 28, 22, .45); }
/* From fully out of sight below the foreground, after a beat, as runaligned.app's dashboard does. */
@keyframes scene-rise { from { transform: translateY(780px); } }
.motion .scene-window { animation: scene-rise 1.7s cubic-bezier(.16, 1, .3, 1) 1.45s both; }
/* The demo pauses while it's mostly out of view, and the rising window starts out of view:
   the rise itself never pauses, or it would never come into view. */
.mac-wrap.paused .scene-window { animation-play-state: running !important; }
/* Under it: the app is Pro's, the plugin is free. */
.mb-note { margin: 4px auto 0; text-align: center; font-size: 0.875rem; color: var(--label); }
.mb-note a { margin-left: 6px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .mb-note a:hover { text-decoration-color: var(--ink); } }

/* ---- the product mocks, in soft white cards --------------------------------- */
.aligned .window { background: var(--panel); box-shadow: 0 0 0 1px rgba(27, 28, 22, .08), 0 24px 48px -28px rgba(27, 28, 22, .3); }
.aligned .win-bar { background: #fbfbf8; border-bottom-color: var(--hairline); }
.aligned .side-nav, .aligned .mac-side { background: #fbfbf8; }
.aligned .stage, .aligned .habit-wrap, .aligned .idemo-wrap, .aligned .fcard, .aligned .band-paper .fcard, .aligned .band-paper .idemo-wrap {
  border-radius: 24px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hairline);
}
.aligned .mac-canvas { background-color: var(--panel-2); }
.aligned .mn { background: var(--panel); }
.aligned .code-card { border-radius: 14px; }

/* ---- Pro: the Agents page, played -------------------------------------------- *
   Four automations, as Scaffold for Mac's Agents page shows them. play.js runs Inbox
   triage (is-running, then its steps one by one), then opens "needs a look" (f-look).
   Without motion it shows everything finished. */
.pro-demo { position: relative; padding: 40px; border-radius: 24px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.pro-play { position: absolute; top: 12px; right: 12px; z-index: 6; }
.agents-demo { position: relative; height: 600px; text-align: left; color: var(--ink); }
.agents-demo.cursor-on .cursor { opacity: 1; }
.agents-demo .press { transform: scale(.94); }
.pro-demo.paused *, .pro-demo.paused *::before, .pro-demo.paused *::after { animation-play-state: paused !important; }
.ag-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px 16px; overflow: hidden; }
.ag-tabs { display: flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 9px; background: var(--panel-2); font-size: 0.75rem; }
.ag-tab { padding: 5px 12px; border-radius: 7px; color: var(--label); transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out); }
.ag-tab b { margin-left: 4px; font-family: var(--mono); font-weight: 500; color: var(--mute); }
.ag-tab.on { background: var(--ink); color: #fff; }
.ag-tab.on b { color: inherit; opacity: .7; }
.ag-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; }
.ag-pane { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 13px 14px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--panel); font-size: 0.72rem; transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.ag-pane.is-running { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(27, 28, 22, .07); }
.ag-who { align-self: flex-start; padding: 1px 8px; border-radius: var(--full); background: var(--panel-2); color: var(--label); font-family: var(--mono); font-size: 0.62rem; }
.ag-who.who-claude { background: var(--brand-tint); color: var(--brand-text); }
.ag-who.who-codex { background: #ecece5; color: var(--ink); }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-head b { overflow: hidden; font-size: 0.85rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ag-run { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--hairline-2); border-radius: var(--full); font-size: 0.68rem; transition: transform .12s var(--ease-out), border-color .2s var(--ease-out); }
.ag-run > i { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.ag-pane.is-running .ag-run { border-color: var(--ink); }
.ag-pane.is-running .ag-run > i { width: 9px; height: 9px; border: 1.5px solid var(--hairline-2); border-top-color: var(--ink); border-radius: var(--full); animation: spin .9s linear infinite; }
.ag-pane.is-paused .ag-run { opacity: .4; }
.ag-facts { color: var(--label); }
.ag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-agent { color: var(--graphite); }
.ag-status.tone-ok { color: var(--success-text); }
.ag-status.tone-bad { color: var(--error-text); }
.ag-status.tone-idle, .ag-status.tone-live { color: var(--label); }
.ag-nodes { display: flex; align-items: center; gap: 4px; }
.ag-nodes i { width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.ag-nodes i.t { border: 1.5px solid #c98a2e; border-radius: var(--full); background: transparent; }
.ag-nodes i.a { background: var(--brand); }
.ag-nodes i.c { transform: rotate(45deg) scale(.8); }
.ag-bars { display: flex; gap: 2px; }
.ag-bars i { width: 3px; height: 12px; border-radius: 1px; background: var(--success); }
.ag-bars i.bad { background: var(--error); }
.ag-bars i.new { animation: mac-in .35s var(--ease-out) both; }
.ag-log { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hairline); list-style: none; font-family: var(--mono); font-size: 0.62rem; }
.ag-log li { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); white-space: nowrap; }
/* Status is a dot, as in the app: green done, red failed, hollow waiting, pulsing running. */
.ag-log li > i { flex: none; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--mute); }
.ag-log li > span { overflow: hidden; text-overflow: ellipsis; }
.ag-log li.ok > i { background: var(--success); }
.ag-log li.bad > i { background: var(--error); }
.ag-log li em { margin-left: auto; font-style: normal; color: var(--label); }
.ag-log li.a em { color: var(--brand-text); }
.ag-log .ag-log-head { color: var(--label); }
.ag-log li.is-wait { color: var(--mute); }
.ag-log li.is-wait em { color: var(--mute); }
.ag-log li.is-wait > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mute); }
.ag-log li.is-live > i { background: var(--ink); animation: ag-pulse 1.2s ease-out infinite; }
.ag-log li.is-live.a > i { background: var(--brand); }
@keyframes ag-pulse { 0% { box-shadow: 0 0 0 0 rgba(27, 28, 22, .35); } 100% { box-shadow: 0 0 0 5px rgba(27, 28, 22, 0); } }
.agents-demo.f-look .ag-pane:not(.needs-look) { display: none; }
.agents-demo.f-look .ag-pane.needs-look { animation: mac-in .3s var(--ease-out) both; }

/* ---- Pro: what the app adds, in a row of plain cards ------------------------ */
.pro-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--md); }
.pro-demo + .pro-grid { margin-top: 24px; }
.pro-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 26px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hairline); }
.pro-card h3 { font-family: var(--serif); font-size: 1.3125rem; font-weight: 400; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.pro-card p { font-size: 0.9375rem; line-height: 1.55; color: var(--label); }

/* ---- pricing: white cards, Pro in ink ---------------------------------------- */
.aligned .pricing-card { padding: 0; border-radius: 0; background: none; color: var(--ink); box-shadow: none; }
.aligned .pricing-card::before { display: none; }
.aligned .pricing-card .lede { color: rgba(27, 28, 22, .72); }
.aligned .plans { margin-top: 64px; }
.aligned .plan { border: 1px solid var(--hairline); border-radius: 20px; background: var(--panel); color: var(--ink); }
.aligned .plan-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.aligned .plan-price b { font-family: var(--serif); }
.aligned .plan-price span, .aligned .plan-desc, .aligned .plan-limit span, .aligned .plan-includes { color: var(--label); }
.aligned .plan-limit { border-top-color: var(--hairline); }
.aligned .plan .btn { border-radius: var(--full); }
.aligned .plan .btn-secondary { color: var(--ink); border-color: var(--hairline-2); }
.aligned .plan:nth-child(2) { border-color: var(--ink); background: var(--ink); color: #f4f4ee; }
.aligned .plan:nth-child(2) .plan-price span, .aligned .plan:nth-child(2) .plan-desc, .aligned .plan:nth-child(2) .plan-limit span, .aligned .plan:nth-child(2) .plan-includes { color: rgba(244, 244, 238, .66); }
.aligned .plan:nth-child(2) .plan-limit { border-top-color: rgba(244, 244, 238, .16); }
.aligned .plan:nth-child(2) .btn-light { background: #f4f4ee; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .aligned .plan:hover { border-color: var(--hairline-2); box-shadow: var(--shadow-card); }
  .aligned .plan:nth-child(2):hover { border-color: var(--ink); }
}

/* ---- questions: one centred column ------------------------------------------- */
.aligned .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 760px; }
.aligned .faq-head { position: static; text-align: center; }
.aligned .faq-head h2 { margin-bottom: 14px; }
.aligned .faq-head .lede { margin: 0 auto; }
.aligned .faq details { border-color: var(--hairline-2); }

/* ---- the last word: a rounded panel, then the footer ------------------------- */
.cta-final { padding: 40px 0 120px; }
.cta-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 88px clamp(28px, 6vw, 80px);
  border-radius: 28px; text-align: left;
  background:
    radial-gradient(60% 70% at 92% 110%, #cfdccb, transparent 70%),
    radial-gradient(55% 60% at 70% 120%, #d8e2d2, transparent 70%),
    linear-gradient(180deg, #dfe8ee 0%, #e9eee9 60%, #eef0e6 100%);
  box-shadow: inset 0 0 0 1px rgba(27, 28, 22, .06);
}
.cta-panel h2 { max-width: 18ch; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; }
.cta-panel .actions { margin-top: 0; }
.aligned footer { padding: 64px 0 48px; background: var(--paper); border-top: 1px solid var(--hairline); }
.aligned .foot { color: var(--label); font-size: 0.875rem; }
.aligned .foot-brand { color: var(--ink); font-size: 1rem; }
.aligned .foot-note { color: var(--label); }
.aligned .foot-links a { color: rgba(27, 28, 22, .72); }
@media (hover: hover) and (pointer: fine) { .aligned .foot-links a:hover { color: var(--ink); } }
/* The homepage's footer: links in columns under their headings. */
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 56px; margin-left: auto; }
/* The tally's footnote, on a line of its own under everything. */
.foot-credit { order: 4; flex: 0 0 100%; margin: 6px 0 0; font-size: 0.8125rem; color: var(--label); }
.foot-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aligned .foot-note { order: 3; flex: 0 0 100%; max-width: none; margin-top: 40px; padding-right: max(0px, calc(100% - 76ch)); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col b { margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.foot-col a { color: rgba(27, 28, 22, .65); transition: color .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: var(--ink); } }

@media (max-width: 1000px) {
  .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav-signin { display: none; }
  .aligned .nav-links a { padding: 0; }
  .aligned .nav-links a + a { border-left: 0; }
  .agents-demo { height: auto; }
  .ag-panes { grid-template-columns: minmax(0, 1fr); }
  .ag-pane[data-pane="hn"], .ag-pane[data-pane="price"] { display: none; }
  .pro-demo { padding: 20px; }
  .foot-cols { grid-template-columns: repeat(2, auto); gap: 32px; }
}
@media (max-width: 760px) {
  .aligned .hero { padding: 72px 0 24px; }
  .aligned .chapter, .aligned .rows { padding: 88px 0; }
  .mb-fit { margin-top: 56px; }
  .mb-fit .mac-play { bottom: -30px; }
  .mb-note { margin-top: 4px; padding-right: 44px; }
  .pro-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-panel { padding: 56px 24px; }
}