/* ===== SELF-HOSTED FONTS (no Google Fonts request: faster + GDPR-safe) ===== */
/* Montserrat 700 - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-700-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;
}
/* Montserrat 800 - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-800-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;
}
/* Mulish 400 - latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/mulish-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mulish 400 - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/mulish-400-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;
}
/* Mulish 600 - latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/mulish-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mulish 600 - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/mulish-600-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;
}
/* Mulish 700 - latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/mulish-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mulish 700 - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/mulish-700-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;
}

/* Design language: marketingwithjonas.com — light theme, Montserrat headings,
   Mulish body, red accent, pill buttons, black torn-edge feature band. */
:root{
  --accent:#f57b0d; --accent-dark:#dd6a03; --accent-deep:#bb5903;
  --ink:#16181f; --body-c:#3a3f4d; --muted:#6e7487;
  --line:#e7e9f0; --soft:#f6f7fa; --card:#ffffff;
  --gold:#f2b01e; --green:#27ae60; --bad:#e23b32;
  --maxw:820px; --radius:14px;
  --font-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--body-c);overflow-x:hidden;
  font:16px/1.75 var(--font-body);
  background-image:radial-gradient(#16181f0a 1px, transparent 1.4px);
  background-size:26px 26px;
  padding-bottom:88px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--accent)}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line);padding:16px 0;position:sticky;top:0;z-index:5;
  box-shadow:0 2px 14px rgba(22,24,31,.05)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.brand{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:.3px;display:inline-block}
.brand img{height:40px;width:auto;display:block}
.mainnav{display:flex;align-items:center}
.brand{flex-shrink:0}
.nav-links{display:flex;gap:24px;align-items:center}
.mainnav a{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none;letter-spacing:.2px;white-space:nowrap}
.mainnav a:hover{color:var(--accent)}
.nav-ico{width:17px;height:17px;flex:0 0 auto}
/* hamburger (CSS-only, no JS) */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:8px;cursor:pointer;background:none;border:0;border-radius:8px}
.nav-burger span{display:block;width:100%;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:720px){
  .nav-burger{display:flex}
  .mainnav{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;z-index:6;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 14px 26px rgba(22,24,31,.12)}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-links a{padding:15px 20px;border-bottom:1px solid var(--line);font-size:1rem;gap:11px}
  .nav-ico{width:19px;height:19px}
  .brand img{height:34px}
}

/* home hero */
.home-hero{padding:34px 0 8px}
.home-hero h1{font-size:2.2rem}
.home .card-grid{margin-bottom:50px}
.foot-disclosure{max-width:var(--maxw);font-size:.78rem;opacity:.8;margin-bottom:10px}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);
  margin:0 0 18px;font-family:var(--font-head);font-weight:600}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{color:#c3c2b7;opacity:.8}
.crumbs [aria-current]{color:var(--ink)}
.crumb-ico{width:15px;height:15px;display:block}
@media(max-width:700px){.crumbs{margin-bottom:26px}}

/* 404 */
.notfound{padding-top:44px}
.notfound h1{font-size:2.1rem}
.notfound .tagline{max-width:48ch}
.notfound .lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 10px}
.notfound .lp-cta{margin:0}
.notfound .lp-ghost{border:2px solid var(--line)}

/* freshness line under the verdict badge */
.updated-line{font-size:.8rem;color:var(--muted);margin:-6px 0 0;font-family:var(--font-head);font-weight:600}
.updated-line time{font-weight:700}

/* contact page */
.contact-wrap{padding-top:34px;padding-bottom:10px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:0 8px 26px rgba(22,24,31,.06);display:flex;flex-direction:column}
.cc-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:#fff4ea;color:var(--accent-deep);margin-bottom:14px}
.cc-ico .nav-ico{width:21px;height:21px}
.contact-card h3{margin:0 0 6px;font-size:1.05rem}
.contact-card p{margin:0;font-size:.9rem;line-height:1.55;flex:1}
.cc-link{margin-top:14px;font-family:var(--font-head);font-weight:800;font-size:.86rem;
  color:var(--accent);text-decoration:none;word-break:break-word}
.cc-link:hover{color:var(--accent-deep);text-decoration:underline}

/* author box (E-E-A-T) */
.author-box{display:flex;gap:18px;align-items:flex-start;margin-top:42px;padding:20px 22px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}
.ab-img{width:84px;height:84px;flex:0 0 84px;border-radius:50%;object-fit:cover;object-position:50% 6%;
  background:#e9ecf3;border:2px solid #fff;box-shadow:0 4px 14px rgba(22,24,31,.14)}
.ab-label{font-family:var(--font-head);font-weight:800;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.author-box h3{margin:4px 0 0;font-size:1.12rem}
.ab-role{margin:1px 0 8px;font-size:.84rem;color:var(--accent-deep);font-family:var(--font-head);font-weight:700}
.ab-bio{margin:0;font-size:.92rem;line-height:1.6}
.ab-links{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:16px}
.ab-links a{font-family:var(--font-head);font-weight:700;font-size:.85rem;text-decoration:none}
.ab-links a:hover{text-decoration:underline}
@media(max-width:560px){.author-box{flex-direction:column;gap:12px}.ab-img{width:70px;height:70px;flex-basis:70px}}

/* related reviews (bottom of a review page) */
.related{margin-top:46px;padding-top:6px;border-top:1px solid var(--line)}
.related h2{margin-top:1.1em}

/* headings */
.article{padding:30px 20px 60px}
h1{font-family:var(--font-head);font-weight:800;font-size:2.3rem;line-height:1.15;color:var(--ink);margin:.2em 0}
h1::after{content:".";color:var(--accent)}
h2{font-family:var(--font-head);font-weight:700;font-size:1.45rem;color:var(--ink);
  margin:1.7em 0 .6em;padding:0 0 10px;border-left:none;position:relative}
h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;border-radius:2px;background:var(--accent)}
h3{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.tagline{color:var(--muted);font-size:1.12rem;margin-top:2px}

/* above-the-fold hero: copy left, product shot right */
.hero-grid{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.hero-copy{flex:1 1 380px;min-width:0}
.product-img{flex:0 1 350px;max-width:350px;height:auto;display:block;border:none;margin:0 auto}
@media(max-width:700px){.product-img{max-width:260px;order:-1}}

/* disclosure */
.disclosure{background:var(--soft);border:1px solid var(--line);color:var(--muted);
  font-size:.85rem;padding:10px 14px;border-radius:10px}

/* verdict */
.verdict-badge{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin:18px 0;box-shadow:0 8px 26px rgba(22,24,31,.07)}
.stars{display:inline-block;position:relative;white-space:nowrap;line-height:1;vertical-align:middle;font-size:1.4rem}
.stars::before{content:"\2605\2605\2605\2605\2605";color:#d7dbe6;letter-spacing:3px}
.stars-fill{position:absolute;top:0;left:0;height:100%;overflow:hidden;white-space:nowrap}
.stars-fill::before{content:"\2605\2605\2605\2605\2605";color:var(--gold);letter-spacing:3px}
.score{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:var(--ink)}
.vendor{color:var(--muted)}

/* CTA buttons — pill shape like the brand site */
.cta{display:block;text-align:center;background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.08rem;letter-spacing:.4px;
  text-decoration:none;padding:17px 26px;border-radius:100px;margin:22px 0;
  box-shadow:0 10px 26px rgba(245,123,13,.35)}
.cta:hover{background:linear-gradient(180deg,var(--accent-dark),var(--accent-deep))}
.cta-video{margin-top:14px}
.video h2{margin-bottom:.4em}
.cta-sticky{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;
  width:min(92%,var(--maxw));margin:0;font-size:1rem;padding:15px;z-index:20}

/* images & media */
.prose img,.hero-img,figure img{max-width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
figure img{margin:0 auto;box-shadow:0 10px 30px rgba(22,24,31,.09)}
.hero-img{margin:18px 0;box-shadow:0 10px 30px rgba(22,24,31,.09)}
img{max-width:100%;height:auto}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;
  border:1px solid var(--line);margin:18px 0;background:#000;box-shadow:0 10px 30px rgba(22,24,31,.12)}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* features — green checks like the brand site */
.features{list-style:none;padding:0}
.features li{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin:8px 0;padding-left:40px;position:relative}
.features li::before{content:"\2713";position:absolute;left:14px;color:var(--green);font-weight:800;font-size:1.05rem}

/* pros & cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proscons .pros,.proscons .cons{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 18px 14px;box-shadow:0 8px 26px rgba(22,24,31,.06)}
.pros h2::after{background:var(--green)} .cons h2::after{background:var(--bad)}

/* ---------------------------------------------------------------
   PER-PAGE DESIGN ITERATION — scoped to the Rewardsly review only.
   Settled on the Rewardsly page 2026-07-28 and rolled out site-wide.
   See REVIEW-PAGE-SPEC.md. Non-review pages (home, legal) are unaffected.
   --------------------------------------------------------------- */
/* full-width heading rule instead of the short 54px stub */
.review h2::after{width:100%}

/* section imagery: a screenshot set beside the copy. Wide 16:9 shots need real
   width to stay legible, so the float is much wider than a square logo would be
   and drops to full-width below 900px (mobile layout already works stacked). */
.review .sec-media{margin:4px 0 18px}
.review .sec-media img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.review .sec-media figcaption{
  margin-top:8px;font-size:.85rem;color:var(--muted);line-height:1.45;
}
@media(min-width:900px){
  .review .sec-media{
    float:right;width:min(48%,360px);margin:2px 0 16px 30px;
  }
  /* keep following headings clear of the float */
  .review .prose h2{clear:both}
}

/* "Who it's for": the two audiences as icon cards. The copy names exactly two
   groups, so two cards encode the structure rather than decorating it. */
.review .audience{display:grid;gap:14px;margin:18px 0 6px;clear:both}
.review .aud{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.review .aud-ico{
  width:34px;height:34px;color:var(--accent);display:block;margin-bottom:12px;
}
.review .aud h3{margin:0 0 6px;font-size:1.06rem}
.review .aud p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
@media(min-width:760px){
  .review .audience{grid-template-columns:1fr 1fr;gap:20px}
}

/* Bonus band: flat edges (no torn clip-path) and lifted so the dark starts at the
   MIDDLE of the verdict card. The card then straddles the colour change, which stops
   the verdict reading as the end of the page and pulls the eye into the bonuses.
   --bonus-pull = half the verdict card + the gap below it. */
.review{--bonus-pull:213px}
.review .verdict-box{position:relative;z-index:1}
.review .bonus-section{
  clip-path:none;
  /* 44px/64px are the section's own top margin/padding: keep them in the sum so the
     band moves up by exactly --bonus-pull and its content stays put. */
  margin-top:calc(44px - var(--bonus-pull));
  padding-top:calc(25px + var(--bonus-pull));
}
/* the card runs ~23px taller once the score labels narrow */
@media(max-width:520px){ .review{--bonus-pull:224px} }
/* the global h2 rule adds ~1.7em above; not wanted directly under the card */
.review .bonus-section h2{
  margin-top:0;
  font-size:clamp(1.6rem,3.4vw,2.05rem);
  letter-spacing:-.015em;
}

/* feature list with the reviewer's one-line verdict under each item. The take is
   set apart from the feature label so it reads as opinion, not spec. */
.review .features li{padding-top:14px;padding-bottom:14px}
.review .feat-name{display:block;font-weight:600;color:var(--ink)}
.review .feat-take{
  display:block;margin-top:5px;padding-left:12px;
  border-left:2px solid var(--accent);
  color:var(--muted);font-size:.93rem;line-height:1.55;
}

/* 4 steps as a 2x2 grid rather than 4 narrow columns: wider cards stop the
   headings wrapping onto three lines and leave room for a screenshot later. */
.review .steps{grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:560px){
  .review .steps{grid-template-columns:1fr}
}

/* walkthrough screenshots: sit inside the prose next to the step they show,
   instead of being dumped in a gallery at the end. ".two" pairs them up. */
.review .shots{display:grid;gap:14px;margin:18px 0 24px;clear:both}
.review .shots figure{margin:0}
.review .shots img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.review .shots figcaption{
  margin-top:8px;font-size:.85rem;color:var(--muted);line-height:1.45;
}
@media(min-width:760px){
  .review .shots.two{grid-template-columns:1fr 1fr;gap:18px}
}

/* personal verdict note: visually separated from the body copy so it reads as
   the reviewer's opinion, not more product description */
.review .take{
  clear:both;
  margin:20px 0 6px;padding:14px 18px;
  background:var(--soft);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  color:var(--ink);font-size:.97rem;line-height:1.6;
}
.review .take strong{color:var(--accent)}
.proscons li{margin:6px 0}

/* pricing */
.pricing{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;
  box-shadow:0 8px 26px rgba(22,24,31,.06)}

/* pricing tier cards */
.price-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 6px}
.price-tier{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 20px;box-shadow:0 8px 26px rgba(22,24,31,.06);display:flex;flex-direction:column}
.price-tier-hl{border:2px solid var(--accent);box-shadow:0 12px 30px rgba(245,123,13,.22)}
.pt-tag{align-self:flex-start;background:#eef1fa;color:var(--muted);font-family:var(--font-head);
  font-weight:800;font-size:.68rem;letter-spacing:1px;padding:5px 10px;border-radius:6px;text-transform:uppercase}
.price-tier-hl .pt-tag{background:var(--accent);color:#1a1200}
.pt-name{font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--ink);margin-top:12px}
.pt-price{font-family:var(--font-head);font-weight:800;font-size:1.9rem;color:var(--ink);margin:4px 0 12px}
.pt-price span{font-family:var(--font-body);font-weight:600;font-size:.78rem;color:var(--muted);margin-left:5px}
.pt-coupon{display:inline-flex;align-items:center;gap:8px;background:#fff7ed;border:1px dashed var(--accent);
  color:var(--accent-deep);font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.5px;
  text-transform:uppercase;padding:6px 11px;border-radius:8px;margin-bottom:12px}
.pt-coupon span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;font-weight:800;letter-spacing:1px;text-transform:none}
.pt-feats{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.pt-feats li{font-size:.85rem;color:var(--body-c);padding-left:22px;position:relative;line-height:1.4}
.pt-feats li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.pt-cta{display:block;text-align:center;margin-top:16px;background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff;font-family:var(--font-head);font-weight:800;font-size:.9rem;text-decoration:none;
  padding:13px 14px;border-radius:100px;box-shadow:0 8px 20px rgba(245,123,13,.32)}
.pt-cta:hover{background:linear-gradient(180deg,var(--accent-dark),var(--accent-deep))}
.pricing-take{margin-top:16px;font-size:.95rem}

/* What's New in 2.0 */
.whatsnew .prose li{margin:6px 0}
.lg-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.lg-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 26px rgba(22,24,31,.06)}
.lg-col-head{font-family:var(--font-head);font-weight:800;padding:12px 16px;color:#fff;font-size:1.05rem}
.lg-old{background:#8b91a4}
.lg-new{background:linear-gradient(90deg,var(--accent),var(--accent-dark));display:flex;align-items:center;gap:8px}
.lg-new span{background:#fff;color:var(--accent-deep);font-size:.62rem;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:.5px}
.lg-list{list-style:none;margin:0;padding:14px 16px;display:grid;gap:9px}
.lg-list li{font-size:.9rem;color:var(--body-c);padding-left:24px;position:relative;line-height:1.4}
.lg-list li::before{content:"\2713";position:absolute;left:0;color:#aab0c0;font-weight:800}
.lg-list-new li::before{color:var(--good)}
.lg-list-new li:first-child{font-weight:700;color:var(--ink)}
.lg-list-new li:first-child::before{content:"\2192";color:var(--accent)}
@media(max-width:560px){.lg-compare{grid-template-columns:1fr}}
/* real bonus cover thumbnails */
.bonus .b-thumb img{border-radius:8px}
@media(max-width:820px){.price-tiers{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.price-tiers{grid-template-columns:1fr}}

/* ClickDesigns has 5 tiers, so letting the highlighted front end span 2 of the 3 columns
   fills exactly two rows with no dead cell, and stops the price-free upgrade cards being
   stretched to the front end's height.
   DELIBERATELY SCOPED to this one review (REVIEW-PAGE-SPEC section 'iterate on a single
   review'). A global rule would misalign the pages whose highlighted tier is NOT first:
   ElevenLabs highlights index 2 of 4, LeadsGorilla index 5 of 6, so the span would land
   mid-row and push a card onto a line of its own. */
.review-clickdesigns-review .price-tier-hl{grid-column:span 2}
/* masonry-ish: let each card size to its own content instead of stretching to the tallest
   in its row, so the upgrade cards are not inflated to the front end's height */
.review-clickdesigns-review .price-tiers{align-items:start}
/* ...but the FRONT END is the conversion target, so it stretches to fill its row and pins
   its button to the bottom edge. Otherwise Maximizer (which carries more bullets) leaves a
   dead gap under the one card that matters most. */
.review-clickdesigns-review .price-tier-hl{align-self:stretch}
.review-clickdesigns-review .price-tier-hl .pt-cta{margin-top:auto}
/* margin-top:auto collapses to 0 once the card has no spare height (mobile, single column),
   which left the button sitting right under the last bullet. Carry the minimum gap on the
   feature list instead, so it holds at every width. 16px matches the base .pt-cta margin,
   so mobile spacing ends up identical to every other pricing card on the site. */
.review-clickdesigns-review .price-tier-hl .pt-feats{margin-bottom:16px}
/* 2-col breakpoint: spanning both gives the front end a full-width row, upgrades sit 2x2 */
@media(max-width:520px){.review-clickdesigns-review .price-tier-hl{grid-column:span 1}}

/* verdict score bars */
.verdict-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 22px 22px;box-shadow:0 8px 26px rgba(22,24,31,.06);margin-top:26px}
.scorebars{display:grid;gap:13px;margin:10px 0 16px}
.scorebar{display:grid;grid-template-columns:150px 1fr 42px;align-items:center;gap:14px}
.sb-label{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink)}
.sb-track{height:12px;background:#eceef4;border-radius:8px;overflow:hidden}
.sb-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:8px}
.sb-num{font-family:var(--font-head);font-weight:800;color:var(--ink);text-align:right}
.sb-overall{font-size:1.08rem;padding-top:6px;border-top:1px solid var(--line)}
.sb-overall .stars{font-size:1.2rem}
.card .c-score .stars{font-size:1rem}
@media(max-width:480px){.scorebar{grid-template-columns:110px 1fr 36px;gap:9px}}

/* 4-step process visual */
.steps-section{margin-top:10px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:12px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;box-shadow:0 8px 26px rgba(22,24,31,.06)}
.step-num{width:40px;height:40px;border-radius:50%;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  box-shadow:0 4px 12px rgba(245,123,13,.35)}
.step h3{font-size:1rem;margin:0 0 6px}
.step p{font-size:.9rem;color:var(--body-c);margin:0;line-height:1.55}
.steps-img{grid-template-columns:repeat(2,1fr)}
.step-img{display:block;width:100%;height:auto;margin-top:14px;border-radius:8px;
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(22,24,31,.1)}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.steps-img{grid-template-columns:1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* bonus section — black grunge band, full-bleed with torn edges */
.bonus-section{
  width:100vw;margin:44px calc(50% - 50vw) 34px;
  padding:64px calc(50vw - min(50vw - 20px, 390px)) 70px;
  background:linear-gradient(175deg,#101116,#1c1d26 60%,#101116);
  border:none;border-radius:0;color:#cfd3e0;
  clip-path:polygon(0 22px,4% 8px,9% 24px,15% 5px,22% 19px,28% 9px,35% 26px,42% 7px,50% 21px,57% 9px,64% 24px,71% 6px,78% 19px,85% 10px,92% 23px,100% 8px,
    100% calc(100% - 20px),94% calc(100% - 6px),87% calc(100% - 22px),80% calc(100% - 8px),72% calc(100% - 24px),64% calc(100% - 9px),56% calc(100% - 20px),48% calc(100% - 7px),40% calc(100% - 23px),32% calc(100% - 9px),24% calc(100% - 19px),16% calc(100% - 7px),8% calc(100% - 22px),0 calc(100% - 9px))}
.bonus-section h2{color:#fff}
.bonus-section p{color:#b9bece}
/* Bonus cards appear in TWO contexts: on a light background (the buyer-only
   delivery pages, template/bonus.html) and inside the dark band on review pages.
   Light is the default here; the dark-band overrides are scoped below. Previously
   the white/dark-band colours were unscoped, which made every title on the
   delivery pages invisible (white text on white). */
.bonuses{display:grid;gap:12px}
/* accent rail along the bottom edge: breaks up the flat white and ties the cards to the
   brand. Applied to the base so review and delivery pages stay visually identical. */
.bonus{display:flex;justify-content:space-between;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-bottom:4px solid var(--accent);
  border-radius:12px;padding:12px 14px}
.bonus .b-thumb{flex:0 0 92px}
/* a bonus with no cover art keeps the column so its title aligns with the rest */
.bonus .b-thumb-empty{align-self:stretch}
.bonus .b-thumb img{width:100%;height:auto;display:block;border:none;box-shadow:none;border-radius:0}
.bonus .b-main{flex:1}
.bonus .b-name{font-family:var(--font-head);font-weight:700;color:var(--ink)}
/* quiet footnote under the copy - present for anyone who looks, never competing with it */
.bonus .b-value{display:inline-block;color:#cc6405;font-family:var(--font-head);
  font-weight:700;font-size:.76rem;letter-spacing:.01em;margin-top:7px;white-space:nowrap}
.bonus .b-num{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,123,13,.12);color:var(--accent-deep);
  font-family:var(--font-head);font-weight:800;font-size:.78rem;line-height:1;flex:none}
.bonus .b-desc{color:var(--body-c);font-size:.9rem}
/* one bonus, several access routes (preview / download / import) */
.bonus .b-links{flex:0 0 260px;display:flex;flex-direction:column;gap:7px}
.bonus .b-links a{display:block;text-align:center;background:var(--accent);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:.82rem;line-height:1.3;
  padding:9px 12px;border-radius:100px;text-decoration:none}
.bonus .b-links a:hover{background:var(--accent-dark)}
@media(max-width:720px){.bonus .b-links{flex-basis:100%}}

/* delivered-by-instruction (bonus lives in the vendor's own member area, no link) */
.bonus .b-note{flex:0 0 260px;background:var(--soft);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;
  color:var(--body-c);font-size:.86rem;line-height:1.5}
@media(max-width:720px){.bonus .b-note{flex-basis:100%}}
@media(max-width:560px){.bonus .b-thumb{flex-basis:64px}}

/* dark-band context (review pages): the BAND stays dark, but the cards are the same
   white as on the delivery page. White cards on the dark band read as physical items
   and match what the buyer sees after purchase, so the two pages feel continuous.
   A plain black shadow was invisible here (black on a near-black band), so the lift comes
   from a hard drop plus a faint light rim along the top edge of the card. */
.bonus-section .bonus{
  box-shadow:0 16px 34px -8px rgba(0,0,0,.85), 0 -1px 0 0 rgba(255,255,255,.14);
  position:relative;overflow:hidden;
}
/* On the review page the counter is decorative: a large ghost numeral watermarked into
   the card, sitting UNDER the text. (The delivery page keeps the small solid badge -
   there the number is functional and the right-hand side is taken by access buttons.) */
.bonus-section .bonus .b-num{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:auto;height:auto;border-radius:0;background:none;display:block;
  font-size:4.6rem;line-height:1;font-weight:800;letter-spacing:-.04em;
  color:rgba(245,123,13,.16);z-index:0;pointer-events:none;user-select:none;
}
.bonus-section .bonus .b-thumb,
.bonus-section .bonus .b-main{position:relative;z-index:1}

/* screenshots + FAQ */
figure{margin:38px 0}
figure figcaption{color:var(--body-c);font-size:.95rem;text-align:center;margin-top:14px;font-weight:600;line-height:1.5}
figure:first-of-type{margin-top:16px}
.faq-item{border-bottom:1px solid var(--line);padding:12px 0}
.faq-item h3{margin:0 0 4px;font-size:1.02rem}

/* homepage / hub review cards (thumbnail + score badge + read-more) */
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.reviews-head h2{margin-bottom:8px}
.section-sub{color:var(--muted);font-size:.98rem;margin:0 0 2px;max-width:54ch}
.view-all{font-family:var(--font-head);font-weight:800;font-size:.9rem;color:var(--accent);text-decoration:none;white-space:nowrap}
.view-all:hover{color:var(--accent-deep)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;color:var(--body-c);box-shadow:0 8px 26px rgba(22,24,31,.06);overflow:hidden;
  transition:box-shadow .14s,transform .14s}
.card:hover{border-color:var(--accent);box-shadow:0 14px 34px rgba(22,24,31,.12);transform:translateY(-2px)}
.card-thumb{position:relative;aspect-ratio:16/9;background:#0f1116;overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0;border-radius:0}
.card-thumb-ph{background:radial-gradient(120% 120% at 30% 0,#2a2740,#12131b)}
.card-score{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(16,17,22,.82);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.78rem;
  padding:4px 10px;border-radius:20px}
.card-score::before{content:"\2605";color:var(--gold);font-size:.85rem}
.card-score-plain::before{content:"\1F381";font-size:.8rem}
.card-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin:0 0 5px;font-size:1.06rem}
.card-body p{margin:0;font-size:.89rem;line-height:1.5;color:var(--body-c)}
.card-more{margin-top:12px;font-family:var(--font-head);font-weight:800;font-size:.84rem;color:var(--accent)}
.card:hover .card-more{color:var(--accent-deep)}

/* footer — black like the brand site */
.site-footer{background:#101116;color:#9aa0b5;font-size:.85rem;padding:30px 0;margin-top:40px}
.site-footer a{color:#fff}
.footlinks{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 12px}
.footlinks a{color:#c9cddb;text-decoration:none;font-size:.85rem}
.footlinks a:hover{color:var(--accent)}
.static-page .updated{color:var(--muted);font-size:.85rem;margin-top:-4px}
.static-page .prose h2{font-size:1.25rem;margin-top:1.6em}
.static-page .prose{max-width:100%}

@media(max-width:560px){.proscons{grid-template-columns:1fr}h1{font-size:1.7rem}}

/* ============================================================
   HOMEPAGE v2 - live-proof hero, proof strip, "how I review"
   ============================================================ */
/* no top padding: the dark hero must sit flush against the sticky header,
   otherwise the dotted body background shows through as a grey seam. */
.home{padding-top:0}
.eyebrow{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);background:#fff4ea;border:1px solid #ffd9b0;
  padding:5px 12px;border-radius:100px;margin-bottom:14px}

/* hero: copy left, browser-framed real screenshot right */
.lp-hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:32px 20px 16px}
.lp-copy h1{font-size:2.35rem;line-height:1.1;margin:.05em 0 .35em}
.lp-copy .tagline{font-size:1.08rem;color:var(--body-c);max-width:36ch;margin-top:8px}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 4px}
.lp-cta{display:inline-block;margin:0}
.lp-ghost{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:800;font-size:1rem;
  color:var(--ink);text-decoration:none;padding:15px 20px;border:2px solid var(--line);border-radius:100px}
.lp-ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.lp-author{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.lp-avatar{width:46px;height:46px;border-radius:50%;border:2px solid #fff;box-shadow:0 3px 10px rgba(22,24,31,.18);flex:0 0 auto}
.lp-author p{margin:0;line-height:1.3;font-size:.9rem}
.lp-author b{display:block;font-family:var(--font-head);color:var(--ink)}
.lp-author span{color:var(--muted);font-size:.84rem}

.lp-proof{position:relative;padding:12px 6px 30px}
.lp-frame{margin:0;border-radius:12px;overflow:hidden;background:#0f1116;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(22,24,31,.20)}
.lp-frame img{display:block;width:100%;height:auto;border:0;border-radius:0}
.lp-frame-front{position:relative;z-index:2}
.lp-frame-back{position:absolute;top:-6px;right:10px;width:72%;transform:rotate(3deg);z-index:1;opacity:.9}
.lp-bar{display:flex;align-items:center;gap:6px;background:#1c1f27;padding:9px 12px}
.lp-bar span{width:10px;height:10px;border-radius:50%}
.lp-bar span:nth-child(1){background:#ff5f57}.lp-bar span:nth-child(2){background:#febc2e}.lp-bar span:nth-child(3){background:#28c840}
.lp-bar i{margin-left:10px;font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;
  color:#8b91a4;background:#14161c;padding:3px 12px;border-radius:20px;flex:1;max-width:230px}
.lp-proof-tag{position:absolute;left:0;bottom:4px;z-index:3;display:inline-flex;align-items:center;
  background:#fff;border:1px solid var(--line);color:var(--green);font-family:var(--font-head);font-weight:700;
  font-size:.76rem;padding:7px 13px;border-radius:100px;box-shadow:0 6px 18px rgba(22,24,31,.14)}
@media(max-width:720px){.lp-hero{grid-template-columns:1fr;gap:22px}.lp-proof{order:2;margin-top:4px}.lp-copy .tagline{max-width:none}}

/* proof strip */
.proof-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  margin:0;padding:16px 20px;background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-strip li{font-family:var(--font-head);font-weight:700;font-size:.86rem;color:var(--ink);padding-left:24px;position:relative}
.proof-strip li::before{content:"\2713";position:absolute;left:2px;color:var(--green);font-weight:800}
@media(max-width:560px){.proof-strip{gap:8px 16px;padding:14px 18px}}

/* "how I review" full-bleed band */
.how-band{width:100vw;margin:46px calc(50% - 50vw) 6px;background:var(--soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0 42px}
.how-sub{color:var(--muted);margin:-2px 0 4px;max-width:62ch}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.how-step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;box-shadow:0 8px 26px rgba(22,24,31,.06)}
.how-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:.9rem;color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(245,123,13,.32);margin-bottom:12px}
.how-step h3{font-size:1rem;margin:0 0 5px}
.how-step p{font-size:.88rem;color:var(--body-c);margin:0;line-height:1.5}
@media(max-width:820px){.how-steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.how-steps{grid-template-columns:1fr}}

/* hero portrait card (cutout on dark panel + orange blob + stat card) */
.lp-portrait{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1/1.06;
  background:radial-gradient(125% 100% at 50% -12%, #26263f 0%, #171723 52%, #0f0f18 100%);
  box-shadow:0 26px 60px rgba(15,15,24,.30)}
.lp-portrait .blob{position:absolute;z-index:1;left:12%;top:13%;width:76%;height:66%;
  background:radial-gradient(circle at 50% 45%, rgba(245,123,13,.9), rgba(245,123,13,.20) 58%, transparent 72%);
  filter:blur(4px);border-radius:48% 52% 46% 54%/52% 46% 54% 48%}
.lp-portrait .pimg{position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);
  width:94%;max-width:none;height:auto;display:block;border:0;border-radius:0;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.lp-statcard{position:absolute;z-index:3;left:16px;bottom:16px;display:flex;align-items:center;gap:12px;
  background:rgba(18,18,26,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:11px 16px 11px 13px}
.lp-statcard .star{color:var(--accent);font-size:1.4rem;line-height:1}
.lp-statcard .st-txt b{font-family:var(--font-head);font-weight:800;color:#fff;font-size:1.45rem;line-height:1;display:block}
.lp-statcard .st-txt span{font-family:var(--font-head);font-weight:700;font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.6);display:block;margin-top:3px}

/* ===== full-bleed DARK hero (Tim-inspired): cutout floats, no box ===== */
.hero-dark{width:100vw;margin-left:calc(50% - 50vw);position:relative;overflow:hidden;color:#e9eaf0;
  background:radial-gradient(115% 120% at 80% 2%, #262041 0%, #17151f 44%, #0f0f18 100%)}
.hero-inner{max-width:1060px;margin:0 auto;padding:54px 20px 58px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero-dark .eyebrow{background:rgba(245,123,13,.15);border-color:rgba(245,123,13,.38);color:#ffb877}
.hero-dark h1{color:#fff;font-size:2.7rem;line-height:1.09;margin:.05em 0 .3em}
.hero-dark h1 .hl{color:var(--accent)}
.hero-dark .tagline{color:#a9abbb;font-size:1.08rem;max-width:44ch;margin-top:14px}
.hero-dark .lp-cta-row{margin-top:26px}
.lp-ghost.dark{color:#fff;border-color:rgba(255,255,255,.22)}
.lp-ghost.dark:hover{border-color:var(--accent);color:#ffb877}
/* compact single-column variant for /reviews/ and /bonuses/ */
.hero-compact .hero-inner{grid-template-columns:1fr;padding:44px 20px 42px;max-width:900px}
.hero-compact h1{font-size:2.35rem;margin-bottom:.15em}
.hero-compact .tagline{max-width:62ch}
@media(max-width:760px){.hero-compact h1{font-size:1.95rem}}
.hero-figure{position:relative;min-height:430px;display:flex;align-items:flex-end;justify-content:center}
.hero-figure .blob{position:absolute;z-index:1;left:50%;top:44%;transform:translate(-50%,-50%);
  width:118%;max-width:520px;aspect-ratio:1;border-radius:50%;filter:blur(8px);
  background:radial-gradient(circle at 50% 50%, rgba(245,123,13,.5), rgba(245,123,13,.12) 55%, transparent 70%)}
.hero-figure .pimg{position:relative;z-index:2;width:88%;max-width:440px;height:auto;display:block;border:0;border-radius:0;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.hero-figure .lp-statcard{left:0;bottom:24px}
@media(max-width:760px){.hero-inner{grid-template-columns:1fr;gap:18px;padding:38px 20px 44px}
  .hero-figure{order:2;min-height:340px}.hero-dark h1{font-size:2.05rem}.hero-dark .tagline{max-width:none}}