/* Tellmerge marketing site — design system. * * THIS IS A SIBLING OF TELLSHEET AND MUST READ AS ONE. Both are Souq E Kamil * products, and a visitor who sees both should recognise the second one before * reading a word. Shared with Tellsheet: * * ruled sections are separated by hairlines, not by whitespace alone * eyebrow every section heading is preceded by a 28px rule and a caps label * steps a big tabular numeral in its own column, rows divided by rules * two fonts Space Grotesk for display, Public Sans for everything read * indigo+red indigo carries brand and trust, red is reserved for ACTION * layout 1200px shell, the same header and the same five-column footer * * DELIBERATELY NOT shared — the one axis where the two differ: * * soft Tellmerge keeps rounded corners and real shadows; Tellsheet is * flat and square. Do not "correct" this to match Tellsheet. * * Red appearing anywhere decorative is a bug: it stops the primary button from * being the one red thing on the page, which is the only reason it works. * * Every colour is a token on :root. Dark mode redefines the tokens and nothing * else, so no component ever needs a media query of its own. */ @import url("/assets/fonts.css"); /* ---- tokens --------------------------------------------------------------- */ :root { --indigo: #2a2986; --indigo-text: #2a2986; --indigo-soft: #ededf8; --on-indigo: #ffffff; --red: #ed1c24; --red-hover: #c9121a; --bg: #fafafc; --surface: #ffffff; --surface2: #f1f1f7; --ink: #17173a; --muted: #42425c; --faint: #9090a8; --line: #dedeea; --line2: #ebebf3; --band: #2a2986; --band-ink: #ffffff; --band-muted: #b9b9e2; --band-line: #44439c; --ok: #17803d; --ok-soft: #e8f6ed; /* Type. Space Grotesk sets headlines (tight, technical, a little mechanical); Public Sans carries everything you actually read. Two families, one job each. */ --display: "Space Grotesk", "Public Sans", system-ui, sans-serif; --text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; /* Fluid scale. The jump from --t-lead to --t-hero is deliberately large — hierarchy here comes from scale contrast, not from weight alone. */ --t-hero: clamp(2.4rem, 1.2rem + 4.4vw, 4.25rem); --t-h2: clamp(1.65rem, 1.2rem + 2.1vw, 2.5rem); --t-h3: clamp(1.1rem, 1rem + 0.5vw, 1.375rem); --t-lead: clamp(1rem, 0.95rem + 0.35vw, 1.16rem); --t-body: 1rem; --t-small: 0.9rem; --t-tiny: 0.75rem; --shell: 1200px; --gap: clamp(1rem, 0.6rem + 1.6vw, 1.5rem); --section: clamp(3rem, 2rem + 4vw, 5rem); /* Tellmerge stays softer than Tellsheet on purpose: rounded corners and real shadows. Everything ELSE about the two systems is shared — the palette, the type pairing, the ruled sections, the eyebrow, the numbered steps. This is the one axis where the sibling products deliberately differ. */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 100px; --shadow-1: 0 1px 2px rgb(23 23 58 / 6%), 0 2px 8px rgb(23 23 58 / 4%); --shadow-2: 0 2px 6px rgb(23 23 58 / 7%), 0 18px 40px -18px rgb(23 23 58 / 22%); --shadow-3: 0 3px 10px rgb(23 23 58 / 9%), 0 34px 70px -28px rgb(42 41 134 / 34%); --ease: cubic-bezier(0.16, 1, 0.3, 1); --fast: 150ms; --normal: 260ms; } /* Dark mode arrives two ways and both must work: the OS setting, and the header toggle writing data-theme on . The media query is guarded with :not([data-theme="light"]) so an explicit "light" choice beats a dark OS, and the [data-theme="dark"] block repeats the tokens so an explicit "dark" choice beats a light OS. Neither alone gives a toggle that works in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --indigo-text: #a3a2ee; --indigo-soft: #1c1c3d; --red-hover: #ff2f37; --bg: #0d0d1f; --surface: #14142b; --surface2: #1a1a33; --ink: #e9e9f4; --muted: #a6a6c2; --faint: #52526f; --line: #26264a; --line2: #1e1e3a; --band: #131332; --band-ink: #ededf8; --band-muted: #9f9fc8; --band-line: #2c2c55; --ok: #4ade80; --ok-soft: #10281a; --shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --shadow-2: 0 2px 6px rgb(0 0 0 / 45%), 0 18px 40px -18px rgb(0 0 0 / 60%); --shadow-3: 0 3px 10px rgb(0 0 0 / 50%), 0 34px 70px -28px rgb(0 0 0 / 70%); } } :root[data-theme="dark"] { --indigo-text: #a3a2ee; --indigo-soft: #1c1c3d; --red-hover: #ff2f37; --bg: #0d0d1f; --surface: #14142b; --surface2: #1a1a33; --ink: #e9e9f4; --muted: #a6a6c2; --faint: #52526f; --line: #26264a; --line2: #1e1e3a; --band: #131332; --band-ink: #ededf8; --band-muted: #9f9fc8; --band-line: #2c2c55; --ok: #4ade80; --ok-soft: #10281a; --shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --shadow-2: 0 2px 6px rgb(0 0 0 / 45%), 0 18px 40px -18px rgb(0 0 0 / 60%); --shadow-3: 0 3px 10px rgb(0 0 0 / 50%), 0 34px 70px -28px rgb(0 0 0 / 70%); } /* ---- base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Push the footer to the bottom on short pages. The footer has its own background, so without this a page like /404 ends mid-screen and the rest of the window is page background — which reads as a broken layout. */ min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } p { margin: 0 0 1rem; max-width: 68ch; text-wrap: pretty; } /* Headings carry no bottom margin — most are followed by a grid, a rule or a set of cards that space themselves. When one IS followed by prose, the prose supplies the gap, rather than every such heading needing an inline style. */ h1 + p, h2 + p, h3 + p { margin-top: 0.85rem; } img, svg { max-width: 100%; height: auto; } a { color: var(--indigo-text); text-decoration-color: color-mix(in oklab, var(--indigo-text) 35%, transparent); text-underline-offset: 3px; transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); } a:hover { color: var(--red); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--indigo-text); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--ink); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; box-shadow: var(--shadow-2); } .skip:focus { left: 0; } /* ---- layout --------------------------------------------------------------- */ .shell { width: min(100% - 3rem, var(--shell)); margin-inline: auto; } .section { padding-block: var(--section); border-bottom: 1px solid var(--line); } .section--tight { padding-block: calc(var(--section) * 0.68); } /* Last section before the footer, and the band sections, own their edge. */ .section--flush { border-bottom: 0; } /* The eyebrow's leading rule is the single most recognisable mark in this system — it appears above every section heading on both sites. */ .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-family: var(--text); font-size: var(--t-tiny); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--indigo-text); margin: 0 0 1.1rem; } .eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; } .band .eyebrow { color: var(--band-muted); } .center .eyebrow { justify-content: center; } .lead { font-size: var(--t-lead); color: var(--muted); max-width: 60ch; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---- header --------------------------------------------------------------- */ .top { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .top-in { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.75rem; padding-block: 0.65rem; min-height: 44px; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 700; font-size: 1.19rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .brand:hover { color: var(--ink); } .brand svg { width: 30px; height: 30px; display: block; flex: none; } .nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .nav a { font-size: 0.906rem; font-weight: 500; color: var(--muted); text-decoration: none; } .nav a:hover { color: var(--red); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } /* The header's right-hand cluster: theme toggle, then the one red button. */ .top-end { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; } .theme-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-sm); font-size: 15px; line-height: 1; padding: 0; cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .theme-btn:hover { border-color: var(--faint); color: var(--ink); } @media (max-width: 820px) { .nav a.hide-sm { display: none; } } @media (max-width: 560px) { .top-end { gap: 0.6rem; } .nav { gap: 1.1rem; } } /* ---- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--text); font-size: 0.906rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.65rem 1.15rem; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .btn:active { transform: translateY(1px); } /* !important on the colour, and only on the colour. * * These buttons live inside .nav, .band, .foot and .prose, every one of which * styles its descendant `a` — and `.nav a` (0,1,1) outranks `.btn-primary` * (0,1,0). That is not hypothetical: it shipped, and the header's "Get * Tellmerge" rendered var(--muted) slate on red, effectively unreadable, until * 2026-08-25. `.band a:not(.btn)` fixes one such context by hand; there are * four, and the next component to style its links would break these again. * A button's foreground is the one thing no container may override. */ .btn-primary { background: var(--red); color: #fff !important; box-shadow: var(--shadow-1); } .btn-primary:hover { background: var(--red-hover); color: #fff !important; box-shadow: var(--shadow-2); } .btn-indigo { background: var(--indigo); color: var(--on-indigo) !important; } .btn-indigo:hover { background: color-mix(in oklab, var(--indigo) 82%, #000); color: var(--on-indigo) !important; } .btn-ghost { background: transparent; color: var(--ink) !important; border-color: var(--line); } .btn-ghost:hover { border-color: var(--indigo-text); color: var(--ink) !important; background: var(--surface); } .btn-on-band { background: #fff; color: var(--indigo) !important; } .btn-on-band:hover { background: var(--band-muted); color: var(--indigo) !important; } .btn-outline-band { background: transparent; color: #fff !important; border-color: var(--band-line); } .btn-outline-band:hover { background: color-mix(in oklab, #fff 12%, transparent); border-color: var(--band-muted); } .btn-lg { padding: 0.85rem 1.6rem; font-size: 0.97rem; } .btn-block { width: 100%; } /* ---- hero ----------------------------------------------------------------- */ .hero { padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem); border-bottom: 1px solid var(--line); } .hero-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: 1fr; /* Top, not centre. Nearly every use of this grid is two columns of TEXT, and centring two columns of different heights means neither their eyebrows nor their headings line up — on /download the two headings sat 10px apart, which reads as a broken layout rather than a designed one. Only a column paired with a tall image wants centring, and that asks for it by name. */ align-items: start; } .hero-grid--center { align-items: center; } @media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .hero h1 { font-size: var(--t-hero); margin-bottom: 1.1rem; line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; } .hero h1 em { font-style: normal; color: var(--indigo-text); } .hero .lead { margin-bottom: 1.8rem; max-width: 56ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .hero-note { font-size: var(--t-small); color: var(--faint); margin: 1.15rem 0 0; } /* ---- product screenshots -------------------------------------------------- The five images are the ones Microsoft reviewed for the store listing: real Outlook, real pane, and example.com recipients. The site deliberately shows the SAME pictures as the listing, so nothing a buyer sees here contradicts what they saw there. Width and height are set on every because these are the largest things on the page and a late-loading hero that reflows the headline is the worst CLS a landing page can have. */ .shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface2); } /* The hero screenshot is the largest thing on the page and carries the deepest shadow in the system — it should sit above the page, not in it. */ .hero-shot .shot { box-shadow: var(--shadow-3); } .shot-figure { margin: 0; } .shot-figure figcaption { font-size: var(--t-small); color: var(--muted); margin-top: 0.85rem; max-width: 54ch; } /* Must come AFTER .shot-figure's `margin: 0` — the shorthand resets margin-top, and declared first this rule silently lost, leaving the hero copy sitting on top of the screenshot. */ .hero-shot { margin-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); } /* The walkthrough gallery: each step is a numeral, a caption and a screenshot, stacked in a ruled column exactly like the numbered steps elsewhere. */ .walk { display: grid; gap: var(--gap); grid-template-columns: 1fr; } @media (min-width: 860px) { .walk { grid-template-columns: 1fr 1fr; } } .walk-item { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease); } .walk-item:hover { border-color: color-mix(in oklab, var(--indigo-text) 40%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); } /* Radius comes from the card, which clips it — a rounded image inside a rounded card leaves four visible slivers of background in the corners. */ .walk-item .shot { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); } .walk-text { padding: 1.15rem 1.3rem 1.4rem; } .walk-step { font-family: var(--display); font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo-text); margin: 0 0 0.4rem; } .walk-text h3 { font-size: 1.06rem; margin-bottom: 0.35rem; } .walk-text p { font-size: var(--t-small); color: var(--muted); margin: 0; } /* ---- generic cards -------------------------------------------------------- */ /* Grid items default to min-width:auto — their CONTENT's min-content width — so a single wide descendant stops a 1fr track ever shrinking. The comparison table carries min-width:540px, and through this it was widening the whole page: at a 390px viewport every column measured 542px and the entire site scrolled sideways, headline and all. The table still scrolls inside its own .table-wrap; the track itself must always be free to shrink. */ .grid > *, .hero-grid > *, .walk > *, .tiers > *, .foot-grid > *, .card { min-width: 0; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); transition: border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease); } .card h3 { font-size: var(--t-h3); margin-bottom: 0.5rem; } .card p { font-size: var(--t-small); color: var(--muted); margin: 0; } .card:hover { border-color: color-mix(in oklab, var(--indigo-text) 40%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); } /* A card with a coloured cap. Red marks the recommended or primary route, indigo the alternative — the same signal the buttons carry. */ .card--red { border-top: 3px solid var(--red); } .card--indigo { border-top: 3px solid var(--indigo); } .card--flat:hover { border-color: var(--line); box-shadow: none; transform: none; } /* A card that ends in a call to action. The button is pushed to the bottom so a row of these has its buttons on one line even when the copy above them is different lengths — three CTAs at three different heights reads as three unrelated boxes rather than a choice between three routes. */ .card--stack { display: flex; flex-direction: column; } .card--stack .btn { margin-top: auto; } .card-kicker { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: var(--t-tiny); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo-text); margin: 0 0 0.75rem; } .tag { font-size: 0.66rem; letter-spacing: 0.08em; font-weight: 700; padding: 3px 8px; border-radius: 3px; } .tag-red { background: var(--red); color: #fff; } .tag-indigo { background: var(--indigo); color: #fff; } .tag-quiet { background: var(--surface2); color: var(--muted); border: 1px solid var(--line); } /* ---- numbered steps ------------------------------------------------------- A big Space Grotesk numeral in its own column, rows divided by hairlines. This replaces the small circled digit the site used to carry: at this scale the number is a design element and not just a label. */ .steps { border-top: 1px solid var(--line); max-width: 780px; } .step { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); padding: 1.75rem 0; } .step-n { font-family: var(--display); font-weight: 700; line-height: 1; font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem); letter-spacing: -0.03em; color: var(--indigo-text); flex: none; width: 64px; font-variant-numeric: tabular-nums; } .step:nth-child(even) .step-n { color: var(--red); } .step-body { min-width: 0; } .step-body h3 { font-size: 1.32rem; margin-bottom: 0.45rem; } .step-body p { font-size: var(--t-small); color: var(--muted); margin: 0; } .step-body p + p { margin-top: 0.7rem; } /* The circled digit is kept for anywhere still using it. */ .num { font-family: var(--display); font-size: 0.8rem; font-weight: 700; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.9rem; background: var(--indigo-soft); color: var(--indigo-text); } /* ---- spec rows ------------------------------------------------------------ Label on the left, value on the right, hairline between. Used for requirements and anything else that is really a two-column table but should not carry table furniture. */ .spec { border-top: 1px solid var(--line); } .spec-row { display: flex; justify-content: space-between; gap: 1.25rem; border-bottom: 1px solid var(--line); padding: 0.8rem 0; font-size: 0.906rem; } .spec-row dt, .spec-row .k { color: var(--muted); margin: 0; } .spec-row dd, .spec-row .v { font-weight: 600; text-align: right; margin: 0; } .spec-note { border-bottom: 1px solid var(--line); padding: 0.85rem 0; font-size: 0.906rem; color: var(--muted); } .spec-note b { color: var(--ink); font-weight: 600; } /* ---- indigo band ---------------------------------------------------------- */ .band { background: var(--band); color: var(--band-ink); border-bottom: 0; } .band h2, .band h3 { color: var(--band-ink); } .band p { color: var(--band-muted); } /* Prose links inside a band go white — but NOT buttons, which carry their own colour. `.band a` (0,1,1) outranks `.btn-on-band` (0,1,0), so without the :not() the white-on-indigo button rendered white text on its white fill and disappeared completely. The buttons now also force their own colour, so this is belt and braces — deliberately. */ .band a:not(.btn) { color: #fff; } .band .rule { background: var(--band-line); } .band-card { border: 1px solid var(--band-line); border-radius: var(--r); padding: 1.5rem; background: color-mix(in oklab, #fff 5%, transparent); } .band-card h3 { font-size: var(--t-h3); margin-bottom: 0.45rem; } .band-card p { font-size: var(--t-small); margin: 0; } /* ---- feature list --------------------------------------------------------- */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; } .checks li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-small); color: var(--muted); } .checks svg { flex: none; margin-top: 3px; color: var(--ok); } .checks b { color: var(--ink); font-weight: 600; } .band .checks li { color: var(--band-muted); } .band .checks b { color: var(--band-ink); } .band .checks svg { color: #7ee2a8; } /* ---- pricing -------------------------------------------------------------- */ .tiers { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); align-items: start; } .tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; transition: border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease); } .tier:hover { border-color: color-mix(in oklab, var(--indigo-text) 45%, var(--line)); box-shadow: var(--shadow-2); } /* The recommended tier is raised out of the row rather than just recoloured — depth reads faster than a badge, and the badge still explains why. */ .tier--best { border-color: var(--indigo); box-shadow: var(--shadow-3); position: relative; } @media (min-width: 900px) { .tier--best { transform: translateY(-14px); } } /* Straddles the top border. Out of flow on purpose: in flow it adds a row to one card only, so the three tier headings stop sharing a baseline. */ .tier-tag { position: absolute; top: -11px; left: 1.6rem; background: var(--indigo); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--r-pill); } .tier h3 { font-size: 1.05rem; letter-spacing: 0.01em; } .tier-price { display: flex; align-items: baseline; gap: 0.4rem; } .tier-price .amt { font-family: var(--display); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .tier-price .per { font-size: var(--t-small); color: var(--faint); } .tier-for { font-size: var(--t-small); color: var(--muted); margin: 0; min-height: 3em; } .tier .checks { margin-top: auto; } .qty { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-small); color: var(--muted); } .qty input { width: 74px; padding: 0.45rem 0.6rem; font: inherit; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); } .qty input:focus-visible { border-color: var(--indigo-text); } /* ---- comparison ----------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } table.cmp { border-collapse: collapse; width: 100%; min-width: 540px; font-size: var(--t-small); } table.cmp th, table.cmp td { padding: 0.8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line2); } table.cmp thead th { font-family: var(--text); font-size: var(--t-tiny); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); background: var(--surface2); font-weight: 600; } table.cmp tbody tr:last-child td { border-bottom: 0; } table.cmp td.us { font-weight: 700; color: var(--ink); background: color-mix(in oklab, var(--indigo-soft) 60%, transparent); } table.cmp td.them { color: var(--muted); } /* ---- FAQ ------------------------------------------------------------------ */ .faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 820px; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0; position: relative; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; transition: color var(--fast) var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--indigo-text); } .faq summary::after { content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 400; color: var(--faint); transition: transform var(--normal) var(--ease); } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq details p { font-size: var(--t-small); color: var(--muted); padding-right: 2.2rem; } .faq details p:last-child { margin-bottom: 1.2rem; } /* ---- prose (legal pages) --------------------------------------------------- */ .prose { max-width: 72ch; } .prose h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem); margin: 2.6rem 0 0.85rem; } .prose h3 { font-size: var(--t-h3); margin: 1.9rem 0 0.6rem; } .prose p, .prose li { color: var(--muted); font-size: 0.97rem; } .prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1rem; display: grid; gap: 0.4rem; } .prose strong { color: var(--ink); } .prose .updated { font-size: var(--t-small); color: var(--faint); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); margin: 0 0 1.4rem; } .prose table th, .prose table td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; } .prose table th { background: var(--surface2); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 600; } .callout { border-left: 3px solid var(--indigo); background: var(--indigo-soft); padding: 1rem 1.2rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 0 0 1.5rem; } .callout p { margin: 0; color: var(--muted); font-size: var(--t-small); } .callout p + p { margin-top: 0.6rem; } /* ---- footer --------------------------------------------------------------- */ .foot { border-top: 1px solid var(--line); background: var(--surface2); padding-top: 3.5rem; } .foot-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .foot h4 { font-family: var(--text); font-size: 0.688rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.9rem; } .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.56rem; } .foot a { font-size: 0.875rem; color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--ink); } .foot-about { font-size: 0.844rem; color: var(--muted); max-width: 280px; margin: 0; } /* Sibling products get a line of description under the name — a bare "LeoCore Backup" tells a visitor nothing about why it is in this footer. */ .foot-more { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; } .foot-more li { display: grid; gap: 3px; } .foot-more span { font-size: 0.75rem; color: var(--faint); line-height: 1.5; max-width: 220px; } .foot-base { margin-top: 3rem; padding-block: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } .foot-base p { font-size: 0.781rem; color: var(--faint); margin: 0; } /* ---- utility -------------------------------------------------------------- */ .center { text-align: center; margin-inline: auto; } .center p { margin-inline: auto; } .mt-0 { margin-top: 0; } .mb-lg { margin-bottom: 2.6rem; } .stack > * + * { margin-top: 1.1rem; } .measure { max-width: 52ch; } .pill { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--indigo-soft); color: var(--indigo-text); font-size: var(--t-tiny); font-weight: 600; padding: 0.34rem 0.8rem; border-radius: var(--r-pill); } code { font-family: var(--mono); font-size: 0.88em; background: var(--surface2); padding: 0.12em 0.38em; border-radius: 4px; } /* Paddle's overlay sits above everything; keep our sticky header out of its way. */ body.paddle-open .top { z-index: 1; } /* ---- checkout details dialog ---------------------------------------------- Lives here rather than being injected by checkout.js so the site's CSP can keep script-src at 'self' with no inline-style workarounds in JS. */ .tmd-overlay { position: fixed; inset: 0; z-index: 9000; background: rgb(13 13 31 / 55%); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 1.2rem; } .tmd-overlay[hidden] { display: none; } .tmd-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); width: min(100%, 420px); padding: 1.8rem 1.6rem; position: relative; } .tmd-x { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--faint); cursor: pointer; } .tmd-x:hover { color: var(--ink); } .tmd-title { font-family: var(--display); font-size: 1.4rem; margin: 0 0 0.3rem; } .tmd-sub { font-size: var(--t-small); color: var(--faint); margin: 0 0 1.3rem; } .tmd-label { display: block; font-size: var(--t-small); font-weight: 600; margin: 0 0 0.35rem; } .tmd-req { color: var(--red); } .tmd-opt { color: var(--faint); font-weight: 400; } .tmd-input { width: 100%; padding: 0.65rem 0.8rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0 0 1rem; } .tmd-input:focus-visible { border-color: var(--indigo-text); } .tmd-err { color: var(--red); font-size: var(--t-small); margin: -0.8rem 0 0.9rem; } .tmd-err[hidden] { display: none; } .tmd-help { font-size: var(--t-tiny); color: var(--faint); margin: 0 0 1.1rem; } .tmd-foot { font-size: var(--t-tiny); color: var(--faint); margin: 0.9rem 0 0; text-align: center; }