:root{ --bg:#F7F7F9; --ink:#0B0B0F; --muted:#5B5B66; --line:rgba(0,0,0,.09); --card:#FFFFFF; --accent:#0A6CFF; --accent-soft:rgba(10,108,255,.08); --shadow:0 1px 3px rgba(0,0,0,.05),0 12px 32px -12px rgba(0,0,0,.12); } @media (prefers-color-scheme:dark){ :root{ --bg:#08080B; --ink:#F2F2F5; --muted:#9A9AA6; --line:rgba(255,255,255,.10); --card:#111116; --accent:#4D93FF; --accent-soft:rgba(77,147,255,.12); --shadow:0 1px 3px rgba(0,0,0,.4),0 20px 48px -16px rgba(0,0,0,.7); } } *{box-sizing:border-box} /* The decorative glow behind the hero is 760px wide and deliberately bleeds past its box. body{overflow-x:hidden} does NOT clip that — the overflow lands on — so Chrome widened the layout viewport to 577px to fit it and the whole RTL page rendered shifted, with the right-hand side off screen. Clipping on the root is the fix; .hero clips too so the glow cannot escape at all. */ html{-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Rubik,Assistant,system-ui,sans-serif; line-height:1.65; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} h1,h2,h3{line-height:1.15;letter-spacing:-.03em;margin:0} /* ── top bar ── */ .nav{position:sticky;top:0;z-index:20;backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);background:color-mix(in srgb,var(--bg) 78%,transparent); border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:14px;height:60px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px; text-decoration:none;letter-spacing:-.02em;min-height:44px} .brand img{width:28px;height:28px;border-radius:7px} .nav nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px} /* Every tappable thing on this page is at least 44pt tall, drawn or not. */ .nav nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:500; padding:0 11px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center} .nav nav a:hover{color:var(--ink);background:var(--accent-soft)} .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--accent);color:#fff!important;text-decoration:none;font-weight:650; padding:12px 22px;border-radius:13px;font-size:15px;min-height:44px; box-shadow:0 6px 20px -6px color-mix(in srgb,var(--accent) 60%,transparent)} .cta.sm{padding:0 16px;font-size:14px;min-height:44px;box-shadow:none} .cta.ghost{background:transparent;color:var(--ink)!important;border:1.5px solid var(--line);box-shadow:none} @media (max-width:640px){ .nav nav a.hide-s{display:none} } /* ── hero ── */ .hero{padding:76px 0 30px;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset-inline-start:50%;top:-180px;width:760px;height:420px; transform:translateX(50%);pointer-events:none; background:radial-gradient(closest-side,var(--accent-soft),transparent 72%)} .eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--accent); background:var(--accent-soft);padding:6px 13px;border-radius:99px;margin-bottom:20px} .hero h1{font-size:clamp(34px,6.4vw,60px);font-weight:760;max-width:14ch} .hero .sub{font-size:clamp(17px,2.4vw,21px);color:var(--muted);max-width:52ch;margin:20px 0 30px} .hero-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .note{font-size:13.5px;color:var(--muted);margin-top:16px} /* ── the four pillars ── */ .sec{padding:64px 0;border-top:1px solid var(--line)} .sec-h{font-size:clamp(26px,4vw,40px);font-weight:730;max-width:20ch} .sec-s{color:var(--muted);font-size:17px;max-width:58ch;margin-top:14px} .grid{display:grid;gap:16px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))} .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)} .card .n{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.08em;margin-bottom:12px} .card h3{font-size:20px;font-weight:680;margin-bottom:9px} .card p{margin:0;color:var(--muted);font-size:15.5px} .card ul{margin:14px 0 0;padding-inline-start:19px;color:var(--muted);font-size:14.5px} .card li{margin:5px 0} /* ── the taste: a real flow ── */ .flow{display:grid;gap:14px;margin-top:34px} .step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px; display:flex;gap:18px;align-items:flex-start;box-shadow:var(--shadow)} .step .k{flex-shrink:0;width:34px;height:34px;border-radius:11px;background:var(--accent-soft); color:var(--accent);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center} .step h3{font-size:17.5px;font-weight:660;margin-bottom:5px} .step p{margin:0;color:var(--muted);font-size:15.5px} .quote{margin-top:10px;padding:11px 15px;border-radius:12px;background:var(--accent-soft); font-size:15px;color:var(--ink);font-weight:520} /* ── who ── */ .who{display:grid;gap:16px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} .who div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)} .who h3{font-size:17.5px;font-weight:660;margin-bottom:8px} .who p{margin:0;color:var(--muted);font-size:15px} /* ── faq ── */ details{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:8px 20px 10px;margin-top:11px;box-shadow:var(--shadow)} details summary{cursor:pointer;font-weight:620;font-size:16.5px;list-style:none; display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:44px} details summary::-webkit-details-marker{display:none} details summary::after{content:"+";color:var(--accent);font-weight:600;font-size:22px;flex-shrink:0;line-height:1} details[open] summary::after{content:"–"} details p{margin:12px 0 2px;color:var(--muted);font-size:15.5px} /* ── close ── */ .end{text-align:center;padding:78px 0} .end h2{font-size:clamp(28px,5vw,44px);font-weight:740;margin-bottom:16px} .end p{color:var(--muted);font-size:17.5px;max-width:46ch;margin:0 auto 28px} footer{border-top:1px solid var(--line);padding:32px 0 46px;color:var(--muted);font-size:14px} footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center} footer a{color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center} footer a:hover{color:var(--ink)} footer .c{margin-inline-start:auto} /* ── shared by every marketing page ─────────────────────────────────────── */ .crumb{font-size:13px;color:var(--muted);padding:18px 0 0} .crumb a{text-decoration:none} .crumb a:hover{color:var(--ink)} .lead{font-size:clamp(17px,2.3vw,20px);color:var(--muted);max-width:56ch;margin:20px 0 0} .sec p{font-size:16.5px;color:var(--muted);max-width:62ch} .sec p b,.sec p strong{color:var(--ink);font-weight:640} .shot{margin:34px 0 0;display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start} .shot figure{margin:0;flex:1 1 260px;max-width:320px} .shot img{width:100%;height:auto;display:block;border-radius:22px; border:1px solid var(--line);box-shadow:var(--shadow)} .shot figcaption{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5} table.cmp{width:100%;border-collapse:collapse;margin-top:28px;font-size:15px} table.cmp th,table.cmp td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:start; vertical-align:top} table.cmp th{font-weight:660;color:var(--ink);font-size:14px} table.cmp td{color:var(--muted)} table.cmp td:first-child{color:var(--ink);font-weight:560} .tw{overflow-x:auto;-webkit-overflow-scrolling:touch} .more{display:grid;gap:12px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} .more a{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px 19px; text-decoration:none;box-shadow:var(--shadow);display:block;min-height:44px} .more a b{display:block;font-size:16px;font-weight:640;margin-bottom:5px} .more a span{font-size:14px;color:var(--muted)} .more a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} /* The breadcrumb "Tododo ←" and the audience-card headings are links, and a link is a touch target. Inline text cannot take a min-height without looking wrong, so it keeps its size and grows an invisible 44pt box. */ .crumb a{position:relative;display:inline-block;padding:4px 0} .crumb a::after{content:"";position:absolute;inset:-14px -6px} .who h3 a{position:relative;display:inline-block;padding:5px 0} .who h3 a::after{content:"";position:absolute;inset:-13px -6px} /* the 404 headline uses h1 for structure but wants the closing-section size */ .end h1{font-size:clamp(28px,5vw,44px);font-weight:740;margin-bottom:16px;line-height:1.15;letter-spacing:-.03em} /* an article says when it was written; a product page does not */ .byline{font-size:14px;color:var(--muted);margin:14px 0 0} .sec ul.plain{margin:16px 0 0;padding-inline-start:20px;color:var(--muted);font-size:16.5px;max-width:62ch} .sec ul.plain li{margin:8px 0} .sec ul.plain li b{color:var(--ink);font-weight:640} .note-box{margin-top:26px;padding:16px 19px;border-radius:14px;background:var(--accent-soft); font-size:15px;color:var(--muted);max-width:62ch;line-height:1.6} .note-box b{color:var(--ink)} /* The article's own artwork. Generated per slug, so no two look alike and none of it is a stock photograph of somebody else's office. */ .hero-art{display:block;width:100%;height:auto;max-width:760px;border-radius:20px; margin:26px 0 0;border:1px solid var(--line);box-shadow:var(--shadow)}