/* ============================================================================= Sell in May — Website Design System (redesign) Translates the iOS/macOS app's visual language to the web. Faithful to the SHIPPING app: iOS system palette, blue accent, green/red signals, pure-black dark / white+gray light, large rounded cards, SF Pro type, monospace ticker. This stylesheet is production-ready: Claude Code can ship it as-is. - Light is the default. Dark applies via prefers-color-scheme OR a manual [data-theme="dark"] override on . [data-theme="light"] pins light. Persist the choice in localStorage (see implementation). ============================================================================= */ /* ---------- 1. TOKENS ------------------------------------------------------- */ :root { /* Brand (icon artwork only — never a UI surface color) */ --brand-coral: #FF7A59; --brand-coral-deep: #E8633F; --brand-navy: #14213D; /* Type families */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace; /* Type scale (web) */ --t-hero: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); /* 44 → 76 */ --t-h1: clamp(2rem, 1.4rem + 2.2vw, 3rem); /* 32 → 48 */ --t-h2: clamp(1.6rem, 1.3rem + 1.1vw, 2.125rem); /* 26 → 34 */ --t-h3: 1.3125rem; /* 21 */ --t-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); --t-body: 1.0625rem; /* 17 — matches app .body */ --t-callout: 1rem; /* 16 */ --t-small: 0.9375rem; /* 15 */ --t-eyebrow: 0.8125rem; /* 13 — uppercase section labels */ --t-caption: 0.75rem; /* 12 */ --lh-body: 1.6; --lh-tight: 1.15; /* Spacing (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* Radii — mirror the app's generous rounding */ --r-sm: 8px; --r-md: 12px; --r-cell: 16px; --r-card: 22px; --r-card-lg: 28px; --r-pill: 999px; /* Layout */ --maxw: 1200px; --maxw-prose: 760px; --nav-h: 60px; /* Signal palette — identical hues across modes (light values) */ --pos: #34C759; --pos-bg: rgba(52,199,89,0.12); --neg: #FF3B30; --neg-bg: rgba(255,59,48,0.12); --warn:#FF9500; --warn-bg: rgba(255,149,0,0.12); --info:#007AFF; --info-bg: rgba(0,122,255,0.12); --spec:#AF52DE; --spec-bg: rgba(175,82,222,0.12); /* ---- LIGHT surfaces (default) ---- */ --bg: #FFFFFF; --bg-tint: #F5F5F7; /* alternating page band */ --surface: #F2F2F7; /* card / well fill */ --surface-2: #FFFFFF; /* cell inside a tinted card */ --surface-hover:#EBEBF0; --separator: rgba(60,60,67,0.16); --separator-2: rgba(60,60,67,0.10); --fg: #000000; --fg-2: rgba(60,60,67,0.62); --fg-3: rgba(60,60,67,0.40); --accent: #007AFF; --accent-press: #0062CC; --accent-bg: #EAF5FF; /* AI banner / accent well */ --on-accent: #FFFFFF; --glass: rgba(255,255,255,0.72); --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06); --shadow-pop: 0 12px 40px rgba(0,0,0,0.12); --shadow-phone: 0 40px 90px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.12); --hero-glow: radial-gradient(60% 60% at 75% 25%, rgba(0,122,255,0.10), transparent 70%), radial-gradient(50% 50% at 20% 80%, rgba(255,122,89,0.08), transparent 70%); } /* ---- DARK surfaces ---- */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="dark"], @media (prefers-color-scheme: dark) {} :root[data-theme="dark"] { --pos: #30D158; --pos-bg: rgba(48,209,88,0.16); --neg: #FF453A; --neg-bg: rgba(255,69,58,0.16); --warn:#FF9F0A; --warn-bg: rgba(255,159,10,0.16); --info:#0A84FF; --info-bg: rgba(10,132,255,0.16); --spec:#BF5AF2; --spec-bg: rgba(191,90,242,0.16); --bg: #000000; --bg-tint: #0A0A0C; --surface: #1C1C1E; --surface-2: #2C2C2E; --surface-hover:#262629; --separator: rgba(84,84,88,0.55); --separator-2: rgba(84,84,88,0.32); --fg: #FFFFFF; --fg-2: rgba(235,235,245,0.60); --fg-3: rgba(235,235,245,0.32); --accent: #0A84FF; --accent-press: #409CFF; --accent-bg: rgba(10,132,255,0.14); --on-accent: #FFFFFF; --glass: rgba(20,20,22,0.66); --shadow-card: none; --shadow-pop: 0 16px 50px rgba(0,0,0,0.6); --shadow-phone: 0 50px 120px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); --hero-glow: radial-gradient(55% 55% at 78% 18%, rgba(10,132,255,0.20), transparent 70%), radial-gradient(50% 50% at 12% 85%, rgba(255,122,89,0.14), transparent 70%); } /* Auto (no explicit data-theme): follow the OS */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --pos:#30D158; --pos-bg:rgba(48,209,88,0.16); --neg:#FF453A; --neg-bg:rgba(255,69,58,0.16); --warn:#FF9F0A; --warn-bg:rgba(255,159,10,0.16); --info:#0A84FF; --info-bg:rgba(10,132,255,0.16); --spec:#BF5AF2; --spec-bg:rgba(191,90,242,0.16); --bg:#000000; --bg-tint:#0A0A0C; --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-hover:#262629; --separator:rgba(84,84,88,0.55); --separator-2:rgba(84,84,88,0.32); --fg:#FFFFFF; --fg-2:rgba(235,235,245,0.60); --fg-3:rgba(235,235,245,0.32); --accent:#0A84FF; --accent-press:#409CFF; --accent-bg:rgba(10,132,255,0.14); --glass:rgba(20,20,22,0.66); --shadow-card:none; --shadow-pop:0 16px 50px rgba(0,0,0,0.6); --shadow-phone:0 50px 120px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); --hero-glow: radial-gradient(55% 55% at 78% 18%, rgba(10,132,255,0.20), transparent 70%), radial-gradient(50% 50% at 12% 85%, rgba(255,122,89,0.14), transparent 70%); } } /* ---------- 2. BASE -------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.3s ease, color 0.3s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--on-accent); } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); } .prose-wrap { max-width: var(--maxw-prose); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); } .section { padding-block: clamp(56px, 8vw, 112px); } .section--tint { background: var(--bg-tint); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); } .text-2 { color: var(--fg-2); } .pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .accent-fg { color: var(--accent); } /* ---------- 3. TYPOGRAPHIC ROLES ------------------------------------------ */ h1,h2,h3,h4 { line-height: var(--lh-tight); letter-spacing: -0.02em; font-weight: 700; } .hero-title { font-size: var(--t-hero); letter-spacing: -0.035em; } .h1 { font-size: var(--t-h1); } .h2 { font-size: var(--t-h2); } .h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; } .lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); font-weight: 400; } /* ---------- 4. NAV --------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--separator-2); } .nav__inner { display: flex; align-items: center; gap: var(--s-5); width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--fg); } .brand:hover { text-decoration: none; } .brand img { width: 28px; height: 28px; border-radius: 7px; } .nav__links { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; } .nav__links a { color: var(--fg-2); font-size: var(--t-small); font-weight: 500; } .nav__links a:hover { color: var(--fg); text-decoration: none; } .nav__tools { display: flex; align-items: center; gap: var(--s-3); } /* theme + lang controls */ .icon-btn { width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--separator); background: var(--surface); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--surface-hover); } .icon-btn svg { width: 18px; height: 18px; } /* ---------- 5. BUTTONS ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font: inherit; font-weight: 600; font-size: var(--t-callout); cursor: pointer; padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid transparent; transition: background 0.18s ease, transform 0.08s ease, border-color 0.18s; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-press); } .btn--ghost { background: var(--surface); color: var(--fg); border-color: var(--separator); } .btn--ghost:hover { background: var(--surface-hover); } .btn svg { width: 18px; height: 18px; } .appstore-badge img { height: 52px; width: auto; } /* ---------- 6. PILLS / BADGES --------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--t-eyebrow); font-weight: 600; background: var(--surface); color: var(--fg); border: 1px solid var(--separator); } .pill svg { width: 14px; height: 14px; } .pill--pos { background: var(--pos-bg); color: var(--pos); border-color: transparent; } .pill--neg { background: var(--neg-bg); color: var(--neg); border-color: transparent; } .pill--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; } .pill--info { background: var(--info-bg); color: var(--info); border-color: transparent; } .pill--spec { background: var(--spec-bg); color: var(--spec); border-color: transparent; } /* ---------- 7. CARD + FEATURE GRID ---------------------------------------- */ .card { background: var(--surface); border-radius: var(--r-card); padding: var(--s-6); box-shadow: var(--shadow-card); border: 1px solid var(--separator-2); } :root[data-theme="dark"] .card { border-color: transparent; } .grid { display: grid; gap: var(--s-5); } .grid--features { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .feature { background: var(--surface); border-radius: var(--r-card); padding: var(--s-6); border: 1px solid var(--separator-2); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; } :root[data-theme="dark"] .feature { border-color: transparent; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); } .feature__icon { width: 44px; height: 44px; border-radius: var(--r-md); margin-bottom: var(--s-4); display: grid; place-items: center; background: var(--info-bg); color: var(--accent); } .feature__icon svg { width: 22px; height: 22px; } .feature__icon.is-pos { background: var(--pos-bg); color: var(--pos); } .feature__icon.is-neg { background: var(--neg-bg); color: var(--neg); } .feature__icon.is-warn { background: var(--warn-bg); color: var(--warn); } .feature__icon.is-spec { background: var(--spec-bg); color: var(--spec); } .feature h3 { font-size: var(--t-h3); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; } .feature p { color: var(--fg-2); font-size: var(--t-callout); } /* pillars */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } .pillar__k { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; } .pillar h3 { font-size: var(--t-h3); margin: 6px 0; } .pillar p { color: var(--fg-2); font-size: var(--t-callout); } /* ---------- 8. HERO -------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 104px); } .hero__copy { max-width: 560px; } .hero__title { margin: var(--s-4) 0; } .hero__cta { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-8); } .hero__note { display: flex; align-items: center; gap: 8px; margin-top: var(--s-5); color: var(--fg-2); font-size: var(--t-small); } .hero__note svg { width: 16px; height: 16px; color: var(--pos); } .hero__art { display: grid; place-items: center; } /* phone mockup */ .phone { position: relative; width: clamp(240px, 26vw, 320px); aspect-ratio: 1206 / 2622; border-radius: 46px; padding: 11px; background: #0b0b0d; box-shadow: var(--shadow-phone); } :root[data-theme="light"] .phone, :root:not([data-theme="dark"]) .phone { background: #1a1a1c; } .phone__screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg); } .phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 34%; height: 26px; background: #000; border-radius: 0 0 16px 16px; z-index: 2; } /* show the screenshot that matches the active theme */ .app-shot--light { display: block; } .app-shot--dark { display: none; } :root[data-theme="dark"] .app-shot--light { display: none; } :root[data-theme="dark"] .app-shot--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .app-shot--light { display: none; } :root:not([data-theme="light"]):not([data-theme="dark"]) .app-shot--dark { display: block; } } /* ---------- 9. TICKER TAPE (brand motif from app) ------------------------- */ .ticker { display: flex; align-items: center; height: 40px; overflow: hidden; border-block: 1px solid var(--separator-2); background: var(--surface); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ticker__track { display: flex; gap: var(--s-6); white-space: nowrap; padding-left: var(--s-6); animation: ticker 48s linear infinite; } @keyframes ticker { to { transform: translateX(-50%); } } .ticker__item { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-mono); font-size: 0.8125rem; } .ticker__item .s { color: var(--fg-2); font-weight: 600; } .ticker__item .p { color: var(--fg); } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } } /* ---------- 10. PRIVACY BANNER -------------------------------------------- */ .privacy-banner { display: flex; gap: var(--s-5); align-items: center; background: var(--pos-bg); border: 1px solid color-mix(in srgb, var(--pos) 30%, transparent); border-radius: var(--r-card-lg); padding: clamp(24px, 4vw, 40px); } .privacy-banner__icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--r-cell); background: var(--pos); color: #fff; display: grid; place-items: center; } .privacy-banner__icon svg { width: 30px; height: 30px; } .privacy-banner h3 { font-size: var(--t-h3); color: var(--pos); margin-bottom: 4px; } .privacy-banner p { color: var(--fg-2); } /* ---------- 11. DOWNLOAD --------------------------------------------------- */ .download { display: grid; grid-template-columns: 1fr auto; gap: var(--s-10); align-items: center; background: var(--surface); border-radius: var(--r-card-lg); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--separator-2); } :root[data-theme="dark"] .download { border-color: transparent; } .qr { text-align: center; } .qr img { width: 148px; height: 148px; border-radius: var(--r-md); background: #fff; padding: 10px; } .qr p { font-size: var(--t-caption); color: var(--fg-2); margin-top: 8px; } /* ---------- 11b. FAMILY CROSS-PROMO --------------------------------------- */ .crosspromo { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); background: linear-gradient(135deg, #1E3C72 0%, #2A5298 100%); border-radius: var(--r-card-lg); padding: clamp(28px, 4vw, 44px); color: #fff; box-shadow: var(--shadow-pop); transition: transform 0.2s ease, box-shadow 0.2s ease; } .crosspromo:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-phone); } .crosspromo__icon { flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--r-cell); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: #fff; } .crosspromo__icon svg { width: 38px; height: 38px; } .crosspromo__body { flex: 1 1 auto; min-width: 0; } .crosspromo__eyebrow { display: block; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.60); font-family: var(--font-mono); } .crosspromo__title { font-size: var(--t-h3); font-weight: 700; margin: 10px 0 10px; color: #fff; letter-spacing: -0.01em; } .crosspromo__title em { font-style: italic; font-weight: 600; } .crosspromo__desc { color: rgba(255,255,255,0.80); font-size: var(--t-callout); max-width: 58ch; margin: 0; } .crosspromo__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #14213D; font-weight: 600; font-size: var(--t-callout); padding: 13px 24px; border-radius: var(--r-pill); white-space: nowrap; transition: background 0.18s ease, transform 0.08s ease; } .crosspromo:hover .crosspromo__cta { background: rgba(255,255,255,0.88); } .crosspromo__cta svg { width: 18px; height: 18px; } @media (max-width: 820px) { .crosspromo { flex-wrap: wrap; } .crosspromo__body { flex-basis: calc(100% - 116px); } .crosspromo__cta { width: 100%; justify-content: center; margin-top: var(--s-2); } } /* ---------- 12. FOOTER ----------------------------------------------------- */ .footer { border-top: 1px solid var(--separator-2); padding-block: var(--s-12) var(--s-10); } .footer__top { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between; } .footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); } .footer__links a { color: var(--fg-2); font-size: var(--t-small); } .footer__links a:hover { color: var(--fg); } .footer__disclaimer { color: var(--fg-3); font-size: var(--t-caption); margin-top: var(--s-6); max-width: 720px; } /* ---------- 13. DOC / LONG-FORM PAGES ------------------------------------- */ .page-head { padding-block: clamp(40px, 6vw, 72px) var(--s-8); } .doc-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: clamp(28px, 5vw, 56px); align-items: start; padding-bottom: var(--s-24); } .toc { position: sticky; top: calc(var(--nav-h) + 20px); font-size: var(--t-small); } .toc h4 { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); margin-bottom: var(--s-3); } .toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; } .toc a { display: block; color: var(--fg-2); padding: 6px 12px; border-radius: var(--r-sm); border-left: 2px solid transparent; } .toc a:hover { color: var(--fg); background: var(--surface); text-decoration: none; } .toc a.is-active { color: var(--accent); border-left-color: var(--accent); } .prose { font-size: var(--t-body); } .prose > section { scroll-margin-top: calc(var(--nav-h) + 24px); } .prose h2 { font-size: var(--t-h2); margin: var(--s-12) 0 var(--s-4); padding-top: var(--s-2); } .prose section:first-child h2 { margin-top: 0; } .prose h3 { font-size: var(--t-h3); font-weight: 600; margin: var(--s-6) 0 var(--s-3); } .prose p { margin-bottom: var(--s-4); color: var(--fg); } .prose ul, .prose ol { margin: 0 0 var(--s-4) var(--s-5); } .prose li { margin-bottom: 6px; color: var(--fg); } .prose li::marker { color: var(--fg-3); } .prose strong { font-weight: 600; } .prose a { font-weight: 500; } /* check-bullet list */ .check-list { list-style: none; margin-left: 0 !important; } .check-list li { position: relative; padding-left: 30px; } .check-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--pos-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2334C759' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* callouts — map old colored boxes to signal system */ .callout { border-radius: var(--r-cell); padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; border-left: 3px solid var(--accent); background: var(--info-bg); } .callout h4 { font-size: var(--t-callout); font-weight: 600; margin-bottom: 4px; } .callout p:last-child { margin-bottom: 0; } .callout--tip, .callout--success { border-color: var(--pos); background: var(--pos-bg); } .callout--warn { border-color: var(--warn); background: var(--warn-bg); } .callout--info { border-color: var(--info); background: var(--info-bg); } .example { font-family: var(--font-mono); font-size: var(--t-small); background: var(--surface); border: 1px solid var(--separator-2); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; line-height: 1.7; } /* FAQ accordion */ .faq { border-top: 1px solid var(--separator-2); } .faq__item { border-bottom: 1px solid var(--separator-2); } .faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--fg); padding: var(--s-5) 0; display: flex; align-items: center; gap: var(--s-4); } .faq__q .chev { margin-left: auto; color: var(--fg-3); transition: transform 0.2s ease; flex: 0 0 auto; } .faq__item[open] .chev { transform: rotate(180deg); } .faq__a { padding-bottom: var(--s-5); color: var(--fg-2); } details.faq__item summary { list-style: none; } details.faq__item summary::-webkit-details-marker { display: none; } /* ---------- 14. RESPONSIVE ------------------------------------------------- */ @media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; } .pillars, .grid--3 { grid-template-columns: 1fr; } .doc-layout { grid-template-columns: 1fr; } .toc { position: static; order: -1; background: var(--surface); border-radius: var(--r-card); padding: var(--s-5); } .download { grid-template-columns: 1fr; text-align: center; } .qr { margin-inline: auto; } } @media (max-width: 640px) { .nav__links { display: none; } .grid--features, .grid--2 { grid-template-columns: 1fr; } .privacy-banner { flex-direction: column; text-align: center; } }