/* * S.P.jček landing page. One stylesheet, no build step. * * The brand is the product's teal (#0f766e, BRAND_COLOR in the app's * src/components/brand.tsx) on warm neutrals. The invoice mockup in the hero * is always light, like the real document: it is a sheet of paper and does not * follow the theme. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --brand: #0f766e; --brand-strong: #115e59; --brand-text: #0f766e; --brand-tint: #f0fdfa; --brand-line: #99f6e4; --bg: #fafaf9; --surface: #ffffff; --surface-2: #f5f5f4; --text: #1c1917; --muted: #57534e; --faint: #78716c; --border: #e7e5e4; --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.06); --shadow-lg: 0 1px 2px rgb(28 25 23 / 0.05), 0 24px 48px -20px rgb(28 25 23 / 0.28); --radius: 14px; color-scheme: light; } /* * Dark theme. Twice, because CSS cannot share one block between a media query * and a selector: once for "system" when the OS is dark (unless the visitor * picked light), once for an explicit dark choice from the switch (js/theme.js * sets data-theme on ). Keep the two blocks identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-text: #5eead4; --brand-tint: #0f2624; --brand-line: #155e57; --bg: #0c0f0f; --surface: #141918; --surface-2: #1a2120; --text: #ecefee; --muted: #a6b0ae; --faint: #7f8b89; --border: #243130; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.4), 0 28px 56px -20px rgb(0 0 0 / 0.75); color-scheme: dark; } } :root[data-theme="dark"] { --brand-text: #5eead4; --brand-tint: #0f2624; --brand-line: #155e57; --bg: #0c0f0f; --surface: #141918; --surface-2: #1a2120; --text: #ecefee; --muted: #a6b0ae; --faint: #7f8b89; --border: #243130; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.4), 0 28px 56px -20px rgb(0 0 0 / 0.75); color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } code { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; } :focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: 1160px; margin: 0 auto; /* Inline only, so a component that is also a .wrap keeps its own block padding (the footer, the legal layout). */ padding-inline: 24px; } .skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, transform 0.15s; } .btn svg { width: 18px; height: 18px; transition: transform 0.15s; } .btn:hover svg { transform: translateX(2px); } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 0.15) inset, 0 1px 2px rgb(15 118 110 / 0.3); } .btn-primary:hover { background: var(--brand-strong); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--faint); } .btn-sm { height: 38px; padding: 0 16px; font-size: 15px; border-radius: 9px; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .nav { display: flex; align-items: center; gap: 32px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 650; letter-spacing: -0.025em; text-decoration: none; } .brand img { width: 28px; height: 28px; } .nav-links { display: flex; gap: 28px; margin-right: auto; } .nav-links a, .lang { color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.15s; } .nav-links a:hover, .lang:hover { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; } @media (max-width: 860px) { .nav-links { display: none; } } /* Theme switch. Hidden until js/theme.js marks with .js, so a visitor without JavaScript never sees a button that does nothing. */ .theme-toggle { display: none; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .js .theme-toggle { display: grid; } .theme-toggle:hover { border-color: var(--faint); color: var(--text); } .theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; } .theme-toggle .i-light, .theme-toggle .i-dark, [data-theme] .theme-toggle .i-system { display: none; } [data-theme="light"] .theme-toggle .i-light, [data-theme="dark"] .theme-toggle .i-dark { display: block; } @media (max-width: 640px) { .nav { gap: 16px; } .nav-actions { gap: 10px; } .theme-toggle { width: 34px; height: 34px; } .nav-actions .btn-sm { padding: 0 12px; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; padding: 80px 0 104px; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 16%, transparent), transparent); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 64px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border: 1px solid var(--brand-line); border-radius: 999px; background: var(--brand-tint); color: var(--brand-text); font-size: 14px; font-weight: 600; } .eyebrow::before { content: ""; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: currentColor; } .hero h1 { margin: 22px 0 22px; font-size: clamp(2.6rem, 6vw, 4.1rem); line-height: 1.02; letter-spacing: -0.045em; } .accent { color: var(--brand-text); } .lead { max-width: 34em; color: var(--muted); font-size: 1.2rem; line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero-note { margin-top: 16px; color: var(--faint); font-size: 14px; } @media (max-width: 1080px) { .hero { padding: 56px 0 72px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } } /* ---------- invoice mockup ---------- */ .stage { position: relative; padding: 40px 28px 44px; } /* * The sheet holds the real invoice document, rendered by the app's own * renderer (scripts/render-lander-invoice.tsx) with its CSS in invoice.css. * It is a full A4 page, 210 mm wide, scaled with `zoom` rather than a * transform so the text is laid out at its final size and stays crisp. */ .sheet { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: var(--shadow-lg), 0 0 0 1px rgb(28 25 23 / 0.06); } .sheet .ivc-doc { zoom: 0.55; } @media (max-width: 1240px) { .sheet .ivc-doc { zoom: 0.47; } } @media (max-width: 1080px) { .sheet .ivc-doc { zoom: 0.55; } } .chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.3; } .chip strong { display: block; font-size: 14px; font-variant-numeric: tabular-nums; } .chip span { color: var(--muted); } .chip i { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-tint); color: var(--brand-text); } .chip i svg { width: 16px; height: 16px; } /* The chips sit in the stage's padding and only overlap the sheet's own margins, so they never cover what the invoice says. */ .chip-a { top: 0; left: 0; } .chip-b { right: 0; bottom: 0; } @media (max-width: 520px) { .stage { padding: 36px 0 40px; } .sheet .ivc-doc { zoom: 0.5; } } /* 210 mm is 794 px; these keep the page inside a phone's content width. */ @media (max-width: 420px) { .sheet .ivc-doc { zoom: 0.4; } } @media (max-width: 370px) { .sheet .ivc-doc { zoom: 0.36; } .chip-a { left: 8px; } .chip-b { right: 8px; } } /* ---------- facts strip ---------- */ .strip { border-block: 1px solid var(--border); background: var(--surface); } .strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 0 auto; padding: 22px 24px; list-style: none; color: var(--muted); font-size: 15px; font-weight: 500; } .strip li { display: flex; align-items: center; gap: 8px; } .strip svg { width: 18px; height: 18px; color: var(--brand-text); } /* ---------- sections ---------- */ .section { padding: 112px 0; } .section-head { max-width: 44em; margin-bottom: 56px; } .kicker { margin-bottom: 14px; color: var(--brand-text); font-size: 14px; font-weight: 650; letter-spacing: 0.02em; } .section h2 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; } .section-head p { margin-top: 18px; color: var(--muted); font-size: 1.125rem; } @media (max-width: 640px) { .section { padding: 80px 0; } } /* ---------- features ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .card { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .card h3 { margin-bottom: 8px; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; } .card p { color: var(--muted); font-size: 15.5px; line-height: 1.6; } .icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 11px; background: var(--brand-tint); color: var(--brand-text); } .icon svg { width: 22px; height: 22px; } /* ---------- reliability ---------- */ .band { border-block: 1px solid var(--border); background: var(--surface); } .split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 72px; } .split .section-head { margin-bottom: 32px; } @media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); gap: 48px; } } .checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .checks li { display: flex; gap: 12px; color: var(--muted); } .checks strong { color: var(--text); font-weight: 600; } .checks svg { flex: none; width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); } .panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-lg); } .panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 15px; font-weight: 600; } .panel-head::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); } .panel dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 0; padding: 20px; font-size: 15px; } .panel dt { color: var(--muted); } .panel dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; } .panel code { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .panel-preview { border-top: 1px dashed var(--border); } .panel-preview dd { color: var(--brand-text); font-weight: 600; } .panel-foot { padding: 14px 20px 18px; border-top: 1px solid var(--border); color: var(--faint); font-size: 14px; } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; } .steps li { counter-increment: step; } .steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; font-weight: 700; } @media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } } /* ---------- faq ---------- */ .faq details { border-bottom: 1px solid var(--border); } .faq details:first-of-type { border-top: 1px solid var(--border); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 18px; font-weight: 400; line-height: 1; transition: transform 0.2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { max-width: 44em; padding: 0 52px 24px 0; color: var(--muted); } /* ---------- call to action ---------- */ .cta { position: relative; overflow: hidden; padding: 72px 32px; border-radius: 24px; background: var(--brand); color: #fff; text-align: center; } .cta::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.14), transparent); pointer-events: none; } .cta h2 { position: relative; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; } .cta p { position: relative; margin: 16px auto 32px; max-width: 32em; color: rgb(255 255 255 / 0.82); font-size: 1.125rem; } .cta .btn { position: relative; background: #fff; color: #115e59; } .cta .btn:hover { background: #f0fdfa; } .section-cta { padding: 88px 0; } @media (max-width: 640px) { .section-cta { padding: 56px 0; } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 14.5px; } .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; /* Block padding only: the inline padding comes from .wrap. */ padding-block: 36px 44px; } .foot .brand { font-size: 16px; color: var(--text); } .foot .brand img { width: 24px; height: 24px; } .foot p { margin-top: 6px; } .foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; } .foot a { text-decoration: none; } .foot nav a:hover, .foot p a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* ---------- legal pages ---------- */ /* * Privacy policy and terms. A title band, then a sticky contents column * beside a measure-limited text column on wide screens; one column on phones. * The text rules are scoped to .legal-body so they never leak into the aside. */ .legal-hero { position: relative; overflow: hidden; padding: 72px 0 56px; border-bottom: 1px solid var(--border); background: var(--surface); } .legal-hero::before { content: ""; position: absolute; inset: -60% -10% auto auto; width: 60%; height: 220%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 13%, transparent), transparent); pointer-events: none; } .legal-hero .wrap { position: relative; } .legal-hero h1 { margin: 0 0 14px; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.04em; } .legal-meta { color: var(--faint); font-size: 15px; } .legal-lead { max-width: 40em; margin-top: 22px; color: var(--muted); font-size: 1.15rem; line-height: 1.6; } .legal-lead strong { color: var(--text); font-weight: 600; } .legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 72px; padding-top: 56px; padding-bottom: 112px; } /* contents */ .legal-aside { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; } .legal-toc-title { margin-bottom: 12px; color: var(--faint); font-size: 12.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } .legal-toc ol { margin: 0; padding: 0; border-left: 1px solid var(--border); list-style: none; counter-reset: toc; } .legal-toc li { counter-increment: toc; } .legal-toc a { display: flex; gap: 10px; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--muted); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .legal-toc a::before { content: counter(toc); min-width: 1.3em; color: var(--faint); font-variant-numeric: tabular-nums; } .legal-toc a:hover { border-left-color: var(--brand); color: var(--text); } .legal-related { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 14.5px; } .legal-related p { color: var(--muted); font-size: 13.5px; } .legal-related > a { display: block; margin: 2px 0 14px; color: var(--brand-text); font-weight: 600; text-decoration: none; } .legal-related > a:hover { text-decoration: underline; text-underline-offset: 3px; } .legal-related p a { color: var(--text); text-underline-offset: 3px; } /* text */ .legal-body { max-width: 44rem; font-size: 16.5px; line-height: 1.7; } .legal-body h2 { display: flex; align-items: center; gap: 14px; margin: 56px 0 18px; padding-top: 44px; border-top: 1px solid var(--border); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.025em; scroll-margin-top: 72px; } .legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal-num { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-tint); color: var(--brand-text); font-size: 14px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; } .legal-body h3 { margin: 32px 0 8px; font-size: 1.1rem; font-weight: 650; letter-spacing: -0.015em; } .legal-body p, .legal-body ul, .legal-body ol { margin: 0 0 16px; } .legal-body ul, .legal-body ol { padding-left: 1.25em; } .legal-body li { margin: 8px 0; padding-left: 4px; } .legal-body li::marker { color: var(--brand-text); font-weight: 600; } .legal-body strong { font-weight: 600; } .legal-body a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal-body code { padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); font-size: 0.82em; white-space: nowrap; } .legal-party { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; margin: 8px 0 20px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 15.5px; line-height: 1.5; } .legal-party dt { color: var(--muted); } .legal-party dd { margin: 0; font-weight: 500; } .table-scroll { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); } .legal-body table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; } .legal-body th, .legal-body td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .legal-body th { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } .legal-body td + td { color: var(--muted); } .legal-body tr:last-child td { border-bottom: 0; } @media (max-width: 960px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; } .legal-aside { position: static; max-height: none; overflow: visible; } .legal-toc { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .legal-toc ol { columns: 2; column-gap: 28px; border-left: 0; } .legal-toc li { break-inside: avoid; } .legal-toc a { margin-left: 0; padding-left: 0; border-left: 0; } /* The footer carries the same links on narrow screens. */ .legal-related { display: none; } } @media (max-width: 640px) { .legal-hero { padding: 40px 0 32px; } .legal-lead { font-size: 1.05rem; } .legal-layout { padding-top: 28px; padding-bottom: 72px; } .legal-toc ol { columns: 1; } .legal-body { font-size: 16px; } .legal-body h2 { gap: 12px; margin-top: 40px; padding-top: 32px; font-size: 1.3rem; } .legal-num { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; } .legal-party { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 18px; } .legal-party dd { margin-bottom: 10px; } .legal-party dd:last-child { margin-bottom: 0; } } /* ---------- 404 ---------- */ .notfound { display: grid; place-items: center; min-height: calc(100vh - 65px); padding: 48px 24px; text-align: center; } .notfound h1 { margin: 18px 0 12px; font-size: clamp(2rem, 5vw, 3rem); } .notfound p { margin-bottom: 28px; color: var(--muted); } .notfound .hero-actions { justify-content: center; } /* ---------- phones ---------- */ /* * Kept together rather than scattered per section, so the phone layout can be * read in one place. Mostly density: the desktop spacing makes a phone scroll * forever, and cards with the icon above the title double their height. */ @media (max-width: 640px) { body { font-size: 16px; } .wrap { padding-inline: 20px; } .section { padding: 64px 0; } .section-head { margin-bottom: 32px; } .section-head p { margin-top: 14px; font-size: 1.05rem; } .kicker { margin-bottom: 10px; } /* hero */ .hero { padding: 40px 0 48px; } .hero h1 { margin: 18px 0 16px; } .lead { font-size: 1.075rem; } .hero-actions { margin-top: 28px; } .hero-actions .btn { flex: 1 1 auto; } .hero-grid { gap: 40px; } .chip { gap: 8px; padding: 7px 11px 7px 7px; border-radius: 10px; font-size: 12px; } .chip strong { font-size: 13px; } .chip i { width: 26px; height: 26px; border-radius: 7px; } /* facts strip: a left-aligned list instead of centred fragments */ .strip ul { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; font-size: 14.5px; } .strip li { align-items: flex-start; } .strip svg { flex: none; margin-top: 2px; } /* cards: icon or step number beside the title, not above it */ .features, .steps { gap: 10px; } .card { padding: 18px 18px 20px; } .features .card, .steps .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; } .features .icon { grid-row: span 2; width: 38px; height: 38px; margin-bottom: 0; } .steps li::before { grid-row: span 2; width: 32px; height: 32px; margin-bottom: 0; font-size: 14px; } .card h3 { align-self: center; margin-bottom: 4px; font-size: 16.5px; } .card p { font-size: 15px; line-height: 1.55; } /* reliability */ .split { gap: 40px; } .checks li { font-size: 15.5px; } .panel dl { gap: 10px 16px; padding: 16px; } /* faq */ .faq summary { padding: 18px 0; font-size: 16.5px; } .faq details p { padding: 0 0 20px; font-size: 15.5px; } /* call to action */ .section-cta { padding: 48px 0; } .cta { padding: 44px 22px; border-radius: 18px; } .cta h2 { font-size: 1.6rem; } .cta p { margin: 12px auto 24px; font-size: 1rem; } /* footer: roomier tap targets */ .foot { gap: 16px; padding-block: 28px 36px; } .foot nav a { padding: 8px 0; } }