:root { --ink:#f7f8f7; --muted:#a9b2b2; --night:#0a0a0c; --panel:#14171a; --line:rgba(255,255,255,.12); --teal:#2dd4bf; --teal-deep:#0b766c; --max:1120px; font-family:Arial,sans-serif; color:var(--ink); background:var(--night); }
.nav nav { display:flex; align-items:center; gap:1.25rem; margin-left:auto; margin-right:1.5rem; } .nav nav a { color:var(--muted); text-decoration:none; font-size:.9rem; } .nav nav a:hover { color:var(--ink); }
.footer-brand { display:grid; gap:.65rem; max-width:20rem; } .footer-brand img { width:112px; height:auto; display:block; } .social { display:grid; gap:.65rem; justify-items:end; text-align:right; } .social > span { color:var(--muted); } .social-links { display:flex; gap:.85rem; flex-wrap:wrap; justify-content:flex-end; } .social-links a { display:inline-flex; align-items:center; text-decoration:none; color:var(--muted); } .social-links a:hover { color:var(--teal); } .social-links svg { width:1.35rem; height:1.35rem; fill:currentColor; } @media (max-width:700px) { .nav nav { gap:.75rem; margin:0 0 0 auto; } .nav nav a { font-size:.78rem; } .social { margin-top:1.5rem; justify-items:start; text-align:left; } .social-links { justify-content:flex-start; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(circle at 83% 8%,rgba(45,212,191,.13),transparent 28rem),var(--night); color:var(--ink); line-height:1.6; } a { color:inherit; } .nav, main, footer { width:min(calc(100% - 2rem),var(--max)); margin:auto; } .nav { min-height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; text-decoration:none; } .brand img { width:124px; height:auto; display:block; } .nav-cta,.button,form button { border:0; background:var(--teal); color:#042c2a; border-radius:.55rem; padding:.7rem 1rem; text-decoration:none; font-weight:800; cursor:pointer; } .nav-cta { position:fixed; right:1.25rem; top:50%; transform:translateY(-50%) rotate(-90deg); transform-origin:right center; z-index:10; border-radius:.65rem .65rem 0 0; box-shadow:0 12px 32px rgba(0,0,0,.35); padding:.82rem 1.25rem; } main { padding:3.5rem 0 5rem; } .crumb,.eyebrow { color:var(--teal); font-size:.75rem; letter-spacing:.13em; font-weight:800; text-transform:uppercase; } h1 { max-width:13ch; line-height:.98; letter-spacing:-.06em; font-size:clamp(2.7rem,7vw,5.9rem); margin:.5rem 0 1.5rem; } h2 { letter-spacing:-.035em; line-height:1.05; margin-top:2.4rem; } .lede,.direct-answer { max-width:62ch; color:#d7dddd; font-size:1.2rem; } .product-hero { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center; } figure { margin:0; padding:1.6rem; min-height:380px; display:grid; place-items:center; background:linear-gradient(140deg,rgba(45,212,191,.14),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:1.3rem; } figure img { max-height:300px; max-width:100%; object-fit:contain; } figcaption { color:var(--muted); font-size:.8rem; } .score-card,.locked,.waitlist,.sources,.hub-card { margin-top:2.5rem; padding:1.5rem; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:1rem; } .score-card strong { display:block; font-size:5rem; line-height:1; color:var(--teal); letter-spacing:-.08em; } .level { display:inline-block; text-transform:capitalize; padding:.15rem .5rem; background:#314b48; border-radius:99px; } .locked { overflow:hidden; position:relative; } .blur-lines { filter:blur(5px); display:grid; gap:.7rem; margin:1.2rem 0; } .blur-lines i { height:1rem; width:80%; background:linear-gradient(90deg,#1c8980,#2b3242); border-radius:99px; } .blur-lines i:nth-child(2) { width:60%; } .blur-lines i:nth-child(3) { width:94%; } .waitlist { background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(20,23,26,.9)); } form { max-width:34rem; display:grid; gap:1rem; } label { display:grid; gap:.35rem; font-weight:700; } input[type=email] { border:1px solid var(--line); border-radius:.45rem; padding:.8rem; background:#080b0d; color:var(--ink); font:inherit; } .consent { grid-template-columns:auto 1fr; font-size:.87rem; color:var(--muted); font-weight:400; } .honeypot { position:absolute; left:-9999px; } .form-status { min-height:1.4rem; margin:0; } .article { max-width:760px; } .article p { color:#d5dddd; } .sources li { margin:.7rem 0; } .related { margin-top:3rem; } .hub-hero { position:relative; min-height:470px; padding:3rem 0; } .hub-hero .lede { max-width:47ch; } .label-visual { position:absolute; right:4%; top:1.5rem; width:260px; height:330px; padding:2rem 1.5rem; border:1px solid rgba(45,212,191,.46); border-radius:1.3rem; background:linear-gradient(155deg,rgba(45,212,191,.22),rgba(20,23,26,.4)); transform:rotate(6deg); box-shadow:0 28px 80px rgba(0,0,0,.35); } .label-visual span,.label-visual i { display:block; height:.8rem; margin:.8rem 0; border-radius:99px; background:rgba(255,255,255,.8); } .label-visual i { width:74%; background:rgba(255,255,255,.2); } .label-visual i:nth-child(3) { width:91%; } .label-visual b { position:absolute; bottom:1.5rem; font-size:2.3rem; letter-spacing:-.08em; color:var(--teal); } .hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0 4rem; } .reading-card { border-top:1px solid var(--line); padding:1rem 0; } .reading-card span { color:var(--teal); font-size:.8rem; font-weight:800; } .reading-card h2 { margin:.6rem 0; font-size:1.25rem; } .reading-card p,.featured-guide aside { color:var(--muted); } .featured-guide { display:grid; grid-template-columns:1.4fr .6fr; gap:1.5rem; padding:2rem; border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,.035); } .featured-guide h2 { margin:.5rem 0 1rem; max-width:15ch; font-size:clamp(2rem,4vw,3.5rem); } .featured-guide aside { padding-left:1.5rem; border-left:1px solid var(--line); align-self:end; } footer { display:flex; gap:1rem; justify-content:space-between; padding:2rem 0 3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; } @media (max-width:700px) { .nav-cta { position:static; transform:none; font-size:.78rem; padding:.58rem .65rem; } .brand img { width:108px; } .product-hero,.featured-guide { grid-template-columns:1fr; gap:2rem; } figure { min-height:260px; order:-1; } h1 { font-size:clamp(2.5rem,13vw,4.1rem); } .hub-hero { min-height:auto; padding-bottom:2rem; } .label-visual { position:relative; inset:auto; margin:2rem 0 0 auto; transform:rotate(3deg); } .hub-grid { grid-template-columns:1fr; margin-bottom:2rem; } .featured-guide aside { padding:1rem 0 0; border-left:0; border-top:1px solid var(--line); } footer { display:block; } footer span { display:block; margin-top:.5rem; } }