/* /ab-pitchdeck — the Agent Base seed deck.
   Only this page's; everything shared comes from tokens.css, base.css and
   components.css via the head partial. */

/* EVERY VALUE HERE IS A SITE TOKEN. The first version of this page hard-coded
   the app's palette and forced dark, on the reasoning that the deck was
   drawn dark. That was wrong twice: a reader who chose light got a page
   that ignored the choice, and the one page on the site that answers to
   nobody's theme is the one that reads as pasted in from somewhere else.
   tokens.css already carries both halves of every colour below, so the
   deck follows html[data-theme] like everything else. */
/* No max-width. The 1080px column was a desktop-only cage — on a phone it
   never applied, so the deck people actually read on a laptop was the one
   version boxed into the middle of the screen while the grids clustered
   inside it. Sections run the full page and the grids finally sit 3-up and
   4-up on their own. Prose keeps its own measure below, because a 30px lede
   at 2400px wide is not a deck, it is a wall. */
.pd-sec { flex: none; width: 100%; box-sizing: border-box;
          padding: clamp(56px, 9vw, 112px) clamp(20px, 5vw, 64px);
          display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.pd-num { font-size: 13px; letter-spacing: 0.09em; color: var(--nix-text-quiet); }
/* 300 lives on the display type, not on body: base.css sets the body to 400
   and the rail and foot are drawn for it. */
.pd-brand { margin: 0; font-size: clamp(48px, 10vw, 104px); font-weight: 300;
            letter-spacing: -0.02em; line-height: 1.05; color: var(--nix-text); }
.pd-title { margin: 0; font-size: clamp(30px, 5.2vw, 60px); font-weight: 300;
            letter-spacing: -0.02em; line-height: 1.1; color: var(--nix-text);
            text-wrap: pretty; max-width: 22ch; }
.pd-lede { margin: 0; font-size: clamp(19px, 2.4vw, 30px); font-weight: 300; line-height: 1.35;
           color: var(--nix-text-soft); max-width: 46ch; text-wrap: pretty; }
.pd-lede em { color: var(--nix-seam); font-style: normal; }
.pd-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.pd-list li { background: var(--nix-surface); border-radius: 16px; padding: 22px 26px;
              font-size: clamp(17px, 2vw, 26px); font-weight: 300; line-height: 1.35;
              color: var(--nix-text); }
/* The accent surface is the seam laid over the card, not a second colour:
   one definition, and it lands correctly on both grounds. */
.pd-list li.is-accent,
.pd-card.is-accent,
.pd-band.is-accent { background: color-mix(in srgb, var(--nix-seam) 9%, var(--nix-surface)); }
.pd-list li.is-accent { color: var(--nix-seam); }
.pd-grid { display: grid; gap: 16px; }
.pd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pd-card { background: var(--nix-surface); border-radius: 20px; padding: 26px;
           display: flex; flex-direction: column; gap: 10px; }
.pd-card.is-accent h3, .pd-card.is-accent .pd-tag { color: var(--nix-seam); }
.pd-card h3 { margin: 0; font-size: clamp(20px, 2.2vw, 27px); font-weight: 400;
              letter-spacing: -0.02em; color: var(--nix-text); }
.pd-card p { margin: 0; font-size: clamp(15px, 1.6vw, 20px); font-weight: 300;
             line-height: 1.4; color: var(--nix-text-soft); }
.pd-card--flat { font-size: clamp(15px, 1.7vw, 22px); font-weight: 300;
                 line-height: 1.35; color: var(--nix-text); }
.pd-tag { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
          color: var(--nix-text-quiet); }
.pd-band { margin: 0; background: var(--nix-surface); border-radius: 20px; padding: 24px 28px;
           font-size: clamp(16px, 1.8vw, 22px); font-weight: 300; line-height: 1.4;
           color: var(--nix-text-soft); }
.pd-band strong { color: var(--nix-text); font-weight: 400; }
.pd-note { margin: 0; font-size: clamp(14px, 1.5vw, 20px); font-weight: 300; line-height: 1.4;
           color: var(--nix-text-quiet); text-wrap: pretty; max-width: 92ch; }
.pd-note strong { color: var(--nix-text); font-weight: 400; }
.pd-meta { margin: 0; font-size: clamp(15px, 1.6vw, 21px); font-weight: 300; color: var(--nix-text-quiet); }
.pd-figure { margin: 0; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
             font-size: clamp(48px, 9vw, 88px); font-weight: 300; letter-spacing: -0.02em;
             color: var(--nix-text); }
.pd-figure span { font-size: clamp(16px, 2vw, 28px); color: var(--nix-text-soft); }
.pd-sec--hero { min-height: 70vh; justify-content: center; }

/* 08 — a checklist, not cards. .pd-grid--2 is auto-fit at minmax(280px,1fr),
   so inside the 1080px column four one-line facts break 3-up with an orphan
   on the second row. They are a list; they are now laid out as one. */
.pd-checks { margin: 0; padding: 0; list-style: none;
             display: flex; flex-direction: column; gap: 14px; }
.pd-checks li { display: flex; align-items: flex-start; gap: 14px;
                font-size: clamp(16px, 1.9vw, 22px); font-weight: 300; line-height: 1.35;
                color: var(--nix-text-soft); }
.pd-checks li::before { content: "\2713"; flex: none; color: var(--nix-seam); line-height: 1.4; }

/* 10 — the arithmetic is read line by line, so it is set line by line and
   with lining figures. Running it as prose is what made the two panels
   unreadable next to each other. */
.pd-sum { font-variant-numeric: tabular-nums; line-height: 1.55; }
.pd-sum strong { color: var(--nix-text); font-weight: 400; }
.pd-total { margin: 0; font-size: clamp(22px, 2.6vw, 32px); font-weight: 300;
            letter-spacing: -0.02em; color: var(--nix-seam);
            border-top: 1px solid color-mix(in srgb, var(--nix-text) 12%, transparent);
            padding-top: 14px; }

/* The deck hands itself out. Fixed rather than parked on the hero: a reader
   who decides they want the file decides it on slide 9, not slide 1, and
   scrolling back up to find a button is the kind of friction that ends with
   nobody downloading anything. Below --z-head so the rail still wins. */
.pd-actions { position: fixed; margin: 0; z-index: 60;
              right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); }
.pd-actions .btn { display: inline-block; }
@media print { .pd-actions { display: none; } }