/*
Theme Name: Ember Noir
Description: Editorial review theme — warm cream, deep bordo and ember accents.
Version: 1.4.2
Requires at least: 6.2
Tested up to: 6.6
Text Domain: senja-noir
*/
/* ---- self-hosted fonts (latin + latin-ext, variable where available) ---- */
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/jost-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/eb-garamond-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/eb-garamond-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/playfair-display-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/playfair-display-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/playfair-display-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/playfair-display-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
--cream: #efe6ea;
--cream-2: #e8dce6;
--paper: #f3ecf0;
--bordo: #2a1430;
--bordo-2: #22102a;
--bordo-ink: #190a1f;
--ember: #8a3b74;
--ember-soft: #a6568f;
--ink: #2e2230;
--ink-soft: #6b5a68;
--muted: #8d7b88;
--gold: #c9a06e;
--gold-soft: #d8b58a;
--line-dark: rgba(42,20,48,.22);
--line-light: rgba(239,230,234,.22);
--maxw: 1640px;
--gutter: clamp(16px, 5vw, 60px);
--serif: "EB Garamond", Georgia, "Times New Roman", serif;
--display: "Marcellus", Georgia, "Times New Roman", serif;
--h1: "Playfair Display", "EB Garamond", Georgia, serif; /* классический сериф для H1-обзоров */
--sans: "Jost", "Helvetica Neue", Arial, sans-serif;
--script: "EB Garamond", Georgia, serif; /* подпись — курсив серива */
}
*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
margin:0;
font-family:var(--sans);
font-weight:400;
font-size:18px;
line-height:1.6;
color:var(--ink);
background:var(--cream);
overflow-x:clip; /* clip (not hidden) — не ломает position:sticky у sidebar-оффера */
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.shell{
width:100%;
max-width:var(--maxw);
margin-inline:auto;
padding-inline:var(--gutter);
}
/* ---- shared type helpers ---- */
.display{
font-weight:500;
line-height:.92;
letter-spacing:.01em;
}
/* headings use the serif (EB Garamond); body & labels are sans (Jost) */
h1, h2, h3, h4,
.display, .card__title, .rank__name, .feature__title, .laurel__title,
.brand__name, .connect__title, .faq-q-head{
font-family:var(--serif);
}
/* the wordmark / logo is the display face (Marcellus) */
.display, .brand__name, .topbar__brand{ font-family:var(--display); }
.eyebrow{
font-size:.72rem;
letter-spacing:.32em;
text-transform:uppercase;
font-weight:500;
color:var(--ember);
margin:0;
}
.signature{
font-family:var(--script);
font-style:italic;
font-size:clamp(2rem,4.4vw,2.9rem);
line-height:1;
color:var(--gold);
margin:0;
}
.skip-link{
position:absolute; left:-9999px; top:0;
background:var(--bordo); color:var(--cream);
padding:10px 16px; z-index:50;
}
.skip-link:focus{ left:12px; top:12px; }
/* ============================================================
TOP BAR
============================================================ */
.topbar{
background:var(--cream);
border-bottom:1px solid var(--line-dark);
}
.topbar__inner{
display:flex;
align-items:center;
gap:22px;
padding-block:16px;
}
.topbar__brand{
font-size:.8rem;
letter-spacing:.42em;
text-transform:uppercase;
font-weight:600;
color:var(--ink);
}
.topbar__rule{
flex:1;
height:1px;
background:var(--line-dark);
}
.topbar__tag{
font-size:.62rem;
letter-spacing:.3em;
text-transform:uppercase;
text-align:right;
line-height:1.5;
color:var(--muted);
}
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;
overflow:hidden;
background:
radial-gradient(120% 80% at 85% 0%, rgba(138,59,116,.10), transparent 60%),
var(--cream);
padding-top:clamp(28px,5vw,56px);
padding-bottom:0;
}
.hero__decor{
position:absolute; inset:0; z-index:0;
pointer-events:none; color:var(--gold);
}
.hero__decor svg{ width:100%; height:100%; display:block; }
.hero__inner{
position:relative; z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
align-items:end;
gap:clamp(20px,4vw,56px);
}
.hero__left{ padding-bottom:clamp(40px,6vw,88px); }
.hero__kicker{ margin-bottom:clamp(6px,2vw,18px); }
.hero__title{
font-size:clamp(4.5rem,17vw,13rem);
color:var(--bordo);
margin:0 0 .12em;
}
.hero__spark{
display:block;
width:120px; height:1px;
background:var(--line-dark);
margin:0 0 18px;
position:relative;
}
.hero__spark::after{
content:"";
position:absolute; left:46px; top:-3px;
width:7px; height:7px;
background:var(--gold);
transform:rotate(45deg);
}
.hero__role{
color:var(--ember);
letter-spacing:.24em;
margin-bottom:clamp(18px,3vw,30px);
}
.hero__lead{
max-width:46ch;
font-size:clamp(1.2rem,2.2vw,1.5rem);
line-height:1.5;
color:var(--ink);
margin:0 0 clamp(18px,3vw,28px);
padding-left:18px;
border-left:1px solid var(--ember);
}
.signature.hero__spark,
.hero__left .signature{ margin:0 0 10px; }
.hero__meta{ color:var(--muted); margin-bottom:clamp(20px,3vw,30px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
display:inline-block;
font-size:.72rem;
letter-spacing:.24em;
text-transform:uppercase;
font-weight:600;
padding:14px 26px;
border:1px solid var(--bordo);
transition:background .25s,color .25s,border-color .25s;
}
.btn--solid{ background:var(--bordo); color:var(--cream); }
.btn--solid:hover{ background:var(--ember); border-color:var(--ember); }
.btn--ghost{ color:var(--bordo); }
.btn--ghost:hover{ background:var(--bordo); color:var(--cream); }
.hero__right{ align-self:end; }
.portrait{ margin:0; }
.portrait--hero{
position:relative;
max-width:540px;
margin-inline:auto;
z-index:1;
}
.portrait--hero img{
width:100%;
aspect-ratio:57/74; /* taller oval, keeps the figure */
object-fit:cover;
object-position:center 16%; /* keep face high in frame */
border-radius:50%; /* soft ellipse, not a doorway */
background:var(--bordo-2);
}
/* ============================================================
FEATURED APPS
============================================================ */
.featured{
background:
radial-gradient(120% 90% at 50% -10%, rgba(154,80,88,.18), transparent 55%),
var(--bordo);
color:var(--cream);
padding-block:clamp(48px,7vw,84px);
}
.section-head{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
font-size:.82rem;
letter-spacing:.38em;
text-transform:uppercase;
color:var(--gold-soft);
margin:0 0 clamp(30px,5vw,52px);
text-align:center;
}
.section-head__mark{
width:7px; height:7px;
background:var(--gold);
transform:rotate(45deg);
flex:0 0 auto;
}
.section-head--plain{
display:block;
color:var(--ember);
}
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(18px,3vw,34px);
}
.card{ text-align:center; }
.card__media{
display:block;
overflow:hidden;
border:1px solid rgba(216,181,138,.25);
background:var(--bordo-2);
}
.card__media img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
transition:transform .5s ease;
}
.card__media:hover img{ transform:scale(1.04); }
.card__title{
font-size:1.4rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
margin:18px 0 6px;
}
.card__sub{
font-size:.74rem;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--gold-soft);
margin:0 0 10px;
}
.card__year{
font-size:.72rem;
letter-spacing:.3em;
color:rgba(239,230,234,.6);
margin:0;
position:relative;
display:inline-block;
padding:0 22px;
}
.card__year::before,
.card__year::after{
content:""; position:absolute; top:50%;
width:14px; height:1px; background:rgba(216,181,138,.4);
}
.card__year::before{ left:0; }
.card__year::after{ right:0; }
/* ============================================================
RANKING (affiliate review blocks)
============================================================ */
.ranking{
background:
radial-gradient(120% 90% at 50% -10%, rgba(154,80,88,.18), transparent 55%),
var(--bordo);
color:var(--cream);
padding-block:clamp(48px,7vw,88px);
overflow:hidden;
}
.section-sub{
text-align:center;
font-size:1.02rem;
color:rgba(239,230,234,.68);
margin:-28px auto clamp(32px,5vw,48px);
max-width:60ch;
}
.rank-intro{ max-width:720px; margin:14px auto clamp(28px,4vw,44px); text-align:center; color:rgba(239,230,234,.72); font-size:1rem; line-height:1.6; }
.rank-intro a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(216,181,138,.4); }
.rank-intro a:hover{ color:var(--cream); }
.rank-list{ display:grid; gap:clamp(16px,2.4vw,24px); }
.rank{
display:grid;
grid-template-columns:auto auto 1fr auto;
align-items:center;
gap:clamp(16px,2.4vw,30px);
background:linear-gradient(180deg, rgba(74,34,66,.35), rgba(34,16,42,.35));
border:1px solid rgba(216,181,138,.18);
border-radius:4px;
padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px);
position:relative;
transition:border-color .25s, transform .25s;
}
.rank:hover{ border-color:rgba(216,181,138,.5); transform:translateY(-2px); }
.rank--top{
grid-template-columns:auto auto 1fr auto;
border-color:var(--gold);
background:linear-gradient(180deg, rgba(138,59,116,.45), rgba(34,16,42,.55));
box-shadow:0 0 0 1px rgba(201,160,110,.35), 0 24px 60px -30px rgba(0,0,0,.7);
padding-top:clamp(30px,3vw,40px);
}
.rank__pick{
position:absolute; top:-13px; left:clamp(18px,2.6vw,32px);
background:var(--gold); color:var(--bordo-ink);
font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
padding:7px 16px;
}
.rank__rank{
font-family:var(--serif);
font-size:clamp(2.4rem,5vw,3.6rem);
font-weight:600; line-height:1;
color:var(--gold-soft);
width:1.4em; text-align:center; flex:0 0 auto;
}
.rank--top .rank__rank{ color:var(--gold); font-size:clamp(3rem,6vw,4.6rem); }
.rank__logo{
width:72px; height:72px; border-radius:14px;
object-fit:cover; background:var(--bordo-ink);
border:1px solid rgba(216,181,138,.3); flex:0 0 auto;
}
.rank--top .rank__logo{ width:96px; height:96px; }
.rank__main{ min-width:0; }
.rank__name{
font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:600;
letter-spacing:.02em; margin:0 0 6px;
}
.rank__stars{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.stars{ position:relative; display:inline-flex; }
.stars-base, .stars-fill{ display:inline-flex; gap:2px; }
.stars-base{ color:rgba(216,181,138,.26); }
.stars-fill{ position:absolute; left:0; top:0; color:var(--gold); overflow:hidden; white-space:nowrap; }
.stars-base svg, .stars-fill svg{ width:16px; height:16px; flex:none; }
.rank__score{ font-size:.92rem; color:var(--gold-soft); font-weight:600; letter-spacing:.04em; }
.rank__verdict{
font-size:1.02rem; line-height:1.5; color:rgba(239,230,234,.82);
margin:0 0 14px; max-width:52ch;
}
.rank__facts{
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; gap:8px 10px;
}
.rank__facts li{
font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--cream);
border:1px solid rgba(216,181,138,.28);
border-radius:40px; padding:6px 13px;
display:inline-flex; align-items:center; gap:7px;
}
.rank__facts svg{ width:13px; height:13px; color:var(--gold-soft); }
.rank__cta{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; min-width:150px; }
.rank__cta .btn{ text-align:center; border-color:var(--gold-soft); }
.rank__cta .btn--solid{ background:var(--gold); color:var(--bordo-ink); border-color:var(--gold); }
.rank__cta .btn--solid:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }
.rank__cta .btn--ghost{ color:var(--cream); }
.rank__cta .btn--ghost:hover{ background:rgba(216,181,138,.15); }
/* comparison table */
.compare-wrap{
margin-top:clamp(36px,5vw,56px);
overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;
border:1px solid rgba(216,181,138,.22);
border-radius:16px;
background:linear-gradient(180deg, rgba(74,34,66,.3), rgba(34,16,42,.3));
box-shadow:0 26px 64px -36px rgba(0,0,0,.75);
}
.compare{
width:100%; border-collapse:collapse; min-width:700px;
font-size:.96rem; color:var(--cream);
}
.compare th, .compare td{ text-align:left; padding:16px 22px; vertical-align:middle; }
.compare thead th{
font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--gold-soft); font-weight:700;
background:rgba(25,10,31,.42);
border-bottom:1px solid rgba(216,181,138,.3);
}
/* center the data columns (Score, Free plan, Voice, Video, From); App left, CTA right */
.compare th:nth-child(n+2):nth-child(-n+6),
.compare td:nth-child(n+2):nth-child(-n+6){ text-align:center; }
.compare thead th:last-child{ text-align:right; }
.compare tbody td{ border-bottom:1px solid rgba(216,181,138,.1); }
.compare tbody tr:last-child td{ border-bottom:0; }
.compare tbody tr:hover{ background:rgba(216,181,138,.055); }
/* highlighted top pick */
.compare tr.is-top{ background:linear-gradient(90deg, rgba(201,160,110,.13), rgba(201,160,110,.02) 60%); }
.compare tr.is-top td:first-child{ box-shadow:inset 3px 0 0 var(--gold); }
/* app cell: logo + name */
.c-app{ display:flex; align-items:center; gap:13px; }
.c-logo{
width:40px; height:40px; border-radius:11px; flex:none; object-fit:contain; padding:4px;
background:rgba(255,255,255,.05); border:1px solid rgba(216,181,138,.16);
}
.c-appwrap{ display:flex; flex-direction:column; }
.c-name{ font-weight:600; font-size:1.05rem; }
.c-top{ font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-top:3px; }
/* radial score gauge */
.c-score{ text-align:center; }
.gauge{ position:relative; display:inline-grid; place-items:center; width:50px; height:50px; }
.gauge svg{ width:50px; height:50px; transform:rotate(-90deg); overflow:visible; }
.g-bg{ fill:none; stroke:rgba(216,181,138,.16); stroke-width:3.5; }
.g-arc{ fill:none; stroke:var(--gold-soft); stroke-width:3.5; stroke-linecap:round; }
.gauge b{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:.95rem; line-height:1; font-weight:600; letter-spacing:.3px; color:var(--cream); font-variant-numeric:tabular-nums; }
.compare tr.is-top .g-arc{ stroke:var(--gold); filter:drop-shadow(0 0 5px rgba(201,160,110,.6)); }
/* free-plan pill */
.c-pill{
display:inline-block; font-size:.72rem; letter-spacing:.04em; white-space:nowrap;
color:var(--cream); background:rgba(216,181,138,.1);
border:1px solid rgba(216,181,138,.26); border-radius:40px; padding:5px 13px;
}
/* yes / no icon cells — matched gold circles for a cohesive look */
.c-ic{ text-align:center; }
.c-ic .yes{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(201,160,110,.2); border:1px solid rgba(201,160,110,.45); color:var(--gold); }
.c-ic .yes .ic{ width:15px; height:15px; }
.c-ic .no{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid rgba(216,181,138,.16); color:rgba(216,181,138,.38); font-size:1rem; line-height:1; }
/* price */
.c-price{ font-weight:600; color:var(--cream); font-variant-numeric:tabular-nums; }
.c-price--na{ color:rgba(216,181,138,.4); font-weight:500; }
/* cta button (filled for top pick, ghost for the rest) */
.compare td:last-child{ text-align:right; }
.c-cta{
display:inline-block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
color:var(--bordo-ink); background:var(--gold); border:1px solid var(--gold);
padding:9px 18px; border-radius:40px; text-decoration:none; transition:background .2s, transform .15s, color .2s;
}
.c-cta:hover{ background:var(--gold-soft); transform:translateY(-1px); }
.compare tr:not(.is-top) .c-cta{ background:transparent; color:var(--gold-soft); }
.compare tr:not(.is-top) .c-cta:hover{ background:rgba(216,181,138,.14); color:var(--cream); }
/* FAQ */
.faq{ background:var(--cream); padding-block:clamp(44px,6vw,80px); }
.faq__list{ max-width:820px; margin-inline:auto; display:grid; gap:4px; }
.faq details{
border-bottom:1px solid var(--line-dark); padding:18px 4px;
}
.faq summary{
cursor:pointer; list-style:none; display:flex; justify-content:space-between;
align-items:center; gap:16px;
font-size:1.12rem; font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:"+"; font-size:1.5rem; color:var(--ember); line-height:1; flex:0 0 auto;
}
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ margin:12px 0 0; color:var(--ink-soft); line-height:1.6; max-width:70ch; }
/* referral widget (corner) */
.cw{
position:fixed; right:24px; bottom:24px; z-index:60;
display:flex; flex-direction:column; align-items:flex-end; gap:14px;
pointer-events:none;
}
.cw-fab, .cw-panel, .cw-teaser{ pointer-events:auto; }
.cw-fab{
position:relative; width:56px; height:56px; flex:none;
display:grid; place-items:center; padding:0; cursor:pointer;
border-radius:50%; color:var(--gold);
background:var(--bordo-2); border:1px solid var(--gold-soft);
box-shadow:0 16px 44px rgba(0,0,0,.45);
opacity:0; transform:translateY(24px) scale(.8);
transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), background-color .2s;
}
.cw.is-ready .cw-fab{ opacity:1; transform:none; }
.cw-fab:hover{ background:var(--bordo); }
.cw-fab .ic{ width:22px; height:22px; }
.cw-fab .ic-x{ position:absolute; opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s; }
.cw.is-open .cw-fab .ic-chat{ opacity:0; }
.cw.is-open .cw-fab .ic-x{ opacity:1; transform:none; }
.cw-fab::before{
content:""; position:absolute; inset:-1px; border-radius:50%;
box-shadow:0 0 0 0 rgba(201,160,110,.5);
animation:cw-pulse 2.8s cubic-bezier(.2,.8,.2,1) infinite;
}
.cw.is-open .cw-fab::before{ animation:none; }
@keyframes cw-pulse{
0%{ box-shadow:0 0 0 0 rgba(201,160,110,.5); }
70%{ box-shadow:0 0 0 13px rgba(201,160,110,0); }
100%{ box-shadow:0 0 0 0 rgba(201,160,110,0); }
}
.cw-badge{
position:absolute; top:-2px; right:-2px;
min-width:20px; height:20px; padding:0 6px;
display:grid; place-items:center; border-radius:40px;
font-size:11px; font-weight:700; color:var(--bordo-ink);
background:var(--gold); box-shadow:0 0 0 2px var(--bordo-2);
}
.cw.is-open .cw-badge{ opacity:0; }
.cw-teaser{
position:absolute; right:0; bottom:70px;
display:flex; align-items:center; gap:9px;
max-width:min(260px, calc(100vw - 48px));
padding:9px 15px 9px 9px;
border:1px solid var(--gold-soft); border-radius:40px; cursor:pointer;
font:inherit; text-align:left; color:var(--cream);
background:var(--bordo-2); box-shadow:0 16px 44px rgba(0,0,0,.45);
opacity:0; transform:translateY(10px) scale(.94); transform-origin:100% 100%;
transition:opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.cw.is-teasing .cw-teaser{ opacity:1; transform:none; }
.cw.is-open .cw-teaser{ opacity:0; pointer-events:none; }
.cw-teaser-ic{
width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
background:var(--gold); color:var(--bordo-ink); flex:none;
}
.cw-teaser-ic .ic{ width:16px; height:16px; }
.cw-teaser span{ font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-teaser b{ color:var(--cream); font-weight:600; }
.cw-panel{
order:-1; width:min(352px, calc(100vw - 40px));
border-radius:16px; overflow:hidden;
background:var(--bordo-2); border:1px solid var(--gold-soft);
box-shadow:0 30px 80px rgba(0,0,0,.6);
visibility:hidden; opacity:0; transform:translateY(14px) scale(.94); transform-origin:100% 100%;
transition:opacity .28s ease, transform .42s cubic-bezier(.16,1,.3,1), visibility 0s linear .42s;
}
.cw.is-open .cw-panel{
visibility:visible; opacity:1; transform:none;
transition:opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.cw-head-ref{
display:flex; align-items:center; gap:11px; padding:16px;
border-bottom:1px solid rgba(216,181,138,.16);
background:linear-gradient(180deg, rgba(216,181,138,.08), transparent);
}
.cw-ref-ic{
width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
background:var(--gold); color:var(--bordo-ink); flex:none;
}
.cw-ref-ic .ic{ width:18px; height:18px; }
.cw-who{ flex:1; min-width:0; line-height:1.3; }
.cw-who b{ display:block; font-family:var(--serif); font-size:1.1rem; color:var(--cream); }
.cw-who i{ font-style:normal; font-size:.76rem; color:var(--gold-soft); }
.cw-close{
flex:none; width:30px; height:30px; display:grid; place-items:center;
border:0; border-radius:50%; cursor:pointer;
background:rgba(216,181,138,.1); color:var(--gold-soft);
transition:color .2s, background-color .2s;
}
.cw-close:hover{ color:var(--cream); background:rgba(216,181,138,.2); }
.cw-close .ic{ width:14px; height:14px; }
.cw-offers{ display:flex; flex-direction:column; gap:9px; padding:16px; }
.cw-offers-lead{ font-size:.86rem; color:rgba(239,230,234,.7); margin:0 2px 4px; }
.cw-offer{
position:relative; display:flex; align-items:center; gap:12px; padding:11px;
border-radius:12px; text-decoration:none;
background:rgba(216,181,138,.05); border:1px solid rgba(216,181,138,.14);
transition:background-color .16s, border-color .16s, transform .16s;
}
.cw-offer:hover{ background:rgba(216,181,138,.1); border-color:rgba(216,181,138,.3); transform:translateY(-1px); }
.cw-rank{
display:grid; place-items:center; width:22px; height:22px; border-radius:6px;
background:rgba(216,181,138,.12); color:var(--gold-soft); font-size:11px; font-weight:700; flex:none;
}
.cw-offer-logo{ width:42px; height:42px; border-radius:10px; object-fit:cover; flex:none; background:var(--bordo-ink); }
.cw-offer-txt{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.cw-offer-txt b{ color:var(--cream); font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-offer-txt i{ color:rgba(239,230,234,.6); font-style:normal; font-size:.78rem; }
.cw-offer-go{ width:18px; height:18px; color:var(--gold); flex:none; transition:transform .16s; }
.cw-offer:hover .cw-offer-go{ transform:translateX(3px); }
.cw-offer--top{ border-color:var(--gold); background:rgba(138,59,116,.3); padding:13px; box-shadow:0 10px 30px -14px rgba(0,0,0,.6); }
.cw-offer--top .cw-rank{ background:var(--gold); color:var(--bordo-ink); }
.cw-offer--top .cw-offer-logo{ width:46px; height:46px; }
.cw-offer--top .cw-offer-txt b{ font-size:1rem; }
.cw-pick-badge{
align-self:flex-start; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
padding:3px 8px; border-radius:999px; background:var(--gold); color:var(--bordo-ink);
margin-bottom:4px; line-height:1.4; white-space:nowrap;
}
.cw-offers-note{ font-size:.68rem; color:rgba(239,230,234,.45); margin:6px 2px 0; text-align:center; }
@media (max-width:560px){
.cw{ right:16px; bottom:16px; }
.cw-panel{ width:min(300px, calc(100vw - 32px)); }
}
/* ============================================================
DUO (What You Get / Why)
============================================================ */
.duo{
background:var(--cream);
padding-block:clamp(48px,7vw,86px);
}
.duo__inner{
display:grid;
grid-template-columns:1fr 1px 1fr;
gap:clamp(28px,5vw,64px);
}
.duo__divider{ background:var(--line-dark); }
.col-head{
text-align:center;
font-size:.9rem;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--ember);
margin:0 0 clamp(26px,4vw,40px);
position:relative;
}
.col-head::after{
content:"";
display:block;
width:40px; height:1px;
background:var(--gold);
margin:12px auto 0;
}
.feature-list,
.laurel-list{
list-style:none;
margin:0; padding:0;
display:grid;
gap:clamp(20px,3vw,30px);
}
.feature,
.laurel{
display:grid;
grid-template-columns:auto 1fr;
gap:18px;
align-items:start;
}
.feature__icon,
.laurel__mark{
width:46px; height:46px;
border:1px solid var(--ember);
border-radius:50%;
display:grid;
place-items:center;
color:var(--ember);
flex:0 0 auto;
}
.feature__icon svg,
.laurel__mark svg{ width:20px; height:20px; }
.feature__title,
.laurel__title{
font-size:.86rem;
letter-spacing:.2em;
text-transform:uppercase;
font-weight:600;
color:var(--ink);
margin:4px 0 4px;
}
.feature__text,
.laurel__text{
font-size:1.02rem;
line-height:1.5;
color:var(--ink-soft);
margin:0;
max-width:36ch;
}
.col-head--right + .laurel-list .laurel__mark{ color:var(--gold); border-color:var(--gold); }
/* ============================================================
FEATURED ON (brand row)
============================================================ */
.brands{
background:var(--cream-2);
border-top:1px solid var(--line-dark);
border-bottom:1px solid var(--line-dark);
padding-block:clamp(34px,5vw,54px);
}
.brand-row{
list-style:none;
margin:0; padding:0;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-end;
gap:clamp(16px,3vw,30px);
}
.brand{ text-align:center; flex:1 1 auto; }
.brand__name{
display:block;
font-size:clamp(1.3rem,3vw,1.9rem);
letter-spacing:.18em;
color:var(--ember);
font-weight:500;
}
.brand__sub{
display:block;
font-size:.56rem;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--muted);
margin-top:4px;
}
.brand img{ max-height:54px; width:auto; margin-inline:auto; opacity:.82; }
/* ============================================================
CONNECT
============================================================ */
.connect{
background:
radial-gradient(90% 120% at 0% 0%, rgba(154,80,88,.22), transparent 55%),
var(--bordo-2);
color:var(--cream);
padding-block:clamp(48px,7vw,88px);
}
.connect__inner{
display:grid;
grid-template-columns:300px 1fr;
gap:clamp(30px,5vw,70px);
align-items:center;
}
.connect__aside{ text-align:center; position:relative; }
.portrait--round img{
width:240px; height:240px;
margin-inline:auto;
border-radius:50%;
object-fit:cover;
border:1px solid rgba(216,181,138,.4);
background:var(--bordo-ink);
}
.connect__sig{
margin-top:-26px;
position:relative;
color:var(--gold-soft);
}
.connect__title{
font-size:clamp(1.9rem,4.4vw,3.1rem);
font-weight:500;
letter-spacing:.04em;
text-transform:uppercase;
line-height:1.1;
margin:0 0 clamp(24px,4vw,38px);
color:var(--cream);
}
.connect__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(24px,4vw,48px);
align-items:center;
}
.contact-list{
list-style:none; margin:0; padding:0;
display:grid; gap:16px;
}
.contact{
display:flex; align-items:center; gap:14px;
font-size:1.05rem;
color:var(--cream);
}
.contact a:hover{ color:var(--gold-soft); }
.contact__icon{
width:40px; height:40px;
border:1px solid rgba(216,181,138,.4);
border-radius:50%;
display:grid; place-items:center;
color:var(--gold-soft);
flex:0 0 auto;
}
.contact__icon svg{ width:17px; height:17px; }
.pull-quote{
margin:0;
padding-left:clamp(20px,3vw,34px);
border-left:1px solid rgba(216,181,138,.35);
position:relative;
}
.pull-quote__mark{
font-family:var(--serif);
font-size:3.4rem;
line-height:0;
color:var(--gold-soft);
display:block;
height:28px;
}
.pull-quote p{
font-size:clamp(1.2rem,2.3vw,1.5rem);
font-style:italic;
line-height:1.45;
margin:0 0 14px;
color:var(--cream);
}
.pull-quote cite{
font-style:normal;
font-size:.7rem;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--gold-soft);
}
/* ============================================================
BOTTOM STRIP + LEGAL
============================================================ */
.bottom-strip{
background:var(--bordo-ink);
color:var(--gold-soft);
}
.bottom-strip__inner{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
padding-block:18px;
font-size:.72rem;
letter-spacing:.42em;
text-transform:uppercase;
}
.dot{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }
.legal{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:12px;
padding-block:16px;
color:rgba(239,230,234,.55);
font-size:.82rem;
letter-spacing:.02em;
}
.legal__nav{ display:flex; gap:20px; }
.legal__nav a{ color:rgba(239,230,234,.7); }
.legal__nav a:hover{ color:var(--gold-soft); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:900px){
body{ font-size:18px; }
.hero{ padding-top:20px; overflow:hidden; }
.hero__inner{ display:block; position:relative; }
.hero__left{ position:relative; z-index:1; padding-bottom:26px; }
.hero__title{ font-size:clamp(3rem,15vw,4.6rem); margin-bottom:.06em; }
.hero__kicker{ margin-bottom:8px; }
.hero__lead{ font-size:1.08rem; }
/* leave room on the right for the figure; text sits to her left */
.hero__right{
position:absolute; right:-12%; bottom:0; z-index:0;
width:78%; max-width:340px; margin:0;
}
.portrait--hero{ max-width:none; margin:0; }
.portrait--hero img{ border-radius:0; }
/* readability scrim behind the text, over the figure */
.hero__left::before{
content:""; position:absolute; inset:-30px -16px -12px -24px; z-index:-1;
background:linear-gradient(95deg, rgba(25,10,31,.9) 40%, rgba(25,10,31,.5) 68%, transparent 100%);
}
.hero__title, .hero__lead, .hero__left .signature, .hero__role, .hero__kicker, .hero__meta{
text-shadow:0 2px 16px rgba(25,10,31,.78);
}
.cards{ grid-template-columns:repeat(2,1fr); }
.duo__inner{ grid-template-columns:1fr; gap:40px; }
.duo__divider{ display:none; }
.col-head--right{ margin-top:8px; }
.connect__inner{ grid-template-columns:1fr; }
.connect__aside{ max-width:280px; margin-inline:auto; }
.connect__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
.topbar__tag{ display:none; }
.hero__title{ font-size:clamp(3rem,14vw,4.2rem); }
.hero__cta{ flex-direction:column; align-items:stretch; }
.hero__cta .btn{ text-align:center; }
.cards{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; }
.section-head{ font-size:.68rem; letter-spacing:.2em; gap:8px; }
.brand-row{ gap:18px 24px; }
.brand{ flex:1 1 40%; }
.legal{ justify-content:center; text-align:center; }
}
@media (max-width:860px){
.rank{ grid-template-columns:auto auto 1fr; row-gap:14px; }
.rank__cta{ grid-column:1 / -1; flex-direction:row; min-width:0; }
.rank__cta .btn{ flex:1; }
.rank--top{ grid-template-columns:auto 1fr; }
}
@media (max-width:560px){
.section-sub{ font-size:.92rem; margin-top:-10px; }
.rank, .rank--top{ grid-template-columns:auto 1fr; gap:10px 14px; }
.rank__rank, .rank--top .rank__rank{ grid-column:1; grid-row:1; font-size:2rem; width:1em; }
.rank__logo, .rank--top .rank__logo{ grid-column:1; grid-row:2; width:50px; height:50px; }
.rank__main{ grid-column:2; grid-row:1 / 3; min-width:0; }
.rank__cta{ grid-column:1 / -1; grid-row:3; flex-direction:column; min-width:0; }
.rank__pick{ left:14px; }
.rank__cta .btn{ flex:none; }
.rank__verdict{ max-width:none; }
.rank__facts li{ font-size:.68rem; }
/* comparison table -> stacked cards */
.compare-wrap{ overflow:visible; border:0; background:none; box-shadow:none; }
.compare{ min-width:0; }
.compare thead{ display:none; }
.compare tbody, .compare tr, .compare td{ display:block; }
.compare tr{
border:1px solid rgba(216,181,138,.2); border-radius:6px;
padding:4px 14px; margin-bottom:14px;
background:linear-gradient(180deg, rgba(74,34,66,.3), rgba(34,16,42,.3));
}
.compare td{
display:flex; justify-content:space-between; align-items:center; gap:16px;
padding:9px 0; border-bottom:1px solid rgba(216,181,138,.12);
}
.compare tr td:last-child{ border-bottom:none; }
.compare td::before{
content:attr(data-label); color:var(--gold-soft);
font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; flex:0 0 auto;
}
.compare td:first-child{ font-size:1.15rem; font-weight:600; padding-top:12px; }
.compare td:first-child::before{ content:none; }
.compare tr.is-top td:first-child{ box-shadow:none; } /* no stray left stripe on stacked card */
.compare tr.is-top{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,160,110,.5); } /* gold frame for top pick */
}
@media (prefers-reduced-motion:reduce){
*{ transition:none !important; }
}
/* ============================================================
DARK BORDO THEME (whole page)
============================================================ */
body{ background:var(--bordo-ink); color:var(--cream); }
/* topbar */
.topbar{ background:transparent; border-bottom-color:var(--line-light); }
.topbar__brand{ color:var(--cream); }
.topbar__rule{ background:var(--line-light); }
.topbar__tag{ color:rgba(239,230,234,.5); }
/* hero */
.hero{
background:
linear-gradient(to bottom, transparent 85%, rgba(25,10,31,.4) 94%, var(--bordo-ink) 100%),
linear-gradient(90deg, rgba(25,10,31,.95) 0%, rgba(25,10,31,.66) 40%, rgba(25,10,31,.3) 78%, rgba(25,10,31,.15) 100%),
url("/wp-content/uploads/2026/10/hero-bg.webp") right top / cover no-repeat,
var(--bordo-ink);
}
.hero__decor{ display:none; }
.hero__kicker, .hero__role{ color:var(--gold-soft); }
.hero__title{ color:var(--cream); }
.hero__spark{ background:var(--line-light); }
.hero__lead{ color:var(--cream); border-left-color:var(--ember-soft); }
.hero__meta{ color:rgba(239,230,234,.5); }
.hero__decor{ color:var(--gold); opacity:.8; }
/* photo melts into the dark — no oval, no background box */
.portrait--hero img{
border-radius:0;
background:transparent;
aspect-ratio:auto;
object-fit:contain;
-webkit-mask-image:none;
mask-image:none;
}
/* buttons on dark */
.btn--solid{ background:var(--gold); color:var(--bordo-ink); border-color:var(--gold); }
.btn--solid:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }
.btn--ghost{ color:var(--cream); border-color:var(--gold-soft); }
.btn--ghost:hover{ background:rgba(216,181,138,.14); color:var(--cream); }
/* duo (what you get / why) */
.duo{ background:transparent; }
.col-head{ color:var(--gold-soft); }
.feature__title, .laurel__title{ color:var(--cream); }
.feature__text, .laurel__text{ color:rgba(239,230,234,.72); }
.duo__divider{ background:var(--line-light); }
.feature__icon{ border-color:var(--ember-soft); color:var(--ember-soft); }
/* featured-on */
.brands{ background:transparent; border-color:var(--line-light); }
.section-head--plain{ color:var(--gold-soft); }
/* faq */
.faq{ background:transparent; }
.faq summary{ color:var(--cream); }
.faq summary::after{ color:var(--gold-soft); }
.faq p{ color:rgba(239,230,234,.72); }
.faq details{ border-bottom-color:var(--line-light); }
/* already-dark sections sit on the dark body seamlessly */
.featured, .ranking, .connect{ background-color:transparent; }
.ranking{
background:
radial-gradient(120% 90% at 50% -10%, rgba(154,80,88,.2), transparent 55%),
linear-gradient(180deg, rgba(42,20,48,.6), transparent);
}
.connect{
background:
radial-gradient(90% 120% at 0% 0%, rgba(154,80,88,.24), transparent 55%),
linear-gradient(180deg, transparent, rgba(34,16,42,.5));
}
/* card photo is mobile-only */
.rank__photo{ display:none; }
/* desktop: photo as the card background with a dark overlay so content stays readable */
@media (min-width:561px){
.rank{ overflow:hidden; isolation:isolate; }
.rank__pick{ top:14px; left:16px; } /* keep the badge inside the clipped photo card */
.rank__photo{ display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 18%; z-index:-1; }
.rank::after{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, rgba(25,10,31,.94) 0%, rgba(25,10,31,.8) 46%, rgba(25,10,31,.62) 78%, rgba(25,10,31,.5) 100%); }
.rank--top::after{ background:linear-gradient(90deg, rgba(25,10,31,.9) 0%, rgba(138,59,116,.5) 48%, rgba(25,10,31,.5) 100%); }
}
/* ============================================================
MOBILE RANKING PYRAMID — photo tiles with overlay
============================================================ */
@media (max-width:560px){
.rank-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rank--top{ grid-column:1 / -1; }
.rank, .rank--top{
position:relative; display:block; overflow:hidden; padding:0;
border-radius:16px; border:1px solid rgba(216,181,138,.22);
min-height:232px; box-shadow:none; background:var(--bordo-ink);
}
.rank--top{ min-height:360px; border-color:var(--gold); }
.rank__photo{
display:block; position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:74% 24%; z-index:0; /* models sit on the right of the frame */
}
.rank::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(25,10,31,.12) 28%, rgba(25,10,31,.55) 60%, rgba(25,10,31,.93) 100%);
}
/* rank badge top-left */
.rank__rank{
position:absolute; top:10px; left:10px; width:auto; margin:0;
font-family:var(--serif); font-size:.8rem; font-weight:600; color:var(--cream);
background:rgba(25,10,31,.6); border:1px solid rgba(216,181,138,.4);
padding:3px 11px; border-radius:40px;
}
.rank__rank::before{ content:"\2116"; opacity:.8; margin-right:1px; }
.rank--top .rank__rank{ display:none; }
.rank__pick{ position:absolute; top:10px; left:10px; z-index:2; font-size:.56rem; padding:5px 11px; }
/* logo top-right */
.rank__logo{
position:absolute; top:9px; right:9px; z-index:2;
width:40px; height:40px; margin:0; border-radius:50%;
}
.rank--top .rank__logo{ width:46px; height:46px; }
/* name + score bottom overlay */
.rank__main{
position:absolute; left:12px; right:12px; bottom:54px; z-index:2; min-width:0;
}
.rank--top .rank__main{ bottom:64px; }
.rank__name{ font-size:1.12rem; margin:0; color:var(--cream); text-shadow:0 1px 6px rgba(0,0,0,.65); }
.rank--top .rank__name{ font-size:1.5rem; }
.rank__stars{ margin:2px 0 0; }
.rank__stars .stars{ display:none; }
.rank__score{ color:var(--gold-soft); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.rank__verdict, .rank__facts{ display:none; }
/* CTA pill at the very bottom */
.rank__cta{
position:absolute; left:12px; right:12px; bottom:12px; z-index:2; flex-direction:row;
}
.rank__cta .btn--ghost{ display:none; }
.rank__cta .btn--solid{ width:100%; padding:11px; font-size:.64rem; border-radius:40px; }
}
/* hero layout tuning (desktop): text to the top, figure to the right */
@media (min-width:901px){
/* taller hero so the figure shows down to the waist + a bit of leg */
.hero{ min-height:calc(100svh - 59px); display:flex; }
.hero__inner{ align-items:end; width:100%; }
.hero__left{ align-self:center; padding-bottom:40px; }
.portrait--hero{ margin-left:auto; margin-right:0; transform:translateX(5%); }
}
/* hero on mobile: brighter photo with her face up top (text-free), copy pinned to the bottom */
@media (max-width:900px){
.hero{
min-height:86vh;
display:flex; flex-direction:column; justify-content:flex-end;
padding-top:0;
background:
linear-gradient(180deg,
rgba(25,10,31,.08) 0%,
rgba(25,10,31,.12) 30%,
rgba(25,10,31,.64) 50%,
rgba(25,10,31,.9) 70%,
var(--bordo-ink) 100%),
url("/wp-content/uploads/2026/10/hero-bg.webp") 88% top / cover no-repeat,
var(--bordo-ink);
}
.hero__inner{ padding-bottom:28px; }
.hero__left{ padding-bottom:0; }
.hero__left::before{ display:none; } /* vertical gradient already handles readability */
.hero__lead{ max-width:100%; font-size:1rem; }
}
/* ============================================================
HEADER NAV
============================================================ */
.topbar{ position:relative; }
/* transparent floating header over any photo hero (reviews + hubs), like the homepage */
.has-hero .topbar{ position:absolute; top:0; left:0; right:0; z-index:70; background:transparent; border:0; box-shadow:none; }
.has-hero .topbar__brand img, .has-hero .topnav__burger{ filter:drop-shadow(0 1px 5px rgba(0,0,0,.7)); }
.has-hero .topnav-top{ text-shadow:0 1px 6px rgba(0,0,0,.6); }
.topnav{ display:flex; gap:clamp(18px,2.4vw,34px); margin-left:auto; align-items:center; }
.topnav a{
font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
color:var(--gold-soft); transition:color .2s;
}
.topnav a:hover{ color:var(--cream); }
.topnav-full{ display:none; } /* full sitemap menu — mobile drawer only */
.topnav__burger{ display:none; }
@media (max-width:720px){
.topnav__burger{
display:flex; flex-direction:column; justify-content:center; gap:5px;
margin-left:auto; width:40px; height:34px; padding:7px 8px;
background:none; border:0; cursor:pointer;
}
.topnav__burger span{ display:block; width:100%; height:2px; background:var(--gold-soft); transition:transform .25s, opacity .2s; }
.topnav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.topnav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.topnav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.topnav__burger{ position:relative; z-index:70; }
/* full-screen menu sliding in from the right */
.topnav{
position:fixed; inset:0; z-index:60;
flex-direction:column; align-items:stretch; gap:0; margin:0;
background:var(--bordo-ink);
transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.8,.2,1);
overflow-y:auto; padding:78px var(--gutter) 28px; max-height:none;
}
.topnav.is-open{ transform:translateX(0); }
.topnav a{ padding:18px 2px; border-top:1px solid rgba(216,181,138,.12); font-size:1.05rem; letter-spacing:.12em; }
/* mobile drawer shows the full grouped sitemap menu, not the 4 top links */
.topnav-top{ display:none; }
.topnav-full{ display:block; }
.topnav-group{ margin:24px 0 4px; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); }
.topnav-group:first-child{ margin-top:0; }
.topnav-full a{ display:block; padding:12px 2px; font-size:1rem; letter-spacing:.02em; color:rgba(239,230,234,.82); border-top:1px solid rgba(216,181,138,.08); }
.topnav-full a:first-of-type{ border-top:0; }
.topnav-full a:hover{ color:var(--cream); }
}
/* stub (placeholder) pages */
.stub{ min-height:62vh; display:grid; place-items:center; text-align:center; padding-block:clamp(64px,12vw,150px); }
.stub .eyebrow{ color:var(--gold-soft); margin-bottom:10px; }
.stub h1{ font-size:clamp(2.4rem,6vw,4rem); color:var(--cream); margin:.1em 0 .45em; line-height:1; }
.stub p{ color:rgba(239,230,234,.72); max-width:48ch; margin:0 auto 1.6em; font-size:1.1rem; line-height:1.6; }
/* ============================================================
FAQ accordion (grid-rows animation)
============================================================ */
.faq-list{ max-width:820px; margin-inline:auto; list-style:none; padding:0;
display:flex; flex-direction:column; border-top:1px solid rgba(216,181,138,.16); }
.faq-item{ border-bottom:1px solid rgba(216,181,138,.16); }
.faq-q-head{ margin:0; line-height:1.35; }
.faq-q{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
padding:22px 4px; border:0; background:none; cursor:pointer; font:inherit;
font-size:1.12rem; color:rgba(239,230,234,.86); text-align:left; transition:color .25s ease;
}
.faq-q:hover, .faq-item.is-open .faq-q{ color:var(--cream); }
.faq-q:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; border-radius:8px; }
.faq-sign{
position:relative; flex:none; width:34px; height:34px; border-radius:50%; color:var(--gold-soft);
background:rgba(216,181,138,.08); box-shadow:inset 0 0 0 1px rgba(216,181,138,.25);
transition:background-color .3s, box-shadow .3s, transform .4s cubic-bezier(.2,.8,.2,1), color .3s;
}
.faq-sign::before, .faq-sign::after{
content:""; position:absolute; top:50%; left:50%;
width:13px; height:1.6px; border-radius:2px; background:currentColor;
transform:translate(-50%,-50%); transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.is-open .faq-sign{
transform:rotate(180deg); color:var(--bordo-ink);
background:var(--gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.faq-item.is-open .faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0); opacity:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a-inner > div{
padding:0 46px 24px 4px; font-size:1.05rem; line-height:1.62; color:rgba(239,230,234,.72);
opacity:0; transform:translateY(-6px);
transition:opacity .3s ease .06s, transform .38s cubic-bezier(.2,.8,.2,1) .06s;
}
.faq-item.is-open .faq-a-inner > div{ opacity:1; transform:none; }
@media (max-width:560px){ .faq-q{ font-size:1rem; padding:18px 2px; } .faq-a-inner > div{ padding:0 36px 20px 2px; } }
@media (prefers-reduced-motion:reduce){ .faq-a, .faq-sign, .faq-sign::before, .faq-sign::after, .faq-a-inner > div{ transition:none; } }
/* connect footer — brand logo instead of a photo (seamless, no hard circle) */
.portrait--round img{
width:100%; max-width:300px; height:auto; margin-inline:auto;
border:0; border-radius:0; background:transparent;
}
.connect__sig{ margin-top:6px; }
/* sitemap page */
.sitemap-wrap{ padding-block:clamp(50px,9vw,120px); }
.sitemap-h1{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--cream); margin:.1em 0 .3em; }
.sitemap-lead{ color:rgba(239,230,234,.7); margin-bottom:34px; }
.sitemap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:28px 40px; margin-bottom:40px; }
.sitemap-col h2{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 14px; }
.sitemap-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.sitemap-col a{ color:rgba(239,230,234,.82); }
.sitemap-col a:hover{ color:var(--cream); }
/* ============================================================
REVIEW PAGES (app review template)
============================================================ */
.rv-hero{
position:relative; overflow:hidden; color:var(--cream);
background:
linear-gradient(90deg, rgba(25,10,31,.97) 0%, rgba(25,10,31,.84) 44%, rgba(25,10,31,.46) 74%, rgba(25,10,31,.26) 100%),
var(--rv-photo, linear-gradient(transparent,transparent)) var(--rv-pos, right 28%) / cover no-repeat,
radial-gradient(130% 90% at 86% -10%, rgba(138,59,116,.3), transparent 58%),
radial-gradient(90% 70% at 10% 0%, rgba(201,160,110,.08), transparent 60%),
var(--bordo-ink);
padding:clamp(24px,4vw,46px) 0 clamp(34px,6vw,64px);
border-bottom:1px solid var(--line-light);
}
/* photo hero (when a page sets --rv-photo): full screen like the homepage, content on the dark left */
.rv-hero[style*="--rv-photo"]{ min-height:100svh; display:flex; align-items:center; }
.rv-hero[style*="--rv-photo"] > .shell{ width:100%; }
.rv-hero[style*="--rv-photo"] .rv-title,
.rv-hero[style*="--rv-photo"] .rv-tagline,
.rv-hero[style*="--rv-photo"] .rv-lead{ max-width:min(620px,62%); }
.rv-crumbs{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold-soft); margin-bottom:clamp(18px,3vw,30px);
}
.rv-crumbs a{ color:var(--gold-soft); }
.rv-crumbs a:hover{ color:var(--cream); }
.rv-crumbs .sep{ opacity:.45; }
.rv-crumbs [aria-current]{ color:rgba(239,230,234,.6); }
.rv-title{
font-family:var(--h1); font-weight:800; letter-spacing:-.005em;
font-size:clamp(2.4rem,6.2vw,4.4rem); line-height:1.04;
color:var(--cream); margin:0 0 .2em;
}
.rv-title .grad{ font-style:italic; font-weight:600; color:var(--gold); }
.rv-title-tail{ display:block; font-family:var(--serif); font-weight:500; font-style:normal; font-size:.4em; line-height:1.18; letter-spacing:.005em; color:rgba(239,230,234,.82); margin-top:.45em; max-width:22ch; }
.rv-tagline{ color:var(--gold-soft); font-size:.9rem; margin:0 0 16px; }
.rv-lead{
font-size:clamp(1.15rem,2vw,1.42rem); line-height:1.5;
max-width:54ch; color:var(--cream); margin:0 0 24px;
}
.rv-badges{ list-style:none; padding:0; margin:0 0 28px; display:flex; flex-wrap:wrap; gap:10px; }
.rv-badges li{
display:inline-flex; align-items:center; gap:9px; font-size:.82rem; line-height:1.3;
color:rgba(239,230,234,.9); border:1px solid var(--line-light); border-radius:40px;
padding:8px 16px; background:rgba(255,255,255,.02);
}
.rv-badges .ic{ width:16px; height:16px; color:var(--gold); flex:none; }
.rv-cta{
display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,3vw,28px);
padding:20px clamp(20px,3vw,28px); border:1px solid var(--line-light); border-radius:16px;
background:rgba(0,0,0,.2); max-width:760px;
}
.rv-cta-fig{ display:flex; align-items:center; gap:12px; }
.rv-cta-fig > span{ display:flex; flex-direction:column; gap:3px; }
.rv-cta-fig b{ font-family:var(--serif); font-size:1.4rem; line-height:1; color:var(--cream); }
.rv-cta-fig i{ font-style:normal; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(239,230,234,.55); }
.rv-cta-sep{ width:1px; align-self:stretch; background:var(--line-light); }
.rv-cta .btn{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; }
.rv-cta .btn .ic{ width:16px; height:16px; }
.rv-note{ font-size:.74rem; color:rgba(239,230,234,.5); margin:14px 0 0; }
/* gauge — larger hero variant (reuses .gauge from compare table) */
.gauge--lg{ width:72px; height:72px; }
.gauge--lg svg{ width:72px; height:72px; }
.gauge--lg b{ font-size:1.3rem; }
/* review body on bordo-ink */
.rv{ background:var(--bordo-ink); color:var(--cream); padding:clamp(34px,6vw,70px) 0 clamp(40px,7vw,90px); }
.rv-facts{
display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
background:var(--line-light); border:1px solid var(--line-light); border-radius:14px;
overflow:hidden; margin-bottom:clamp(34px,5vw,60px);
}
.rv-facts > div{ background:var(--bordo-ink); padding:16px 20px; }
.rv-facts dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px; }
.rv-facts dd{ margin:0; font-size:.95rem; color:rgba(239,230,234,.9); line-height:1.4; }
.rv-body{ display:grid; grid-template-columns:minmax(0,1fr) 318px; gap:clamp(28px,4vw,56px); align-items:start; }
.rv-toc{
border:1px solid var(--line-light); border-radius:12px; padding:18px 22px; margin-bottom:34px;
background:rgba(255,255,255,.015);
}
.rv-toc-title{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 12px; }
.rv-toc ol{ margin:0; padding:0; list-style:none; columns:2; gap:24px; }
.rv-toc li{ margin-bottom:8px; break-inside:avoid; }
.rv-toc a{ color:rgba(239,230,234,.82); font-size:.92rem; }
.rv-toc a:hover{ color:var(--gold-soft); }
.rv-main-col > section{ margin-bottom:clamp(30px,4vw,48px); scroll-margin-top:90px; }
.rv-main-col h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--cream); margin:0 0 .5em; }
.rv-main-col p{ color:rgba(239,230,234,.86); line-height:1.65; margin:0 0 1em; }
.rv-main-col p strong{ color:var(--cream); }
/* pros / cons */
.rv-pros{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.rv-pros > div{ border:1px solid var(--line-light); border-radius:14px; padding:20px 22px; background:rgba(255,255,255,.015); }
.rv-pros-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rv-pros-head b{ font-family:var(--serif); font-size:1.1rem; color:var(--cream); }
.rv-pros-head .ic{ width:20px; height:20px; }
.rv-pros ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.rv-pros li{ position:relative; padding-left:18px; font-size:.92rem; line-height:1.5; color:rgba(239,230,234,.86); }
.rv-pros li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }
.rv-pros .rv-good .ic{ color:#7bbf8a; }
.rv-pros .rv-bad .ic{ color:var(--ember-soft); }
/* pricing table */
.rv-table{ width:100%; border-collapse:collapse; margin:4px 0 1.2em; font-size:.95rem; }
.rv-table th, .rv-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-light); }
.rv-table thead th{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; }
.rv-table tbody td{ color:rgba(239,230,234,.88); }
.rv-table tbody tr:last-child td{ border-bottom:0; }
.rv-table tbody td:first-child{ font-family:var(--serif); color:var(--cream); }
/* alternatives */
.rv-alts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.rv-alt{ display:block; border:1px solid var(--line-light); border-radius:14px; padding:18px 20px; background:rgba(255,255,255,.015); transition:border-color .2s, background .2s; }
.rv-alt:hover{ border-color:var(--gold-soft); background:rgba(216,181,138,.05); }
.rv-alt i{ display:block; font-style:normal; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px; }
.rv-alt b{ display:block; font-family:var(--serif); font-size:1.2rem; color:var(--cream); margin-bottom:6px; }
.rv-alt span{ font-size:.88rem; line-height:1.5; color:rgba(239,230,234,.78); }
/* small-card logo tile (alternatives + hub picks) */
.rv-alt-logo, .hub-pick-logo{
display:block; width:42px; height:42px; border-radius:11px; object-fit:contain; padding:4px;
margin-bottom:11px; background:rgba(255,255,255,.05); border:1px solid rgba(216,181,138,.16);
}
.rv-guides{ border-top:1px solid var(--line-light); padding-top:22px; margin-top:8px; }
.rv-guides p{ margin:0; font-size:.92rem; color:rgba(239,230,234,.78); }
.rv-guides-label{ color:var(--gold-soft); letter-spacing:.04em; }
.rv-guides a{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-soft); }
/* sticky offer rail */
.rv-rail{ position:sticky; top:84px; }
.rv-offer{
border:1px solid var(--gold); border-radius:16px; padding:22px; background:
linear-gradient(180deg, rgba(201,160,110,.1), rgba(0,0,0,.14));
}
.rv-offer-top{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.rv-offer-logo{
width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center;
background:var(--bordo); color:var(--gold); font-family:var(--serif); font-size:1.4rem; border:1px solid var(--line-light);
}
.rv-offer-logo:has(img){ background:rgba(255,255,255,.05); padding:5px; }
.rv-offer-logo img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }
.rv-offer-name{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); display:block; }
.rv-offer-rate{ font-size:.78rem; color:var(--gold-soft); }
.rv-offer dl{ margin:0 0 18px; display:grid; gap:0; }
.rv-offer dl > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-light); }
.rv-offer dl > div:last-child{ border-bottom:0; }
.rv-offer dt{ font-size:.82rem; color:rgba(239,230,234,.6); }
.rv-offer dd{ margin:0; font-size:.82rem; color:var(--cream); text-align:right; }
.rv-offer .btn{ width:100%; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.rv-offer .btn .ic{ width:16px; height:16px; }
.rv-offer-note{ font-size:.7rem; color:rgba(239,230,234,.5); margin:12px 0 0; text-align:center; }
.rv-faqhead{ text-align:center; max-width:720px; margin:0 auto clamp(30px,5vw,52px); }
.rv-faqhead h2{ font-family:var(--serif); color:var(--cream); font-size:clamp(1.8rem,3.5vw,2.6rem); margin:.1em 0 .3em; }
.rv-faqhead .section-head{ margin-bottom:12px; }
.rv-faqhead .section-sub{ margin:0; }
/* ============================================================
SITE FOOTER (proper, every page)
============================================================ */
.topbar__brand img{ height:26px; width:auto; display:block; }
.site-footer{
background:var(--bordo-ink); color:var(--cream);
border-top:1px solid var(--line-light);
padding-top:clamp(40px,6vw,66px);
}
.footer-grid{
display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(24px,4vw,56px);
padding-bottom:clamp(30px,5vw,48px);
}
.footer-brand{ max-width:380px; }
.footer-logo{ display:inline-block; margin-bottom:16px; }
.footer-logo img{ height:28px; width:auto; display:block; }
.footer-brand p{ font-size:.9rem; line-height:1.65; color:rgba(239,230,234,.68); margin:0; }
.footer-col-title{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 15px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-col a{ font-size:.92rem; color:rgba(239,230,234,.82); }
.footer-col a:hover{ color:var(--cream); }
.footer-strip{
display:flex; align-items:center; justify-content:center; gap:16px;
padding-block:18px; border-top:1px solid var(--line-light);
font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft);
}
.footer-strip .dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; }
.footer-legal{
display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
padding-block:22px 30px; border-top:1px solid var(--line-light);
}
.footer-disclosure{ flex:1 1 440px; font-size:.78rem; line-height:1.6; color:rgba(239,230,234,.55); margin:0; }
.footer-copy{ font-size:.78rem; color:rgba(239,230,234,.55); margin:0; }
.footer-age{
font-family:var(--serif); font-size:1rem; color:var(--gold-soft);
border:1px solid var(--gold-soft); border-radius:50%; width:44px; height:44px;
display:grid; place-items:center; margin-left:auto; flex:none;
}
@media (max-width:900px){
.footer-grid{ grid-template-columns:1fr 1fr; }
.footer-brand{ grid-column:1 / -1; max-width:none; }
}
@media (max-width:560px){
.footer-grid{ grid-template-columns:1fr; }
.footer-strip{ gap:10px; letter-spacing:.22em; }
.footer-legal{ flex-direction:column; align-items:flex-start; gap:12px; }
/* в column flex-basis:440px стал бы ВЫСОТОЙ (огромный зазор) — сбрасываем на контент */
.footer-disclosure{ flex:0 0 auto; }
.footer-age{ margin-left:0; }
}
@media (max-width:900px){
.rv-body{ grid-template-columns:1fr; }
.rv-rail{ position:static; order:-1; }
.rv-toc ol{ columns:1; }
.rv-pros{ grid-template-columns:1fr; }
.rv-facts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.rv-cta{ flex-direction:column; align-items:stretch; }
.rv-cta-sep{ display:none; }
.rv-cta .btn{ margin-left:0; justify-content:center; }
.rv-facts{ grid-template-columns:1fr; }
}
/* ============================================================
MOBILE CONVERSION FIRST SCREEN (DreamGF-veil composition, ≤767)
our palette (bordo/ember/gold) + punchy gradient CTA/FAB
============================================================ */
:root{ --mgrad:linear-gradient(100deg, #c24d5c 0%, #c67a4e 48%, #d4af6e 100%); --mnav-h:64px; }
.mhero, .mtabbar{ display:none; }
@media (max-width:767px){
.hero{ display:none; } /* desktop hero hidden; stays in DOM for SEO */
#refw{ display:none; } /* referral FAB clashes with the bottom tab-bar on mobile */
body{ padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom)); }
/* transparent header overlaying the hero photo (homepage) — heroine shows through the top */
.has-mhero .topbar{
position:absolute; top:0; left:0; right:0; z-index:70; /* above the full-screen menu so the burger/X stays tappable */
background:transparent; border:0; box-shadow:none;
}
.has-mhero .topbar__brand img,
.has-mhero .topnav__burger{ filter:drop-shadow(0 1px 4px rgba(0,0,0,.65)); }
.has-mhero .topnav{ border-bottom:0; } /* collapsed dropdown drew a 1px line under the header */
.has-mhero .topnav.is-open{ border-bottom:1px solid var(--line-light); }
.mhero{
position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column;
min-height:100svh;
padding:14px 18px calc(22px + env(safe-area-inset-bottom));
color:var(--cream);
}
.mhero-photo, .mhero-blur{ position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:92% 10%; }
.mhero-blur{ z-index:-2; filter:blur(10px) saturate(1.1); transform:scale(1.06);
-webkit-mask-image:linear-gradient(180deg, transparent 58%, #000 82%); mask-image:linear-gradient(180deg, transparent 58%, #000 82%); }
.mhero-veil{ position:absolute; z-index:-1; inset:0; background:
linear-gradient(180deg, transparent 86%, var(--bordo-ink) 100%),
radial-gradient(120% 50% at 50% 82%, rgba(201,160,110,.2), transparent 70%),
radial-gradient(80% 42% at 2% 58%, rgba(138,59,116,.32), transparent 70%),
linear-gradient(180deg, rgba(25,10,31,.32) 0%, rgba(25,10,31,0) 15%, rgba(34,16,42,.55) 40%, rgba(26,12,20,.92) 62%, var(--bordo-ink) 100%); }
/* online badge */
.mbadge{ align-self:center; height:38px; padding:0 15px 0 4px; border-radius:999px;
display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13.5px; font-weight:500; white-space:nowrap;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.mbadge b{ font-weight:700; }
.mbadge-ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--mgrad); }
.mbadge-ic svg{ width:14px; height:14px; color:#fff; }
.mdot{ width:8px; height:8px; border-radius:50%; background:#3ee08f; box-shadow:0 0 0 3px rgba(62,224,143,.25); animation:mpulse 1.8s ease-in-out infinite; }
@keyframes mpulse{ 50%{ box-shadow:0 0 0 6px rgba(62,224,143,0); } }
.mhero-copy{ margin-top:auto; text-align:center; }
/* chat bubbles */
.mbubbles{ display:flex; flex-direction:column; gap:2px; margin-bottom:16px; text-align:left; }
.mbubble{ max-width:82%; padding:9px 14px; font-family:var(--sans); font-size:14px; line-height:1.3; font-weight:500; box-shadow:0 10px 28px rgba(0,0,0,.34); }
.mbubble--her{ align-self:flex-start; display:flex; align-items:flex-start; gap:9px; padding-left:8px; border-radius:18px 18px 18px 6px;
background:linear-gradient(135deg, rgba(90,40,50,.6), rgba(25,10,31,.55)); border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.mbubble--her img{ width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:90% 14%; flex:none; }
.mbubble--me{ align-self:flex-end; display:inline-flex; align-items:center; gap:6px; border-radius:18px 18px 6px 18px; background:var(--mgrad); color:#fff; }
.mbubble--me svg{ width:15px; height:15px; opacity:.9; }
/* two-tone title (styled
, not a 2nd
) */
.mtitle{ display:flex; flex-direction:column; align-items:center; margin:0; }
.mtitle-a{ font-family:var(--display); font-size:clamp(44px,13vw,54px); line-height:1; letter-spacing:.5px;
background:var(--mgrad); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0 4px 4px; }
.mtitle-b{ font-family:var(--sans); font-size:clamp(22px,6.6vw,27px); font-weight:700; line-height:1.12; letter-spacing:-.4px; color:var(--cream); }
.msub{ margin:9px auto 0; max-width:320px; font-family:var(--sans); font-size:14.5px; line-height:1.42; color:rgba(239,230,234,.74); }
.msub b{ color:#fff; font-weight:700; }
/* CTA */
.mcta{ margin-top:16px; width:100%; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--sans); font-size:16.5px; font-weight:700; letter-spacing:-.1px; color:#fff; background:var(--mgrad);
box-shadow:0 12px 30px rgba(194,77,92,.45), 0 0 0 1px rgba(255,255,255,.14) inset, 0 1px 0 rgba(255,255,255,.3) inset; }
.mcta svg{ width:20px; height:20px; }
/* trust row */
.mproof{ margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px; }
.mstack{ display:flex; }
.mstack img{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--bordo); border:2px solid var(--bordo-ink); margin-left:-10px; padding:5px; }
.mstack img:first-child{ margin-left:0; }
.mproof-txt{ display:flex; flex-direction:column; align-items:flex-start; font-family:var(--sans); font-size:13px; color:rgba(239,230,234,.74); line-height:1.25; }
.mproof-txt b{ color:#fff; font-weight:600; }
.mstars{ display:flex; gap:1px; color:var(--gold); }
.mstars svg{ width:13px; height:13px; }
/* bottom app nav */
.mtabbar{ position:fixed; z-index:40; left:0; right:0; bottom:0;
height:calc(var(--mnav-h) + env(safe-area-inset-bottom)); padding:0 6px env(safe-area-inset-bottom);
display:grid; grid-template-columns:1fr 1fr 84px 1fr 1fr; align-items:center;
background:rgba(26,12,18,.9); border-top:1px solid var(--line-light);
backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
transform:translateY(135%); transition:transform .34s cubic-bezier(.2,.8,.2,1); }
body.scrolled .mtabbar{ transform:translateY(0); }
.mtab{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
font-family:var(--sans); font-size:11px; font-weight:500; color:rgba(239,230,234,.6); }
.mtab svg{ width:23px; height:23px; }
.mtab.is-on{ color:var(--cream); }
.mtab.is-on svg{ color:var(--gold); }
.mfab{ justify-self:center; width:72px; height:72px; margin-top:-30px; border-radius:50%;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
font-family:var(--sans); font-size:10.5px; font-weight:700; color:#fff; background:var(--mgrad);
border:4px solid var(--bordo-ink); box-shadow:0 10px 26px rgba(194,77,92,.5); }
.mfab svg{ width:25px; height:25px; }
}
/* ============================================================
CONTENT PAGES — reviews, hubs, blog, legal (built by research/build_pages.py)
only our tokens; mobile-first fixes scoped to non-home pages
============================================================ */
.rv-byline{ font-size:.84rem; line-height:1.5; color:rgba(239,230,234,.62); margin:0 0 16px; }
.rv-byline a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(216,181,138,.45); }
.rv-title--page{ font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; max-width:24ch; }
.rv-hero--page .rv-lead{ max-width:64ch; }
.rv-hero--page .rv-note{ margin-top:0; }
/* readable in-text links (template had none) */
.rv-main-col p a, .rv-main-col li a, .rv-table a, .rv-lead a, .faq-a-inner a{
color:var(--cream); text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--gold-soft); transition:color .2s, text-decoration-color .2s;
}
.rv-main-col p a:hover, .rv-main-col li a:hover, .rv-table a:hover{ color:var(--gold-soft); }
.rv a:focus-visible, .rv-hero a:focus-visible, .rv-hero .btn:focus-visible, .rv .btn:focus-visible{
outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px;
}
.rv-also{ font-size:.92rem; color:rgba(239,230,234,.72); }
.rv-also-label{ color:var(--gold-soft); letter-spacing:.04em; margin-right:2px; }
.rv-sub{ font-style:italic; color:rgba(239,230,234,.7); }
.rv-main-col h3{
font-family:var(--serif); font-weight:600; font-size:clamp(1.22rem,2vw,1.45rem);
color:var(--cream); margin:1.5em 0 .45em;
}
.rv-main-col h2 + h3{ margin-top:.6em; }
.rv-list, .rv-steps{ margin:0 0 1.2em; padding:0; list-style:none; display:grid; gap:11px; }
.rv-list li{ position:relative; padding-left:20px; line-height:1.6; color:rgba(239,230,234,.86); }
.rv-list li::before{ content:""; position:absolute; left:2px; top:.68em; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }
.rv-steps{ counter-reset:rvstep; }
.rv-steps li{ counter-increment:rvstep; position:relative; padding-left:46px; min-height:32px; line-height:1.6; color:rgba(239,230,234,.86); }
.rv-steps li::before{
content:counter(rvstep); position:absolute; left:0; top:-1px; width:32px; height:32px; border-radius:50%;
display:grid; place-items:center; border:1px solid var(--gold-soft); color:var(--gold);
font-family:var(--serif); font-size:1rem; line-height:1;
}
/* single-column body (hubs, blog, legal) */
.rv-body--single{ grid-template-columns:minmax(0,1fr); max-width:1000px; }
.rv-intro{ margin-bottom:clamp(26px,4vw,40px); }
/* hub top picks (hero cards with affiliate CTA) */
.hub-picks-title{
font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold-soft); margin:26px 0 12px;
}
.hub-picks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; max-width:1120px; }
.hub-pick{
display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:14px;
border:1px solid var(--line-light); background:rgba(0,0,0,.22);
transition:border-color .25s, transform .25s, box-shadow .25s;
}
.hub-pick:first-child{ border-color:var(--gold); }
.hub-pick:hover{ border-color:var(--gold-soft); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,0,0,.7); }
.hub-pick i{ font-style:normal; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); }
.hub-pick b a{ font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--cream); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(216,181,138,.35); }
.hub-pick span{ flex:1; font-size:.9rem; line-height:1.5; color:rgba(239,230,234,.78); }
.hub-pick .btn{ align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; gap:9px; min-height:46px; }
.hub-pick .btn .ic, .hub-hero-cta .btn .ic{ width:16px; height:16px; }
.hub-hero-cta{ margin-top:4px; }
.hub-hero-cta .btn{ display:inline-flex; align-items:center; gap:9px; min-height:48px; }
/* blog index cards */
.post-list{ display:grid; gap:16px; margin-bottom:1.2em; }
.post-card{
border:1px solid var(--line-light); border-radius:14px; padding:18px 22px; background:rgba(255,255,255,.015);
transition:border-color .25s, transform .25s;
}
.post-card:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.rv-main-col .post-card h3{ margin:0 0 6px; }
.post-card h3 a{ color:var(--cream); text-decoration:none; }
.post-card h3 a:hover{ color:var(--gold-soft); }
.rv-main-col .post-card p{ margin:0; font-size:.95rem; }
/* human sitemap inside the content column */
.rv-main-col .sitemap-grid{ gap:32px 44px; }
.rv-main-col .sitemap-col h2{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 14px; }
.sitemap-list{ list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.sitemap-list a{ display:flex; align-items:center; min-height:40px; color:rgba(239,230,234,.86); text-decoration:none; }
.sitemap-list a:hover{ color:var(--cream); }
/* legal placeholders awaiting owner data */
.ph{ color:var(--gold-soft); border-bottom:1px dashed var(--gold-soft); }
@media (prefers-reduced-motion:reduce){
.hub-pick, .post-card{ transition:none; }
.hub-pick:hover, .post-card:hover{ transform:none; }
}
@media (max-width:900px){
.rv-toc--grid ol{ columns:2; gap:18px; }
.rv-toc li{ margin-bottom:0; }
.rv-toc a{ display:flex; align-items:center; min-height:44px; line-height:1.3; }
}
@media (max-width:767px){
/* touch targets ≥44px on content pages (homepage keeps its own header/footer tuning) */
.topnav__burger{ width:44px; height:44px; padding:10px; }
.footer-col ul{ gap:0; }
.footer-col a{ display:flex; align-items:center; min-height:44px; }
.rank__cta .btn--solid, .rank__cta .btn--ghost{ min-height:44px; }
.c-cta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.footer-legal a{ display:inline-flex; align-items:center; min-height:44px; }
.rv-crumbs{ gap:4px 10px; }
.rv-crumbs a{ display:inline-flex; align-items:center; min-height:44px; }
.rv-crumbs{ margin-bottom:6px; }
}
@media (max-width:560px){
/* any .rv-table -> stacked cards (6-column hub tables would not fit 360px) */
.rv-table thead{ display:none; }
.rv-table, .rv-table tbody, .rv-table tr, .rv-table td{ display:block; width:100%; }
.rv-table tr{
border:1px solid var(--line-light); border-radius:12px; padding:2px 14px; margin-bottom:12px;
background:rgba(255,255,255,.02);
}
.rv-table td{
display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:12px; align-items:start;
padding:10px 0; border-bottom:1px solid rgba(216,181,138,.12);
}
.rv-table tbody tr:last-child td{ border-bottom:1px solid rgba(216,181,138,.12); }
.rv-table tbody tr td:last-child{ border-bottom:0; }
.rv-table td::before{
content:attr(data-label); color:var(--gold-soft);
font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.5; padding-top:2px;
}
.rv-table td > span{ text-align:right; overflow-wrap:anywhere; }
.rv-table td:first-child{ display:block; font-size:1.1rem; padding-top:12px; }
.rv-table td:first-child::before{ content:none; }
.rv-table td:first-child > span{ text-align:left; }
.hub-pick .btn{ align-self:stretch; justify-content:center; }
.rv-steps li{ padding-left:42px; }
}
@media (max-width:340px){
.rv-toc--grid ol{ columns:1; }
}
/* content-page heroes on phones: CTA in the first screen (order + compaction) */
@media (max-width:767px){
body:not(.has-mhero) .topbar__brand, body:not(.has-mhero) .footer-logo{ display:inline-flex; align-items:center; min-height:44px; }
.rv-crumbs a{ margin-block:-12px; } /* 44px hit area without a taller row */
.rv-crumbs{ margin-bottom:clamp(14px,3vw,24px); }
.rv-hero > .shell{ display:flex; flex-direction:column; }
.rv-hero .rv-cta{ order:1; }
.rv-hero .rv-note{ order:2; }
.rv-hero .rv-badges{ order:3; margin:18px 0 0; }
.rv-hero--page .hub-picks-title{ order:1; }
.rv-hero--page .hub-picks{ order:2; }
.rv-hero--page .rv-note{ order:3; margin-top:14px; }
.hub-pick b a{ display:inline-flex; align-items:center; min-height:44px; }
.hub-pick{ gap:2px; }
/* mobile photo hero: full screen, face + upper body up top (text-free), copy pinned to a dark bottom */
.rv-hero[style*="--rv-photo"]{
min-height:100svh; align-items:stretch;
background:
linear-gradient(180deg,
rgba(25,10,31,.04) 0%, rgba(25,10,31,.10) 36%, rgba(25,10,31,.55) 52%,
rgba(25,10,31,.88) 66%, rgba(25,10,31,.97) 80%, var(--bordo-ink) 100%),
var(--rv-photo, linear-gradient(transparent,transparent)) 82% 32% / cover no-repeat,
var(--bordo-ink);
}
.rv-hero[style*="--rv-photo"] > .shell{ display:flex; flex-direction:column; justify-content:flex-end; }
.rv-hero[style*="--rv-photo"] .rv-title,
.rv-hero[style*="--rv-photo"] .rv-tagline,
.rv-hero[style*="--rv-photo"] .rv-lead{ max-width:100%; }
/* readability: dark scrim + cream copy + text-shadow so it reads on any photo */
.rv-hero[style*="--rv-photo"] .rv-tagline,
.rv-hero[style*="--rv-photo"] .rv-byline{ color:var(--cream); }
.rv-hero[style*="--rv-photo"] .rv-crumbs,
.rv-hero[style*="--rv-photo"] .rv-byline,
.rv-hero[style*="--rv-photo"] .rv-tagline,
.rv-hero[style*="--rv-photo"] .rv-title,
.rv-hero[style*="--rv-photo"] .rv-lead{ text-shadow:0 1px 16px rgba(25,10,31,.85), 0 1px 4px rgba(25,10,31,.7); }
}
@media (max-width:560px){
.rv-title{ font-size:clamp(2rem,9vw,2.4rem); line-height:1.06; }
.rv-title--page{ font-size:clamp(1.75rem,7.6vw,2.1rem); }
.rv-tagline{ font-size:.8rem; margin-bottom:8px; }
.rv-byline{ font-size:.78rem; margin-bottom:10px; }
.rv-lead{ font-size:1.02rem; line-height:1.5; margin-bottom:16px; }
.rv-cta{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:14px 16px; }
.rv-cta .btn{ flex:1 1 100%; margin-left:0; justify-content:center; min-height:50px; }
.rv-cta .gauge--lg, .rv-cta .gauge--lg svg{ width:54px; height:54px; }
.rv-cta .gauge--lg b{ font-size:1.05rem; }
.rv-cta-fig b{ font-size:1.2rem; }
.rv-note{ margin-top:10px; }
.rv-badges{ gap:8px; }
.rv-badges li{ font-size:.78rem; padding:7px 13px; }
/* hub top picks: swipeable row, next card peeks */
.hub-picks{
grid-auto-flow:column; grid-auto-columns:84%; grid-template-columns:none;
overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 8px; scroll-padding-inline:var(--gutter);
scrollbar-width:none;
}
.hub-picks::-webkit-scrollbar{ display:none; }
.hub-pick{ scroll-snap-align:start; padding:14px 16px; }
.hub-pick span{ font-size:.86rem; }
.hub-picks-title{ margin:4px 0 10px; }
}
@media (max-width:767px){
.rv-crumbs{ flex-wrap:nowrap; }
.rv-crumbs [aria-current]{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.sitemap-list{ gap:0; }
.sitemap-list a{ min-height:44px; }
.post-card{ position:relative; }
.post-card h3 a::after{ content:""; position:absolute; inset:0; border-radius:14px; }
.post-card:focus-within{ border-color:var(--gold-soft); }
.rv-main-col .rv-toc a{ text-decoration:none; color:rgba(239,230,234,.82); }
.rv-main-col .rv-toc a:hover{ color:var(--gold-soft); }
.rv-hero .rv-cta{ max-width:980px; }
@media (max-width:560px){
.hub-pick{
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px;
grid-template-areas:"lbl lbl" "name btn" "why why";
}
.hub-pick > i{ grid-area:lbl; }
.hub-pick > b{ grid-area:name; min-width:0; }
.hub-pick > span{ grid-area:why; margin-top:2px; }
.hub-pick > .btn{ grid-area:btn; align-self:center; margin:0; padding:12px 18px; min-height:44px; }
.rv-hero--page .rv-lead{ font-size:.98rem; }
}
/* F38 — readable body text on phones (min 16px reading, 14px aux) */
@media (max-width:767px){
.rv-main-col p, .rv-main-col li, .rv-good li, .rv-bad li{ font-size:16px; }
.rv-table td, .rv-table th{ font-size:15px; }
.rv-byline{ font-size:14px; }
.rv-also, .rv-also a{ font-size:14px; }
}
/* F39 — short phones (360x640, 375x667): photo hero content must clear the floating 76px header */
@media (max-width:767px){
.has-hero .rv-hero[style*="--rv-photo"]{ padding-top:88px; }
}
/* ============================================================
HOMEPAGE — ranking-list first screen (index.html, body.home)
Tokens first: re-skin = change these, not the rules below.
============================================================ */
:root{
--sn-bg: #190a1f;
--sn-surface: #2a1430;
--sn-surface-2: #22102a;
--sn-plum: #8a3b74; /* accent: frames, avatar, pills */
--sn-rose: #e7a6d2; /* accent as TEXT on dark (plum lightened for contrast) */
--sn-gold: #c9a06e;
--sn-gold-2: #e6c896;
--sn-gold-grad: linear-gradient(100deg, #b7864f 0%, #c9a06e 38%, #e9cc98 100%);
--sn-ink: #efe6ea;
--sn-muted: rgba(239,230,234,.68);
--sn-line: rgba(239,230,234,.12);
--sn-line-gold: rgba(201,160,110,.36);
--sn-good: #7fcf9b;
--sn-r-card: 18px;
--sn-r-btn: 12px;
--sn-shadow: 0 22px 50px -24px rgba(0,0,0,.85), 0 0 0 4px rgba(201,160,110,.07);
--ease: cubic-bezier(.16,1,.3,1);
--fs-h1: clamp(1.95rem, 1.2rem + 3.25vw, 4.1rem);
--mast-h: 54px;
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.home .ic{ width:1em; height:1em; flex:none; }
/* the theme pads for the mobile tab-bar; the homepage has no fixed bottom bar */
body.home{ padding-bottom:0; background:var(--sn-bg); }
body.home .footer-age{ font-family:var(--h1); font-weight:800; font-size:.92rem; }
.home a:focus-visible, .home button:focus-visible, .home summary:focus-visible, .home [tabindex]:focus-visible{
outline:2px solid var(--sn-gold-2); outline-offset:3px; border-radius:6px;
}
/* ---------- header: sticky, dark-transparent (blur lives on ::before so the fixed drawer isn't trapped) */
.mast{ position:sticky; top:0; z-index:80; isolation:isolate; }
.mast::before{
content:""; position:absolute; inset:0; z-index:-1;
background:rgba(25,10,31,.8);
-webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
border-bottom:1px solid var(--sn-line);
}
.mast__in{ display:flex; align-items:center; gap:8px; height:var(--mast-h); }
.mast__brand{ display:inline-flex; align-items:center; min-height:44px; margin-right:auto; }
.mast__logo{ display:block; height:22px; width:auto; }
.footer-logo .mast__logo{ height:28px; }
.mast__icon{
width:44px; height:44px; flex:none; display:grid; place-items:center;
border:0; border-radius:12px; background:transparent; color:var(--sn-ink); cursor:pointer;
transition:background-color .2s, color .2s;
}
.mast__icon:hover{ background:rgba(239,230,234,.08); color:var(--sn-gold-2); }
.mast__icon .ic{ width:22px; height:22px; }
.mast__menu{ position:relative; z-index:70; }
.mast__menu .i-x{ display:none; }
.mast__menu[aria-expanded="true"] .i-menu{ display:none; }
.mast__menu[aria-expanded="true"] .i-x{ display:block; }
.mast .topnav{ margin-left:0; }
@media (min-width:721px){
:root{ --mast-h:64px; }
.mast__menu{ display:none; }
.mast .topnav{ margin-right:10px; }
.mast .topnav-top{ display:inline-flex; align-items:center; min-height:44px; padding-inline:4px; }
.mast__logo{ height:26px; }
}
@media (max-width:720px){
/* closed drawer is off-canvas: keep it out of the tab order too */
.mast .topnav{ visibility:hidden; padding-top:calc(var(--mast-h) + 18px);
transition:transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s; }
.mast .topnav.is-open{ visibility:visible; transition:transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s; }
}
/* ---------- buttons */
.cta-gold{
position:relative; overflow:hidden; isolation:isolate;
display:flex; align-items:center; justify-content:center; gap:9px;
min-height:54px; padding:0 20px; border-radius:var(--sn-r-btn);
background:var(--sn-gold-grad); color:#1b0c20;
font:600 16.5px/1.15 var(--sans); letter-spacing:.005em;
box-shadow:0 12px 26px -12px rgba(201,160,110,.6), inset 0 1px 0 rgba(255,255,255,.38);
transition:transform .22s var(--ease), box-shadow .25s, filter .2s;
}
.cta-gold .ic{ width:19px; height:19px; transition:transform .25s var(--ease); }
.cta-gold::after{ /* slow sheen sweep — draws the eye to the one primary action */
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
transform:translateX(-120%); animation:sn-sheen 5.5s var(--ease) 1.4s infinite;
}
.cta-gold:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 16px 30px -12px rgba(201,160,110,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.cta-gold:hover .ic{ transform:translateX(3px); }
@keyframes sn-sheen{ 0%{ transform:translateX(-120%); } 22%,100%{ transform:translateX(120%); } }
.cta-line{
position:relative; flex:none;
display:inline-flex; align-items:center; justify-content:center;
height:40px; padding:0 14px; border-radius:10px;
border:1.5px solid rgba(201,160,110,.6); color:var(--sn-gold-2);
font:600 14px/1 var(--sans); white-space:nowrap;
transition:background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.cta-line::after{ content:""; position:absolute; inset:-3px -2px; } /* 46px hit area, 40px visual */
.cta-line:hover{ background:rgba(201,160,110,.14); color:var(--sn-ink); border-color:var(--sn-gold); transform:translateY(-1px); }
.cta-ghost{
display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px;
border:1px solid var(--sn-line-gold); border-radius:999px;
font:600 15px/1 var(--sans); color:var(--sn-ink);
transition:background-color .2s, border-color .2s;
}
.cta-ghost .ic{ width:16px; height:16px; color:var(--sn-gold); transition:transform .25s var(--ease); }
.cta-ghost:hover{ background:rgba(201,160,110,.1); border-color:var(--sn-gold); }
.cta-ghost:hover .ic{ transform:translateX(2px); }
/* ---------- hero = article intro + ranking */
.rh{ position:relative; isolation:isolate; overflow:hidden; padding:12px 0 30px; }
.rh::before{ /* atmosphere: slow plum/gold haze drifting behind the intro */
content:""; position:absolute; z-index:-1; left:-30%; right:-30%; top:-140px; height:560px; pointer-events:none;
background:
radial-gradient(38% 46% at 26% 40%, rgba(138,59,116,.42), transparent 70%),
radial-gradient(30% 36% at 78% 22%, rgba(201,160,110,.14), transparent 70%);
animation:sn-haze 19s ease-in-out infinite alternate;
}
@keyframes sn-haze{
from{ transform:translate3d(-5%,0,0) scale(1); opacity:.85; }
to { transform:translate3d(6%,4%,0) scale(1.1); opacity:1; }
}
.rh__kicker{
display:flex; align-items:center; gap:5px; margin:0 0 6px;
font:600 12px/1.2 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--sn-muted);
}
.rh__kicker b{ color:var(--sn-rose); font-weight:600; }
.rh__kicker .ic{ width:13px; height:13px; opacity:.7; }
.rh__title{
font-family:var(--h1); font-weight:800; font-size:var(--fs-h1); line-height:1.04; letter-spacing:-.012em;
color:var(--sn-ink); margin:0 0 10px; text-wrap:balance;
}
.rh__yr{ color:var(--sn-gold); }
.rh__by{ display:flex; align-items:center; gap:10px; margin:0; }
.rh__avs{ display:flex; flex:none; }
.av{
width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
font:600 11px/1 var(--sans); letter-spacing:.03em; border:2px solid var(--sn-bg);
}
.av--a{ background:var(--sn-plum); color:#fff; }
.av--b{ background:var(--sn-gold); color:#1b0c20; margin-left:-9px; }
.rh__by-txt{ margin:0; display:flex; flex-direction:column; gap:0; font:14px/1.3 var(--sans); color:var(--sn-muted); }
.rh__by-txt a{ color:var(--sn-ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(201,160,110,.45); text-underline-offset:3px; }
.rh__upd{ display:inline-flex; align-items:center; gap:5px; font-size:13px; }
.rh__upd .ic{ width:13px; height:13px; color:var(--sn-good); }
.rh__lead{ margin-top:26px; }
.rh__lead p{ margin:0 0 12px; font-size:16px; line-height:1.6; color:rgba(239,230,234,.86); max-width:60ch; }
.rh__lead a:not(.cta-ghost){ color:var(--sn-ink); text-decoration:underline; text-decoration-color:var(--sn-gold); text-underline-offset:3px; }
.rh__lead a:not(.cta-ghost):hover{ color:var(--sn-gold-2); }
.rh__guides span{ color:var(--sn-gold); }
.rh__lead .cta-ghost{ margin:4px 0 12px; }
.rh__lead .rh__aff{ font-size:13px; color:var(--sn-muted); margin:0; }
/* ---------- ranking list */
.rk{ list-style:none; margin:0; padding:0; scroll-margin-top:calc(var(--mast-h) + 12px); }
.rk__top{ margin:22px 0 4px; }
.rk-card{
position:relative;
display:grid; grid-template-columns:88px minmax(0,1fr);
grid-template-areas:"ph head" "ph score" "best best" "feats feats" "cta cta" "note note";
grid-template-rows:auto 1fr;
column-gap:14px;
padding:16px 14px 8px;
border:2px solid var(--sn-gold); border-radius:var(--sn-r-card);
background:
radial-gradient(120% 70% at 100% 0%, rgba(138,59,116,.34), transparent 60%),
linear-gradient(180deg, var(--sn-surface), var(--sn-surface-2));
box-shadow:var(--sn-shadow);
transition:box-shadow .3s, transform .3s var(--ease);
}
.rk-card:hover{ box-shadow:0 26px 56px -22px rgba(0,0,0,.9), 0 0 0 4px rgba(201,160,110,.14); }
.rk-card__ribbon{
position:absolute; top:-14px; left:14px; z-index:1; margin:0;
display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 12px 0 8px; border-radius:999px;
background:var(--sn-gold-grad); color:#1b0c20;
font:700 12.5px/1 var(--sans); letter-spacing:.03em; white-space:nowrap;
box-shadow:0 6px 16px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.rk-card__ribbon .ic{ width:16px; height:16px; }
.rk-card__ph{
grid-area:ph; align-self:start; width:88px; height:118px; border-radius:12px;
object-fit:cover; object-position:50% 14%; background:var(--sn-bg);
box-shadow:0 0 0 1px rgba(201,160,110,.25);
}
.rk-card__head{ grid-area:head; min-width:0; }
.rk-card__pos{ margin:1px 0 4px; font:600 12.5px/1.25 var(--sans); letter-spacing:.02em; color:var(--sn-rose); }
.rk-card__name{ margin:0; font:800 23px/1.1 var(--h1); letter-spacing:-.005em; color:var(--sn-ink); }
.rk-card__name a, .rk-row__name a{
display:inline-flex; align-items:center; min-height:44px; margin-block:-12px;
text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; text-decoration-thickness:1px;
transition:text-decoration-color .2s, color .2s;
}
.rk-card__name a:hover, .rk-row__name a:hover{ text-decoration-color:var(--sn-gold); color:var(--sn-gold-2); }
.rk-score{
grid-area:score; align-self:end; justify-self:start; margin:8px 0 0;
width:56px; height:56px; border-radius:12px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
background:rgba(201,160,110,.12); border:1px solid rgba(201,160,110,.5);
}
.rk-score b{ font:800 20px/1 var(--h1); color:var(--sn-ink); font-variant-numeric:tabular-nums; }
.rk-score span{ font:500 11.5px/1 var(--sans); color:var(--sn-gold-2); }
.rk-card__best{ grid-area:best; margin:10px 0 0; font:600 14.5px/1.35 var(--sans); color:var(--sn-ink); }
.rk-feats{ grid-area:feats; list-style:none; margin:3px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:2px 10px; }
.rk-feats li{ display:inline-flex; align-items:center; gap:4px; font:400 13px/1.4 var(--sans); color:rgba(239,230,234,.84); white-space:nowrap; }
.rk-feats .ic{ width:14px; height:14px; color:var(--sn-gold); stroke-width:2.6; }
.rk-card__cta{ grid-area:cta; margin-top:12px; }
.rk-card__note{ grid-area:note; margin:5px 0 0; text-align:center; font:12.5px/1.3 var(--sans); color:var(--sn-muted); }
.rk-row{
display:grid; grid-template-columns:16px 48px minmax(0,1fr) auto; align-items:center; column-gap:11px;
min-height:68px; padding:5px 2px; border-bottom:1px solid var(--sn-line);
transition:background-color .25s;
}
.rk-row:hover{ background:linear-gradient(90deg, rgba(138,59,116,.16), transparent 80%); }
.rk-row__n{ font:800 15px/1 var(--h1); color:var(--sn-muted); text-align:center; font-variant-numeric:tabular-nums; }
.rk-row__th{
width:48px; height:52px; border-radius:10px; object-fit:cover; object-position:50% 14%;
background:var(--sn-surface); box-shadow:0 0 0 1px rgba(201,160,110,.18);
transition:transform .3s var(--ease);
}
.rk-row:hover .rk-row__th{ transform:scale(1.05); }
.rk-row__txt{ min-width:0; }
.rk-row__name{ margin:0; display:flex; flex-wrap:wrap; align-items:center; column-gap:7px; font:800 17px/1.2 var(--h1); color:var(--sn-ink); }
.rk-row__sc{ display:inline-flex; align-items:center; gap:3px; font:600 13px/1 var(--sans); color:var(--sn-gold-2); font-variant-numeric:tabular-nums; }
.rk-row__sc .ic{ width:12px; height:12px; color:var(--sn-gold); }
.rk-row__best{ margin:2px 0 0; font:13.5px/1.28 var(--sans); color:var(--sn-muted); }
.rk-row__price{ display:none; margin:0; font:600 14px/1.3 var(--sans); color:var(--sn-ink); text-align:right; white-space:nowrap; }
@media (max-width:389px){
.rk-card{ column-gap:12px; padding-inline:10px; }
.rk-card__ribbon{ left:10px; }
.rk-feats{ column-gap:8px; }
.rk-feats li{ font-size:12.5px; }
}
@media (max-width:374px){
:root{ --fs-h1:29px; }
.rk-card__name{ font-size:21px; }
.rk-row{ column-gap:9px; }
.rk-row__name{ font-size:16px; }
.cta-line{ padding:0 12px; }
}
/* ---------- section scaffolding below the fold */
.hsec{ position:relative; padding-block:clamp(48px,7vw,96px); border-top:1px solid var(--sn-line); }
.hsec__head{ max-width:780px; margin-bottom:clamp(22px,3vw,38px); }
.hsec__kicker{ margin:0 0 8px; font:600 12px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--sn-rose); }
.hsec h2{ margin:0 0 12px; font:800 clamp(1.75rem,1.15rem + 2.1vw,2.8rem)/1.1 var(--h1); letter-spacing:-.01em; color:var(--sn-ink); text-wrap:balance; }
.hsec__lede{ margin:0; font-size:17px; line-height:1.65; color:rgba(239,230,234,.84); max-width:70ch; }
.hsec__links{ margin:26px 0 0; font-size:16px; color:var(--sn-muted); }
.hsec a:not([class]){ color:var(--sn-ink); text-decoration:underline; text-decoration-color:var(--sn-gold); text-underline-offset:3px; transition:color .2s; }
.hsec a:not([class]):hover{ color:var(--sn-gold-2); }
/* compare table: real
, scrolls inside its own box on phones (sticky app column) */
.cmp-wrap{
overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
border:1px solid var(--sn-line-gold); border-radius:16px;
background:
linear-gradient(90deg, rgba(34,16,42,0), var(--sn-surface-2) 70%) right center / 36px 100% no-repeat local,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.55), transparent) right center / 16px 100% no-repeat scroll,
var(--sn-surface-2);
box-shadow:0 26px 60px -36px rgba(0,0,0,.8);
}
.cmp{ width:100%; min-width:820px; border-collapse:separate; border-spacing:0; font:15px/1.35 var(--sans); color:var(--sn-ink); }
.cmp th, .cmp td{ padding:13px 16px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--sn-line); }
.cmp thead th{ font:600 11.5px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--sn-gold-2); background:rgba(25,10,31,.6); white-space:nowrap; }
.cmp tbody tr:last-child > *{ border-bottom:0; }
.cmp tbody tr{ transition:background-color .2s; }
.cmp tbody tr:hover{ background:rgba(201,160,110,.05); }
.cmp tr > :first-child{ position:sticky; left:0; z-index:1; background:var(--sn-surface-2); box-shadow:1px 0 0 var(--sn-line); }
.cmp thead tr > :first-child{ background:#1d0c24; }
.cmp tr.is-top{ background:linear-gradient(90deg, rgba(201,160,110,.13), rgba(201,160,110,.02) 85%); }
.cmp tr.is-top > :first-child{ background:linear-gradient(rgba(201,160,110,.13), rgba(201,160,110,.13)), var(--sn-surface-2); box-shadow:inset 3px 0 0 var(--sn-gold), 1px 0 0 var(--sn-line); }
.cmp__app{ display:flex; align-items:center; gap:10px; font-weight:600; white-space:nowrap; }
.cmp__app > *{ flex:none; }
.cmp__n{ width:14px; font:800 14px/1 var(--h1); color:var(--sn-muted); text-align:center; }
.cmp__logo{ width:36px; height:36px; border-radius:10px; object-fit:contain; padding:3px; background:rgba(255,255,255,.05); border:1px solid rgba(201,160,110,.18); }
.cmp__nm{ display:flex; flex-direction:column; white-space:nowrap; }
.cmp__pick{ margin-top:3px; font:700 10.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--sn-gold); }
.cmp__score{ display:flex; align-items:center; gap:9px; }
.cmp__score b{ font:600 16px/1 var(--sans); font-variant-numeric:tabular-nums; }
.sbar{ position:relative; width:58px; height:5px; border-radius:5px; background:rgba(201,160,110,.18); overflow:hidden; }
.sbar i{ position:absolute; inset:0 auto 0 0; width:var(--w,0%); border-radius:5px; background:var(--sn-gold-grad); transform-origin:0 50%; }
.sbar i.w92{ --w:92%; } .sbar i.w90{ --w:90%; } .sbar i.w88{ --w:88%; } .sbar i.w86{ --w:86%; }
.sbar i.w84{ --w:84%; } .sbar i.w82{ --w:82%; } .sbar i.w78{ --w:78%; }
.cmp__yes, .cmp__no{ display:inline-flex; align-items:center; gap:6px; }
.cmp__yes .ic{ width:18px; height:18px; padding:3px; border-radius:50%; color:var(--sn-gold); background:rgba(201,160,110,.18); stroke-width:2.6; }
.cmp__no{ color:var(--sn-muted); }
.cmp__price{ font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cmp__price small{ display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--sn-muted); }
.cmp__rev{ display:inline-flex; align-items:center; gap:3px; min-height:44px; font-weight:600; color:var(--sn-gold-2); white-space:nowrap; }
.cmp__rev .ic{ width:15px; height:15px; transition:transform .2s var(--ease); }
.cmp__rev:hover{ color:var(--sn-ink); }
.cmp__rev:hover .ic{ transform:translateX(2px); }
/* comparison table → cards on mobile (no horizontal scroll) */
@media (max-width:720px){
.cmp-wrap{ overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
.cmp{ display:block; width:100%; min-width:0; font-size:14px; }
.cmp thead{ display:none; }
.cmp tbody{ display:block; }
.cmp tbody tr{ display:block; margin:0 0 14px; border:1px solid var(--sn-line); border-radius:14px;
background:var(--sn-surface-2); overflow:hidden; box-shadow:0 18px 40px -30px rgba(0,0,0,.8); }
.cmp tbody tr:last-child{ margin-bottom:0; }
.cmp tbody tr:hover{ background:var(--sn-surface-2); }
.cmp tbody tr.is-top{ border-color:var(--sn-line-gold); }
/* app = card header */
.cmp tbody th[scope="row"]{ display:flex; position:static; left:auto; z-index:auto; box-shadow:none;
padding:14px 15px; border-bottom:1px solid var(--sn-line); background:rgba(201,160,110,.06); }
.cmp tbody tr.is-top > :first-child{ box-shadow:inset 3px 0 0 var(--sn-gold);
background:linear-gradient(90deg, rgba(201,160,110,.16), rgba(201,160,110,.02)); }
.cmp__app{ white-space:normal; }
.cmp__logo{ display:inline-block; }
/* data cells = label : value rows */
.cmp td{ display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:10px 15px; border-bottom:1px solid rgba(239,230,234,.07); text-align:right; white-space:normal; }
.cmp td::before{ content:attr(data-label); flex:0 0 auto; text-align:left;
font:600 10.5px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sn-gold-2); }
.cmp td:nth-of-type(1)::before{ content:"Jenis"; }
.cmp td:nth-of-type(2)::before{ content:"Skor"; }
.cmp td:nth-of-type(3)::before{ content:"Paket gratis"; }
.cmp td:nth-of-type(4)::before{ content:"Video"; }
.cmp td:nth-of-type(5)::before{ content:"Mulai dari"; }
.cmp__score{ justify-content:flex-end; }
.cmp__price{ text-align:right; }
/* review = full-width button footer */
.cmp td:nth-of-type(6){ justify-content:center; padding:0; border-bottom:0; }
.cmp td:nth-of-type(6)::before{ display:none; }
.cmp__rev{ justify-content:center; width:100%; min-height:48px; padding:12px;
background:rgba(201,160,110,.08); color:var(--sn-gold); font-weight:700; }
.cmp__rev:hover{ background:rgba(201,160,110,.14); color:var(--sn-ink); }
}
@media (max-width:560px){ .cmp tbody th[scope="row"]{ padding:13px; } .cmp td{ padding:9px 13px; } }
.cmp-note{ margin:14px 0 0; max-width:80ch; font-size:14px; line-height:1.55; color:var(--sn-muted); }
/* method cards */
.mcards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:640px){ .mcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .mcards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mcard{
position:relative; padding:22px 22px 20px; border-radius:16px;
border:1px solid var(--sn-line); background:linear-gradient(180deg, rgba(42,20,48,.7), rgba(34,16,42,.4));
transition:border-color .25s, transform .3s var(--ease), box-shadow .3s;
}
.mcard:hover{ border-color:var(--sn-line-gold); transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(0,0,0,.9); }
.mcard__ic{ display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px; border-radius:12px; color:var(--sn-ink); background:var(--sn-plum); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.mcard__ic .ic{ width:20px; height:20px; }
.mcard h3{ margin:0 0 6px; font:600 18px/1.3 var(--sans); color:var(--sn-ink); }
.mcard p{ margin:0; font-size:16px; line-height:1.55; color:rgba(239,230,234,.76); }
/* how we check */
.chk{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; }
.chk__col{ padding:22px; border-radius:16px; border:1px solid var(--sn-line-gold); background:rgba(201,160,110,.04); }
.chk h3{ margin:0 0 12px; font:800 21px/1.2 var(--h1); color:var(--sn-ink); }
.chk dl{ margin:0; display:grid; }
.chk dl > div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:11px 0; border-top:1px solid var(--sn-line); }
.chk dt{ font:600 15px/1.45 var(--sans); color:var(--sn-gold-2); }
.chk dd{ margin:0; font-size:16px; line-height:1.5; color:rgba(239,230,234,.82); }
.hsec__safe{ display:flex; gap:12px; align-items:flex-start; margin:22px 0 0; padding:16px 18px; max-width:900px;
border-radius:14px; background:rgba(138,59,116,.16); border:1px solid rgba(138,59,116,.5); font-size:15px; line-height:1.55; color:rgba(239,230,234,.86); }
.hsec__safe .ic{ width:22px; height:22px; margin-top:1px; color:var(--sn-rose); }
/* FAQ — native accordion: works and stays readable without JS */
.qa__list{ max-width:960px; border-top:1px solid var(--sn-line); interpolate-size:allow-keywords; }
.qa__item{ border-bottom:1px solid var(--sn-line); }
.qa__item summary{
list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
min-height:60px; padding:14px 2px;
}
.qa__item summary::-webkit-details-marker{ display:none; }
.qa__item summary h3{ margin:0; font:600 17px/1.4 var(--sans); color:rgba(239,230,234,.9); transition:color .2s; }
.qa__item summary:hover h3, .qa__item[open] summary h3{ color:var(--sn-ink); }
.qa__sign{ position:relative; flex:none; width:34px; height:34px; border-radius:50%; color:var(--sn-gold-2);
box-shadow:inset 0 0 0 1px var(--sn-line-gold); transition:transform .4s var(--ease), background-color .3s, color .3s; }
.qa__sign::before, .qa__sign::after{ content:""; position:absolute; top:50%; left:50%; width:13px; height:1.8px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%); }
.qa__sign::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s var(--ease), opacity .3s; }
.qa__item[open] .qa__sign{ transform:rotate(180deg); background:var(--sn-gold); color:#1b0c20; }
.qa__item[open] .qa__sign::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg) scaleX(0); }
.qa__item p{ margin:0; padding:0 50px 20px 2px; font-size:16px; line-height:1.62; color:rgba(239,230,234,.78); }
.qa__item::details-content{ block-size:0; overflow:clip; transition:block-size .42s var(--ease), content-visibility .42s allow-discrete; }
.qa__item[open]::details-content{ block-size:auto; }
/* correction / contact band */
.fixband{ padding-block:clamp(36px,5vw,64px); }
.fixband__in{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px 22px;
padding:24px clamp(18px,3vw,36px); border-radius:18px; border:1px solid var(--sn-line-gold);
background:radial-gradient(90% 140% at 0% 0%, rgba(138,59,116,.3), transparent 60%), var(--sn-surface-2); }
.fixband__ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--sn-gold-grad); color:#1b0c20; }
.fixband__ic .ic{ width:22px; height:22px; }
.fixband h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin:0 0 4px; }
.fixband__txt p{ margin:0; font-size:16px; line-height:1.5; color:rgba(239,230,234,.8); }
.fixband__txt .fixband__sig{ margin-top:6px; font-family:var(--h1); font-weight:800; font-size:16px; letter-spacing:.01em; color:var(--sn-gold); }
@media (max-width:640px){
.fixband__in{ grid-template-columns:auto minmax(0,1fr); }
.fixband__btn{ grid-column:1 / -1; justify-self:start; }
}
/* ---------- tablet / desktop */
@media (min-width:640px){
.rk-row{ grid-template-columns:22px 52px minmax(0,1fr) auto auto; column-gap:16px; min-height:76px; padding-inline:6px; }
.rk-row__th{ width:52px; height:56px; }
.rk-row__price{ display:block; }
}
@media (min-width:720px){
.rk-card{
grid-template-columns:150px minmax(0,1fr) auto;
grid-template-areas:"ph head score" "ph best best" "ph feats feats" "ph cta cta" "ph note note";
grid-template-rows:auto auto auto 1fr auto;
column-gap:22px; padding:26px 24px 16px;
}
.rk-card__ph{ width:150px; height:201px; grid-row:1 / -1; }
.rk-card__name{ font-size:clamp(26px,1.4rem + .8vw,32px); }
.rk-score{ align-self:start; margin:0; width:64px; height:64px; }
.rk-score b{ font-size:23px; }
.rk-card__best{ margin-top:14px; font-size:15.5px; }
.rk-feats li{ font-size:14.5px; }
.rk-card__cta{ align-self:end; }
}
@media (min-width:1200px){
.rh{ padding:clamp(34px,4vw,64px) 0 clamp(48px,5vw,80px); }
.rh::before{ left:-10%; right:auto; width:70%; top:-120px; height:720px; }
.rh__grid{
display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
grid-template-areas:"head list" "lead list"; grid-template-rows:auto 1fr;
column-gap:clamp(36px,4.6vw,88px); align-items:start;
}
.rh__head{ grid-area:head; padding-top:22px; }
.rh__lead{ grid-area:lead; margin-top:28px; }
.rk{ grid-area:list; }
.rk__top{ margin-top:14px; }
.rh__kicker{ font-size:13px; margin-bottom:14px; }
.rh__title{ margin-bottom:22px; }
.rh__by-txt{ font-size:15px; }
.rh__lead p{ font-size:17.5px; }
}
/* ---------- scroll-linked reveal (CSS only, progressive: no support / reduced motion = static & visible) */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.sr{ animation:sn-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 75%; }
.mcard.sr:nth-child(3n+2){ animation-range:entry 8% entry 83%; }
.mcard.sr:nth-child(3n){ animation-range:entry 16% entry 91%; }
.cmp-sec{ view-timeline:--cmp block; }
.sbar i{ animation:sn-bar linear both; animation-timeline:--cmp; animation-range:entry 20% cover 45%; }
}
}
@keyframes sn-rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes sn-bar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){
.rh::before, .cta-gold::after{ animation:none; }
.cta-gold::after{ display:none; }
.qa__item::details-content{ transition:none; }
.rk-card, .rk-row__th, .mcard, .cta-gold, .cta-line, .cta-ghost{ transition:none; }
.mcard:hover, .cta-gold:hover, .cta-line:hover{ transform:none; }
}