/* Read vs Listen shared stylesheet The Quiet Dark system, in daylight. Every value below is the light-mode column of brand-guidelines.md, so the site and the app are one brand rather than two. Quiet by default: flat surfaces, hairline borders, one accent, no gradient washes, no glow, no stacked shadows. The dark-mode brights survive as tinted fills and inside dark bands. Font loading sits in each page's as preconnect plus stylesheet. A CSS @import here would block parsing on a second round trip before the fonts request even starts. */ :root{ /* Read vs Listen, light. Values taken from brand-guidelines.md (Quiet Dark), light-mode column, so the site and the app run on one token set seen in daylight rather than two separate palettes. */ /* surfaces */ --paper:#f7f5f9; --paper-2:#ffffff; --chip:#eeebf4; --raise:#e2ddeb; /* text ramp */ --ink:#17131f; --body:#332c42; --body-2:#443c55; --muted:#5c5470; --faint:#6c6482; /* lines */ --line-a:rgba(23,19,31,.07); --line:rgba(23,19,31,.11); --line-c:rgba(23,19,31,.15); /* accent and verdict */ --berry:#6e3fcc; --berry-deep:#5a2fb0; --read:#3b55c6; --listen:#be4179; --either:#6e3fcc; --good:#15774d; --on-acc:#ffffff; /* elevation: depth comes from surface value plus a hairline, not shadow */ --lift:0 1px 2px rgba(48,38,68,.05); /* the dark-mode brights, for tinted fills and dark bands */ --berry-lit:#b794f6; --read-lit:#8fa7f7; --listen-lit:#f49ac2; --either-lit:#b794f6; /* dark band */ --dark:#131019; --dark-surface:#1b1725; --dark-ink:#f1edf7; --dark-muted:#9b93a8; --dark-faint:#8c84a0; --dark-line:rgba(255,255,255,.09); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:'Instrument Sans','Hanken Grotesk',system-ui,-apple-system,sans-serif; color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; background:var(--paper); min-height:100vh; display:flex; flex-direction:column; } .serif{font-family:'Instrument Serif','Newsreader',Georgia,serif} img{max-width:100%;display:block} a{color:var(--berry)} a:hover{text-decoration:underline} a{text-decoration:none} ::selection{background:rgba(183,148,246,.36)} .wrap{width:100%;max-width:960px;margin:0 auto;padding:0 20px} .narrow{max-width:720px} /* ---------- Skip link ---------- */ .skip{position:absolute;left:-9999px;top:0;background:var(--berry);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;z-index:100} .skip:focus{left:0} /* ---------- Header ---------- */ .site-header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50; background:rgba(247,245,249,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;max-width:960px;margin:0 auto} .wordmark{display:inline-flex;align-items:center;gap:10px; font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:22px;font-weight:400; letter-spacing:-.005em;color:var(--ink);white-space:nowrap} .wordmark:hover{text-decoration:none} .mark{width:19px;height:19px;border-radius:50%;flex-shrink:0; background:linear-gradient(90deg,var(--read) 50%,var(--listen) 50%)} .wordmark i{font-style:italic;color:var(--berry)} /* Transitional. Pages that have not yet had the site-wide pass still carry the old three-span wordmark and no mark. These rules keep them looking right. Safe to delete once every page carries . */ .wordmark .w-read{color:var(--read)} .wordmark .w-vs{color:var(--berry);font-style:italic;padding:0 3px} .wordmark .w-listen{color:var(--listen)} .nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .nav a{font-size:14px;font-weight:600;color:var(--muted);padding:7px 11px;border-radius:9px} .nav a:hover{color:var(--ink);background:rgba(110,63,204,.08);text-decoration:none} .nav a.on{color:var(--berry)} .nav a.cta{background:var(--berry);color:#fff;padding:8px 15px} .nav a.cta:hover{background:var(--berry-deep);color:#fff} /* ---------- Layout ---------- */ main{flex:1;padding:44px 0 20px} .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--berry);margin-bottom:12px} h1{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-weight:500;font-size:clamp(32px,6vw,50px);line-height:1.06;letter-spacing:-.015em} h2{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-weight:500;font-size:clamp(24px,4vw,32px);line-height:1.15;margin-top:44px;margin-bottom:14px} h3{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-weight:600;font-size:20px;margin-top:30px;margin-bottom:10px} p{margin-bottom:16px;color:var(--body)} .lede{font-size:18px;color:var(--muted);max-width:640px;margin-top:16px} ul,ol{margin:0 0 18px 22px;color:var(--body)} li{margin-bottom:8px} hr{border:none;border-top:1px solid var(--line);margin:40px 0} .section-sub{color:var(--muted);font-size:15px;margin:-4px 0 22px} /* ---------- Buttons ---------- */ .btn{display:inline-block;font-weight:600;font-size:15.5px;padding:13px 24px;border-radius:14px;border:1px solid transparent;cursor:pointer;font-family:inherit} .btn-primary{background:var(--berry);color:var(--on-acc);box-shadow:none} .btn-primary:hover{background:var(--berry-deep);text-decoration:none;color:var(--on-acc)} .btn-big{font-size:16.5px;padding:15px 28px} /* ---------- Hero ---------- */ .hero{display:flex;align-items:center;gap:52px;flex-wrap:wrap;padding:18px 0 10px} .hero-text{flex:1 1 360px;min-width:300px} .hero-shot{flex:0 1 300px;display:flex;justify-content:center} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .hero-note{font-size:13px;color:var(--faint);margin-top:14px} /* ---------- Phone frame ---------- */ .phone{border-radius:28px;padding:9px;background:#211b2d;border:1px solid #312a42; box-shadow:0 18px 44px rgba(48,38,68,.16);max-width:300px} .phone img{border-radius:20px;width:100%;height:auto;background:#1b1725} /* ---------- Dark bands ---------- Unused since 11 August: every band on the site is now .lightband. Kept in case a dark treatment is wanted again. */ .darkband{ background:var(--dark); color:var(--dark-ink);border-radius:24px;padding:34px;margin:48px 0; box-shadow:none} .darkband p{color:#ddd6e8} .darkband h2,.darkband h3{color:var(--dark-ink)} .darkband .eyebrow{color:var(--berry-lit)} .darkband a{color:var(--berry-lit)} .darkband .btn-primary{background:var(--berry-lit);color:#1b1428;box-shadow:none} .darkband .btn-primary:hover{color:#1b1428} /* ---------- The two-column verdict explainer ---------- */ .two-col{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px} .col{flex:1;min-width:280px;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:22px; box-shadow:var(--lift)} .col.read{border-color:rgba(59,85,198,.30)} .col.listen{border-color:rgba(190,65,121,.28)} .col h3{margin-top:0;font-size:22px} .col.read h3{color:var(--read)} .col.listen h3{color:var(--listen)} .col ul{margin-left:18px;margin-bottom:0;font-size:14.5px} /* ---------- Cards ---------- */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:24px} .pcard{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column; box-shadow:var(--lift)} .pcard:hover{border-color:rgba(110,63,204,.40);box-shadow:0 6px 18px rgba(48,38,68,.09)} .pcard a{color:inherit} .pcard a:hover{text-decoration:none} .pcard .ptitle{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:19px;font-weight:500;line-height:1.22;margin-bottom:6px} .pcard .pmeta{font-size:12.5px;color:var(--faint);margin-bottom:10px} .pcard .pdesc{font-size:14px;color:var(--body-2);line-height:1.5;flex:1} .pcard .pmore{font-size:13.5px;font-weight:600;color:var(--berry);margin-top:14px} .darkband .pcard{background:var(--dark-surface);border-color:var(--dark-line)} .darkband .pcard .pdesc{color:#c7c0d4} .darkband .pcard .pmeta{color:var(--dark-faint)} .darkband .pcard .pmore{color:var(--berry-lit)} /* ---------- Verdict pill ---------- */ .pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid;margin-bottom:12px} .pill .dot{width:8px;height:8px;border-radius:50%} .pill.read{color:var(--read);background:rgba(59,85,198,.09);border-color:rgba(59,85,198,.32)} .pill.read .dot{background:var(--read)} .pill.listen{color:var(--listen);background:rgba(190,65,121,.08);border-color:rgba(190,65,121,.30)} .pill.listen .dot{background:var(--listen)} .pill.either{color:var(--either);background:rgba(110,63,204,.09);border-color:rgba(110,63,204,.30)} .pill.either .dot{background:var(--either)} .darkband .pill.read{color:var(--read-lit);background:rgba(143,167,247,.15);border-color:rgba(143,167,247,.42)} .darkband .pill.read .dot{background:var(--read-lit)} .darkband .pill.listen{color:var(--listen-lit);background:rgba(244,154,194,.15);border-color:rgba(244,154,194,.42)} .darkband .pill.listen .dot{background:var(--listen-lit)} .darkband .pill.either{color:var(--either-lit);background:rgba(183,148,246,.16);border-color:rgba(183,148,246,.42)} .darkband .pill.either .dot{background:var(--either-lit)} /* ---------- Verdict box on an article ---------- */ .verdict-box{border-radius:18px;padding:22px 24px;margin:26px 0 30px;border:1px solid} .verdict-box.read{background:rgba(59,85,198,.06);border-color:rgba(59,85,198,.28)} .verdict-box.listen{background:rgba(190,65,121,.055);border-color:rgba(190,65,121,.26)} .verdict-box.either{background:rgba(110,63,204,.06);border-color:rgba(110,63,204,.26)} .verdict-box .vlabel{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .verdict-box .vhead{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:27px;font-weight:600;line-height:1.12;margin-bottom:8px} .verdict-box.read .vhead{color:var(--read)} .verdict-box.listen .vhead{color:var(--listen)} .verdict-box.either .vhead{color:var(--either)} .verdict-box p:last-child{margin-bottom:0} /* ---------- Book fact strip ---------- */ .fact{font-size:12.5px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:7px 12px} .fact b{color:var(--ink);font-weight:600} /* ---------- Affiliate buttons ---------- */ .buybox{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:20px;margin:30px 0; box-shadow:var(--lift)} .buybox .bhead{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:19px;font-weight:600;margin-bottom:4px} .buybox .bnote{font-size:13px;color:var(--muted);margin-bottom:14px} .buyrow{display:flex;gap:10px;flex-wrap:wrap} .buybtn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;padding:12px 18px;border-radius:12px;border:1px solid} .buybtn:hover{text-decoration:none} .buybtn.k{color:var(--read);background:rgba(59,85,198,.08);border-color:rgba(59,85,198,.34)} .buybtn.k:hover{background:rgba(59,85,198,.14)} .buybtn.a{color:var(--listen);background:rgba(190,65,121,.07);border-color:rgba(190,65,121,.32)} .buybtn.a:hover{background:rgba(190,65,121,.13)} .afflabel{font-size:12px;color:var(--faint);margin-top:12px;font-style:italic} /* ---------- Callout ---------- */ .callout{background:var(--paper-2);border:1px solid rgba(110,63,204,.24);border-radius:20px;padding:26px;margin:38px 0; box-shadow:var(--lift)} .callout h3{margin-top:0} .callout p:last-child{margin-bottom:0} /* ---------- Forms ---------- */ .field{margin-bottom:16px} label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px} input[type=text],input[type=email],textarea{width:100%;font-family:inherit;font-size:15.5px;color:var(--ink); background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none} input:focus,textarea:focus{border-color:var(--berry)} textarea{min-height:140px;resize:vertical} .consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:14px 0 18px} .consent input{margin-top:3px} /* ---------- Table ---------- */ table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px} th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--berry);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600} td{color:var(--body)} /* ---------- Footer ---------- */ .site-footer{ background:var(--dark); color:var(--dark-muted);padding:44px 0 46px;font-size:13.5px;margin-top:64px} .footer-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between} .footer-col{min-width:180px} .footer-col h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-faint);margin-bottom:10px;font-weight:600} .footer-col a{display:block;color:var(--dark-muted);margin-bottom:7px;font-size:13.5px} .footer-col a:hover{color:var(--dark-ink)} .disclosure{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:13px;color:var(--dark-muted);line-height:1.7} .disclosure strong{color:var(--dark-ink)} .copyright{margin-top:14px;font-size:12.5px;color:var(--dark-faint)} /* ---------- Breadcrumb ---------- */ .crumb{font-size:13px;color:var(--faint);margin-bottom:14px} .crumb a{color:var(--muted)} /* ---------- Article body ---------- */ article p{font-size:16.5px;line-height:1.75;color:var(--body)} article .meta{font-size:13px;color:var(--faint);margin-top:14px} .prev-next{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:14px} /* ================= Header search ================= */ .hsearch{display:flex;align-items:center;gap:6px;flex:1;max-width:290px; background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 12px} .hsearch:focus-within{border-color:var(--berry);box-shadow:0 0 0 3px rgba(110,63,204,.10)} .hsearch input{flex:1;min-width:0;font-family:inherit;font-size:14px;color:var(--ink); background:transparent;border:none;outline:none;padding:7px 0;width:100%} .hsearch input::placeholder{color:var(--faint)} .hsearch button{font-family:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--berry); border:none;border-radius:9px;padding:8px 13px;cursor:pointer;white-space:nowrap} .hsearch button:hover{background:var(--berry-deep)} /* ================= Big search block ================= */ .bigsearch{max-width:560px;margin:0 auto} .bigsearch-row{display:flex;gap:8px;align-items:center;background:var(--paper-2);border:1px solid var(--line); border-radius:16px;padding:6px 6px 6px 16px;box-shadow:var(--lift)} .bigsearch-row:focus-within{border-color:var(--berry);box-shadow:0 0 0 4px rgba(110,63,204,.14)} .bigsearch-row input{flex:1;min-width:0;font-family:inherit;font-size:16.5px;color:var(--ink); background:transparent;border:none;outline:none;padding:12px 0;width:100%} .bigsearch-row input::placeholder{color:var(--faint)} .bigsearch-row button{font-family:inherit;font-size:15px;font-weight:600;color:#fff; background:var(--berry);border:none;border-radius:12px;padding:13px 20px; cursor:pointer;white-space:nowrap} .bigsearch-row button:hover{background:var(--berry-deep)} .bigsearch-hint{font-size:12.5px;color:var(--faint);margin-top:10px;text-align:center} .darkband .bigsearch-row{background:#131019;border-color:var(--dark-line);box-shadow:none} .darkband .bigsearch-row input{color:var(--dark-ink)} .darkband .bigsearch-row input::placeholder{color:var(--dark-faint)} .darkband .bigsearch-row button{background:var(--berry-lit);color:#1b1428} .darkband .bigsearch-hint{color:var(--dark-faint)} /* the homepage search band */ .searchband{text-align:center} .searchband h2{margin-top:0} .searchband .section-sub{max-width:520px;margin-left:auto;margin-right:auto} /* ================= Search results ================= */ .resultshead{margin:28px 0 4px} .rcount{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--berry)} .alsoapp{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px} .alsoapp p{margin:0;color:var(--muted)} .nomatch{margin:30px 0 44px;padding:32px} .nomatch h2{font-size:clamp(22px,4vw,28px);margin-top:0} .nomatch-note{font-size:13px;color:var(--dark-faint);margin:0} #allposts h2{margin-top:46px} /* ================= "What this is based on" note ================= */ .basisnote{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--berry); border-radius:0 14px 14px 0;padding:18px 20px;margin:26px 0 0} .basisnote p{font-size:14.5px;margin-bottom:10px} .basisnote p:last-child{margin-bottom:0} .basisnote strong{color:var(--ink)} .basisnote-cta{color:var(--muted)} .basisnote-cta a{font-weight:600} /* ================= App landing page ================= */ .apphero{display:flex;align-items:center;gap:48px;flex-wrap:wrap;padding:14px 0 10px} .apphero-text{flex:1 1 340px;min-width:300px} .apphero-shot{flex:0 1 300px;display:flex;justify-content:center} .ticklist{list-style:none;margin:26px 0 0;font-size:14.5px;color:var(--muted)} .ticklist li{position:relative;padding-left:26px;margin-bottom:9px} .ticklist li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px; border-left:2px solid var(--berry);border-bottom:2px solid var(--berry);transform:rotate(-45deg)} .feature{display:flex;align-items:center;gap:48px;flex-wrap:wrap;margin:52px 0} .feature.reverse{flex-direction:row-reverse} .feature-text{flex:1 1 320px;min-width:290px} .feature-shot{flex:0 1 280px;display:flex;justify-content:center} .feature-text h3{margin-top:6px;font-size:24px} .fnum{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--berry)} .getsteps{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px} .getstep{flex:1 1 200px;display:flex;gap:12px;align-items:flex-start} .getstep p{font-size:14px;margin:0} .gnum{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(183,148,246,.20); color:var(--berry-lit);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center} .getnote{font-size:13px;color:var(--dark-faint);margin:22px 0 0} /* ---------- Quiet proof row ---------- Pillar 2, Honest. No card chrome on purpose: the point is that it reads as a statement of fact rather than a marketing panel. */ .proofrow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px; padding-top:22px;border-top:1px solid var(--line)} .proofrow div{font-size:13.5px;color:var(--body-2);line-height:1.55} .proofrow b{display:block;font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--berry);margin-bottom:6px} /* ---------- Light band ---------- */ .lightband{background:rgba(110,63,204,.05);border:1px solid rgba(110,63,204,.18); border-radius:24px;padding:34px;margin:48px 0;box-shadow:var(--lift)} .lightband .appcallout-note,.lightband .getnote,.lightband .nomatch-note{color:var(--faint)} .lightband .gnum{background:rgba(110,63,204,.12);color:var(--berry-deep)} .lightband .appcallout-shot img{border:1px solid var(--line-c); box-shadow:0 12px 30px rgba(48,38,68,.14)} .appcallout{display:flex;align-items:center;gap:40px;flex-wrap:wrap} .appcallout-text{flex:1 1 320px;min-width:280px} .appcallout-text h3{margin-top:0;font-size:26px} .appcallout-text p:last-child{margin-bottom:0} .appcallout-note{font-size:13px;color:var(--faint);margin-top:12px !important} .appcallout-shot{flex:0 1 210px;display:flex;justify-content:center} .appcallout-shot img{width:210px;height:auto;border-radius:16px;border:1px solid #312a42;background:#1b1725; box-shadow:none} @media(max-width:860px){ .hsearch{max-width:200px} .hero,.apphero{gap:32px} } @media(max-width:640px){ .header-inner{flex-direction:column;align-items:stretch;gap:10px} .hsearch{max-width:none;order:2} .nav{order:3;gap:2px;justify-content:flex-start} .nav a{padding:6px 9px;font-size:13.5px} main{padding:30px 0 20px} .hero,.apphero,.feature,.feature.reverse,.appcallout{flex-direction:column;gap:28px} .hero-shot,.apphero-shot,.feature-shot,.appcallout-shot{order:2} .hero-text,.apphero-text{text-align:center} .hero-text .lede{margin-left:auto;margin-right:auto} .hero-actions{justify-content:center} .ticklist{display:inline-block;text-align:left} .darkband,.lightband{padding:26px 22px;border-radius:20px;margin:36px 0} .bigsearch-row{flex-direction:column;align-items:stretch;padding:10px;gap:10px} .bigsearch-row input{padding:8px 6px;text-align:center} .bigsearch-row button{width:100%;padding:14px} .phone{max-width:270px} } /* the homepage search band panel */ .searchband{text-align:center;background:var(--paper-2);border:1px solid var(--line); border-radius:22px;padding:34px 28px;margin:48px 0 8px;box-shadow:var(--lift)} .searchband h2{margin-top:0;margin-bottom:10px} .searchband .section-sub{max-width:520px;margin:0 auto 22px} /* ================= Article template v2 ================= Verdict panel, scorecard, recording box, related cards, FAQ, trust box. Light theme values only. Read #3b55c6, Listen #be4179, Either #6e3fcc. */ .artbyline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--faint);margin-top:14px} .artbyline .sep{opacity:.55} /* ---------- Verdict panel ---------- */ .vpanel{border-radius:20px;padding:26px 28px;margin:26px 0 8px;border:1px solid; display:grid;grid-template-columns:1fr 150px;gap:26px;align-items:center;background:var(--paper-2); box-shadow:var(--lift)} .vpanel.read{border-color:rgba(59,85,198,.30);background:rgba(59,85,198,.07)} .vpanel.listen{border-color:rgba(190,65,121,.28);background:rgba(190,65,121,.07)} .vpanel.either{border-color:rgba(110,63,204,.28);background:rgba(110,63,204,.07)} .vpanel .vlabel{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .vpanel h2{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-weight:600;font-size:31px;line-height:1.1;margin:0 0 10px} .vpanel.read h2{color:var(--read)} .vpanel.listen h2{color:var(--listen)} .vpanel.either h2{color:var(--either)} .vpanel p{margin:0;font-size:16.5px;color:var(--ink)} .dial{position:relative;width:150px;height:150px;justify-self:center} .dial svg{transform:rotate(-90deg);display:block} .dial .dval{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .dial .dnum{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-weight:600;font-size:30px;color:var(--ink);line-height:1} .dial .dlab{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px} .meter{margin:18px 0 0} .meter .track{position:relative;height:10px;border-radius:999px; background:linear-gradient(90deg,#3b55c6 0%,#dcd8e2 50%,#be4179 100%)} .meter .marker{position:absolute;top:-6px;width:4px;height:22px;border-radius:2px;background:var(--ink); box-shadow:0 0 0 3px var(--paper-2);transform:translateX(-2px)} .meter .ends{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-top:10px} .confnote{font-size:12.5px;color:var(--faint);margin:10px 0 30px} /* ---------- Book facts card ---------- */ .bookcard{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:24px 0; box-shadow:var(--lift)} .bookcard h3{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:20px;font-weight:600;margin:0 0 2px} .bookcard .bauth{font-size:14.5px;color:var(--muted);margin-bottom:12px} .bookcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 20px} .bookcard dt{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint); padding:8px 0;border-top:1px solid var(--line)} .bookcard dd{margin:0;font-size:14.5px;color:var(--ink);padding:8px 0;border-top:1px solid var(--line)} .bookcard dt:first-of-type,.bookcard dd:first-of-type{border-top:0} /* ---------- Jump list ---------- */ .jump{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:26px 0} .jump p{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px} .jump ol{margin:0 0 0 20px;columns:2;column-gap:26px} .jump li{margin-bottom:6px;font-size:14.5px} .mjump{display:none} /* ---------- Scorecard ---------- */ .score{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:24px;margin:26px 0; box-shadow:var(--lift)} .score h2{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:26px;font-weight:600;margin:0 0 6px;line-height:1.14} .score .ssub{font-size:14px;color:var(--muted);margin:0} .sgroup{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:26px 0 4px} .sgroup.r{color:var(--read)} .sgroup.l{color:var(--listen)} .sgroup.o{color:#5a2fb0} .sig{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--line)} .mark{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:600;margin-top:2px;flex-shrink:0} .mark.yesl{background:rgba(190,65,121,.10);color:var(--listen);border:1px solid rgba(190,65,121,.36)} .mark.yesr{background:rgba(59,85,198,.10);color:var(--read);border:1px solid rgba(59,85,198,.36)} .mark.no{background:rgba(48,38,68,.03);color:var(--faint);border:1px solid var(--line)} .sig b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.35} .sig span{font-size:14.5px;color:var(--body-2);line-height:1.55} .decider{background:rgba(110,63,204,.06);border:1px solid rgba(110,63,204,.28);border-radius:12px;padding:16px 18px;margin-top:10px} .decider b{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5a2fb0;margin-bottom:6px} .decider p{margin:0;font-size:15px;color:var(--body-2);line-height:1.6} /* ---------- Recording box ---------- */ .audiobox{border:1px solid rgba(190,65,121,.24);border-radius:16px;padding:22px 24px;margin:26px 0; background:rgba(190,65,121,.05)} .audiobox h3{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:20px;font-weight:600;margin:0 0 14px} .prodtypes{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px} .pt{font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:6px 11px;border-radius:8px;border:1px solid var(--line);color:var(--faint)} .pt.on{border-color:rgba(190,65,121,.45);background:rgba(190,65,121,.09);color:var(--listen)} .audiobox dl{margin:0} .arow{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line)} .arow dt{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .arow dd{margin:0;font-size:14.5px;color:var(--ink);line-height:1.55} /* ---------- Related verdict cards ---------- */ .rel{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 0 0} .rcard{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:17px;display:block;color:inherit} .rcard:hover{border-color:rgba(110,63,204,.40);box-shadow:0 6px 18px rgba(48,38,68,.08);text-decoration:none} .rcard .rtag{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .rcard h4{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:17.5px;font-weight:500;line-height:1.2;margin:7px 0 5px} .rcard p{margin:0;font-size:13.5px;color:var(--body-2);line-height:1.5} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line);padding:15px 0} .faq summary{cursor:pointer;font-size:16.5px;font-weight:600;color:var(--ink);list-style:none;padding-right:26px;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:0;top:-1px;color:var(--berry);font-weight:600} .faq[open] summary::after{content:"\2013"} .faq p{margin:11px 0 0;font-size:15.5px} /* ---------- Trust box ---------- */ .trust{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:24px;margin:34px 0 0; box-shadow:var(--lift)} .trust h3{font-family:'Instrument Serif','Newsreader',Georgia,serif;font-size:19px;font-weight:600;margin:0 0 10px} .trust p{font-size:14.5px} .trust ul{margin:12px 0 0 20px;font-size:14px} .trust li{margin-bottom:7px;color:var(--body-2)} /* ---------- Reading progress ---------- */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99; background:linear-gradient(90deg,#3b55c6,#be4179)} /* ---------- Mobile ---------- */ @media(max-width:640px){ .vpanel{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px;border-radius:16px} .vpanel .dial{order:-1;margin-bottom:14px;width:120px;height:120px} .vpanel .dial svg{width:120px;height:120px} .vpanel .dial .dnum{font-size:26px} .vpanel h2{font-size:26px} .vpanel .meter{width:100%} .jump{display:none} .mjump{display:flex;gap:8px;overflow-x:auto;padding:4px 20px 4px;margin:18px -20px 22px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .mjump::-webkit-scrollbar{display:none} .mjump a{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--body-2);background:var(--paper-2); border:1px solid var(--line);padding:8px 13px;border-radius:999px;white-space:nowrap} .score,.audiobox,.trust{padding:18px;border-radius:14px} .score h2{font-size:22px} .sig b{font-size:15px} .sig span{font-size:14px} .arow{grid-template-columns:1fr;gap:2px} .rel{grid-template-columns:1fr} .bookcard dl{grid-template-columns:1fr;gap:0} .bookcard dd{padding-top:0;border-top:0} .buyrow{flex-direction:column} .buybtn{justify-content:center} } /* ---------- Instrument Serif ships regular only ---------- */ h1,h2,h3,.serif,.wordmark,.pcard .ptitle,.verdict-box .vhead,.vpanel h2,.dial .dnum, .bookcard h3,.score h2,.audiobox h3,.rcard h4,.trust h3,.buybox .bhead{font-weight:400} /* ================= Homepage, August 2026 ================= Visual first. A centred statement, then the product, then the reasoning. Sections breathe at 96px on desktop so nothing crowds the phone shots. */ .herox{text-align:center;padding:26px 0 0;max-width:780px;margin:0 auto} .herox .eyebrow{margin-bottom:14px} .herox h1{font-size:clamp(34px,6.6vw,62px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance} .herox .lede{font-size:19px;margin-left:auto;margin-right:auto;max-width:640px} .herox .hero-actions{justify-content:center} .herox .hero-note{text-align:center} .phonerow{display:flex;align-items:flex-end;justify-content:center;gap:22px;margin:48px 0 0} .phonerow .phone{max-width:212px;margin:0} .phonerow .phone.lead{max-width:272px} .section{margin-top:96px} .section-head{text-align:center;max-width:660px;margin:0 auto 34px} .section-head h2{margin-top:0;margin-bottom:10px} .section-head .section-sub{margin:0} /* ---------- The three answers ---------- */ .answers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .answer{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--lift)} .answer .atop{display:flex;align-items:center;gap:10px;margin-bottom:12px} .answer .adot{width:14px;height:14px;border-radius:50%;flex-shrink:0} .answer h3{margin:0;font-size:23px} .answer p{margin:0;font-size:14.5px;color:var(--body-2);line-height:1.55} .answer.read{border-color:rgba(59,85,198,.30)} .answer.read .adot{background:var(--read)} .answer.read h3{color:var(--read)} .answer.listen{border-color:rgba(190,65,121,.28)} .answer.listen .adot{background:var(--listen)} .answer.listen h3{color:var(--listen)} .answer.either{border-color:rgba(110,63,204,.28)} .answer.either .adot{background:linear-gradient(90deg,var(--read) 50%,var(--listen) 50%)} .answer.either h3{color:var(--either)} /* ---------- The ten checks ---------- */ .checks{display:grid;grid-template-columns:1fr 1fr;gap:16px} .checkcol{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--lift)} .checkcol h3{margin:0 0 3px;font-size:22px} .checkcol .csub{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px} .checkcol ul{list-style:none;margin:0;color:inherit} .checkcol li{display:grid;grid-template-columns:9px 1fr;gap:12px;align-items:start;margin:0; padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--body)} .checkcol li:first-child{border-top:0;padding-top:0} .checkcol li::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:7px} .checkcol.read{border-color:rgba(59,85,198,.26)} .checkcol.read h3{color:var(--read)} .checkcol.read li::before{background:var(--read)} .checkcol.listen{border-color:rgba(190,65,121,.24)} .checkcol.listen h3{color:var(--listen)} .checkcol.listen li::before{background:var(--listen)} /* ---------- App showcase ---------- */ .showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .scard{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:22px 22px 0; box-shadow:var(--lift);display:flex;flex-direction:column} .scard h3{margin:0 0 6px;font-size:20px} .scard p{font-size:14px;color:var(--body-2);line-height:1.5;margin-bottom:20px} .scard .sshot{margin-top:auto;height:210px;overflow:hidden;background:#1b1725; border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0} .scard .sshot img{width:100%;height:auto;display:block} /* ---------- Homepage FAQ ---------- */ .homefaq{max-width:720px;margin:0 auto} @media(max-width:860px){ .answers,.showcase,.proofrow{grid-template-columns:1fr} .checks{grid-template-columns:1fr} .proofrow{gap:18px} .section{margin-top:68px} .phonerow{gap:14px} .phonerow .phone{max-width:150px} .phonerow .phone.lead{max-width:188px} } @media(max-width:640px){ .phonerow .phone.side{display:none} .phonerow .phone.lead{max-width:262px} .phonerow{margin-top:34px} .herox{padding-top:6px} .herox h1 br{display:none} .scard{padding:20px 20px 0} }