/* ============================================================================ SILENT MIND design system v2 — rebuilt from the REAL brand guidelines (SILENT MIND BRAND GUIDELINES FINAL V2.pdf, 2026-07-02). Palette (exact): VIOLET #78829F · OLIVE #A6A98A · CLOUD #F6F2EF · EARTH #B38F8C · WOOD #5A5357 + supporting AMBER #D06C58 · OCHRE #D8AF72 · MINT #ACB9AD. Type: PRATA (headlines/reflective lines, serif, 400 only) · OUTFIT (body/UI/CTAs). Tagline (public): "Quiet Moments, Made Simple". Mood: grounded, warm, calming — never loud. Local models emit HTML using these classes only; they never write CSS. Per-page theme = ============================================================================ */ /* Fonts are SELF-HOSTED — see fonts.css (must be linked before this file). Remote font imports are forbidden (compliance SOP). */ /* ---- Brand tokens ---- */ :root{ --sm-violet:#78829F; --sm-olive:#A6A98A; --sm-cloud:#F6F2EF; --sm-earth:#B38F8C; --sm-wood:#5A5357; --sm-amber:#D06C58; --sm-ochre:#D8AF72; --sm-mint:#ACB9AD; --brand-bg:var(--sm-cloud); --brand-surface:#FFFFFF; --brand-ink:var(--sm-wood); --brand-muted:#8A8286; --brand-accent:var(--sm-amber); /* theme classes override */ --brand-cta:#C05A46; /* deepened accent for white-text contrast */ --brand-accent-ink:#FFFFFF; --brand-line:#E7E0D8; --brand-good:#7C8A5F; --brand-bad:#B04A3F; --font-display:'Prata',Georgia,'Times New Roman',serif; /* headlines only, weight 400 */ --font-ui:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; /* body + UI + CTAs */ --measure:68ch; --radius:14px; --gap:clamp(1rem,3vw,2rem); --shadow:0 1px 2px rgba(90,83,87,.05),0 8px 24px rgba(90,83,87,.07); } /* ---- Page themes (all from the brand palette; accent + deepened CTA pair) ---- */ .theme-violet{--brand-accent:var(--sm-violet);--brand-cta:#5F6A88} .theme-olive {--brand-accent:#8E9372;--brand-cta:#757A5C} .theme-earth {--brand-accent:var(--sm-earth);--brand-cta:#96706D} .theme-amber {--brand-accent:var(--sm-amber);--brand-cta:#C05A46} .theme-ochre {--brand-accent:#C79A5C;--brand-cta:#A87E42} /* ---- Reset / base ---- */ *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} body{background:var(--brand-bg);color:var(--brand-ink);font-family:var(--font-ui); font-weight:400;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--brand-ink)} h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.15;letter-spacing:.01em} h2{font-size:clamp(1.4rem,3.2vw,2rem);line-height:1.25;margin:2.5rem 0 1rem} h3{font-size:1.15rem;margin:1.25rem 0 .5rem} h4{font-family:var(--font-ui);font-weight:600} p{margin:0 0 1rem} a{color:var(--brand-cta);text-underline-offset:3px} img{max-width:100%;height:auto;display:block;border-radius:var(--radius)} .container{width:min(100% - 2rem,1060px);margin-inline:auto} .prose{max-width:var(--measure)} .muted{color:var(--brand-muted)} .center{text-align:center} .eyebrow{display:block;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.14em; font-size:.78rem;font-weight:600;color:var(--brand-accent);margin-bottom:.6rem} .tagline{font-family:var(--font-display);color:var(--brand-accent);font-size:1.15rem} section{padding:clamp(2.25rem,5.5vw,4rem) 0} /* ---- Buttons / CTA (Outfit Medium/SemiBold; calm, rounded) ---- */ .btn{display:inline-block;background:var(--brand-cta);color:var(--brand-accent-ink); font-family:var(--font-ui);font-weight:600;letter-spacing:.02em; padding:.85rem 1.7rem;border-radius:999px;text-decoration:none; box-shadow:var(--shadow);transition:transform .12s ease,filter .12s ease} .btn:hover{transform:translateY(-1px);filter:brightness(1.06)} .btn--lg{padding:1.05rem 2.2rem;font-size:1.05rem} .btn--ghost{background:transparent;color:var(--brand-cta);border:2px solid var(--brand-cta);box-shadow:none} /* ---- Header (minimal; radiating-rings mark auto-added before the wordmark) ---- */ .site-header{position:sticky;top:0;background:color-mix(in srgb,var(--brand-bg) 90%,transparent); backdrop-filter:blur(8px);border-bottom:1px solid var(--brand-line);z-index:10} .site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem} .brand-logo{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-ui); font-weight:500;font-size:1.2rem;letter-spacing:.02em;color:var(--brand-ink);text-decoration:none} .brand-logo::before{content:"";width:30px;height:30px;flex:0 0 auto;background-repeat:no-repeat;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%2378829F' stroke-linecap='round'%3E%3Cpath d='M12 17a10 8 0 0 1 16 0' stroke-width='1.6'/%3E%3Cpath d='M9 13a14 11 0 0 1 22 0' stroke-width='1.3' opacity='.75'/%3E%3Cpath d='M6 9a18 14 0 0 1 28 0' stroke-width='1' opacity='.5'/%3E%3Cpath d='M12 23a10 8 0 0 0 16 0' stroke-width='1.6'/%3E%3Cpath d='M9 27a14 11 0 0 0 22 0' stroke-width='1.3' opacity='.75'/%3E%3Cpath d='M6 31a18 14 0 0 0 28 0' stroke-width='1' opacity='.5'/%3E%3C/g%3E%3C/svg%3E")} nav a{margin-left:1.4rem;color:var(--brand-ink);text-decoration:none;font-weight:500;font-size:.95rem} /* ---- Hero ---- */ .hero{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--gap);align-items:center} .hero__media img{width:100%;box-shadow:var(--shadow)} .hero .rating{font-family:var(--font-ui);font-weight:500;color:var(--brand-muted);margin-top:.8rem;font-size:.95rem} .hero .rating b{color:var(--brand-ink);font-weight:600} @media(max-width:899px){.hero{grid-template-columns:1fr;text-align:center}.hero__media{order:-1} .hero .btn{margin-inline:auto}} /* ---- Cards / grids / trust ---- */ .grid{display:grid;gap:var(--gap)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} @media(max-width:899px){.grid--3,.grid--2{grid-template-columns:1fr}} .card{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--radius); padding:1.5rem;box-shadow:var(--shadow)} .card .ico{font-size:1.5rem;margin-bottom:.35rem} .card--tint{background:color-mix(in srgb,var(--brand-accent) 10%,white);border-color:transparent} .trust-strip{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:center;align-items:center; color:var(--brand-muted);font-family:var(--font-ui);font-weight:500;font-size:.95rem} /* ---- Ritual steps (numbered, calm) ---- */ .steps{list-style:none;padding:0;counter-reset:step} .steps li{position:relative;padding:0 0 1.4rem 3.2rem;counter-increment:step} .steps li::before{content:counter(step);position:absolute;left:0;top:.1rem;width:2.15rem;height:2.15rem; border-radius:50%;background:color-mix(in srgb,var(--brand-accent) 16%,white);color:var(--brand-cta); font-family:var(--font-ui);font-weight:600;display:grid;place-items:center} .steps li strong{font-weight:600} /* ---- Comparison / pros-cons / verdict (review pages) ---- */ .compare{width:100%;border-collapse:collapse;background:var(--brand-surface); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-family:var(--font-ui)} .compare th,.compare td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--brand-line)} .compare th:first-child,.compare td:first-child{text-align:left;font-weight:500} .compare tbody tr:nth-child(even){background:#5A535705} .compare .col-ours{background:color-mix(in srgb,var(--brand-accent) 12%,white);font-weight:600} .compare .yes{color:var(--brand-good);font-weight:700} .compare .no{color:var(--brand-bad);font-weight:700} .proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)} @media(max-width:640px){.proscons{grid-template-columns:1fr}} .proscons ul{list-style:none;padding:0} .proscons li{padding:.32rem 0 .32rem 1.6rem;position:relative} .pros li::before{content:"✓";position:absolute;left:0;color:var(--brand-good);font-weight:700} .cons li::before{content:"✕";position:absolute;left:0;color:var(--brand-bad);font-weight:700} .verdict{border-left:4px solid var(--brand-accent);background:var(--brand-surface); padding:1.2rem 1.5rem;border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow)} .verdict .best-for{font-family:var(--font-ui);font-weight:600;color:var(--brand-cta)} .stars{color:var(--sm-ochre);font-size:1.15rem;letter-spacing:.08em} /* ---- Coupon ---- */ .coupon{background:color-mix(in srgb,var(--brand-accent) 12%,white); border:2px dashed var(--brand-cta);border-radius:var(--radius);padding:1.75rem;text-align:center} .coupon .code{display:inline-block;font-family:var(--font-ui);font-weight:700;font-size:1.4rem; letter-spacing:.18em;color:var(--brand-cta);margin:.25rem 0 .75rem} /* ---- Quotes / FAQ ---- */ .quote{background:var(--brand-surface);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);font-style:italic} .quote cite{display:block;margin-top:.7rem;font-style:normal;font-family:var(--font-ui);font-weight:500;color:var(--brand-muted)} .faq details{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--radius); padding:1rem 1.25rem;margin-bottom:.75rem} .faq summary{font-family:var(--font-ui);font-weight:600;cursor:pointer;list-style:none} .faq summary::after{content:"+";float:right;color:var(--brand-cta);font-weight:700} .faq details[open] summary::after{content:"–"} .faq details p{margin:.6rem 0 0} /* ---- Blog article ---- */ .article{display:grid;grid-template-columns:220px minmax(0,var(--measure));gap:var(--gap);justify-content:center} .article .toc{font-family:var(--font-ui);font-size:.9rem;position:sticky;top:5rem;align-self:start} .article .toc a{display:block;color:var(--brand-muted);text-decoration:none;padding:.22rem 0} .article .meta{font-family:var(--font-ui);color:var(--brand-muted);font-size:.9rem;margin-bottom:1.5rem} .article-body img{margin:1.5rem 0} .article-body blockquote{border-left:4px solid var(--brand-accent);padding-left:1.25rem;font-style:italic;color:var(--brand-muted)} .inline-cta{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--radius); padding:1.5rem;text-align:center;margin:2rem 0;box-shadow:var(--shadow)} .related a{font-family:var(--font-ui);font-weight:500} @media(max-width:899px){.article{grid-template-columns:1fr}.article .toc{display:none}} /* ---- Disclosure / footer ---- */ .disclosure{font-family:var(--font-ui);font-size:.85rem;color:var(--brand-muted);background:#5A535706; border-radius:var(--radius);padding:.9rem 1.25rem;margin:1.25rem 0} .site-footer{border-top:1px solid var(--brand-line);padding:2.25rem 0;color:var(--brand-muted); font-family:var(--font-ui);font-size:.9rem} /* ============================================================================ v3 ADDITIONS (2026-07-02) — conversion-architecture components from the 2026 CRO research (advertorial/listicle format, visual rhythm, proof layer, sticky mobile CTA). All CSS-only — models emit classes, never styles. ============================================================================ */ /* ---- Section rhythm: alternating background bands ---- */ .band{padding:clamp(2.25rem,5.5vw,4rem) 0} .band--tint{background:color-mix(in srgb,var(--brand-accent) 8%,white)} .band--dark{background:var(--sm-wood);color:#F6F2EF} .band--dark h1,.band--dark h2,.band--dark h3{color:#F6F2EF} .band--dark p{color:#E8E2DC} .band--dark .btn{background:#F6F2EF;color:var(--sm-wood)} /* ---- Sticky mobile CTA bar (pure CSS; thumb-zone) ---- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none; background:color-mix(in srgb,var(--brand-bg) 94%,transparent);backdrop-filter:blur(10px); border-top:1px solid var(--brand-line);padding:.6rem 1rem; align-items:center;gap:.9rem;justify-content:space-between} .sticky-cta .sticky-cta__label{font-family:var(--font-ui);font-weight:500;font-size:.9rem;color:var(--brand-ink)} .sticky-cta .btn{padding:.7rem 1.4rem;font-size:.95rem} @media(max-width:899px){.sticky-cta{display:flex}body{padding-bottom:4.2rem}} /* ---- Alternating feature rows (image + text) ---- */ .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;margin:2.25rem 0} .feature-row--flip .feature-row__media{order:2} .feature-row__media img{box-shadow:var(--shadow)} @media(max-width:899px){.feature-row{grid-template-columns:1fr} .feature-row--flip .feature-row__media{order:0}} /* ---- Numbered listicle headers (big Prata numeral) ---- */ .num-h{display:flex;align-items:baseline;gap:.9rem;margin:2rem 0 .75rem} .num-h .n{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--brand-accent)} .num-h h2,.num-h h3{margin:0} /* ---- Honest stat/props strip ---- */ .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center} @media(max-width:899px){.stat-strip{grid-template-columns:repeat(2,1fr)}} .stat{padding:1rem .5rem} .stat .stat__big{font-family:var(--font-display);font-size:1.5rem;color:var(--brand-cta);display:block} .stat .stat__label{font-family:var(--font-ui);font-size:.85rem;color:var(--brand-muted)} /* ---- Trust badges / chips ---- */ .badges{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center} .badge{font-family:var(--font-ui);font-weight:500;font-size:.85rem;color:var(--brand-ink); background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:999px; padding:.45rem 1rem;box-shadow:var(--shadow)} /* ---- Checklist (✓) ---- */ .checklist{list-style:none;padding:0} .checklist li{padding:.35rem 0 .35rem 1.8rem;position:relative} .checklist li::before{content:"✓";position:absolute;left:0;color:var(--brand-good);font-weight:700} /* ---- Guarantee / reassurance panel ---- */ .guarantee{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center; background:var(--brand-surface);border:1px solid var(--brand-line);border-left:5px solid var(--brand-good); border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)} .guarantee .g-ico{font-size:2rem} .guarantee h3{margin:0 0 .25rem} @media(max-width:640px){.guarantee{grid-template-columns:1fr;text-align:center}} /* ---- Small image gallery ---- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} @media(max-width:640px){.gallery{grid-template-columns:1fr}} /* ---- Big closing CTA band helper ---- */ .closing .tagline{margin-top:1.25rem} /* ---- Sensible layout wrappers the models reach for (define them so they're real, not "invented") ---- */ .reason-block{margin:0 0 2rem} /* groups a num-h + its feature-row/prose */ .hero__copy{display:block} /* hero left-column text group */ .hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.4rem} @media(max-width:899px){.hero__actions{justify-content:center}} /* ============================================================================ v4 ADDITIONS (2026-07-02) — COMPLEXITY layer for the v5 page standard. Richer, modern components that stay CSS-only (no JS): anchor pill nav, pull-quotes, timeline, sticky side facts card, spec table, section divider ornament, reveal animation, upgraded steps rail, richer hero wash. ============================================================================ */ /* ---- Anchor pill navigation (tests the model's id/href consistency) ---- */ .anchor-nav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 .5rem} .anchor-nav a{font-family:var(--font-ui);font-weight:500;font-size:.85rem;text-decoration:none; color:var(--brand-ink);background:var(--brand-surface);border:1px solid var(--brand-line); border-radius:999px;padding:.4rem .95rem;transition:all .12s ease} .anchor-nav a:hover{border-color:var(--brand-cta);color:var(--brand-cta)} /* ---- Pull-quote (Prata reflective statement) ---- */ .pullquote{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.45; color:var(--brand-ink);text-align:center;max-width:34ch;margin:2.5rem auto;position:relative;padding:0 1rem} .pullquote::before,.pullquote::after{content:"";display:block;width:64px;height:2px; background:var(--brand-accent);margin:1.1rem auto} /* ---- Timeline (e.g. "your first week with the bowl") ---- */ .timeline{list-style:none;padding:0;margin:1.5rem 0;position:relative} .timeline::before{content:"";position:absolute;left:.62rem;top:.4rem;bottom:.4rem;width:2px; background:color-mix(in srgb,var(--brand-accent) 40%,white)} .timeline li{position:relative;padding:0 0 1.5rem 2.4rem} .timeline li::before{content:"";position:absolute;left:0;top:.35rem;width:1.3rem;height:1.3rem;border-radius:50%; background:var(--brand-bg);border:3px solid var(--brand-accent)} .timeline li strong{font-family:var(--font-ui);font-weight:600;display:block} /* ---- Sticky side facts card (desktop two-col layout) ---- */ .with-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start} .sidecard{position:sticky;top:5rem;background:var(--brand-surface);border:1px solid var(--brand-line); border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)} .sidecard h3{margin-top:0} .sidecard .btn{width:100%;text-align:center;margin-top:.75rem} .sidecard ul{list-style:none;padding:0;margin:.5rem 0} .sidecard li{padding:.3rem 0;border-bottom:1px dashed var(--brand-line);font-size:.95rem} .sidecard li:last-child{border-bottom:none} @media(max-width:899px){.with-side{grid-template-columns:1fr}.sidecard{position:static}} /* ---- Product spec / facts table ---- */ .spec-table{width:100%;border-collapse:collapse;font-family:var(--font-ui);background:var(--brand-surface); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .spec-table th{width:38%;text-align:left;font-weight:600;background:color-mix(in srgb,var(--brand-accent) 8%,white)} .spec-table th,.spec-table td{padding:.8rem 1rem;border-bottom:1px solid var(--brand-line)} /* ---- Sound-ring section divider ornament ---- */ .divider{display:block;height:44px;margin:0 auto;width:120px;background-repeat:no-repeat;background-position:center;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cg fill='none' stroke='%2378829F' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M44 26a16 12 0 0 1 32 0' stroke-width='1.6'/%3E%3Cpath d='M36 30a24 18 0 0 1 48 0' stroke-width='1.2' opacity='.7'/%3E%3Cpath d='M28 34a32 24 0 0 1 64 0' stroke-width='1' opacity='.45'/%3E%3C/g%3E%3C/svg%3E")} /* ---- Reveal animation (subtle fade-up on load; CSS only) ---- */ @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .reveal{animation:fadeUp .7s ease both} @media(prefers-reduced-motion:reduce){.reveal{animation:none}} /* ---- Steps rail upgrade: connecting line between numbers ---- */ .steps{position:relative} .steps::before{content:"";position:absolute;left:1.05rem;top:.5rem;bottom:1rem;width:2px; background:color-mix(in srgb,var(--brand-accent) 22%,white)} .steps li::before{position:absolute;z-index:1;border:2px solid var(--brand-bg)} /* ---- Richer hero wash (layered gradient + oversized ring watermark) ---- */ .hero-wash{position:relative;overflow:hidden} .hero-wash::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 80% at 75% 30%,color-mix(in srgb,var(--brand-accent) 16%,transparent),transparent 70%)} .hero-wash::after{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;opacity:.12;pointer-events:none; background-repeat:no-repeat;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%235A5357'%3E%3Ccircle cx='50' cy='50' r='20' stroke-width='.8'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-width='.6' opacity='.8'/%3E%3Ccircle cx='50' cy='50' r='40' stroke-width='.5' opacity='.6'/%3E%3Ccircle cx='50' cy='50' r='49' stroke-width='.4' opacity='.4'/%3E%3C/g%3E%3C/svg%3E")} .hero-wash>.container{position:relative;z-index:1} /* ---- Review-page verdict banner + criteria bars (honest, no star scores) ---- */ .verdict-banner{display:flex;gap:1rem;align-items:center;background:color-mix(in srgb,var(--brand-accent) 12%,white); border:1px solid var(--brand-line);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.5rem 0} .verdict-banner .v-ico{font-size:1.8rem} .crit{margin:.6rem 0} .crit .crit__label{display:flex;justify-content:space-between;font-family:var(--font-ui);font-size:.9rem;font-weight:500} .crit .crit__bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--brand-accent) 15%,white);overflow:hidden} .crit .crit__fill{display:block;height:100%;border-radius:99px;background:var(--brand-cta)} .crit .w-95{width:95%}.crit .w-90{width:90%}.crit .w-85{width:85%}.crit .w-80{width:80%}.crit .w-75{width:75%} .crit .w-70{width:70%}.crit .w-65{width:65%}.crit .w-60{width:60%}.crit .w-50{width:50%}.crit .w-40{width:40%} /* ---- Blog footnotes / sources ---- */ .footnote{font-size:.85rem;color:var(--brand-muted);border-top:1px solid var(--brand-line);padding-top:1rem;margin-top:2rem} /* ---- Common utility classes the models reach for (define them so they're valid + useful, 2026-07-02) ---- */ .btn--sm{padding:.55rem 1.1rem;font-size:.9rem} .flex-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center} .subtitle{font-family:var(--font-ui);font-weight:500;color:var(--brand-muted);font-size:1.05rem;margin:-.25rem 0 1rem} .text-center{text-align:center} .image-block{margin:1.5rem 0} .image-block img{width:100%} /* ---- v2.1 additions (quantitative-template-spec §5, 2026-07-04) ---- */ @media (max-width:640px){body{font-size:17px}} :lang(de) .prose,:lang(de) .article-body{hyphens:auto;-webkit-hyphens:auto} .answer-lead{font-size:1.08em;font-weight:500;max-width:var(--measure);margin:0 0 1.5rem; padding-left:1rem;border-left:3px solid var(--brand-accent)} .byline{display:flex;align-items:center;gap:.7rem;font-family:var(--font-ui);font-size:.9rem; color:var(--brand-muted);margin:0 0 1.5rem} .byline img{width:38px;height:38px;border-radius:50%;margin:0} .bio-box{display:flex;gap:1rem;align-items:flex-start;background:var(--brand-surface); border:1px solid var(--brand-line);border-radius:var(--radius);padding:1.25rem;margin:2rem 0; font-family:var(--font-ui);font-size:.95rem} .bio-box img{width:56px;height:56px;border-radius:50%;flex:0 0 auto;margin:0} /* ---- v2.2 (2026-07-05): frozen 3-tier breakpoints (<=640 phone · 641-899 tablet · >=900 desktop). Comparison dual-render: cards <=899px, table >=900px. Small-phone header fix. ---- */ .compare-cards{display:none} @media(max-width:899px){ .compare{display:none} .compare-cards{display:grid;gap:1rem} .p-card{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--radius); padding:1.25rem;box-shadow:var(--shadow)} .p-card--ours{border:2px solid var(--brand-accent);background:color-mix(in srgb,var(--brand-accent) 7%,white)} .p-card__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem} .p-card__head h3{margin:0;font-size:1.05rem} .p-card .badge{flex:0 0 auto} .p-card dl{margin:0;font-family:var(--font-ui);font-size:.95rem} .p-card dl div{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0; border-bottom:1px solid var(--brand-line)} .p-card dl div:last-of-type{border-bottom:0} .p-card dt{color:var(--brand-muted)} .p-card dd{margin:0;text-align:right;font-weight:500} .p-card dd .yes{color:var(--brand-good);font-weight:700} .p-card dd .no{color:var(--brand-bad);font-weight:700} .p-card .btn{display:block;text-align:center;margin-top:.9rem} } @media(max-width:640px){ .site-header .container{flex-wrap:wrap;row-gap:.15rem;padding:.6rem .75rem} .site-header nav a{margin-left:.8rem;font-size:.85rem} .brand-logo{font-size:1.05rem} } @media(max-width:640px){ .btn--lg{padding:.95rem 1.5rem;font-size:1rem} } /* sticky bar: button never wraps; label truncates instead (v2.2.1) */ .sticky-cta .btn{white-space:nowrap;flex:0 0 auto} .sticky-cta .sticky-cta__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}