/* ────────────────────────────────────────────────────────────────────────── AlphaConsole — shared base stylesheet for the static marketing/legal pages (pricing.html, landing.html, agb.html, datenschutz.html, impressum.html, kontakt.html, cookies.html, widerruf.html, haftungsausschluss.html). Single source of truth for the design tokens on those pages. Before this file each page carried its own :root block, which is how they drifted onto a pre-Baseline palette (#08090c / #c57d00 / cream #faf8f3) while the app moved on. The legacy baseline remains unscoped for /landing. The nine newly migrated pages opt into .editorial on : IBM Plex Sans, Newsreader, blue accents, and shared navigation, footer, prose and responsive comparison primitives. Keep editorial selectors scoped so /landing and admin retain their skins. See wiki/peak-project/decisions/design-system-2026-09.md. Theme: pages stamp `theme-dark` on before first paint (see the inline bootstrap in each page's ). Light is the default, matching terminal-shell.jsx's own default. ────────────────────────────────────────────────────────────────────────── */ :root { /* ── Baseline Pro palette — light ── */ --bg: #eef0f2; --surface: #ffffff; --surface-2: #f4f6f8; --line: #e8ebee; --line-s: #d9dee2; --line-d: rgba(20, 25, 30, 0.04); --ink: #1a1f24; --ink-2: #3c454d; --ink-3: #5e6870; --ink-4: #a4adb4; --accent: #c98a1e; --accent-text: #8a5c0a; --accent-2: #1f9e63; --pos: #1f9e57; --neg: #d64535; --warn: #c98a1e; /* ── Type scale (mirrors TERM_CSS) ── */ --fs-micro: 10px; --fs-label: 11px; --fs-body: 12px; --fs-value: 13px; --fs-title: 15px; --fs-section: 18px; --fs-display: 26px; --fs-hero: 40px; --mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; --sans: 'Inter', -apple-system, system-ui, sans-serif; /* ── Derived tokens ── Kept as aliases so page-level rules written against the older names keep resolving; all of them now track --accent/--line/--bg instead of being independently hardcoded per page. */ --font: var(--mono); --bg-2: var(--surface); --border: var(--line); --border-acc: color-mix(in srgb, var(--accent) 45%, transparent); --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 18%, transparent); --accent-line: color-mix(in srgb, var(--accent) 30%, transparent); --nav-bg: color-mix(in srgb, var(--bg) 94%, transparent); /* Ink that sits ON the accent (buttons, badges) — near-black in both themes because --accent is a mid-luminance amber on either surface. */ --on-accent: #0a0b0d; /* ── Corner-radius scale ── Named after their own pixel value (same convention as TERM_CSS's --radius-* in direction-terminal.jsx), not a semantic step — these pages use a lighter, denser scale than the terminal app, so the two token sets aren't merged even though the palette above is. Centralizes the 3 radii this stylesheet used as bare literals so a change has one definition. */ --radius-2: 2px; --radius-3: 3px; --radius-6: 6px; } :root.theme-dark { /* ── Baseline Pro palette — dark ── */ --bg: #0a0b0d; --surface: #101316; --surface-2: #16191e; --line: #15191d; --line-s: #1d242a; --line-d: rgba(255, 255, 255, 0.04); --ink: #cdd6db; --ink-2: #9aa3ab; --ink-3: #7d8b96; --ink-4: #454c52; --accent: #e8a93b; --accent-text: var(--accent); --accent-2: #3ecf8e; --pos: #3ecf8e; --neg: #ff5f56; --warn: #e8a93b; } /* ── Reset (was duplicated in all nine pages) ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-value); line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--accent-text); text-decoration: none; } /* Hover underline for plain prose links only. A class-styled anchor (.btn-*, .p-btn, .back, .nav-link …) owns its hover state — a bare `a:hover` out-ranks every single-class rule and underlined CTA buttons on hover on every page that loads this file. */ a:not([class]):hover { text-decoration: underline; } /* ── Focus ── One visible ring everywhere. Several pages had none, which left keyboard users with no focus indication on the CTAs. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-2); } /* ── Legal / text page shell ── agb · datenschutz · impressum · kontakt · cookies · widerruf · haftungsausschluss all shared this markup with private copies of the CSS. */ .legal-body { padding: 40px 20px 80px; } .legal-container { max-width: 740px; margin: 0 auto; } /* Header row: back-link and the DE/EN toggle on one baseline. Previously the toggle was a `float:right` span dropped after the link, which floated a 27px control against a 14px line box. */ .legal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .back { display: inline-flex; align-items: center; color: var(--ink-3); font-size: var(--fs-label); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; } .back:hover { color: var(--ink); text-decoration: none; } .legal-container .label { font-size: var(--fs-label); color: var(--ink-3); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px; } .legal-container h1 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.2px; } .legal-container .subtitle { font-size: var(--fs-label); color: var(--ink-3); margin-bottom: 40px; } .legal-container h2 { font-size: var(--fs-label); font-weight: 700; color: var(--accent-text); letter-spacing: 1.4px; text-transform: uppercase; margin: 32px 0 12px; } .legal-container p { margin-bottom: 12px; color: var(--ink-2); } .legal-container ul { margin: 0 0 12px 18px; } .legal-container li { margin-bottom: 6px; color: var(--ink-2); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-6); padding: 22px 26px; margin-bottom: 20px; } /* h2 carries a 32px top margin for section rhythm in flowing text; inside a card that stacks on the card's own padding and leaves the heading floating. Same for the last paragraph's bottom margin. */ .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .placeholder { background: var(--accent-dim); padding: 2px 6px; border-radius: var(--radius-3); color: var(--accent-text); font-weight: 600; } .footer-note { font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: 0.6px; text-align: center; margin-top: 48px; } /* Editorial static-page family. Opt-in keeps /landing's established skin intact. */ :root.editorial { --bg: #ffffff; --surface: #f7f8fa; --surface-2: #eef1f5; --line: #e4e7eb; --line-s: #d3d8de; --ink: #12161c; --ink-2: #39404a; --ink-3: #535c68; --accent: #1a56db; --accent-text: var(--accent); --accent-dim: #e7eefc; --on-accent: #fff; --pos: #0f7a4a; --neg: #c02d1f; --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-serif: 'Newsreader', Georgia, serif; --mono: var(--font); --sans: var(--font); --reading-width: 720px; --page-width: 1200px; color-scheme: light; } :root.editorial.theme-dark { --bg: #0b0e13; --surface: #12161c; --surface-2: #171c24; --line: #232a33; --line-s: #333c47; --ink: #e7ebf1; --ink-2: #bcc5d0; --ink-3: #94a0ad; --accent: #8ab4ff; --accent-text: var(--accent); --accent-dim: #152135; --on-accent: #0b0e13; --pos: #4ecf95; --neg: #ff7a6c; color-scheme: dark; } .editorial body { font: 16px/1.65 var(--font); color: var(--ink-2); } .editorial [hidden] { display: none !important; } .editorial :is(button,input,summary) { font: inherit; } .editorial :is(h1,h2,h3) { color: var(--ink); font-weight: 500; } .editorial :is(p,li,td,th,h1,h2,h3,a) { overflow-wrap: anywhere; } .editorial :is(main,section,article,aside,div) { min-width: 0; } .editorial :is(h1,h2,section,[id]) { scroll-margin-top: 100px; } .editorial ::selection { background: var(--accent-dim); color: var(--ink); } .editorial .sr-only, .editorial .static-skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .editorial .static-skip:focus { position: fixed; z-index: 999; left: 16px; top: 8px; padding: 12px 20px; background: var(--bg); } .editorial .static-wrap { width: min(100%, var(--page-width)); margin-inline: auto; padding-inline: 32px; } .editorial .static-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); } .editorial .static-header-inner { max-width: var(--page-width); margin: auto; padding: 12px 32px; display: flex; align-items: center; gap: 36px; } .editorial .static-brand { display: inline-flex; align-items: center; min-height: 44px; font: 26px/1 var(--font-serif); letter-spacing: -.8px; color: var(--ink); white-space: nowrap; } .editorial .static-brand span { color: var(--accent); } .editorial .static-nav { display: flex; gap: 26px; margin-left: auto; } .editorial .static-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2); } .editorial .static-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 8px; } .editorial .static-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .editorial .static-theme { display: grid; place-items: center; min-width: 44px; min-height: 44px; background: transparent; color: var(--ink); border: 1px solid var(--line-s); cursor: pointer; } .editorial .static-button, .editorial .card-cta, .editorial .price-cta, .editorial .btn-lifetime { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 1px solid var(--line-s); background: var(--bg); color: var(--ink); font: 500 14px/1.3 var(--font); text-decoration: none; border-radius: var(--radius-3); cursor: pointer; } .editorial .static-button.primary, .editorial .card-cta.primary, .editorial .price-cta.solid, .editorial .btn-lifetime { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .editorial :is(.static-button,.card-cta,.price-cta,.btn-lifetime):hover { border-color: var(--accent); } .editorial button:disabled { cursor: not-allowed; opacity: .65; } .editorial .static-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } .editorial .static-note { font-size: 13px; color: var(--ink-3); margin-top: 20px; } .editorial .static-meta { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .4px; } .editorial .static-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; } .editorial .static-menu { display: none; } .editorial .static-footer { border-top: 1px solid var(--line-s); margin-top: 48px; } .editorial .static-footer-inner { max-width: var(--page-width); margin: auto; padding: 36px 32px 48px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; } .editorial .static-footer p { margin: 8px 0; font-size: 14px; } .editorial .static-footer nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; } .editorial .static-footer a:not(.static-brand) { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink-3); } .editorial .display-title { font: 400 clamp(48px,6.5vw,90px)/1.04 var(--font-serif); letter-spacing: -2px; } .editorial .section-title { font: 400 clamp(30px,3.4vw,44px)/1.12 var(--font-serif); letter-spacing: -.8px; max-width: 650px; } .editorial .section-intro { max-width: 660px; margin: 18px 0 32px; color: var(--ink-3); } .editorial .static-context { max-width: var(--page-width); margin: auto; padding: 20px 32px 0; font-size: 12px; color: var(--ink-3); } .editorial .home-hero { display: grid; grid-template-columns: 1.65fr 1fr; gap: 90px; align-items: center; padding-block: 50px 84px; } .editorial .home-lead { max-width: 570px; font-size: 18px; line-height: 1.65; margin-top: 26px; } .editorial .home-index { padding: 26px 0 8px 32px; border-left: 1px solid var(--line-s); } .editorial .home-index > div { border-bottom: 1px solid var(--line); padding: 22px 0; } .editorial .home-index h3 { font: 400 29px/1.25 var(--font-serif); } .editorial .home-index div p { font-size: 14px; margin-top: 6px; color: var(--ink-3); } .editorial .editorial-section { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 36px; padding-block: 56px; border-top: 1px solid var(--line-s); } .editorial .section-rail { padding-top: 8px; } .editorial .feature-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(245px,100%),1fr)); gap: 0 36px; } .editorial .feature-item { padding: 26px 0; border-top: 1px solid var(--line); } .editorial .feature-item h3 { font-size: 18px; margin-bottom: 10px; } .editorial .feature-item p { font-size: 15px; color: var(--ink-3); } .editorial .start-steps { list-style: none; counter-reset: start; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)); gap: 28px; margin: 30px 0 36px; } .editorial .start-steps li { counter-increment: start; padding-top: 18px; border-top: 1px solid var(--line); } .editorial .start-steps li::before { content: '0' counter(start); font: 32px/1 var(--font-serif); color: var(--accent); display: block; margin-bottom: 18px; } .editorial .start-steps h3 { font-size: 17px; margin-bottom: 8px; } .editorial .start-steps p { font-size: 14px; color: var(--ink-3); } .editorial .demo-callout { padding: 28px 32px; background: var(--surface); border-left: 3px solid var(--accent); } .editorial .demo-callout h3 { font: 30px/1.2 var(--font-serif); margin-bottom: 12px; } .editorial .demo-callout p { max-width: 600px; font-size: 15px; margin-bottom: 22px; } .editorial .price-toggle, .editorial .billing-toggle, .editorial .toggle-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .editorial .price-toggle, .editorial .billing-toggle { margin: 26px 0; } .editorial .toggle-btn { min-height: 44px; min-width: 100px; padding: 8px 14px; border: 1px solid var(--line-s); background: var(--bg); color: var(--ink-2); cursor: pointer; } .editorial .toggle-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .editorial .toggle-save, .editorial .badge-savings { font-size: 12px; color: var(--ink-3); } .editorial .price-grid, .editorial .pricing-page .cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .editorial .price-card, .editorial .pricing-page .card { position: relative; margin: 0; padding: 28px 22px; border: 1px solid var(--line-s); background: var(--bg); border-radius: var(--radius-6); } .editorial .price-card.hot, .editorial .pricing-page .card.recommended { border-color: var(--accent); background: var(--surface); } .editorial .price-tier, .editorial .card-label { font: 28px/1.2 var(--font-serif); color: var(--ink); } .editorial .price-tier-sub { font-size: 13px; margin: 12px 0 20px; min-height: 44px; } .editorial .price-row, .editorial .card-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 18px; } .editorial .price-amount-lg, .editorial .card-price { font: 42px/1.1 var(--font-serif); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -1px; } .editorial .price-per, .editorial .card-price-unit { font-size: 13px; color: var(--ink-3); } .editorial .price-note, .editorial .card-price-annual { font-size: 12px; min-height: 40px; margin: 12px 0; color: var(--ink-3); } .editorial .price-cta, .editorial .card-cta { width: 100%; } .editorial .price-feats, .editorial .features { margin-top: 24px; font-size: 13px; } .editorial .price-feats > div, .editorial .feat { display: flex; gap: 9px; margin: 10px 0; } .editorial .ck, .editorial .feat-icon.yes, .editorial .c-yes { color: var(--pos); } .editorial .feat-icon { font-style: normal; } .editorial .feat-icon.no, .editorial .c-no { color: var(--ink-3); } .editorial .feat-sub { color: var(--ink-3); } .editorial .feat-divider { border: 0; border-top: 1px solid var(--line); margin: 18px 0; } .editorial .price-badge, .editorial .recommended-badge { position: absolute; top: -12px; right: 18px; padding: 3px 8px; font-size: 11px; color: var(--on-accent); background: var(--accent); } .editorial .faq-item { border-bottom: 1px solid var(--line); } .editorial .faq-item summary { min-height: 56px; padding: 18px 0; color: var(--ink); cursor: pointer; font-size: 17px; } .editorial .faq-item p { max-width: 680px; padding-bottom: 22px; font-size: 15px; } .editorial .waitlist-section { padding-block: 40px 24px; } .editorial .waitlist-section > p { margin: 18px 0 24px; max-width: 620px; } .editorial .wl-form { display: grid; grid-template-columns: minmax(0,420px) auto; width: min(100%,650px); gap: 8px; } .editorial .wl-form label { grid-column: 1/-1; font-size: 13px; } .editorial .wl-input { min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--line-s); border-radius: var(--radius-3); background: var(--bg); color: var(--ink); } .editorial .wl-btn { min-height: 48px; padding: 10px 20px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--radius-3); cursor: pointer; } .editorial .wl-success, .editorial .wl-err { display: none; max-width: 650px; padding-block: 14px; font-size: 14px; } .editorial .wl-success.on, .editorial .wl-err.on { display: block; } .editorial .wl-success { color: var(--pos); }.editorial .wl-err { color: var(--neg); } /* Pricing: a single accessible comparison table reflows by feature on phones. */ .editorial .pricing-main { padding-top: 52px; } .editorial .pricing-main .display-title { max-width: 840px; font-size: clamp(45px,6vw,76px); margin-top: 18px; } .editorial .pricing-main .page-sub { max-width: 640px; font-size: 18px; margin-top: 22px; } .editorial .toggle-label { color: var(--ink-3); font-size: 14px; } .editorial .toggle-label.active { color: var(--ink); font-weight: 600; } .editorial .toggle-track { width: 64px; min-height: 44px; padding: 7px; border: 1px solid var(--line-s); background: var(--surface-2); border-radius: 30px; cursor: pointer; } .editorial .toggle-thumb { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); } .editorial .toggle-track.yearly .toggle-thumb { margin-left: auto; background: var(--accent); } .editorial .pricing-status { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 44px; font-size: 14px; margin-bottom: 24px; } .editorial .pricing-status button { padding: 8px 12px; min-height: 44px; border: 1px solid var(--line-s); background: var(--bg); color: var(--accent); cursor: pointer; } .editorial .pricing-status:has(#pricing-status:empty):not(:has(button:not([hidden]))) { display: none; } .editorial #subscription-notice, .editorial #manage-subscription { margin-bottom: 28px; } .editorial .lifetime-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; background: var(--accent-dim); border-top: 2px solid var(--accent); padding: 28px; margin: 24px 0 36px; } .editorial .lifetime-left { display: grid; gap: 6px; } .editorial .lifetime-tag { font-size: 12px; color: var(--accent); }.editorial .lifetime-title { font: 28px/1.2 var(--font-serif); color: var(--ink); }.editorial .lifetime-desc, .editorial .lifetime-counter { font-size: 14px; }.editorial .lifetime-price { font: 38px/1.2 var(--font-serif); }.editorial .lifetime-unit { font: 14px var(--font); } .editorial .compare-section { margin-top: 64px; } .editorial .compare-title, .editorial .roadmap-title { font: 36px/1.2 var(--font-serif); margin-bottom: 24px; } .editorial .compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; } .editorial .compare-table th, .editorial .compare-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; } .editorial .compare-table th:first-child { width: 43%; text-align: left; } .editorial .compare-table .c-feat { font-weight: 400; color: var(--ink-2); } .editorial .compare-table thead th { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-s); } .editorial .compare-table .section-row td { text-align: left; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .5px; padding-top: 20px; } .editorial .roadmap-section { border-top: 1px solid var(--line-s); margin-top: 48px; padding-top: 32px; } .editorial .roadmap-title { font-size: 28px; }.editorial .roadmap-sub { max-width: 700px; font-size: 14px; }.editorial .roadmap-list { columns: 2; padding-left: 18px; margin: 20px 0; font-size: 14px; }.editorial .roadmap-list li { margin-bottom: 8px; break-inside: avoid; } .editorial .footer-note { text-align: left; font-size: 12px; line-height: 1.8; letter-spacing: 0; } /* Legal/service reading shell. All document copy is preserved in .legal-article. */ .editorial .legal-body { padding: 0; } .editorial .legal-layout { max-width: var(--page-width); margin: auto; padding: 52px 32px 20px; display: grid; grid-template-columns: 230px minmax(0,var(--reading-width)); gap: 70px; align-items: start; } .editorial .legal-contents { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; } .editorial .legal-contents > summary { color: var(--accent); font-size: 13px; font-weight: 500; min-height: 44px; cursor: pointer; } .editorial .legal-contents nav { margin-top: 20px; border-left: 1px solid var(--line-s); padding-left: 16px; } .editorial .legal-contents a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-3); } .editorial .legal-contents a:hover { color: var(--accent); } .editorial .legal-container { max-width: none; width: 100%; margin: 0; font-size: 16px; line-height: 1.8; } .editorial .legal-container .label { font-family: var(--font); font-size: 12px; color: var(--accent); letter-spacing: .5px; text-transform: none; } .editorial .legal-container h1 { font: 400 clamp(36px,4.4vw,56px)/1.08 var(--font-serif); letter-spacing: -1px; margin: 16px 0; } .editorial .legal-container .subtitle { font-size: 13px; margin: 18px 0 38px; letter-spacing: 0; } .editorial .legal-container h2 { font: 500 24px/1.3 var(--font-serif); text-transform: none; letter-spacing: -.2px; color: var(--ink); margin: 36px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); } .editorial .legal-container h3 { font-size: 17px; margin: 26px 0 12px; } .editorial .legal-container p { margin-bottom: 16px; } .editorial .legal-container .card { padding: 24px; background: var(--surface); border-color: var(--line); margin: 18px 0; } .editorial .legal-container .card h2 { margin: 0 0 14px; padding: 0; border: 0; } .editorial .legal-container a { text-decoration: underline; text-underline-offset: 3px; } .editorial .legal-container a[href^="mailto:"] { display: inline-block; min-height: 44px; padding-block: 7px; } .editorial .legal-container .disclaimer-box { border-left: 3px solid var(--accent); padding: 24px; background: var(--surface); margin: 28px 0; } .editorial .dbox-label { font-size: 12px; color: var(--accent); margin-bottom: 12px; } .editorial .legal-container .disclaimer-box p { margin: 0; } .editorial .divider { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .editorial .form-box { padding: 24px; background: var(--surface); overflow-wrap: anywhere; } .editorial .legal-container table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; } .editorial .legal-container th, .editorial .legal-container td { text-align: left; padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .editorial .legal-container th { font-weight: 600; color: var(--ink); } @media (max-width: 1000px) { .editorial .static-nav { gap: 14px; }.editorial .static-header-inner { gap: 20px; }.editorial .static-account { display: none; } .editorial .home-hero { gap: 36px; }.editorial .legal-layout { grid-template-columns: 180px minmax(0,1fr); gap: 36px; } .editorial .editorial-section { grid-template-columns: 120px minmax(0,1fr); gap: 24px; } .editorial .price-grid { grid-template-columns: 1fr; }.editorial .price-tier-sub { min-height: 0; }.editorial .price-feats { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(225px,100%),1fr)); gap: 0 14px; } } @media (max-width: 760px) { .editorial .static-wrap { padding-inline: 20px; }.editorial .static-header-inner { padding: 10px 20px; }.editorial .static-nav { display: none; } .editorial .static-menu { display: block; }.editorial .static-menu summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; font-size: 13px; list-style: none; color: var(--ink); }.editorial .static-menu summary::-webkit-details-marker { display: none; } .editorial .static-menu nav { position: absolute; right: 20px; top: calc(100% - 1px); width: min(300px,calc(100vw - 40px)); border: 1px solid var(--line-s); background: var(--bg); padding: 12px 20px; box-shadow: 0 8px 16px rgb(0 0 0 / .08); } .editorial .static-menu nav a { display: flex; align-items: center; min-height: 48px; color: var(--ink-2); font-size: 15px; } .editorial .home-hero { grid-template-columns: 1fr; padding-block: 36px 44px; }.editorial .home-index { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line-s); }.editorial .home-index > div { padding: 16px 0; } .editorial .editorial-section { grid-template-columns: minmax(0,1fr); gap: 22px; padding-block: 38px; } .editorial .home-lead { font-size: 17px; }.editorial .static-context { padding-inline: 20px; } .editorial .static-footer-inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; } .editorial .legal-layout { display: flex; flex-direction: column; padding: 30px 20px 12px; gap: 32px; } .editorial .legal-contents { position: static; width: 100%; max-height: none; }.editorial .legal-contents nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)); gap: 0 16px; } .editorial .legal-container { font-size: 16px; }.editorial .legal-container h1 { font-size: clamp(30px,8.5vw,42px); }.editorial .legal-container a, .editorial .footer-note a { display: inline-block; min-width: 44px; min-height: 44px; padding-block: 7px; max-width: 100%; }.editorial .legal-container .card { padding: 20px; } .editorial .pricing-page .cards { grid-template-columns: 1fr; gap: 28px; }.editorial .pricing-main { padding-top: 34px; } .editorial .compare-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; } .editorial .compare-table, .editorial .compare-table tbody { display: block; } .editorial .compare-table tr:not(.section-row) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding: 12px 0; } .editorial .compare-table th.c-feat { grid-column: 1/-1; width: auto; text-align: left; padding: 4px 4px 14px; font-weight: 500; } .editorial .compare-table th, .editorial .compare-table td { border: 0; padding: 6px 4px; font-size: 13px; } .editorial .compare-table tr:not(.section-row) td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; } .editorial .compare-table .section-row, .editorial .compare-table .section-row td { display: block; width: 100%; } .editorial .legal-container table, .editorial .legal-container tbody { display: block; } .editorial .legal-container thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; } .editorial .legal-container tbody tr { display: block; border-bottom: 1px solid var(--line-s); padding: 12px 0; } .editorial .legal-container td { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 16px; border: 0; padding: 8px 0; } .editorial .legal-container td::before { content: attr(data-label); color: var(--ink-3); font-weight: 500; } .editorial .roadmap-list { columns: 1; }.editorial .lifetime-banner { padding: 22px; }.editorial .demo-callout { padding: 24px; } } @media (max-width: 420px) { .editorial .static-header-inner { padding: 8px 12px; gap: 8px; }.editorial .static-brand { font-size: 20px; }.editorial .static-actions { gap: 4px; } .editorial .static-actions [data-i18n-toggle] button { padding-inline: 4px !important; min-width: 44px; } .editorial .static-wrap, .editorial .static-context { padding-inline: 16px; }.editorial .display-title { letter-spacing: -1.3px; } .editorial .static-ctas > a { flex: 1 1 130px; }.editorial .wl-form { grid-template-columns: minmax(0,1fr); }.editorial .legal-layout { padding-inline: 16px; } .editorial .static-footer-inner { padding-inline: 16px; }.editorial .static-footer nav { gap: 0 14px; } } @media (prefers-reduced-motion: reduce) { .editorial { scroll-behavior: auto; } .editorial *, .editorial *::before, .editorial *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }