/* ─────────────────────────────────────────────────────────────────────────────────────────
   /airtable-alternative — the landing page for "<product> alternative" searches.

   Loaded by that page alone, after marketing.css, which it builds on: the hero band, the
   section headings, the buttons, the comparison table, the FAQ and the closing band are
   marketing.css's own and are not restated here. What is here is what that page adds: a
   framed screenshot with numbered pins, the four "walls", the split sections, three drawn
   diagrams (the same job both ways, who pays, the move) and a tabbed set of screenshots.

   Two things worth knowing before changing it.

   LINK COLOURS NEED TWO CLASSES. `body.marketing a { color: inherit }` is (0,1,2) and its
   :hover is (0,2,2), so a bare `.alt-more` loses to both and the link renders in body ink
   with no sign it is one. Every link rule below is written `.alt .name`, and its hover
   `.alt .name:hover`. marketing.css records the same trap beside .bento-links.

   THE DIAGRAMS ARE HTML, NOT SVG, so their type stays the size it was set at. An SVG of four
   tables scaled to a phone's width takes its 12px labels down to 5.
   ───────────────────────────────────────────────────────────────────────────────────────── */

.alt { --alt-edge: clamp(20px, 4vw, 48px); }
/* Ten sections, so a tighter beat than the homepage's: at its 144px every boundary between
   two of them is a screen of nothing. */
.alt .market-section { padding: clamp(60px, 7vw, 104px) 0; }

/* ── Hero: Display 1, and room underneath for the window that overlaps it ─────────────── */
.integrations-hero.alt-hero { padding-bottom: clamp(190px, 21vw, 330px); }
.integrations-hero.alt-hero h1 {
    max-width: 980px;
    font-size: clamp(42px, 5.4vw, 76px);
    letter-spacing: clamp(-3.4px, 2px - 0.38vw, -1.3px);
    line-height: .98;
}
.integrations-hero.alt-hero > .wrap > p { max-width: 720px; font-size: clamp(17px, 1.5vw, 20px); }
.alt-hero .op-hero-actions { margin-top: 30px; gap: 12px 22px; }
/* --accent-ink is cut for paper. On the ink band it measures under 2:1. */
.alt-hero .section-kicker { color: var(--accent); }

/* ── The window ───────────────────────────────────────────────────────────────────────── */
.alt-stage { position: relative; z-index: 2; margin-top: calc(-1 * clamp(150px, 17vw, 270px)); }
.alt-window {
    margin: 0; border-radius: 16px; background: var(--card);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 50px 110px -44px rgba(7,9,26,.62), 0 18px 40px -22px rgba(7,9,26,.34);
}
.alt-window-bar {
    display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
    border-radius: 15px 15px 0 0; background: var(--ink-900);
}
.alt-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }
.alt-window-bar span {
    margin: 0 auto; padding: 4px 16px; border-radius: 999px; background: rgba(255,255,255,.08);
    color: var(--ink-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
    /* The three dots sit left of it; this keeps the pill optically centred on the bar. */
    transform: translateX(-22px);
}
.alt-window-shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.alt-window-canvas { position: relative; }
.alt-window-canvas img { display: block; width: 100%; height: auto; }
.alt-pin {
    position: absolute; z-index: 2; transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: clamp(17px, 1.9vw, 26px); height: clamp(17px, 1.9vw, 26px); border-radius: 50%;
    background: var(--ink-900); color: var(--accent);
    font-family: var(--font-mono); font-size: clamp(10px, 1vw, 13px); font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(217,242,92,.3);
}
.alt-window figcaption { padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 34px) clamp(16px, 2vw, 26px); border-top: 1px solid var(--border); }
.alt-legend {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3vw, 44px);
    margin: 0; padding: 0; list-style: none; counter-reset: pin;
}
.alt-legend li {
    position: relative; padding-left: 36px; counter-increment: pin;
    color: var(--text-2); font-size: 14.5px; line-height: 1.5;
}
.alt-legend li::before {
    content: counter(pin); position: absolute; left: 0; top: 1px;
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink-900); color: var(--accent);
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.alt-legend b { color: var(--text); font-weight: 600; }
.alt-proof {
    margin: 18px 0 0; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}

/* ── The four walls ───────────────────────────────────────────────────────────────────── */
.alt .alt-reasons { padding-bottom: clamp(24px, 3vw, 40px); }
.alt-walls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.alt .alt-wall {
    display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
    color: var(--text); transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s;
}
.alt .alt-wall:hover { color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-deep); }
.alt .alt-wall:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.alt-wall-n { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.alt-wall h3 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.012em; }
.alt-wall p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.alt-wall-go { margin-top: auto; padding-top: 8px; color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }
.alt-wall-go span { display: inline-block; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.alt-wall:hover .alt-wall-go span { transform: translateX(3px); }

/* ── Bands ────────────────────────────────────────────────────────────────────────────── */
.alt-band { scroll-margin-top: 72px; }
.alt-band-tint { background: var(--card-2); border-block: 1px solid var(--border-soft); }
.alt-band-ink {
    color: var(--paper);
    background: radial-gradient(circle at 12% 0%, rgba(124,92,255,.22), transparent 36%), var(--ink-950);
}

/* ── A split: an argument beside its picture ──────────────────────────────────────────── */
.alt-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 92px); align-items: center;
}
.alt-split-rev > :first-child { order: 2; }
.alt-split-even { align-items: start; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
/* Where the picture is a whole settings card: it needs the width more than the words do, or
   the one line it was taken to show ("Unit cost: Hidden") is too small to read. */
.alt-split-shot { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4.5vw, 64px); }
.alt-copy h2 {
    margin: 12px 0 0; font-family: var(--font-sans); font-weight: 700;
    font-size: clamp(32px, 3.5vw, 48px); line-height: 1.04;
    letter-spacing: clamp(-1.8px, 1.2px - 0.21vw, -0.7px);
}
.alt-copy h2 em { font-family: var(--font-display); font-weight: 600; color: var(--accent-ink); }
.alt-copy > p { margin: 20px 0 0; color: var(--text-2); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; }
.alt-copy > p b, .alt-ticks b { color: var(--text); font-weight: 600; }
.alt-copy code, .alt-points code {
    padding: 1px 6px; border-radius: 5px; background: var(--paper-2); color: var(--text);
    font-family: var(--font-mono); font-size: .86em;
}

.alt-ticks { display: grid; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; }
.alt-ticks li { position: relative; padding-left: 30px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.alt-ticks li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-6.9' fill='none' stroke='%230E1428' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.alt .alt-more {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
    color: var(--accent-ink); font-size: 15px; font-weight: 600;
    border-bottom: 1px solid transparent; transition: border-color .14s, color .14s;
}
.alt .alt-more:hover { color: var(--ink-900); border-bottom-color: var(--accent-deep); }
.alt-more .btn-time {
    flex: none; white-space: nowrap;
    padding: 2px 7px; border-radius: 999px; background: var(--paper-2); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 11px; font-style: normal; font-weight: 500;
}
.alt-more span { display: inline-block; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.alt-more:hover span { transform: translateX(3px); }
.alt-inline-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 30px; }
.alt-inline-cta .alt-more { margin-top: 0; }

/* ── A screenshot ─────────────────────────────────────────────────────────────────────── */
.alt-shot { margin: 0; }
.alt-shot img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--border-2); border-radius: 14px; background: var(--paper-2); box-shadow: var(--shadow-lg);
}
.alt-shot figcaption { margin-top: 14px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
/* The route picker is a 364px panel: shown at its own size on a quiet dotted field, so a small
   frame does not have to be stretched to fill a column. */
.alt-shot-narrow {
    display: grid; justify-items: center; padding: clamp(22px, 3vw, 44px);
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    background: radial-gradient(var(--border-2) .8px, transparent .8px) 0 0 / 18px 18px, var(--card-2);
}
.alt-shot-narrow img { width: auto; max-width: min(100%, 364px); }
/* The caption sits on the dotted field, so it carries its own ground: dots through a line
   of 13px type make it harder to read than it needs to be. */
.alt-shot-narrow figcaption { padding: 3px 10px; border-radius: 8px; background: var(--card-2); text-align: center; }

/* A wide frame's wrapper. Nothing on a wide screen; on a phone it is what pans. */
.alt-pan { display: block; }
.alt-swipe { display: none; }

/* ── The same job, both ways ──────────────────────────────────────────────────────────── */
.alt-ways {
    margin-top: clamp(48px, 6vw, 84px); padding: clamp(22px, 3vw, 40px);
    border: 1px solid var(--border); border-radius: 22px; background: var(--card);
}
.alt-ways-head h3 { margin: 10px 0 0; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -.016em; }
.alt-ways-head p { max-width: 640px; margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.alt-ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.alt-way { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-2); }
.alt-way.is-us { border-color: var(--accent-deep); background: var(--accent-tint-2); }
.alt-way-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.alt-way-top b { font-size: 17px; letter-spacing: -.01em; }
.alt-way-top span { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.alt-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.alt-tbl { align-self: start; overflow: hidden; border: 1px solid var(--border-2); border-radius: 10px; background: var(--card); }
.alt-tbl i {
    display: block; padding: 7px 11px; background: var(--paper-2); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.alt-tbl span { display: block; padding: 7px 11px; border-top: 1px solid var(--border-soft); color: var(--text-2); font-size: 13.5px; line-height: 1.35; }
.alt-tbl small { display: block; margin-top: 1px; font-size: 11px; opacity: .85; }
.alt-tbl .is-helper { background: var(--amber-soft); color: var(--amber-ink-2); font-weight: 600; }
.alt-tbl .is-added { background: #FDF6E3; color: var(--amber-ink-2); font-weight: 600; }
.alt-tbl .is-route { background: var(--accent); color: var(--ink-900); font-weight: 600; }
.alt-way-sum { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--border-2); color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.alt-way-sum b { color: var(--text); }

/* ── Small print under a section ──────────────────────────────────────────────────────── */
.alt-note { max-width: 860px; margin: clamp(28px, 3.4vw, 44px) 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.alt .alt-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.alt .alt-note a:hover { color: var(--ink-900); }
.alt-note.on-dark { color: var(--ink-300); }

/* ── Who pays ─────────────────────────────────────────────────────────────────────────── */
.alt-seats {
    padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border); border-radius: 22px;
    background: var(--card); box-shadow: var(--shadow);
}
.alt-seats-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.alt-seats-row:first-child { padding-top: 0; }
.alt-seats-people { display: flex; flex-wrap: wrap; gap: 8px; }
.alt-seats-people i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-2); background: var(--card-2); }
.alt-seats-people.is-crowd { gap: 6px; }
.alt-seats-people .is-editor {
    width: 38px; height: 38px; border: 0; background: var(--ink-900);
    box-shadow: inset 0 0 0 3px var(--ink-900), inset 0 0 0 5px var(--accent);
}
.alt-seats-what { text-align: right; white-space: nowrap; }
.alt-seats-what b { display: block; font-size: 16px; }
.alt-seats-what span { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.alt-seats-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 20px; }
.alt-seats-total span { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.alt-seats-total strong { font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.alt-seats > p { margin: 14px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }

/* ── Hidden everywhere ────────────────────────────────────────────────────────────────── */
.alt-everywhere { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.alt-everywhere span {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px;
    border: 1px solid var(--border-2); border-radius: 999px; background: var(--card);
    color: var(--text); font-size: 13px; font-weight: 600;
}
.alt-everywhere span::before {
    content: ""; width: 13px; height: 13px; flex: none; background: var(--accent-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── The move ─────────────────────────────────────────────────────────────────────────── */
.alt-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.alt-steps li { padding: 22px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); }
.alt-step-n {
    display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 16px; border-radius: 50%;
    background: var(--accent); color: var(--ink-900); font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.alt-steps b { display: block; font-size: 19px; letter-spacing: -.01em; }
.alt-steps p { margin: 8px 0 0; color: var(--ink-300); font-size: 14.5px; line-height: 1.55; }

/* Two bars under the four steps, on the same four-column rhythm: the old tool stays in use
   the whole way across, the new one starts at step 2, is kept current through step 3 and is
   the only one left after step 4. */
.alt-overlap { display: grid; gap: 16px; margin-top: 22px; }
.alt-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; align-items: baseline; }
.alt-bar span { color: var(--ink-200); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* The track runs the full width under its label, so its quarters are the four steps' columns. */
.alt-bar i { grid-column: 1 / -1; grid-row: 2; display: block; height: 12px; border-radius: 999px; }
.alt-bar em { grid-column: 2; grid-row: 1; color: var(--ink-300); font-size: 12.5px; font-style: normal; }
.alt-bar.is-old i { background: linear-gradient(90deg, rgba(255,255,255,.34) 0 80%, rgba(255,255,255,0) 100%); }
.alt-bar.is-new i {
    /* Nothing until step 2, kept current (hatched) through steps 2 and 3, solid after 4. */
    background:
        linear-gradient(90deg, transparent 0 75%, var(--accent) 75%),
        repeating-linear-gradient(115deg, rgba(217,242,92,.85) 0 6px, rgba(217,242,92,.3) 6px 12px);
    -webkit-mask: linear-gradient(90deg, transparent 0 25%, #000 25%);
            mask: linear-gradient(90deg, transparent 0 25%, #000 25%);
}

.alt-ledger {
    display: grid; grid-template-columns: 1.25fr 1fr 1fr auto; gap: 14px;
    margin-top: clamp(36px, 4.5vw, 60px);
}
.alt-ledger-col { padding: 22px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); }
.alt-ledger-col h3 { margin: 0 0 14px; color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.alt-ledger-col.is-partly h3 { color: #F3C766; }
.alt-ledger-col.is-not h3 { color: var(--ink-300); }
.alt-ledger-col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.alt-ledger-col li { color: var(--ink-200); font-size: 14.5px; line-height: 1.5; }
.alt-ledger-col li b { color: var(--paper); font-weight: 600; }
.alt-connector { margin: 0; align-self: center; width: 232px; }
.alt-connector img { display: block; width: 100%; height: auto; border-radius: 12px; }
.alt-connector figcaption { margin-top: 10px; color: var(--ink-300); font-size: 12.5px; line-height: 1.45; text-align: center; }
.alt-switch-actions { justify-content: flex-start; margin-top: clamp(30px, 4vw, 48px); }

/* ── Tabs ─────────────────────────────────────────────────────────────────────────────── */
.alt-tablist { display: none; }
.alt-tabs.is-live .alt-tablist {
    display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 22px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--card);
}
.alt-tablist button {
    padding: 9px 18px; border: 0; border-radius: 999px; background: transparent;
    color: var(--text-2); font-size: 14.5px; font-weight: 600; transition: background .14s, color .14s;
}
.alt-tablist button:hover { color: var(--text); }
.alt-tablist button[aria-selected="true"] { background: var(--ink-900); color: var(--paper); }
.alt-tablist button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.alt-panel + .alt-panel { margin-top: 44px; }
.alt-tabs.is-live .alt-panel + .alt-panel { margin-top: 0; }
.alt-panel[hidden] { display: none; }
.alt-panel-title { margin: 0 0 16px; font-size: 22px; letter-spacing: -.012em; }
.alt-tabs.is-live .alt-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alt-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(18px, 3vw, 40px); margin: 24px 0 0; padding: 0; list-style: none; }
.alt-points li { padding-top: 14px; border-top: 2px solid var(--accent-deep); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.alt-points b { color: var(--text); font-weight: 600; }

/* ── The comparison, at three columns ─────────────────────────────────────────────────── */
.alt-compare { max-width: 1020px; }
.alt-compare.compare-scroll > .compare-table { min-width: 600px; }
.alt-compare .compare-table tbody td { font-size: 14px; }
.alt-compare .compare-table .partial { font-size: 13px; }
.alt-compare .compare-table tbody td.us { font-weight: 500; }
.alt-cell-note { color: var(--text-muted); font-size: 13px; }
.alt-compare .alt-cell-ask { color: var(--text-faint); font-size: 12.5px; font-style: italic; }
.alt .compare-foot a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.alt .compare-foot a:hover { color: var(--ink-900); }
#sources { scroll-margin-top: 110px; }
/* The table is left-aligned in its band, so the actions under it are too. */
.alt-compare-actions { justify-content: flex-start; }

/* ── When to stay ─────────────────────────────────────────────────────────────────────── */
.alt-stay { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.alt-stay li {
    padding: 18px 20px; border: 1px solid var(--border); border-left: 3px solid var(--ink-900);
    border-radius: 4px 14px 14px 4px; background: var(--card); color: var(--text-2); font-size: 15px; line-height: 1.55;
}
.alt-stay b { color: var(--text); font-weight: 600; }
.alt .alt-stay a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.alt .alt-stay a:hover { color: var(--ink-900); }

.alt .faq-new p { white-space: normal; }

/* ── Narrower ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .alt-walls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alt-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alt-connector { width: auto; max-width: 260px; justify-self: center; }
}
@media (max-width: 900px) {
    .alt-split, .alt-split-even { grid-template-columns: minmax(0, 1fr); }
    .alt-split-rev > :first-child { order: 0; }
    .alt-ways-grid { grid-template-columns: minmax(0, 1fr); }
    .alt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The bars are drawn on the steps' four-column rhythm; at two columns they would describe
       a row that is no longer there. */
    .alt-overlap { display: none; }
    .alt-legend, .alt-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .alt-walls, .alt-steps, .alt-ledger { grid-template-columns: minmax(0, 1fr); }
    .alt-tables { grid-template-columns: minmax(0, 1fr); }
    /* A phone cannot show a 1,700px screen legibly at its own width. The frame is drawn at
       1,000px and pans sideways inside the window, so the grid is readable and the three pins
       are still where they belong. It starts at the grid, past the rail (15.2% of the frame):
       the first thing on screen is then the orders and the first pin, not the app's menu. */
    .alt-window-canvas { width: 1000px; margin-left: -152px; }
    .alt-window-bar span { transform: none; }
    .alt-pin { width: 20px; height: 20px; font-size: 11px; }
    /* The other wide frames pan the same way, at a size their type can be read at. */
    .alt-pan { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
    .alt .alt-pan img { width: 680px; max-width: none; box-shadow: none; }
    .alt-swipe {
        display: block; margin: 10px 0 0; color: var(--text-faint);
        font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    }
    .alt-window .alt-swipe { margin: 0; padding: 12px 18px 0; }
    .alt-tabs.is-live .alt-tablist { display: flex; flex-wrap: nowrap; }
    .alt-tablist button { flex: 1 1 auto; padding: 9px 8px; font-size: 13.5px; white-space: nowrap; }

    /* Three columns do not fit a phone, and a table that scrolls sideways hides the one column
       the comparison is about. Each row becomes a small card: the question across the top, the
       two answers side by side under it, each under its product's name. */
    .alt-compare.compare-scroll { overflow-x: visible; }
    .alt-compare.compare-scroll > .compare-table { min-width: 0; }
    .alt-compare .compare-table, .alt-compare .compare-table tbody { display: block; }
    .alt-compare .compare-table thead { display: none; }
    .alt-compare .compare-table tbody tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
        padding: 16px 16px 14px; border-bottom: 1px solid var(--border-soft);
    }
    .alt-compare .compare-table tbody td { padding: 0; border: 0; background: none; text-align: left; }
    .alt-compare .compare-table tbody td:first-child { grid-column: 1 / -1; padding: 0 0 10px; font-size: 15px; font-weight: 600; }
    .alt-compare .compare-table tbody td.us { background: none; }
    .alt-compare .compare-table tbody td:nth-child(n+2)::before {
        display: block; margin-bottom: 3px; color: var(--text-faint);
        font-family: var(--font-mono); font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    }
    .alt-compare .compare-table tbody td.us::before { content: "RowFold"; color: var(--accent-ink); }
    .alt-compare .compare-table tbody td:last-child::before { content: "Airtable"; }
    .alt-compare .compare-foot { padding: 16px; }
    .alt-switch-actions .btn { width: 100%; justify-content: center; }
    .alt-seats-row { grid-template-columns: minmax(0, 1fr); }
    .alt-seats-what { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .alt .alt-wall, .alt-wall-go span, .alt-more span { transition: none; }
}