/* subby.online — single shared stylesheet. Tokens ported verbatim from the Claude Design delivery (Home.dc.html helmet), with two deliberate AA fixes recorded in design-import-web/CLAUDE-DESIGN-FEEDBACK.md: - light --muted darkened #74796C → #5D6254 (body-size text must clear 4.5:1 on --bg/--surf*) - light focus ring uses --focus (green) — the design's --lime ring was 1.72:1 on --bg. Theme model: bare :root = light; system dark applies unless the user forced light; [data-theme="dark"] wins when the user forced dark (pre-paint script in ). */ :root{ --bg:#FCFDF6;--ink:#1A1C17;--ink2:#44483E;--muted:#5D6254;--line:#C5C8BA;--hair:#E1E4D6; --surf1:#F6F7EF;--surf2:#F0F1E9;--card:#FFFFFF;--green:#2C7000;--green-hover:#2F7A00; --on-green:#FFFFFF;--lime:#64DD17;--cont:#C6FF9E;--wash:#E6FFD6;--on-wash:#0A2600; --tint:#F7FFF0;--wm:#2C7000;--frame-border:rgba(26,28,23,.16); --shadow:0 30px 70px -30px rgba(26,28,23,.35);--card-shadow:0 12px 32px -18px rgba(26,28,23,.28); --show-light:block;--show-dark:none;--focus:#2C7000;--danger:#BA1A1A; --control-line:#5D6254; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#000000;--ink:#E2E3DA;--ink2:#C5C8BA;--muted:#8E9285;--line:#2A2C25;--hair:#1B1D16; --surf1:#0A0B08;--surf2:#0E100C;--card:#0E100C;--green:#9EFF57;--green-hover:#C6FF9E; --on-green:#143D00;--lime:#9EFF57;--cont:#205600;--wash:#143D00;--on-wash:#C6FF9E; --tint:#0A0B08;--wm:#FFFFFF;--frame-border:rgba(226,227,218,.14);--shadow:none; --card-shadow:none;--show-light:none;--show-dark:block;--focus:#9EFF57; --danger:#FFB4AB;--control-line:#8E9285; } } :root[data-theme="dark"]{ --bg:#000000;--ink:#E2E3DA;--ink2:#C5C8BA;--muted:#8E9285;--line:#2A2C25;--hair:#1B1D16; --surf1:#0A0B08;--surf2:#0E100C;--card:#0E100C;--green:#9EFF57;--green-hover:#C6FF9E; --on-green:#143D00;--lime:#9EFF57;--cont:#205600;--wash:#143D00;--on-wash:#C6FF9E; --tint:#0A0B08;--wm:#FFFFFF;--frame-border:rgba(226,227,218,.14);--shadow:none; --card-shadow:none;--show-light:none;--show-dark:block;--focus:#9EFF57; --danger:#FFB4AB;--control-line:#8E9285; } /* hard-coded dark panels (PRO teaser, true-black band) need the dark focus ring in BOTH themes */ .panel-dark{--focus:#9EFF57} @font-face{font-family:'Manrope';src:url('../fonts/manrope-regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Manrope';src:url('../fonts/manrope-semibold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Manrope';src:url('../fonts/manrope-bold.woff2') format('woff2');font-weight:700 800;font-display:swap} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:82px} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .3s} a{color:var(--green)}a:hover{color:var(--green-hover)} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px} ::selection{background:#64DD17;color:#0A2600} summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none} img{max-width:100%}input,select,button{font-family:inherit} .tnum{font-feature-settings:'tnum'} .show-light{display:var(--show-light)}.show-dark{display:var(--show-dark)} /* ---------- layout primitives (replace the repeated inline patterns) ---------- */ .container{max-width:1160px;margin:0 auto;padding:0 24px} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));gap:56px;align-items:center} .grid-2-tight{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px;align-items:center} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px} .section{padding:88px 0} .section-tint{background:var(--surf1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:78px 0} /* ---------- hover/focus utilities (ports of the DC style-hover attributes) ---------- */ .hl-green:hover{color:var(--green)} .hl-ink:hover{color:var(--ink)} .hb-muted:hover{border-color:var(--muted)} .hb-green:hover{border-color:var(--green)} .hb-green-ink:hover{border-color:var(--green);color:var(--ink)} .hbg-wash:hover{background:var(--wash)} .hlift:hover{transform:translateY(-2px)} .hlift-shadow:hover{transform:translateY(-2px);box-shadow:var(--card-shadow)} .hbright:hover{filter:brightness(1.05)} .hunderline:hover{text-decoration:underline} .hdanger:hover{color:var(--danger);border-color:var(--danger)} .hbg-lime:hover{background:#9EFF57;color:#0A2600} .hbg-lime-soft:hover{background:rgba(158,255,87,.1)} /* ---------- skip link ---------- */ .skip-link{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--green);color:var(--on-green);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none} .skip-link:focus-visible{left:12px} main:focus{outline:none} /* ---------- header / nav ---------- */ .site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)} .site-nav{max-width:1160px;margin:0 auto;padding:0 24px;min-height:66px;display:flex;align-items:center;gap:20px} .brand{text-decoration:none;display:flex;align-items:center;flex:0 0 auto} .brand img{height:30px;width:auto;display:block} svg.wordmark{height:32px;width:auto;display:block} .wordmark-sm svg.wordmark{height:26px} .nav-links{display:flex;gap:22px;align-items:center;margin-left:auto} .nav-links a{font-size:14.5px;font-weight:600;color:var(--ink2);text-decoration:none} .nav-links a:hover{color:var(--ink)} .nav-links a[aria-current="page"]{color:var(--green);font-weight:700} .theme-toggle{width:40px;height:40px;border-radius:999px;border:1px solid var(--control-line);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);padding:0;flex:0 0 auto} .theme-toggle:hover{border-color:var(--muted)} .btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--on-green);font-size:14px;font-weight:700;padding:11px 18px;border-radius:12px;text-decoration:none;flex:0 0 auto} .btn-primary:hover{background:var(--green-hover);color:var(--on-green)} .btn-secondary{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:700;padding:11px 18px;border-radius:12px;text-decoration:none;background:transparent} .btn-secondary:hover{border-color:var(--muted)} .nav-burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--control-line);background:transparent;cursor:pointer;color:var(--ink2);padding:0;align-items:center;justify-content:center;flex:0 0 auto} .nav-burger:hover{border-color:var(--muted)} .nav-links .nav-cta{display:none} .nav-burger .icon-close{display:none} .nav-burger[aria-expanded="true"] .icon-open{display:none} .nav-burger[aria-expanded="true"] .icon-close{display:block} @media (max-width:880px){ .site-nav{gap:12px} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 16px 16px;background:var(--bg);border-bottom:1px solid var(--hair);box-shadow:var(--card-shadow)} .nav-links.open{display:flex} .nav-links a{padding:14px 8px;font-size:16px;border-bottom:1px solid var(--hair)} .nav-links a:last-child{border-bottom:none} .nav-burger{display:inline-flex;margin-left:auto} .nav-cta{display:none} .nav-links .nav-cta{display:inline-flex;margin-top:12px;justify-content:center} .section{padding:56px 0} .section-tint{padding:52px 0} .grid-2,.grid-2-tight{gap:36px} } /* ---------- store badges + CTA band ---------- */ .badge-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .badge-row .badge-play{order:var(--play-order,0);display:block;line-height:0} .badge-row .badge-ios{order:var(--ios-order,1);display:block;line-height:0} .badge-row img{height:54px;width:auto;display:block} .badge-row.badge-sm img{height:48px} .friction{margin:12px 0 0;font-size:13.5px;font-weight:600;color:var(--muted)} .cta-band{border-top:1px solid var(--hair);background:var(--surf1);padding:64px 0;text-align:center} .cta-band h2{margin:0;font-size:clamp(26px,3.4vw,38px);letter-spacing:-0.01em;font-weight:700} .cta-band .badge-row{justify-content:center;margin-top:26px} .cta-band .friction{text-align:center} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--hair);background:var(--surf1);padding:56px 0 40px} .site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:36px} .footer-tagline{white-space:pre-line} .site-footer h3{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .site-footer a{font-size:14.5px;color:var(--ink2);text-decoration:none} .site-footer a:hover{color:var(--green)} .footer-meta{margin-top:36px;padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)} .locale-switch{display:flex;flex-wrap:wrap;gap:8px 8px} .locale-switch a{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line);text-transform:uppercase} .locale-switch a:hover{color:var(--ink);border-color:var(--control-line)} .locale-switch a[aria-current="true"]{background:var(--wash);color:var(--on-wash);font-weight:700;border-color:var(--wash)} /* ---------- cards & guide vocabulary ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px} .card-link{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;color:var(--ink);transition:transform .25s cubic-bezier(.2,0,0,1),box-shadow .25s cubic-bezier(.2,0,0,1)} .card-link:hover{transform:translateY(-2px);box-shadow:var(--card-shadow);color:var(--ink)} .chip{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--wash);color:var(--on-wash);font-size:14px;font-weight:700} .pill{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--surf2);color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .article{max-width:760px;margin:0 auto;padding:0 24px} .article h1{font-size:clamp(32px,4.4vw,46px);line-height:1.08;letter-spacing:-0.018em;font-weight:700;margin:0} .article .dek{font-size:19.5px;line-height:1.55;color:var(--ink);margin:18px 0 0;overflow-wrap:break-word;font-weight:600;padding-left:18px;border-left:4px solid var(--green)} .article h2{font-size:clamp(23px,2.8vw,30px);line-height:1.2;letter-spacing:-0.01em;font-weight:700;margin:52px 0 0;padding-top:4px} .article h3{font-size:18.5px;font-weight:700;margin:30px 0 0} .article p{font-size:16.5px;line-height:1.68;color:var(--ink2);margin:14px 0 0;overflow-wrap:break-word} .article ul,.article ol{font-size:16.5px;line-height:1.68;color:var(--ink2);margin:14px 0 0;padding-left:24px;overflow-wrap:break-word} .article li{margin-top:8px} .article li::marker{color:var(--green);font-weight:700} .byline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--muted)} .breadcrumb{font-size:13.5px;font-weight:600;color:var(--muted);margin:0} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .breadcrumb li+li::before{content:"\203A";margin-right:6px;color:var(--muted)} .breadcrumb a{color:var(--muted);text-decoration:none} .breadcrumb a:hover{color:var(--green)} ol.steps{counter-reset:step;list-style:none;padding-left:0} ol.steps>li{counter-increment:step;position:relative;padding:16px 18px 16px 58px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-top:12px} ol.steps>li::before{content:counter(step);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:999px;background:var(--wash);color:var(--on-wash);font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center} .callout{background:var(--wash);border-radius:16px;padding:20px 22px;margin-top:22px;border:1px solid var(--cont)} .callout p{color:var(--on-wash);margin:0;font-size:16px;line-height:1.55;font-weight:600} .callout p+p{margin-top:10px} /* Key-takeaways card: the scannable answer before the prose. */ .tldr{margin-top:26px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);border-radius:16px;padding:22px 24px} .tldr h2{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)} .tldr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .tldr li{position:relative;padding-left:26px;font-size:16px;line-height:1.55;color:var(--ink2)} .tldr li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:3px;background:var(--green)} .tldr li strong{color:var(--ink)} .table-wrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:14px} table.cmp{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px} table.cmp th,table.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink2);overflow-wrap:break-word} table.cmp thead th{position:sticky;top:0;z-index:2;background:var(--surf2);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} table.cmp tbody tr:last-child td{border-bottom:none} table.cmp th[scope="row"]{color:var(--ink);font-weight:700} .verified{display:block;margin-top:6px;font-size:10.5px;line-height:1.3;color:var(--muted);font-weight:600;opacity:.62;letter-spacing:.02em} table.cmp td a{font-weight:600} /* The row about us is the one the reader is deciding on — make it findable. */ table.cmp tbody tr.is-subby{background:var(--wash)} table.cmp tbody tr.is-subby td,table.cmp tbody tr.is-subby th{color:var(--on-wash);font-weight:600} table.cmp tbody tr.is-subby th[scope="row"]{position:relative;color:var(--on-wash);font-weight:800} table.cmp tbody tr.is-subby th[scope="row"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)} table.cmp tbody tr.is-subby .verified{color:var(--on-wash);opacity:.55} table.cmp th[scope="row"]{white-space:nowrap;font-size:15px} /* /vs/ tables put Subby in a column — same emphasis, vertical. */ table.cmp .is-subby-col{background:var(--wash);color:var(--on-wash)} table.cmp thead th.is-subby-col{background:var(--cont);color:var(--on-wash);font-weight:800} table.cmp td.is-subby-col{font-weight:600} table.cmp td.is-subby-col .verified{color:var(--on-wash);opacity:.55} .sources{margin-top:40px;padding-top:18px;border-top:1px solid var(--hair)} .sources h2{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0} .sources ul{list-style:none;padding:0;font-size:14px} .guide-cta{margin-top:44px;background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center} .guide-cta h2{margin:0;font-size:24px} .guide-cta .badge-row{justify-content:center;margin-top:20px} .related{margin-top:40px} .related h2{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 12px} .related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px} .related .card-link{padding:18px;border-radius:14px} .related .card-link .t{display:block;font-size:15px;font-weight:700} .related .card-link .d{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--muted)} /* ---------- marquee (logo wall) ---------- */ .marquee{overflow:hidden;position:relative} .marquee-track{display:flex;gap:14px;width:max-content;animation:marqL 48s linear infinite} .marquee-track.rev{animation:marqR 56s linear infinite} .marquee.paused .marquee-track{animation-play-state:paused} .marquee-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 10px;font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap} .marquee-item img{width:26px;height:26px;border-radius:8px} .marquee-pause{margin-top:14px;font-size:13px;font-weight:700;background:transparent;border:1px solid var(--control-line);border-radius:999px;color:var(--ink2);padding:7px 14px;cursor:pointer} .marquee-pause:hover{border-color:var(--muted)} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes marqL{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}} .fade-up{animation:fadeUp .7s cubic-bezier(.05,.7,.1,1) both} .fade-up-d{animation:fadeUp .7s cubic-bezier(.05,.7,.1,1) .12s both} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .marquee-track,.marquee-track.rev{animation:none;flex-wrap:wrap;width:auto} .marquee{mask-image:none;-webkit-mask-image:none} .marquee [aria-hidden="true"].marquee-track,.marquee-track.dupe{display:none} .fade-up,.fade-up-d{animation:none} *{transition-duration:.01ms !important} } /* ---------- device frame ---------- */ .device{width:min(298px,78vw);background:#101208;border-radius:46px;padding:11px;border:1px solid var(--frame-border);box-shadow:var(--shadow)} .device .screen{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:720/1640;background:#000} .device .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .device.ios .screen{aspect-ratio:1320/2868} figure.shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px} figure.shot figcaption{font-size:14px;font-weight:600;color:var(--muted)} /* ---------- consent banner ---------- */ .consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-shadow);padding:16px 18px;display:none;gap:14px;align-items:center;flex-wrap:wrap;max-width:720px;margin:0 auto} .consent.visible{display:flex} .consent p{margin:0;flex:1 1 260px;font-size:13.5px;line-height:1.5;color:var(--ink2)} .consent .actions{display:flex;gap:10px} .consent button{font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--control-line);background:transparent;color:var(--ink)} .consent button.accept{background:var(--green);color:var(--on-green);border-color:var(--green)} /* ---------- calculator ---------- */ .calc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px} .calc .row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 40px;gap:10px;margin-top:10px} .calc input,.calc select{padding:11px 12px;border-radius:10px;border:1px solid var(--control-line);background:var(--bg);color:var(--ink);font-size:14.5px;min-width:0} .calc .remove{border:1px solid var(--line);background:transparent;border-radius:10px;cursor:pointer;color:var(--muted);font-size:16px} .calc .remove:hover{color:var(--danger);border-color:var(--danger)} .calc .totals{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);display:flex;gap:28px;flex-wrap:wrap} .calc .totals strong{font-size:26px;font-feature-settings:'tnum'} .calc .add{margin-top:14px} @media (max-width:560px){.calc .row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-auto-rows:auto}.calc .row .cycle{grid-column:1}.calc .row .remove{grid-column:2;justify-self:end;width:40px}} /* ---------- accordion (FAQ list, PRO objection ladder) ---------- */ .qa{scroll-margin-top:86px} .acc-x{display:inline-block;transition:transform .25s cubic-bezier(.2,0,0,1)} details[open]>summary .acc-x{transform:rotate(45deg)} @media (prefers-reduced-motion: reduce){.acc-x{transition:none}} /* ---------- misc ---------- */ [hidden]{display:none !important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .notfound-wrap{min-height:52vh;display:flex;align-items:center} @media (max-width:880px){.badge-row img{height:48px}} .stars .off{color:var(--muted)} .verdict-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:18px} .verdict-grid .v-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px} .verdict-grid .v-card h2{font-size:17px;margin:0 0 8px} .verdict-grid .v-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)} .verdict-grid .v-card.win{background:var(--wash);border-color:var(--cont)} .verdict-grid .v-card.win p,.verdict-grid .v-card.win h2{color:var(--on-wash)} .factsheet-row{display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:10px} .factsheet-row .val{overflow-wrap:anywhere} @media (max-width:560px){.factsheet-row{grid-template-columns:1fr;gap:4px}} .qa{scroll-margin-top:82px}