:root{ --being:#d4b88c; --thinking:#e585a1; --relating:#ef4136; --collaborating:#ff7e2a; --acting:#661a30; --bg:#FAF7F5; --surface:#FFFFFF; --ink:#141210; --ink-soft:rgba(20,18,16,.66); --ink-faint:rgba(20,18,16,.45); --divider:rgba(20,18,16,.1); --max-w:672px; } :root[data-theme="dark"]{ --bg:#17130F; --surface:#221D18; --ink:#F5F0EA; --ink-soft:rgba(245,240,234,.68); --ink-faint:rgba(245,240,234,.46); --divider:rgba(255,255,255,.12); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Inter',system-ui,-apple-system,sans-serif; padding-inline:24px; background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; transition:background-color .3s ease, color .3s ease; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } a{ color:inherit; } button{ font-family:inherit; } button:focus-visible, a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; } /* Column width and centring only — the page gutter lives on , and deliberately NOT here. Three separate rules (footer, .doc, .site-nav) set a `padding` shorthand on a .wrap element; class specificity meant each one silently wiped the gutter out. Keeping it off .wrap makes that impossible, so vertical padding can be set freely below. */ .wrap{ max-width:var(--max-w); margin:0 auto; } /* ---------- Nav ---------- */ .site-nav{ display:flex; align-items:center; gap:10px; padding:28px 0 0; } /* Brand mark — the five dimension symbols above the name, as on the app's start screen (see apps/web/app: .brand-mini). */ .brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-decoration:none; color:inherit; } .brand-icons{ display:flex; align-items:center; gap:6px; } .brand-icons img{ width:18px; height:18px; object-fit:contain; } .brand-name{ font-weight:800; font-size:13px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; color:var(--ink); } /* ---------- Hero ---------- */ .hero{ padding:64px 0 56px; text-align:center; } .eyebrow{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 18px; } .hero h1{ font-size:clamp(30px,6vw,44px); font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:0 auto 20px; max-width:15ch; } .hero p.lede{ font-size:17px; color:var(--ink-soft); max-width:52ch; margin:0 auto 32px; } .cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; } .hero .cta-row{ justify-content:center; } .btn-primary{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); font-weight:700; font-size:15px; padding:14px 24px; border-radius:100px; text-decoration:none; border:none; cursor:pointer; } .shape-row{ display:flex; gap:8px; margin:36px 0 0; } .shape-row img{ width:34px; height:34px; } /* ---------- Sections ---------- */ section{ padding:52px 0; border-top:1px solid var(--divider); } .section-title{ font-size:22px; font-weight:800; margin:0 0 8px; letter-spacing:-.005em; } .section-sub{ font-size:15px; color:var(--ink-soft); margin:0 0 36px; max-width:52ch; } /* Card containers for the step / value grids. */ .step, .value{ background:var(--surface); border:1px solid var(--divider); border-radius:18px; padding:24px; } .steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } @media (max-width:560px){ .steps{ grid-template-columns:1fr; } } .step .step-num{ font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--ink-faint); margin:0 0 6px; } .step h3{ font-size:17px; font-weight:800; margin:0 0 6px; } .step p{ font-size:14.5px; color:var(--ink-soft); margin:0; } .values{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } @media (max-width:560px){ .values{ grid-template-columns:1fr; } } .value h3{ font-size:16px; font-weight:800; margin:0 0 6px; } .value p{ font-size:14.5px; color:var(--ink-soft); margin:0; } .not-list{ display:flex; flex-wrap:wrap; gap:10px 14px; font-size:14.5px; color:var(--ink-soft); padding:0; margin:0; list-style:none; } .not-list li:before{ content:"— "; color:var(--ink-faint); } .closing{ text-align:center; padding:56px 0 64px; border-top:1px solid var(--divider); } .closing p{ font-size:19px; font-weight:600; max-width:26ch; margin:0 auto 26px; } .closing .cta-row{ justify-content:center; } /* Light-only logo export — keep it on its own light ground in dark theme. */ .closing-logo{ max-width:400px; margin:0 auto 30px; background:#FAF7F5; border-radius:16px; padding:26px 30px; } .closing-logo img{ display:block; width:100%; height:auto; } /* ---------- Footer ---------- */ footer{ border-top:1px solid var(--divider); margin-top:40px; padding:36px 0 64px; } /* nav on the left, appearance toggle on the right, on one row */ .foot-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .footer-nav{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; font-weight:500; margin:0; } .footer-nav a{ text-decoration:none; color:var(--ink-soft); transition:color .2s; } .footer-nav a:hover{ color:var(--ink); } .theme-toggle{ display:flex; gap:6px; margin:0; } .theme-toggle button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--divider); background:var(--surface); color:var(--ink-soft); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .theme-toggle button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .copyright{ font-size:13px; color:var(--ink-faint); line-height:1.7; margin:0; } .legal-line{ font-size:12.5px; color:var(--ink-faint); line-height:1.7; margin:10px 0 0; } /* No underlines anywhere — links carry a slightly stronger ink instead, and firm up to full --ink on hover. */ .copyright a, .legal-line a{ color:var(--ink-soft); text-decoration:none; transition:color .2s; } .copyright a:hover, .legal-line a:hover{ color:var(--ink); } /* ---------- Simple pages (privacy/terms) ---------- */ .doc{ padding:56px 0 72px; } .doc h1{ font-size:28px; font-weight:800; margin:0 0 8px; } .doc .doc-note{ font-size:13px; color:var(--ink-faint); margin:0 0 32px; } .doc p{ font-size:15px; color:var(--ink-soft); max-width:60ch; } .doc a.back{ display:inline-block; margin-bottom:28px; font-size:13.5px; font-weight:700; text-decoration:none; color:var(--ink-soft); } .doc a.back:hover{ color:var(--ink); }