/* ---------------------------------------------------------------------------
   actbookapp.com — shared marketing stylesheet (light theme).

   The marketing site is a separate static host (S3/CloudFront), so it cannot
   import the app's CSS. The --ab-* block below is COPIED from
   app/css/tokens.css; keep the two in step when the app's palette changes.

   Contrast notes (WCAG AA, 4.5:1 for body-size text):
   - White on --ab-primary (#4285f4) is only 3.56:1, so filled buttons use
     --ab-primary-ink (#1967d2, 5.37:1). #4285f4 is kept for borders, dots,
     focus rings and other non-text marks — the same rule tokens.css states.
   - --ab-ink-muted (#6b7280) passes on white/#f9fafb (4.6-4.8:1) but not on
     the blue tint (4.3:1), so tinted panels re-point --muted to #4b5563.
   - The one dark band (.stage-band) re-declares the legacy palette for its
     children, so anything placed inside it reads light-on-dark.

   Layout of this file:
   1. tokens + legacy aliases     4. buttons, eyebrow, .stage-band
   2. base                        5. homepage/pricing components (.pg-home)
   3. shared header/menu/footer   6. reveal + responsive
   Every page links this file BEFORE its own small <style>, which only holds
   page-specific layout (already mapped to light colours). The shared header
   and footer markup is synced by scripts/marketing/sync_chrome.py.
--------------------------------------------------------------------------- */

:root {
    /* --- Copied from app/css/tokens.css ------------------------------- */
    --ab-primary:        #4285f4;
    --ab-primary-hover:  #3b78dd;
    --ab-primary-ink:    #1967d2;
    --ab-primary-soft:   rgba(66, 133, 244, 0.12);
    --ab-primary-ring:   rgba(66, 133, 244, 0.25);

    --ab-success:      #157347;
    --ab-success-soft: rgba(21, 115, 71, 0.10);
    --ab-warning:      #92400e;
    --ab-warning-soft: #fef3c7;
    --ab-warning-line: #fcd34d;
    --ab-danger:       #b91c1c;
    --ab-danger-soft:  rgba(185, 28, 28, 0.10);

    --ab-ink:        #1f2937;
    --ab-ink-muted:  #6b7280;
    --ab-ink-faint:  #9ca3af;
    --ab-line:       #e5e7eb;
    --ab-line-strong:#d1d5db;
    --ab-surface:    #ffffff;
    --ab-surface-alt:#f9fafb;

    --ab-radius-sm: 6px;
    --ab-radius:    8px;
    --ab-radius-lg: 12px;
    --ab-radius-pill: 999px;

    --ab-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08);
    --ab-shadow:    0 4px 14px rgba(17, 24, 39, 0.10);

    /* --- Marketing-only additions ------------------------------------- */
    --site-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --site-max: 1120px;
    --site-radius: 16px;                       /* big panels; cards use --ab-radius-lg */
    --site-btn-bg: var(--ab-primary-ink);      /* AA-safe fill for white button text */
    --site-btn-bg-hover: #1557b0;
    --site-muted-on-tint: #4b5563;
    --site-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.10);
    --site-stage-bg: #05070f;

    /* --- Legacy aliases ------------------------------------------------
       Every page used to declare its own dark :root with these names, and
       hundreds of inline style="" attributes still read them. Pointing the
       old names at light tokens lets those inline styles flip with no edit.
       NOTE: --accent-bright / --accent were used for TEXT on dark; on light
       they map to the AA-safe ink blue, not the brand fill. */
    --bg:           var(--ab-surface-alt);
    --bg-soft:      var(--ab-surface-alt);
    --panel:        var(--ab-surface);
    --panel2:       var(--ab-surface-alt);
    --text:         var(--ab-ink);
    --muted:        var(--ab-ink-muted);
    --line:         var(--ab-line);
    --line-strong:  var(--ab-line-strong);
    --accent:       var(--ab-primary-ink);
    --accent-bright:var(--ab-primary-ink);
    --cyan:         var(--ab-primary);          /* no cyan any more */
    --accent2:      var(--ab-primary);
    --good:         var(--ab-success);
    --warn:         var(--ab-warning);
    --glow:         var(--ab-primary-ring);
    --shadow:       var(--site-shadow-lg);
    --radius:       var(--site-radius);
    --max:          var(--site-max);
}
/* --- Base ------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:var(--site-font);
    background:var(--ab-surface-alt);
    color:var(--ab-ink);
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:3px solid var(--ab-primary-ring); outline-offset:2px; border-radius:4px}
.content{position:relative; z-index:1}
/* .wrap is the page's content column (pages may narrow it with --max);
   .site-wrap is the header/footer column, the same width on every page. */
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.site-wrap{max-width:var(--site-max); margin:0 auto; padding:0 22px}
.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ab-surface); color:var(--ab-primary-ink); padding:8px 14px; border-radius:var(--ab-radius); box-shadow:var(--ab-shadow)}
.skip-link:focus{left:12px}

/* --- Top bar (shared header, synced by scripts/marketing/sync_chrome.py) */

.topbar{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.9);
    backdrop-filter:saturate(1.4) blur(12px);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);
    border-bottom:1px solid var(--ab-line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 22px}
.brand{display:flex; align-items:center; gap:10px; flex:none}
/* Brand = the existing black-square icon (same artwork as the Google sign-in
   consent screen) + a live-text wordmark in the site font. */
.brand img{width:36px; height:36px; border-radius:8px; display:block}
.wordmark{font-weight:800; font-size:21px; letter-spacing:-.04em; line-height:1; color:#111827; white-space:nowrap}
.wordmark span{color:var(--ab-primary-ink)}
.site-nav{display:flex; align-items:center; gap:4px; font-size:15px; color:var(--ab-ink)}
.site-nav a{color:var(--ab-ink); padding:8px 12px; border-radius:var(--ab-radius); font-weight:500; transition:color .15s, background .15s}
.site-nav a:hover, .site-nav a[aria-current="page"]{background:var(--ab-primary-soft); color:var(--ab-primary-ink)}
.cta-row{display:flex; gap:6px; align-items:center}
.login-link{padding:8px 12px; font-size:15px; font-weight:500; color:var(--ab-ink); border-radius:var(--ab-radius)}
.login-link:hover{background:var(--ab-primary-soft); color:var(--ab-primary-ink)}

/* Mobile menu (assets/site.js): a button under 900px opens a light panel. */
.menu-btn{
    display:none; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; margin-left:2px;
    border:1px solid var(--ab-line-strong); border-radius:var(--ab-radius);
    background:var(--ab-surface); color:var(--ab-ink); cursor:pointer;
}
.menu-btn:hover{border-color:var(--ab-primary); color:var(--ab-primary-ink)}
.menu-btn svg{width:22px; height:22px; display:block}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.menu-panel{
    position:absolute; left:0; right:0; top:100%;
    background:var(--ab-surface); border-bottom:1px solid var(--ab-line);
    box-shadow:0 16px 32px rgba(17,24,39,.12);
    padding:10px 22px 22px;
    max-height:calc(100vh - 70px); overflow-y:auto;
}
.menu-panel[hidden]{display:none}
.menu-panel ul{list-style:none; margin:0; padding:0}
.menu-panel li a{display:block; padding:13px 4px; font-size:17px; font-weight:500; color:var(--ab-ink); border-bottom:1px solid var(--ab-line)}
.menu-panel li a:hover, .menu-panel li a[aria-current="page"]{color:var(--ab-primary-ink)}
.menu-actions{display:grid; gap:10px; margin-top:18px}
.menu-actions .btn{width:100%; padding:13px 18px; font-size:16px}

/* --- Footer (shared, full-bleed whatever container it sits in) -------- */

.site-footer{
    margin-top:40px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding:44px 0 40px; border-top:1px solid var(--ab-line);
    background:var(--ab-surface);
    color:var(--ab-ink-muted); font-size:14px; line-height:1.5;
}
.footer-cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; margin-bottom:28px}
.footer-cols h2{margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ab-ink); font-weight:700}
.footer-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.footer-brand .brand img{width:32px; height:32px}
.footer-brand .wordmark{font-size:19px}
.footer-blurb{max-width:30ch; margin:12px 0 0}
.site-footer .site-wrap a{color:var(--ab-ink-muted)}
.site-footer .site-wrap a:hover{color:var(--ab-primary-ink); text-decoration:underline}
.footer-for, .footer-related{padding:16px 0; border-top:1px solid var(--ab-line); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline}
.footer-for strong, .footer-related strong{color:var(--ab-ink); font-weight:600; margin-right:4px}
.footer-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; padding-top:18px; border-top:1px solid var(--ab-line)}
/* --- Buttons ---------------------------------------------------------- */

.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 18px;
    border-radius:var(--ab-radius);
    border:1px solid var(--ab-line-strong);
    background:var(--ab-surface);
    color:var(--ab-ink);
    font-weight:600; font-size:15px; line-height:1.2;
    box-shadow:var(--ab-shadow-sm);
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    user-select:none; white-space:nowrap; cursor:pointer;
}
.btn:hover{border-color:var(--ab-primary); color:var(--ab-primary-ink); transform:translateY(-1px)}
.btn-primary{
    border-color:transparent;
    background:var(--site-btn-bg);
    color:#fff;
    box-shadow:0 4px 14px rgba(25,103,210,.25);
}
.btn-primary:hover{background:var(--site-btn-bg-hover); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(25,103,210,.32)}
.btn-ghost{background:transparent; box-shadow:none; border-color:transparent}
.btn:disabled, .btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}

/* --- Eyebrow ---------------------------------------------------------- */

.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
    color:var(--site-btn-bg-hover) !important; /* darker than --ab-primary-ink: stays AA on tinted panels, even if a page tints it inline */
    background:var(--ab-primary-soft);
    border-radius:var(--ab-radius-pill); padding:6px 12px; margin:0 0 16px;
}
.eyebrow .spark, .eyebrow > span:empty{width:7px; height:7px; border-radius:50%; background:var(--ab-primary); display:inline-block}
/* --- The stage: the ONE dark band ------------------------------------- */
/* Full-bleed out of .wrap, so the promo video sits on a dark "stage"
   between light sections. Re-declares the legacy palette for children. */

.stage-band{
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding:64px 22px 56px;
    background:
        radial-gradient(700px 360px at 18% 0%, rgba(66,133,244,.28), transparent 62%),
        radial-gradient(600px 320px at 85% 100%, rgba(66,133,244,.16), transparent 60%),
        var(--site-stage-bg);
    color:#eef2fb;
    --text:#eef2fb; --muted:#cbd5e1; --line:rgba(140,170,230,.18); --line-strong:rgba(140,170,230,.3);
    --accent-bright:#8ab4f8;
}
.video-wrap{position:relative; max-width:980px; margin:0 auto; border:1px solid rgba(140,170,230,.3); border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); background:#000}
.video-wrap video{display:block; width:100%; height:auto}
.video-unmute{position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.6); color:#fff; font-size:13px; font-weight:600; cursor:pointer; backdrop-filter:blur(6px); font-family:inherit}
.video-unmute:hover{background:rgba(0,0,0,.78)}
.video-cap{color:var(--muted); font-size:14px; text-align:center; margin:16px auto 0; max-width:960px}
/* ======================================================================
   Homepage + pricing components. Scoped to <body class="pg-home"> so the
   generic class names (.card, .hero, .price ...) cannot leak into the
   other pages, which keep their own page-specific <style>.
   ====================================================================== */

/* --- Hero ------------------------------------------------------------- */

.pg-home .hero{padding:64px 0 30px}
.pg-home .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.pg-home .headline{font-size:58px; line-height:1.03; margin:0 0 18px; letter-spacing:-.03em; font-weight:800; color:var(--ab-ink)}
.pg-home .headline .glow-word{font-style:italic; color:var(--ab-primary-ink)}
.pg-home .subhead{margin:0 0 22px; color:var(--muted); font-size:19px; max-width:60ch}
.pg-home .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 12px}
.pg-home .micro{color:var(--muted); font-size:13px; margin-top:8px}
.pg-home .pillrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.pg-home .pill{
    border:1px solid var(--ab-line-strong); background:var(--ab-surface);
    padding:7px 12px; border-radius:var(--ab-radius-pill); font-size:13px; color:var(--ab-ink);
}
.pg-home .pill a{color:var(--ab-primary-ink) !important}

/* --- Cards ------------------------------------------------------------ */

.pg-home .card{
    position:relative;
    border:1px solid var(--ab-line);
    background:var(--ab-surface);
    border-radius:var(--site-radius);
    box-shadow:var(--site-shadow-lg);
}
.pg-home .hero-card{padding:22px; display:flex; flex-direction:column; gap:18px}

/* "How ActBook works" in the onboarding's guide style (avatar + speech
   bubbles), lifted from app/includes/onboarding_ui.php (.ob-guide). */
.pg-home .guide{display:flex; gap:12px; align-items:flex-start}
.pg-home .guide-avatar{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg, var(--ab-primary), #34a853);
    color:#fff; display:grid; place-items:center; font-weight:800; font-size:20px;
    box-shadow:var(--ab-shadow-sm);
}
.pg-home .guide-thread{flex:1; display:grid; gap:8px; min-width:0}
.pg-home .bubble{
    background:var(--ab-surface); border:1px solid var(--ab-line);
    border-radius:18px; padding:12px 16px; box-shadow:var(--ab-shadow-sm);
}
.pg-home .bubble-lead{border-top-left-radius:4px}
.pg-home .bubble-lead h3{margin:0; font-size:20px; line-height:1.3; letter-spacing:-.01em; color:var(--ab-ink)}
.pg-home .bubble.step{display:flex; gap:12px; align-items:flex-start; transition:border-color .15s}
.pg-home .bubble.step:hover{border-color:var(--ab-primary)}
.pg-home .num{
    width:26px; height:26px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--ab-primary-soft); color:var(--ab-primary-ink);
    font-weight:800; font-size:13px;
}
.pg-home .bubble.step b{display:block; margin-bottom:2px; color:var(--ab-ink)}
.pg-home .bubble.step span:not(.num){display:block; color:var(--muted); font-size:13.5px; line-height:1.45}

/* Product screenshot in a browser frame */
.pg-home .browser-frame{border:1px solid var(--ab-line-strong); border-radius:var(--site-radius); overflow:hidden; background:var(--ab-surface); box-shadow:var(--site-shadow-lg)}
.pg-home .browser-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--ab-line); background:var(--ab-surface-alt)}
.pg-home .browser-dots{display:flex; gap:6px}
.pg-home .browser-dots i{width:11px; height:11px; border-radius:50%; background:var(--ab-line-strong); display:inline-block}
.pg-home .browser-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--muted); margin-left:6px; background:var(--ab-surface); border:1px solid var(--ab-line); border-radius:var(--ab-radius-pill); padding:2px 12px}
.pg-home .browser-frame img{display:block; width:100%; height:auto}

/* --- Stat strip ------------------------------------------------------- */

.pg-home .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0 6px}
.pg-home .stat{border:1px solid var(--ab-line); border-radius:var(--ab-radius-lg); padding:20px 18px; background:var(--ab-surface-alt)}
.pg-home .stat .n{font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--ab-primary-ink)}
.pg-home .stat .l{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4}

/* --- Sections --------------------------------------------------------- */

.pg-home section{padding:48px 0}
.pg-home .section-head{max-width:64ch; margin:0 0 26px}
.pg-home .section-title{margin:0 0 12px; font-size:34px; letter-spacing:-.02em; font-weight:800; line-height:1.12; color:var(--ab-ink)}
.pg-home .section-sub{margin:0; color:var(--muted); max-width:70ch; font-size:17px}

/* --- Features --------------------------------------------------------- */

.pg-home .features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pg-home .feature{
    position:relative; padding:22px 20px; border-radius:var(--ab-radius-lg);
    border:1px solid var(--ab-line); background:var(--ab-surface);
    box-shadow:var(--ab-shadow-sm);
    transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pg-home .feature:hover{border-color:var(--ab-primary); box-shadow:var(--ab-shadow); transform:translateY(-2px)}
.pg-home .ficon{
    width:42px; height:42px; border-radius:var(--ab-radius-lg); margin-bottom:14px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ab-primary-soft); color:var(--ab-primary-ink);
}
.pg-home .ficon svg{width:22px; height:22px; display:block}
.pg-home .feature h4{margin:0 0 7px; font-size:16px; letter-spacing:-.01em; color:var(--ab-ink)}
.pg-home .feature p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
.pg-home .feature.hot{border-color:var(--ab-primary); background:#f2f7fe; --muted:var(--site-muted-on-tint)}

/* --- Tinted panels (stack comparison, API strip, assistant) ----------- */

.pg-home .panel-soft{
    border:1px solid rgba(66,133,244,.35); border-radius:var(--site-radius);
    background:#f2f7fe; --muted:var(--site-muted-on-tint);
}
.pg-home .panel-soft h3, .pg-home .panel-soft h2{color:var(--ab-ink)}

.pg-home .showcase{
    border:1px solid rgba(66,133,244,.35); border-radius:20px; padding:38px 30px;
    background:linear-gradient(180deg, #f2f7fe, var(--ab-surface));
    box-shadow:var(--site-shadow-lg);
    --muted:var(--site-muted-on-tint);
}
.pg-home .chat{display:grid; gap:10px; max-width:640px; margin:24px 0}
.pg-home .msg{max-width:82%; border-radius:18px; padding:12px 15px; font-size:14.5px; line-height:1.5}
.pg-home .msg.you{justify-self:start; background:var(--ab-surface); color:var(--ab-ink); border:1px solid var(--ab-line); border-bottom-left-radius:4px; box-shadow:var(--ab-shadow-sm)}
.pg-home .msg.ai{justify-self:end; background:var(--ab-primary-ink); color:#fff; border-bottom-right-radius:4px; box-shadow:0 4px 14px rgba(25,103,210,.2)}

/* --- Audience --------------------------------------------------------- */

.pg-home .audience{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pg-home .audbox{padding:22px; border:1px solid var(--ab-line); border-radius:var(--ab-radius-lg); background:var(--ab-surface); box-shadow:var(--ab-shadow-sm)}
.pg-home .audbox.primary{border:2px solid var(--ab-primary); background:#f2f7fe; --muted:var(--site-muted-on-tint)}
.pg-home .audbox h4{margin:0 0 12px; font-size:16px}
.pg-home .list{margin:0; padding:0; list-style:none; color:var(--muted); font-size:14px}
.pg-home .list li{margin:0; padding:9px 0 9px 26px; position:relative; border-bottom:1px solid var(--ab-line)}
.pg-home .list li:last-child{border-bottom:none}
.pg-home .list li::before{content:""; position:absolute; left:4px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--ab-primary)}

/* --- Founder story ---------------------------------------------------- */

.pg-home .story{border:1px solid var(--ab-line); border-radius:20px; padding:38px; background:var(--ab-surface); box-shadow:var(--site-shadow-lg)}
.pg-home .story .eyebrow{margin-bottom:16px}
.pg-home .story h2{font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin:0 0 18px; letter-spacing:-.02em; font-weight:800}
.pg-home .story p{color:#4b5563; font-size:17px; line-height:1.7; margin:0 0 16px; max-width:64ch}
.pg-home .story p strong{color:var(--ab-ink); font-weight:600}
.pg-home .story .sig{margin-top:24px; padding-top:20px; border-top:1px solid var(--ab-line); color:var(--muted); font-size:15px}
.pg-home .byline{display:flex; align-items:center; gap:18px; margin-top:24px; padding-top:22px; border-top:1px solid var(--ab-line)}
.pg-home .byline img{width:104px; height:auto; aspect-ratio:204/350; object-fit:cover; border-radius:var(--ab-radius-lg); border:1px solid var(--ab-line); flex:none; background:var(--ab-surface-alt)}
.pg-home .byline .who{line-height:1.4}
.pg-home .byline .who .nm{color:var(--ab-ink); font-weight:600; font-size:16px}
.pg-home .byline .who .rl{color:var(--muted); font-size:14px}
.pg-home .byline .who .tg{color:var(--ab-primary-ink); font-size:13px; margin-top:4px}

/* --- Pricing ---------------------------------------------------------- */

.pg-home .pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch}
.pg-home .price{
    position:relative; padding:24px; border:1px solid var(--ab-line); border-radius:var(--site-radius);
    background:var(--ab-surface); box-shadow:var(--ab-shadow-sm);
    display:flex; flex-direction:column; gap:14px; transition:box-shadow .15s, transform .15s;
}
.pg-home .price:hover{box-shadow:var(--ab-shadow); transform:translateY(-2px)}
.pg-home .price.featured{border:2px solid var(--ab-primary); box-shadow:0 0 0 4px var(--ab-primary-soft), var(--site-shadow-lg)}
.pg-home .price.featured::after{
    content:"Most popular"; position:absolute; top:-12px; left:22px;
    font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
    color:#fff; background:var(--site-btn-bg); padding:3px 11px; border-radius:999px;
}
.pg-home .tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-weight:600}
.pg-home .dot{width:8px; height:8px; border-radius:999px; background:var(--ab-success); box-shadow:0 0 0 4px var(--ab-success-soft)}
.pg-home .price h3{margin:0; font-size:20px}
.pg-home .amount{font-size:38px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--ab-ink)}
.pg-home .amount small{font-size:14px; color:var(--muted); font-weight:600}
.pg-home .bullets{margin:0; padding:0; list-style:none; color:var(--ab-ink); font-size:14px}
.pg-home .bullets li{margin:0; padding:7px 0 7px 26px; position:relative}
.pg-home .bullets li::before{
    content:""; position:absolute; left:3px; top:12px; width:10px; height:6px;
    border-left:2px solid var(--ab-primary-ink); border-bottom:2px solid var(--ab-primary-ink);
    transform:rotate(-45deg);
}
.pg-home .price .btn{margin-top:auto}
.pg-home .repl{border:1px solid var(--ab-line); border-radius:var(--ab-radius); padding:12px 14px; background:var(--ab-surface); font-size:13px}
.pg-home .repl strong{font-size:14px} .pg-home .repl span{color:var(--ab-ink-muted)}

/* Feature comparison table (pricing page) */
.pg-home .compare-wrap{overflow-x:auto; border:1px solid var(--ab-line); border-radius:var(--site-radius); background:var(--ab-surface); box-shadow:var(--ab-shadow-sm)}
.pg-home .compare-table thead tr{background:var(--ab-surface-alt); border-bottom:1px solid var(--ab-line)}
.pg-home .compare-table tbody tr{border-top:1px solid var(--ab-line)}
.pg-home .compare-table tbody tr:hover{background:var(--ab-surface-alt)}
.pg-home .compare-table td{color:var(--ab-ink)}
.pg-home .compare-table .col-featured{background:rgba(66,133,244,.06)}

/* --- FAQ -------------------------------------------------------------- */

.pg-home .faq{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.pg-home details{
    border:1px solid var(--ab-line); background:var(--ab-surface);
    border-radius:var(--ab-radius-lg); padding:16px 18px; transition:border-color .15s, box-shadow .15s;
    box-shadow:var(--ab-shadow-sm);
}
.pg-home details[open]{border-color:var(--ab-primary)}
.pg-home summary{cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ab-ink)}
.pg-home summary::-webkit-details-marker{display:none}
.pg-home summary span[aria-hidden]{color:var(--ab-primary-ink); font-weight:400; font-size:20px; line-height:1; transition:transform .18s}
.pg-home details[open] summary span[aria-hidden]{transform:rotate(45deg)}
.pg-home details p{margin:12px 0 0; color:#4b5563; font-size:14px; line-height:1.6}

/* --- Final CTA -------------------------------------------------------- */

.pg-home .finalcta{
    padding:40px 30px; max-width:560px; margin:0 auto; text-align:center;
    border:1px solid var(--ab-line); border-radius:20px;
    background:var(--ab-surface);
    box-shadow:var(--site-shadow-lg);
}

/* Inline text links on the homepage/pricing (other pages style their own). */
.pg-home main a:where(:not(.btn):not(.brand)){color:var(--ab-primary-ink)}
.pg-home main a:where(:not(.btn):not(.brand)):hover{text-decoration:underline}
/* --- Reveal-on-scroll ------------------------------------------------- */

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none}
    html{scroll-behavior:auto}
    .btn, .feature, .price{transition:none}
}
/* --- Responsive ------------------------------------------------------- */

@media (max-width:900px){
    .site-nav{display:none}
    .menu-btn{display:inline-flex}
    .footer-cols{grid-template-columns:repeat(2,1fr)}
    .footer-cols .footer-brand{grid-column:1 / -1}
    .pg-home .hero{padding:40px 0 20px}
    .pg-home .hero-grid{grid-template-columns:1fr; gap:28px}
    .pg-home .headline{font-size:44px}
    .pg-home .features, .pg-home .audience, .pg-home .pricing, .pg-home .faq{grid-template-columns:1fr}
    .pg-home .pricing{gap:22px}
}
@media (min-width:901px){ .menu-panel{display:none !important} }
@media (max-width:760px){ .pg-home .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
    .pg-home .story{padding:24px}
    .pg-home .story p{font-size:16px}
    .pg-home .showcase{padding:26px 18px}
    .stage-band{padding:40px 14px 36px}
}
@media (max-width:560px){
    .topbar-inner{gap:8px; padding:10px 16px}
    .brand img{width:32px; height:32px}
    .wordmark{font-size:19px}
    .cta-row .login-link{display:none}
    .btn{padding:10px 14px; font-size:14px}
    .pg-home .headline{font-size:38px}
    .pg-home .section-title{font-size:28px}
    .pg-home .byline img{width:88px}
    .pg-home .hero-card{padding:16px}
    .pg-home .guide{gap:8px}
    .pg-home .guide-avatar{width:38px; height:38px; font-size:19px}
    .pg-home .bubble{padding:11px 13px}
}
@media (max-width:370px){ .cta-row .btn-primary{display:none} }