/* plans-card.css: the "Plans" card. ONE copy, used by the homepage hero (index.html .intro-card) and the shared buy block (partials/buy-block.html, on /benchmark, /learn, /bakeoff and /how-to-redact). Moved out of index.html 2026-10-04; each var() carries a fallback so the card renders the same on the bake-off report, which has its own smaller token set. Since 2026-10-14 (owner) the card also carries the INLINE BUY: each plan column is a button that opens that plan's buy panel in the card. The same panel treatment (smooth open, rings drawn inside the field) applies to the homepage's §9 pricing cards, which load this file with the hero. */ /* ---- The card: PLANS eyebrow, the two plan columns, Buy Cover, trial ---- */ .intro-card-eyebrow { /* MATCHES .card-pricing .plan-name (section 9) EXACTLY — display face, 0.75rem, 700, 0.12em, uppercase, primary. That is this page's label style for a label INSIDE a pricing card. The section-level .eyebrow token in DESIGN.md (body face, 0.8125rem, 600, 0.06em) is a different component: it labels a section against the page ground, not a row inside a card. Keep this in lockstep with .plan-name. */ font-family: var(--font-display, inherit); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; /* 0.875rem below it (was 0.5rem over the old one-line price list): the columns under it open with their own small plan name, so the label needs the extra air to read as the heading of both. */ color: var(--color-primary-text, #2F6FD0); margin: 0 0 0.875rem; text-align: left; } /* ORDER (2026-08-06, owner; columns 2026-10-14): eyebrow, the two plans, Buy Cover, trial link. The buy panels sit between the plans and Buy Cover, so an open one reads as the next step of the plan above it. */ .intro-card { position: relative; background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); border-radius: 18px; /* 8-PT GRID (DESIGN.md spacing scale). 32px top / 24px sides / 24px bottom: spacing.6 and spacing.5, mirroring how .card-pricing runs a heavier top than bottom (40/30/28 on a 390px card). The old 30px top was off-grid. Side padding 1.5rem (24px), trimmed from 1.75rem: the approved G2 mockup runs 20px sides on a 327px card, and every 1px of side padding costs 2px of card width. 24px splits the difference — it buys back 8px of width while staying close to the 1.875rem sides of the §9 pricing cards. */ padding: 2rem 1.5rem 1.5rem; /* Same recipe as .card-pricing: float-strong, plus the warm 0.5px contact hairline in light mode (rule below). This card sits on the same cream ground as the section-9 pricing cards and should catch light the same way; --shadow-float alone made it sit flatter than they do. */ box-shadow: var(--shadow-float-strong, 0 24px 48px -12px rgba(0,0,0,0.16)); /* 324px = the approved-mockup width (index.html .intro-grid says how that number was derived). max-width caps it below ~372px viewports so the fixed width can never force horizontal scroll on a phone; it narrows instead, and the plan columns step down with it (the container query at the end of the plan rules), so nothing wraps at 320px (222px of content box). */ width: 324px; max-width: 100%; overflow: hidden; /* A size container, so the narrow step follows the card's own width, not a guessed viewport breakpoint. The width is set above, never by the content, which is what inline-size containment requires. */ container: plans-card / inline-size; /* LEFT, matching .card-pricing in §9 (the page's other pricing surface): card copy left-aligns and only the full-width button and the trial link under it centre themselves. Was `center`, which centred the eyebrow and the price line against every other card on the page. */ text-align: left; flex-shrink: 0; } /* Warm edge stroke (light only) — the identical recipe .card-pricing uses, so the two pricing surfaces on this page have the same edge. */ [data-theme="light"] .intro-card { border: 1px solid rgba(98,93,75,0.175); box-shadow: var(--shadow-float-strong, 0 24px 48px -12px rgba(0,0,0,0.16)), 0 0.5px 0 rgba(98,93,75,0.195); } .intro-card .btn { width: 100%; } /* .intro-card-buy = the hero's own Buy CTA, and ONLY it. The class exists because this element can no longer be addressed as `[data-buy-trigger]` (it is a plain now) and MUST NOT be addressed as `.intro-card .btn-primary` either: the trial email-capture panel injects its own `.btn.btn-primary` submit button and download link INSIDE this same card, so that selector would silently capture them too (it did, in the first cut of this change: the open panel's own "Download Cover" submit button was being display:none'd by the "one question at a time" rule). line-height: normal is what makes an render the SAME PILL as a