/* Pricing page (scope baseline v2, "Pricing and Buy"), and the checkout page /app/buy, which takes the same header, offer and footer. Linked after /tokens.css and /legacy.css. The header, ThemeToggle, print, forced-colours and footer rules are the legal pages' (legal.css), so the page sits in the site as they do. The page is new, so it's in sentence case, and its rules take a token wherever one covers the value and a legacy name only where none does yet (CLAUDE.md, Klartext design system). */ *{ box-sizing:border-box; } html,body{ margin:0; background:var(--bg); } body{ color:var(--text); font-family:var(--type-body-family); font-size:var(--type-body-size); line-height:var(--type-body-line-height); -webkit-font-smoothing:antialiased; } p,h1,h2,ul,dl,dd{ margin:0; } .kt{ max-width:1040px; margin:0 auto; } /* Header row: the logo and descriptor, then the theme toggle on the right. */ .toprow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--px-40) var(--px-40) 0; } .lock{ display:block; color:inherit; text-decoration:none; } /* Logo: one file per theme; the other is display:none, so one "Klartext" image is in the accessibility tree. */ .logo{ display:block; } .logo-light{ display:none; } :root[data-theme="light"] .logo-dark{ display:none; } :root[data-theme="light"] .logo-light{ display:block; } @media (prefers-color-scheme: light){ :root:not([data-theme]) .logo-dark{ display:none; } :root:not([data-theme]) .logo-light{ display:block; } } .desc{ display:block; margin-top:var(--space-4); font-size:var(--type-caption-size); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); color:var(--text-muted); } /* ThemeToggle (design skill), its labels in the label type style. Hidden until /theme.js wires it. The frame clips, so the focus ring is drawn inside the button (C4). */ .theme-toggle{ flex:none; border:1px solid var(--border-control); border-radius:var(--radius-md); overflow:hidden; } .theme-toggle:not([hidden]){ display:inline-flex; } .theme-toggle button{ min-height:44px; margin:0; padding:0 var(--space-4); border:0; border-radius:0; background:var(--bg); color:var(--text-muted); font-family:var(--type-label-family); font-size:var(--type-label-size); font-weight:var(--type-label-weight); line-height:var(--type-label-line-height); letter-spacing:var(--type-label-tracking); cursor:pointer; } .theme-toggle button[aria-pressed="true"]{ background:var(--surface-raised); color:var(--text); } /* Pressed also shows a ✓ before the label, so the state never rests on colour (design skill, Pressed and on states). Its space is kept while unpressed, so nothing moves; screen readers get the state from aria-pressed. */ .theme-toggle button::before{ content:"✓"; content:"✓" / ""; margin-right:var(--space-1); color:var(--accent); visibility:hidden; } .theme-toggle button[aria-pressed="true"]::before{ visibility:visible; } .theme-toggle button:focus-visible{ outline:2px solid var(--accent); outline-offset:calc(-2 * var(--focus-offset)); } /* Print: paper gets the light theme (tokens.css), so it shows the light-background logo and leaves out the toggle. Before the forced-colours rules, which win where both apply. */ @media print{ :root .logo.logo-dark{ display:none; } :root .logo.logo-light{ display:block; } .theme-toggle:not([hidden]){ display:none; } } /* Forced colours (Windows High Contrast): the logo follows the system's contrast theme, and the pressed button is underlined because fills are replaced. */ @media (forced-colors: active) and (prefers-color-scheme: dark){ :root .logo.logo-dark{ display:block; } :root .logo.logo-light{ display:none; } } @media (forced-colors: active) and (prefers-color-scheme: light){ :root .logo.logo-dark{ display:none; } :root .logo.logo-light{ display:block; } } @media (forced-colors: active){ .theme-toggle button[aria-pressed="true"]{ text-decoration:underline; } } main{ padding:var(--px-56) var(--px-40) var(--px-72); } .eyebrow{ font-family:var(--type-eyebrow-family); font-size:var(--type-eyebrow-size); font-weight:var(--type-eyebrow-weight); line-height:var(--type-eyebrow-line-height); letter-spacing:var(--type-eyebrow-tracking); color:var(--accent); } h1{ margin-top:var(--space-2); font-family:var(--type-display-family); font-size:var(--fs-48); font-weight:var(--type-display-weight); line-height:var(--type-display-line-height); letter-spacing:var(--type-display-tracking); text-wrap:balance; } h2{ font-family:var(--type-heading-family); font-size:var(--type-heading-size); font-weight:var(--type-heading-weight); line-height:var(--type-heading-line-height); letter-spacing:var(--type-heading-tracking); text-wrap:balance; } .status{ max-width:68ch; margin-top:var(--space-5); padding:var(--space-3) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--text-secondary); } .status .label{ margin-right:var(--space-2); font-family:var(--type-eyebrow-family); font-size:var(--type-eyebrow-size); color:var(--text-muted); } a{ color:inherit; text-underline-offset:var(--underline-offset); } a:focus-visible{ outline:2px solid var(--accent); outline-offset:var(--focus-offset); } strong{ color:var(--text); } /* An exam code never breaks at its hyphen. */ .nowrap{ white-space:nowrap; } .cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start; margin-top:var(--space-7); } /* The offer: the price, what it buys, then the license statement between two rules and the "Who you pay" block under the lower one, as the legal text sets the buy page (revision 6, California AB 2426). The rules take --border-control, the border that must be seen. The Buy button goes above the upper rule: the Worker adds it while checkout is on (register A-24), and the static page doesn't hold it. */ .offer{ padding:var(--space-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); } .amount{ font-family:var(--type-numeral-xl-family); font-size:var(--type-numeral-xl-size); font-weight:var(--type-numeral-xl-weight); line-height:var(--type-numeral-xl-line-height); letter-spacing:var(--type-numeral-xl-tracking); } /* The space before USD is inside this span, so it's the currency's size, not the price's. */ .currency{ font-family:var(--type-data-family); font-size:var(--type-data-size); font-weight:var(--type-data-weight); line-height:var(--type-data-line-height); letter-spacing:var(--type-data-tracking); color:var(--text-muted); } .once{ margin-top:var(--space-3); font-family:var(--type-title-family); font-size:var(--type-title-size); font-weight:var(--type-title-weight); line-height:var(--type-title-line-height); letter-spacing:var(--type-title-tracking); } .facts{ display:grid; grid-template-columns:max-content 1fr; margin-top:var(--space-5); } .facts dt, .facts dd{ padding:var(--space-3) 0; border-top:1px solid var(--border); } .facts dt{ padding-right:var(--space-5); font-weight:var(--type-label-weight); color:var(--text-muted); } .facts dd{ color:var(--text-secondary); } .offer hr{ margin:var(--space-5) 0; border:0; border-top:1px solid var(--border-control); } .who{ color:var(--text-secondary); } /* The Buy button: a primary Button (design skill: accent fill, on-accent text, --radius-md, label weight 600 at 16px, 48px high), as a real on the pricing page, where it leads to the checkout page, and a