/* ================================
   FanStudio Apps Design System (Light/Dark)
   - Keep existing class names
   - Add a few new components (badge, category cards, pricing, consent)
=================================== */

:root{
  /* Light defaults */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel2:#f0f2f8;
  --border:#e3e6f2;

  --text:#0b0c10;
  --muted:#4a536a;
  --link:#2b59ff;

  --brand:#6f5cff;
  --brand2:#16b8ff;
  --accent:#ffb020;

  --radius:16px;
  --max:1080px;

  --shadow: 0 10px 30px rgba(10,12,16,.08);
  --shadow2: 0 8px 20px rgba(10,12,16,.10);

  --header-bg: rgba(246,247,251,.75);
  --header-border: rgba(227,230,242,.85);
  --hero-glow-1: rgba(111,92,255,.20);
  --hero-glow-2: rgba(22,184,255,.16);

  --focus: 0 0 0 4px rgba(43,89,255,.20);
}

/* Dark overrides */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10;
    --panel:#11131a;
    --panel2:#151826;
    --border:#23263a;

    --text:#eef0f6;
    --muted:#a1a7bb;
    --link:#cfd6ff;

    --shadow: 0 16px 40px rgba(0,0,0,.45);
    --shadow2: 0 12px 26px rgba(0,0,0,.40);

    --header-bg: rgba(11,12,16,.70);
    --header-border: rgba(35,38,58,.85);
    --hero-glow-1: rgba(111,92,255,.40);
    --hero-glow-2: rgba(22,184,255,.30);
  }
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{opacity:.92;text-decoration:underline}
.small{font-size:.92rem;color:var(--muted)}
.lede{font-size:1.125rem;color:var(--muted)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:12px;top:12px;width:auto;height:auto;z-index:999;
  background:var(--panel);color:var(--text);padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);
  outline:none;
}

/* ================= Header ================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, var(--header-bg), rgba(0,0,0,0));
  border-bottom:1px solid var(--header-border);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
}
@media (prefers-color-scheme: light){
  .brand{ background:rgba(255,255,255,.85); }
}
.brand img{
  width:32px;height:32px;
  border-radius:10px;
}
.brand span{
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}

/* Header brand redesign */
.site-header .brand{
  background:transparent;
  border:0;
  padding:4px 0;
  gap:.75rem;
}
.site-header .brand img{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--panel);
  box-shadow:var(--shadow2);
}
.site-header .brand span{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.04em;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}
@media (prefers-color-scheme: light){
  .site-nav{ background:rgba(255,255,255,.85); }
}
.site-nav a{
  color:var(--text);
  font-weight:600;
  opacity:.88;
}
.site-nav a:hover{opacity:1;text-decoration:none}
.site-nav a.active{opacity:1}

.header-cta{
  white-space:nowrap;
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
@media (prefers-color-scheme: light){
  .nav-toggle{ background:rgba(255,255,255,.85); }
}
.nav-toggle:focus{outline:none; box-shadow:var(--focus);}

@media (max-width: 860px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:64px;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border-radius:16px;
    background:var(--panel);
    box-shadow:var(--shadow);
  }
  .site-nav.is-open{display:flex}
  .header-cta{display:none}
}

/* ================= Buttons ================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  line-height:1;
}
.btn:focus{outline:none; box-shadow:var(--focus);}

.btn-primary{
  background:var(--brand);
  color:#ffffff;
  border-color:transparent;
}
.btn-primary:hover{filter:brightness(1.04);text-decoration:none}
.guide-cta{
  background:linear-gradient(135deg, #5b4bff 0%, #18c4ff 100%);
  color:#ffffff;
  border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 22px rgba(43,89,255,.25);
}
.guide-cta:hover{
  filter:brightness(1.06);
  text-decoration:none;
}
@media (prefers-color-scheme: dark){
  .guide-cta{
    background:linear-gradient(135deg, #7666ff 0%, #3ad3ff 100%);
    border-color:rgba(255,255,255,.2);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
  }
}

.btn-secondary{
  background:var(--panel2);
  border-color:var(--border);
  color:var(--text);
}
.btn-secondary:hover{text-decoration:none}

.btn-outline{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-outline:hover{text-decoration:none}

.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--text);
  opacity:.9;
}
.btn-ghost:hover{opacity:1;text-decoration:none}

/* ================= Badges ================= */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:14px;
}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-weight:700;
  font-size:.85rem;
}
@media (prefers-color-scheme: light){
  .badge{ background:rgba(255,255,255,.85); }
}

/* ================= Sections ================= */
.section{
  padding: 18px 0;
}
.section-head{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}
.section-title{
  margin:18px 0 6px;
  font-size:1.35rem;
}
.section-foot{
  max-width:var(--max);
  margin:12px auto 0;
  padding:0 20px;
}

/* ================= Hero ================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:72px 20px 46px;
}
.hero-inner{
  max-width:var(--max);
  margin:0 auto;
  text-align:center;
}
.hero h1{
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  margin:.2rem 0 .6rem;
  letter-spacing:-.02em;
}
.hero .cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero-subnote{margin-top:10px}
.hero-art{
  position:absolute;
  inset:-20% -10% auto -10%;
  height:120%;
  background:
    radial-gradient(60% 60% at 60% 40%, var(--hero-glow-1), transparent 60%),
    radial-gradient(40% 40% at 30% 60%, var(--hero-glow-2), transparent 60%);
  filter:saturate(1.15) blur(45px);
  opacity:.9;
  pointer-events:none;
}

/* ================= Page hero ================= */
.page-hero{
  padding:48px 20px 12px;
}
.page-hero-inner{
  max-width:var(--max);
  margin:0 auto;
}
.page-hero h1{
  margin:0 0 8px;
  font-size:clamp(2rem, 3.2vw, 2.6rem);
}

/* ================= Category cards ================= */
.category-grid{
  max-width:var(--max);
  margin:14px auto 0;
  padding:0 20px;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.category-card{
  display:block;
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow2);
  color:var(--text);
  text-decoration:none;
}
.category-card:hover{ text-decoration:none; transform: translateY(-1px); }
.category-card-top h3{ margin:0 0 6px; font-size:1.1rem; }
.category-card-top p{ margin:0; color:var(--muted); }
.category-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
}
.category-cta{
  font-weight:800;
  color:var(--text);
  opacity:.9;
}

/* ================= Apps list ================= */
.apps{ padding: 6px 0 18px; }
.apps > .app-card{width:calc(100% - 40px);max-width:calc(var(--max) - 40px)}

.app-card{
  max-width:var(--max);
  margin:0 auto 12px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
}
.app-card .cta-row{ margin-top:10px; }
.app-icon{ border-radius:22%; }
.app-card-body h3{ margin:0 0 6px; }
.app-card-body p{ margin:0 0 6px; color:var(--muted); }

/* Product directory: compact, grouped rows with real app icons. */
.app-directory #main{ scroll-margin-top:110px; }
.directory-nav{ display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:24px; }
.directory-nav a{ padding:8px 0; text-decoration:underline; text-underline-offset:4px; }
.directory-section{ max-width:calc(var(--max) + 40px); margin:0 auto; padding:24px 20px; scroll-margin-top:110px; }
.directory-section h2{ margin:0 0 20px; font-size:1.35rem; }
.directory-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.directory-grid .app-card{
  width:100%; margin:0; padding:24px; grid-template-columns:72px minmax(0,1fr);
  align-items:start; box-shadow:none;
}
.directory-grid h3{ font-size:1.12rem; line-height:1.4; }
.directory-grid p{ margin:8px 0 12px; }
.directory-links{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.directory-links a{ display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:8px 0; text-decoration:underline; text-underline-offset:3px; font-size:.92rem; }
.directory-guides p{ max-width:var(--max); margin:12px auto; padding:0 20px; }
@media (max-width:760px){
  .directory-grid{ grid-template-columns:1fr; }
  .directory-grid .app-card{ padding:20px 16px; gap:14px; grid-template-columns:56px minmax(0,1fr); }
  .directory-grid .app-icon{ width:56px; height:56px; }
}

/* ================= Values ================= */
.values{ padding: 6px 20px 18px; }
.value-list{
  max-width:var(--max);
  margin:0 auto;
  padding-left:18px;
}

/* ================= Newsletter ================= */
.newsletter{
  text-align:center;
  padding: 18px 20px 54px;
}
.newsletter-form{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.newsletter input[type="email"]{
  min-width:240px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
}
.newsletter input[type="email"]::placeholder{ color:var(--muted); }

/* ================= Support ================= */
.support{
  max-width:var(--max);
  margin:28px auto 64px;
  padding:0 20px;
  display:grid;
  gap:18px;
}
.support-hero,
.support-index,
.support-section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px;
  box-shadow:var(--shadow2);
}
.support-hero h1{
  margin:0 0 8px;
  font-size:clamp(2rem, 3vw, 2.4rem);
}
.support-contact{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.support-links{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
}
.support-section h2{ margin:0 0 10px; }

/* ================= Legal pages ================= */
.legal-page{
  max-width:var(--max);
  margin:32px auto 64px;
  padding:0 20px;
}
.legal-page h1{
  margin:0 0 10px;
  font-size:clamp(2rem, 3.2vw, 2.5rem);
}
.legal-page h2{ margin-top:24px; }
.legal-page p{ line-height:1.85; }
.legal-page ul{ padding-left:18px; }
.legal-page code{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:2px 6px;
}

/* ================= Product page ================= */
.product .product-hero{
  max-width:var(--max);
  margin:28px auto 18px;
  padding:0 20px;
  display:grid;
  grid-template-columns:128px 1fr;
  gap:18px;
  align-items:start;
}
.app-icon-xl{ border-radius:26%; box-shadow:var(--shadow2); }

.meta{ margin:10px 0 0; padding-left:18px; }
.meta li{ margin:4px 0; }

.summary{
  max-width:var(--max);
  margin:10px auto 14px;
  padding:0 20px;
}
.summary-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.summary-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 14px;
  box-shadow:var(--shadow2);
}
.summary-card h2{ margin:0 0 8px; font-size:1.05rem; }
.summary-card ul{ margin:0; padding-left:18px; color:var(--muted); }
.summary-card li{ margin:6px 0; }

.feature-grid{
  max-width:var(--max);
  margin:16px auto;
  padding:0 20px;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.feature{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 14px;
  box-shadow:var(--shadow2);
}
.feature h2{ margin:0 0 6px; font-size:1.05rem; }
.feature p{ margin:0; color:var(--muted); }

/* ================= Trust block ================= */
.trust-block{
  max-width:var(--max);
  margin:18px auto 0;
  padding:0 20px;
}
.trust-block .section-title{
  text-align:center;
}
.trust-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin-top:12px;
}
.trust-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 14px;
  box-shadow:var(--shadow2);
}
.trust-card h3{ margin:0 0 6px; font-size:1.05rem; }
.section > .trust-grid{max-width:var(--max);margin:12px auto 0;padding:0 20px}
.trust-card p{ margin:0; color:var(--muted); }

/* ================= Pricing ================= */
.pricing-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.price-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 14px;
  box-shadow:var(--shadow2);
}
.price-card h3{ margin:0 0 6px; }
.price-card ul{ margin:10px 0 0; padding-left:18px; color:var(--muted); }
.price-card li{ margin:6px 0; }
.price{
  font-size:1.4rem;
  font-weight:900;
  margin:6px 0 0;
}
.price-card.highlight{
  border-color: rgba(111,92,255,.55);
  box-shadow: 0 18px 50px rgba(111,92,255,.14), var(--shadow2);
}
.pricing-note{
  max-width:var(--max);
  margin:10px auto 0;
  padding:0 20px;
}

/* ================= FAQ ================= */
.faq{
  max-width:var(--max);
  margin:10px auto 24px;
  padding:0 20px;
}
details{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  margin:10px 0;
  padding:12px 12px;
  box-shadow:var(--shadow2);
}
details>summary{
  cursor:pointer;
  font-weight:800;
}
details p{ margin:10px 0 0; color:var(--muted); }

/* ================= CTA wide ================= */
.cta-wide{
  text-align:center;
  padding:28px 20px 52px;
}
.cta-wide .cta-row{ justify-content:center; }
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= Screens ================= */
.screens{
  margin-block:2.6rem 3.6rem;
}
.screens .screens-track{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 360px));
  justify-content:center;
  align-content:start;
  padding-inline:.5rem;
}
.screen.phone{
  width:clamp(240px, 26vw, 360px);
  aspect-ratio:9 / 19.5;
  border-radius:20px;
  background:var(--panel2);
  box-shadow:var(--shadow2);
  padding:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin:0;
  border:1px solid var(--border);
}
.screen.phone img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px;
  background:var(--panel);
  border:1px solid var(--border);
}

/* ================= Sticky CTA ================= */
.sticky-cta{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transform: translateY(120%);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
  z-index:60;
}
.sticky-cta.is-visible{
  transform: translateY(0);
  opacity:1;
}
.sticky-title{
  font-weight:900;
}
@media (min-width: 900px){
  .sticky-cta{ display:none; }
}

/* ================= Footer ================= */
.site-footer{
  margin-top:28px;
  padding:18px 20px;
  border-top:1px solid var(--border);
}
.footer-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  gap:20px;
  grid-template-columns:2fr 1fr 1fr;
  align-items:start;
}
.footer-grid nav,
.footer-grid .social{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-legal{
  max-width:var(--max);
  margin:12px auto 0;
  padding:0 20px;
}
.compact{text-align:center}
@media (max-width: 700px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ================= Consent banner ================= */
.consent-banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:80;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px 14px;
}
.consent-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.consent-text{
  color:var(--muted);
  margin:0;
  flex:1;
  min-width:240px;
}
.consent-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= Blog styles (kept, fixed colors) ================= */
.blog-shell{
  max-width: 860px;
  margin: 32px auto 60px;
  padding: 0 20px 40px;
}
.blog-hero{text-align:center;margin-bottom:28px}
.blog-hero h1{margin:0 0 8px;font-size:clamp(2rem, 3.2vw, 2.4rem)}
.blog-hero p{margin:0;color:var(--muted)}

.post-list{display:flex;flex-direction:column;gap:1.75rem}
.post-card{display:flex;align-items:flex-start;gap:1rem}
.post-thumb{flex-shrink:0;width:120px;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--panel)}
.post-thumb img{display:block;width:100%;height:auto}
.post-content{flex:1}
.post-meta{font-size:.85rem;color:var(--muted);display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.25rem}
.post-card h2{margin:0 0 .25rem;font-size:1.15rem}
.post-card h2 a{color:var(--text);text-decoration:none}
.post-card h2 a:hover{text-decoration:underline}
.post-card p{margin:0;color:var(--muted)}

@media (max-width:480px){
  .post-card{align-items:flex-start}
}

.blog-article{
  max-width:760px;
  margin:32px auto 64px;
  padding:0 20px 48px;
}
.blog-article-header{margin-bottom:24px}
.blog-article-header h1{margin:0 0 10px;font-size:clamp(2rem, 3.2vw, 2.5rem)}
.blog-article p{margin:0 0 1.1rem;font-size:1rem;line-height:1.85;color:var(--text)}
.blog-article h2{margin:2.2rem 0 .6rem;font-size:1.35rem}
.blog-article h3{margin:1.6rem 0 .4rem;font-size:1.1rem}
.blog-article ul{padding-left:1.2rem;margin:0 0 1.1rem}
.blog-article li{margin:.3rem 0;color:var(--text)}
.blog-article blockquote{
  margin:1.4rem 0;
  padding:.8rem 1rem;
  border-left:3px solid var(--brand);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--muted);
  font-style:italic;
}
.blog-article a{color:var(--link)}
.blog-article a:hover{text-decoration:underline}
.blog-article-image{margin:1.5rem 0 2rem}
.blog-article-image img{display:block;width:100%;height:auto;max-height:480px;border-radius:16px;border:1px solid var(--border);background:var(--panel)}
.blog-article-image figcaption{margin-top:.5rem;color:var(--muted);font-size:.9rem}
.guide-evidence .blog-article-image img{max-height:none}
.guide-phone-image{max-width:420px;margin-inline:auto}
.pdf-check-guide section{scroll-margin-top:100px}
.pdf-check-table{overflow-x:auto;margin:1.25rem 0;border:1px solid var(--border);border-radius:12px}
.pdf-check-table table{width:100%;min-width:660px;border-collapse:collapse;text-align:left;line-height:1.6}
.pdf-check-table caption{padding:1rem;text-align:left;color:var(--muted)}
.pdf-check-table th,.pdf-check-table td{padding:1rem;vertical-align:top;border-top:1px solid var(--border)}
.pdf-check-table th{font-weight:600;background:var(--panel)}
.pdf-check-table:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pdf-check-cell-label{display:none}
@media(max-width:600px){
  .pdf-check-table table{min-width:0}
  .pdf-check-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pdf-check-table tbody,.pdf-check-table tr,.pdf-check-table th,.pdf-check-table td{display:block}
  .pdf-check-table td{border-top:0;padding-top:.5rem}
  .pdf-check-cell-label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.35rem}
}
.guide-evidence li{overflow-wrap:anywhere}
.guide-evidence,.blog-article #sources{scroll-margin-top:100px}

/* ================= Mobile tweaks ================= */
@media (max-width: 600px){
  .product .product-hero{
    grid-template-columns:1fr;
    text-align:left;
  }
  .badges{ justify-content:flex-start; }
  .hero{ padding-top:56px; }
  .app-card{ grid-template-columns:72px 1fr; }
}
/* Legacy layout components used across guides, utilities and product pages.
   Restore missing components from the last served stylesheet without replacing
   the current theme or the new product-specific layouts. */
.hero-columns{display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 20px; align-items: stretch;}
.hero-copy{background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow); position: relative; overflow: hidden;}
.hero-copy::after{content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(17, 103, 216, 0.08), rgba(15, 154, 140, 0.08)); pointer-events: none;}
.hero-copy > *{position: relative; z-index: 1;}
.signal-list{display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;}
.signal-list li{padding: 12px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel2);}
.signal-list strong{display: block; font-size: 0.95rem;}
.signal-list span{color: var(--muted); font-size: 0.88rem;}
.page-hero-panel{background: var(--panel); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(20px, 3vw, 30px);}
.guide-grid,.task-grid{max-width: var(--max); margin: 16px auto 0; padding: 0 20px; display: grid; gap: 14px;}
.task-grid,.guide-grid{grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));}
.guide-card,.task-card{background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow2); color: var(--text); padding: 16px;}
.task-card,.guide-card{display: block; text-decoration: none;}
.task-card:hover,.guide-card:hover{transform: translateY(-1px); text-decoration: none;}
.task-card h3,.guide-card h3{margin: 0 0 8px;}
.task-card p,.guide-card p{margin: 0; color: var(--muted);}
.price-note{display: inline-flex; align-items: center; width: fit-content; margin: 10px 0 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 0.86rem; font-weight: 800;}
.answer-grid{display: grid; gap: 12px; margin-top: 14px;}
.answer-card{background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow2);}
.answer-card h3{margin: 0 0 6px; font-size: 1rem;}
.answer-card p{margin: 0; color: var(--muted);}
.guide-directory{max-width: var(--max); margin: 16px auto 0; padding: 0 20px;}
.guide-directory{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 34px;}
.guide-topic{padding-top: 18px; border-top: 1px solid var(--border);}
.guide-topic h3{margin: 0 0 8px;}
.guide-topic p{margin: 0 0 12px; color: var(--muted);}
.guide-topic ul{margin: 0; padding-left: 18px;}
.guide-topic li{margin: 7px 0;}
.guide-topic-more{display: inline-flex; margin-top: 12px; font-weight: 800;}
.guide-app-callout{max-width: var(--max); margin: 28px auto 0; padding: 16px 20px 0; display: flex; align-items: center; justify-content: center; gap: 14px; border-top: 1px solid var(--border);}
.guide-app-callout p{margin: 0; color: var(--muted);}
.core-guides-cta{margin-top: 14px;}
.core-guides-cta .btn{flex: 1 1 280px; line-height: 1.2; text-align: center;}
.mac-screens-grid{max-width: var(--max); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;}
.screen.desktop{margin: 0; border-radius: 24px; overflow: hidden; background: var(--panel2); border: 1px solid var(--border); box-shadow: var(--shadow2); padding: 10px;}
.screen.desktop img{display: block; width: 100%; height: auto; border-radius: calc(24px - 6px); border: 1px solid var(--border); background: var(--panel);}
.guide-meta{display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0;}
.pill{display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border); padding: 4px 8px; font-size: 0.78rem; color: var(--muted); margin-top: 6px;}
.task-card ul{margin: 8px 0 0; padding-left: 18px; color: var(--muted);}
.task-card li{margin: 5px 0;}
.quick-answer,.toc-card,.guide-callout{background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow2);}
.quick-answer{border-left: 4px solid var(--brand);}
.guide-callout{border-left: 4px solid var(--accent);}
.related-grid{display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));}
.related-card{background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px;}
.tradeoff-grid{display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));}
.tradeoff-card{background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 12px;}
@media (max-width: 920px){
.hero-columns{grid-template-columns: 1fr;}
}
@media (max-width: 700px){
.guide-directory{grid-template-columns: 1fr; gap: 20px;}
.guide-app-callout{align-items: flex-start; flex-direction: column;}
}
.task-card:hover .task-card-link{text-decoration: underline;}
.pillar-page{max-width: 720px; margin: 0 auto; padding: 48px 20px 40px;}
.pillar-hero{margin-bottom: 36px;}
.pillar-breadcrumb{margin: 0 0 8px; font-size: 0.85rem; color: var(--muted);}
.pillar-breadcrumb a{color: var(--muted);}
.pillar-hero h1{margin: 0 0 10px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.025em;}
.pillar-lede{margin: 0 0 6px; color: var(--muted); font-size: 1.02rem; line-height: 1.6;}
.pillar-count{margin: 0; font-size: 0.83rem; color: var(--muted);}
.pillar-list{list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border);}
.pillar-item{display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border);}
.pillar-item-icon{flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--brand); opacity: 0.65;}
.pillar-item a{font-weight: 600; font-size: 1.02rem; color: var(--text); margin-bottom: 4px;}
.pillar-item a:hover{color: var(--brand); text-decoration: none;}
.pillar-item-body{flex: 1; min-width: 0;}
.pillar-item span{display: block; font-size: 0.9rem; color: var(--muted); line-height: 1.5;}
.pillar-cta{margin-top: 32px; font-size: 0.92rem; color: var(--muted);}
.pillar-cta a{font-weight: 600;}
.guide-card,.task-card,.guide-topic,.related-card,.tradeoff-card{min-width:0;overflow-wrap:anywhere}
main section[id]{scroll-margin-top:100px}
.page-hero-panel .badges{justify-content:flex-start}
a.task-card:focus-visible,.guide-topic a:focus-visible,.pillar-item a:focus-visible{outline:3px solid var(--link);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.task-card:hover,.guide-card:hover{transform:none}}

/* OfflinePDF: actual documents and a review-led product story. */
.offlinepdf-page .pdf-hero{
  max-width:var(--max);margin:52px auto 36px;padding:0 20px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;
}
.pdf-brand{display:flex;align-items:center;gap:12px;font-weight:650;margin:0 0 24px}
.pdf-brand img{border-radius:12px}
.pdf-brand .small{display:block;font-weight:400}
.offlinepdf-page h1{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 22px;max-width:680px}
.pdf-hero-copy .lede{max-width:600px;font-size:1.15rem}
.pdf-jump-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px}
.offlinepdf-page .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pdf-jump-links a{min-height:44px;display:inline-flex;align-items:center}
.pdf-hero-output{margin:0;max-width:360px;justify-self:end}
.pdf-hero-output img{width:100%;height:auto;border:1px solid var(--border);box-shadow:var(--shadow2)}
.offlinepdf-page figcaption{font-size:.9rem;color:var(--muted);margin-top:12px;line-height:1.5}
.pdf-hero-output figcaption{border-left:2px solid var(--link);padding-left:12px}
.pdf-section{max-width:var(--max);margin:0 auto;padding:44px 20px;border-top:1px solid var(--border);scroll-margin-top:90px}
.pdf-section h2{font-size:clamp(1.4rem,2.5vw,1.85rem);line-height:1.3;letter-spacing:-.015em;margin:6px 0 18px}
.pdf-section h3{font-size:1.05rem;line-height:1.4;margin:0 0 10px}
.pdf-section>p{max-width:780px}
.pdf-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;margin:0 0 12px}
.pdf-comparison{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.pdf-comparison figure{margin:0;min-width:0}
.pdf-comparison img{width:100%;height:auto;border:1px solid var(--border)}
.pdf-figure-label{padding:0 0 12px;font-weight:650}
.pdf-sample-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:26px 0}
.pdf-sample-actions>a{display:inline-block;padding:10px 16px;border:1px solid var(--border);background:var(--panel);border-radius:8px;font-weight:600}
.pdf-observation{background:var(--panel);border-left:3px solid var(--link);padding:24px 28px;margin:26px 0}
.pdf-observation p:last-child{margin-bottom:0}
.pdf-teaching,.pdf-question{border-top:1px solid var(--border);padding:18px 0}
.pdf-teaching summary,.pdf-question summary{cursor:pointer;font-weight:600;line-height:1.5;min-height:44px;padding:8px 0}
.pdf-teaching p,.pdf-question p{max-width:850px}
.pdf-teaching code{overflow-wrap:anywhere}
.pdf-steps{padding:0;list-style:none;counter-reset:pdf-step;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;margin:26px 0 34px}
.pdf-steps li{counter-increment:pdf-step;position:relative;padding-left:42px}
.pdf-steps li::before{content:counter(pdf-step,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.pdf-steps p{margin:0;color:var(--muted)}
.pdf-workspace{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;scroll-margin-top:90px}
.pdf-workspace figure{margin:0;min-width:0}
.pdf-workspace img{width:100%;height:auto;border:1px solid var(--border);border-radius:12px}
.pdf-result-shot{display:grid;grid-template-columns:330px 1fr;gap:28px;align-items:center}
.pdf-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.pdf-two-columns>div{min-width:0;scroll-margin-top:90px}
.pdf-two-columns ul{padding-left:20px}
.pdf-two-columns li{margin-bottom:12px}
.pdf-pricing{gap:40px;margin:28px 0 0}
.pdf-pricing>div{border-left:2px solid var(--border);padding-left:20px}
.pdf-reading{padding-left:20px}
.pdf-reading li{margin:10px 0}
.pdf-final-cta{padding-bottom:64px}
/* ReportMason: blue field labels, orange job marker, actual Letter pages.
   Palette: field blue #22516b, marker #df5000, paper #fff;
   shell text/background follow the shared light/dark tokens.
   The paired PDF sheets carry the story; no decorative dashboard cards. */
.reportmason-page{--rm-blue:#22516b;--rm-marker:#df5000}
body:has(.reportmason-page) .header-cta{min-height:44px;background:#22516b;border-color:#22516b;color:#fff}
@media(max-width:760px){body:has(.reportmason-page) .header-cta{display:none}}
.reportmason-page h1{font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-size:clamp(2.15rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 24px}
.rm-hero{max-width:var(--max);margin:48px auto 36px;padding:0 20px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.rm-hero-copy .lede{font-size:1.2rem;max-width:560px}
.reportmason-page .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.reportmason-page .btn-primary{background:var(--rm-blue);border-color:var(--rm-blue);color:#fff}
.reportmason-page figcaption{font-size:.9rem;color:var(--muted);line-height:1.5;margin-top:12px}
.rm-hero-output{margin:0;max-width:370px;justify-self:end;position:relative;padding-top:16px}
.rm-hero-output::before{content:"";position:absolute;top:0;left:0;width:72px;height:5px;background:var(--rm-marker)}
.rm-hero-output img{width:100%;height:auto;box-shadow:var(--shadow2);border:1px solid var(--border)}
.rm-credit{max-width:850px;line-height:1.6}
.rm-screen-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;max-width:930px;margin:32px auto}
.rm-screen-strip figure{margin:0;min-width:0}
.rm-screen-strip img{width:100%;height:auto;border:1px solid var(--border);border-radius:16px}
.rm-sample-intro{max-width:var(--max);padding:52px 20px 32px;margin:0 auto}
.rm-sample-intro h1{max-width:780px}
.rm-sample-intro .lede{max-width:720px}
.rm-fields{max-width:850px;margin:28px 0}
.rm-fields>div{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:18px 0;border-top:1px solid var(--border)}
.rm-fields dt{font-weight:650}
.rm-fields dd{margin:0;line-height:1.65}
.rm-sample-pages .pdf-comparison{align-items:start}
@media(max-width:760px){
  .rm-hero{grid-template-columns:1fr;gap:32px;margin-top:30px}
  .rm-hero-output{justify-self:center;max-width:340px}
  .rm-screen-strip{grid-template-columns:1fr;max-width:320px;gap:30px}
  .rm-sample-intro{padding-top:32px}
  .rm-fields>div{grid-template-columns:1fr;gap:8px}
}
@media(max-width:760px){
  .offlinepdf-page .pdf-hero{grid-template-columns:1fr;gap:30px;margin-top:30px}
  .pdf-hero-output{justify-self:center;max-width:300px}
  .pdf-section{padding-top:32px;padding-bottom:32px}
  .pdf-comparison,.pdf-two-columns,.pdf-steps,.pdf-workspace{grid-template-columns:1fr;gap:26px}
  .pdf-result-shot{display:block;justify-self:center;max-width:300px}
  .pdf-observation{padding:20px}
}

/* Home: two actual exports, with product-specific actions and limits. */
.home-intro{max-width:var(--max);margin:48px auto 28px;padding:0 20px}
.home-intro h1{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.1;letter-spacing:-.025em;margin:12px 0 18px}
.home-intro .lede{max-width:720px;margin-bottom:16px}
.home-directory-link{display:inline-block;padding:8px 0}
.home-output-grid{max-width:var(--max);margin:0 auto 48px;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.home-output-card{min-width:0;padding:26px;display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:22px;align-items:start;border:1px solid var(--border);border-top:4px solid var(--link);border-radius:12px;background:var(--panel)}
.home-product-label{font-size:.8rem;font-weight:700;color:var(--muted);margin:0 0 12px}
.home-output-copy h2{font-size:1.5rem;line-height:1.2;margin:0 0 16px;letter-spacing:-.02em}
.home-output-copy p{line-height:1.6}
.home-output-copy .cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:20px 0 12px}
.home-output-copy .btn{font-size:.85rem;min-height:44px;padding:10px 14px;text-align:center;white-space:normal}
.home-sample-link{padding:8px 0;font-weight:600;font-size:.9rem}
.home-output-card figure{margin:0}
.home-output-card img{display:block;width:100%;height:auto;border:1px solid var(--border);box-shadow:var(--shadow2);background:#fff}
.home-output-card figcaption{font-size:.75rem;line-height:1.5;margin-top:12px;color:var(--muted)}
.home-report-card{border-top-color:#b45d24}
.home-results .campaign-card{width:calc(100% - 40px);max-width:calc(var(--max) - 40px);margin:16px auto 0;padding:22px}
.home-results .campaign-card p{margin:0;line-height:1.6;overflow-wrap:anywhere}
.home-results .campaign-card .cta-row{margin-top:18px}
.home-results .home-guide-list{max-width:var(--max);margin:18px auto 0;padding:0 20px;display:grid}
.home-results .home-guide-list a{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,1.4fr);gap:24px;padding:20px 0;border-top:1px solid var(--border);text-decoration:none;overflow-wrap:anywhere}
.home-results .home-guide-list a:last-child{border-bottom:1px solid var(--border)}
.home-results .home-guide-list strong{color:var(--text);line-height:1.4}
.home-results .home-guide-list span{color:var(--muted);line-height:1.6}
.home-results .home-guide-list a:hover strong{text-decoration:underline;text-underline-offset:4px}
.home-results .app-icon-grid{max-width:var(--max);margin:20px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.home-results .app-icon-link{min-width:0;min-height:152px;display:grid;place-items:center;align-content:center;gap:14px;padding:20px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);text-align:center;text-decoration:none}
.home-results .app-icon-link img{display:block;width:72px;height:72px;border-radius:22%}
.home-results .app-icon-link span{color:var(--text);font-size:.92rem;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.home-results .app-icon-link:hover span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
  .home-results .home-guide-list a{grid-template-columns:1fr;gap:8px}
  .home-results .app-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-results .campaign-card{padding:20px}
}
@media(max-width:1100px){.home-output-card{grid-template-columns:minmax(0,1fr) 130px;padding:20px;gap:16px}}
@media(max-width:900px){.home-output-grid{grid-template-columns:1fr}.home-output-card{grid-template-columns:minmax(0,1fr) 200px}}
@media(max-width:560px){.home-intro{margin-top:32px}.home-output-card{grid-template-columns:1fr;padding:22px}.home-output-card figure{max-width:230px;margin:4px auto 0}.home-output-copy h2{font-size:1.6rem}.home-output-grid{gap:28px}body:has(.home-results) .header-cta{display:none}}

/* Clear keyboard focus and readable primary actions on the reviewed growth pages. */
body:is(.app-directory,:has(.home-results,.pdf-check-guide,.offlinepdf-page,.reportmason-page,.guide-evidence,.growth-guide-index)) a:focus-visible,
body:is(.app-directory,:has(.home-results,.pdf-check-guide,.offlinepdf-page,.reportmason-page,.guide-evidence,.growth-guide-index)) button:focus-visible,
body:is(.app-directory,:has(.home-results,.pdf-check-guide,.offlinepdf-page,.reportmason-page,.guide-evidence,.growth-guide-index)) summary:focus-visible{outline:3px solid var(--link);outline-offset:4px}
body:is(.app-directory,:has(.home-results,.pdf-check-guide,.offlinepdf-page,.guide-evidence,.growth-guide-index)) .btn-primary{background:#5140cf;color:#fff}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}