/* Shared design layers for magneety.com.
   Extracted verbatim from the two inline <style> blocks in index.html <head>
   (the V2/V4/V6/V7/V8/V11 override layers + the mg-redesign layer) so that
   other pages can reproduce the homepage look exactly.
   MUST be loaded AFTER styles.css - these rules deliberately shadow it.
   If you change the inline blocks in index.html, re-sync this file. */

    /* ─── V2: URL paste form (overrides waitlist email styling) ────── */
    .url-form{
      max-width:560px;margin:0 auto 14px;
      background:#fff;
      border-radius:16px;
      padding:7px;
      display:flex;gap:8px;align-items:center;
      box-shadow:0 16px 50px rgba(27,89,248,0.18),0 0 0 1px var(--border);
      transition:box-shadow .25s;
    }
    .url-form:focus-within{box-shadow:0 16px 50px rgba(27,89,248,0.28),0 0 0 2px var(--blue)}
    .url-form__icon{padding:0 6px 0 14px;color:var(--muted);display:flex;align-items:center}
    .url-form__icon svg{width:18px;height:18px}
    .url-form__input{
      flex:1;border:none;background:transparent;outline:none;
      padding:14px 6px;font-size:1rem;
      min-width:0;color:var(--navy);
      font-family:inherit;
    }
    .url-form__input::placeholder{color:#a8aebd}
    .url-form__btn{
      padding:13px 24px;border-radius:11px;
      background:linear-gradient(135deg,#2563eb 0%,var(--blue) 50%,#4f46e5 100%);
      color:#fff;font-weight:600;font-size:0.95rem;
      display:inline-flex;align-items:center;gap:6px;
      transition:transform .15s,box-shadow .15s;
      flex-shrink:0;border:none;cursor:pointer;font-family:inherit;
      box-shadow:0 4px 14px rgba(27,89,248,.3);
    }
    .url-form__btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(27,89,248,.4)}

    /* ─── V4: Hero compact (subtitle wider, less padding) ─────────── */
    .hero{padding-top:clamp(40px,5vw,70px) !important}
    .hero h1{font-size:clamp(2.2rem,5vw,4rem) !important;text-wrap:balance;max-width:820px;margin-left:auto;margin-right:auto}
    .hero__sub{max-width:680px !important;font-size:1.1rem !important;margin-bottom:30px !important}

    /* ─── V4: Layer 1 - realistic creative previews ────────────────── */
    .l1-card__head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
    .l1-card__num{
      width:34px;height:34px;border-radius:9px;
      background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
      display:grid;place-items:center;font-weight:800;font-size:0.85rem;
      flex-shrink:0;
      box-shadow:0 4px 12px rgba(27,89,248,.22);
    }
    /* Hide the old big icon */
    .l1-card__icon{display:none}
    .l1-card__title{font-size:1.2rem !important;margin-bottom:0 !important}

    /* Calendar visual */
    .l1-cal-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .l1-cal-bar__title{font-weight:700;font-size:0.78rem;color:var(--navy)}
    .l1-cal-bar__chips{display:flex;gap:4px}
    .l1-cal-chip{font-size:0.55rem;color:#fff;padding:2px 5px;border-radius:4px;font-weight:700}
    .l1-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
    .l1-cal-d{font-size:0.6rem;color:var(--muted);font-weight:600;text-align:center;padding:2px 0}
    .l1-cal-cell{
      aspect-ratio:1;border-radius:5px;background:var(--bg);border:1px solid var(--border);
      display:flex;flex-direction:column;justify-content:space-between;padding:3px 4px;
      position:relative;
    }
    .l1-cal-cell--post{border:none;color:rgba(0,0,0,0.7)}
    .l1-cal-num{font-size:0.55rem;font-weight:700}
    .l1-cal-tag{font-size:0.48rem;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;line-height:1}

    /* Realistic ad mocks */
    .l1-ads{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
    .l1-ad-real{
      aspect-ratio:9/16;border-radius:8px;overflow:hidden;
      background:#fff;border:1px solid var(--border);
      display:flex;flex-direction:column;
      box-shadow:0 4px 12px rgba(13,22,48,.08);
    }
    .l1-ad-real--feed{aspect-ratio:1}
    .l1-ad-real__brand{padding:8px;font-size:0.65rem;font-weight:900;color:var(--navy);text-align:center;line-height:1.05;letter-spacing:-0.5px}
    .l1-ad-real__img{flex:1;display:grid;place-items:center;font-size:1.6rem}
    .l1-ad-real__cta{padding:5px;background:var(--navy);color:#fff;font-size:0.55rem;font-weight:700;text-align:center}
    .l1-ad-real__brand-row{display:flex;align-items:center;gap:5px;padding:5px 6px}
    .l1-ad-real__logo{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:grid;place-items:center;color:#fff;font-size:0.55rem;font-weight:800}
    .l1-ad-real__handle{font-size:0.55rem;font-weight:700;color:var(--navy)}
    .l1-ad-real__img-feed{flex:1;display:grid;place-items:center;font-size:1.7rem}
    .l1-ad-real__feed-meta{padding:4px;font-size:0.5rem;color:var(--muted);font-weight:600;text-align:center;background:#fff}
    .l1-ad-real__reel-bg{flex:1;position:relative;display:flex;align-items:center;justify-content:center;color:#fff}
    .l1-ad-real__play{position:absolute;top:8px;left:8px;font-size:0.55rem;background:rgba(0,0,0,0.4);width:14px;height:14px;border-radius:50%;display:grid;place-items:center}
    .l1-ad-real__reel-text{font-size:0.7rem;font-weight:900;text-align:center;line-height:1.05;text-shadow:0 1px 4px rgba(0,0,0,0.3)}
    .l1-ads-labels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:0.6rem;color:var(--muted);font-weight:600;text-align:center}

    /* Strategy visual */
    .l1-strat-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
    .l1-strat-budget{font-size:1.4rem;font-weight:900;color:var(--navy);letter-spacing:-1px}
    .l1-strat-budget span{font-size:0.7rem;color:var(--muted);font-weight:500;margin-left:2px}
    .l1-strat-budget-sub{font-size:0.65rem;color:var(--muted);margin-top:0}
    .l1-strat-roas{font-size:1.1rem;font-weight:900;color:var(--green,#22a160);text-align:right;display:flex;flex-direction:column;align-items:flex-end}
    .l1-strat-roas span{font-size:0.6rem;color:var(--muted);font-weight:500}
    .l1-strat-bars{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
    .l1-strat-bar{display:grid;grid-template-columns:50px 1fr 30px;gap:8px;align-items:center}
    .l1-strat-bar-label{font-size:0.65rem;font-weight:600;color:var(--navy)}
    .l1-strat-bar-track{height:7px;background:var(--bg);border-radius:99px;overflow:hidden}
    .l1-strat-bar-fill{height:100%;border-radius:99px}
    .l1-strat-bar-val{font-size:0.65rem;font-weight:700;color:var(--navy);text-align:right}
    .l1-strat-meta{display:flex;justify-content:space-between;font-size:0.65rem;color:var(--muted);padding-top:8px;border-top:1px solid var(--border)}

    /* Playbook visual */
    .l1-play-week{
      display:flex;align-items:center;gap:10px;
      padding:10px;border-radius:8px;background:var(--bg);
      border:1px solid var(--border);margin-bottom:6px;
    }
    .l1-play-week:last-child{margin-bottom:0}
    .l1-play-week__num{
      width:30px;height:30px;border-radius:8px;
      background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
      display:grid;place-items:center;font-weight:800;font-size:0.7rem;
      flex-shrink:0;
    }
    .l1-play-week__body{flex:1;display:flex;flex-direction:column}
    .l1-play-week__body strong{font-size:0.78rem;color:var(--navy);font-weight:700}
    .l1-play-week__body span{font-size:0.65rem;color:var(--muted)}
    .l1-play-week__icon{font-size:1.05rem}

    /* ─── V4: Once you connect - sophisticated mini-mockups ──────── */
    /* Hide the old emoji icon */
    .cg__icon{display:none !important}
    .cg__mini{
      background:#fff;border:1px solid var(--border);
      border-radius:10px;padding:12px;margin-bottom:14px;
      min-height:88px;
      display:flex;flex-direction:column;justify-content:center;gap:6px;
    }
    .cg__mini--dashboard .cg__mini-row{display:flex;align-items:center;gap:8px}
    .cg__mini-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
    .cg__mini-bar{height:6px;border-radius:99px;display:block}
    .cg__mini--ai .cg__mini-msg{
      font-size:0.7rem;color:var(--navy);
      padding:6px 10px;border-radius:8px;
      background:linear-gradient(135deg,#e8eeff,#f0e7ff);
      border:1px solid rgba(27,89,248,0.12);
    }
    .cg__mini--ai .cg__mini-msg--alt{background:linear-gradient(135deg,#e0f5e8,#e8f7ee);border-color:rgba(34,161,96,0.15)}
    .cg__mini--cal{display:grid !important;grid-template-columns:repeat(7,1fr);gap:4px;padding:14px}
    .cg__mini-day{aspect-ratio:1;background:var(--bg);border-radius:3px}
    .cg__mini-day--on{box-shadow:0 2px 6px rgba(0,0,0,.15)}
    .cg__mini--launch .cg__mini-step{
      font-size:0.62rem;font-weight:600;color:var(--muted);
      padding:4px 0;display:flex;align-items:center;gap:8px;
    }
    .cg__mini--launch .cg__mini-step::before{
      content:'';width:14px;height:14px;border-radius:50%;
      background:var(--bg);border:1.5px solid var(--border);
      flex-shrink:0;
    }
    .cg__mini-step--done{color:var(--navy)}
    .cg__mini-step--done::before{background:var(--blue) !important;border-color:var(--blue) !important}
    .cg__mini-step--active{color:var(--blue);font-weight:700}
    .cg__mini-step--active::before{border-color:var(--blue) !important;background:#fff !important;box-shadow:inset 0 0 0 3px var(--blue)}
    .cg__mini--comp .cg__mini-comp-row{
      display:flex;align-items:center;gap:8px;
      font-size:0.7rem;color:var(--navy);font-weight:500;
    }
    .cg__mini-comp-dot{
      width:20px;height:20px;border-radius:50%;
      background:linear-gradient(135deg,#ec4492,#fc8e44);color:#fff;
      display:grid;place-items:center;font-size:0.6rem;font-weight:800;
      flex-shrink:0;
    }
    .cg__mini-comp-row span:nth-child(2){flex:1}
    .cg__mini-comp-tag{
      font-size:0.55rem;font-weight:700;color:var(--blue);
      background:rgba(27,89,248,0.1);padding:2px 6px;border-radius:4px;
    }
    .cg__mini--report .cg__mini-report-line{
      font-size:0.66rem;color:var(--muted);padding:2px 0;
    }
    .cg__mini--report .cg__mini-report-line--title{color:var(--navy);font-weight:700;font-size:0.7rem;border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:2px}

    /* ─── V4: Pricing fix - Pro card text contrast ───────────────── */
    .plan--featured .plan__group-title{color:rgba(255,255,255,0.55) !important}
    .plan--featured .plan__group .plan__features li{color:rgba(255,255,255,0.92) !important}
    .plan--featured .plan__group .plan__features li::before{color:#7eb0ff !important;background:transparent !important}
    .plan--featured .plan__group .plan__features li.dim{color:rgba(255,255,255,0.35) !important}
    .plan--featured .plan__group .plan__features li.dim::before{color:rgba(255,255,255,0.3) !important}

    /* ─── V5: Fix ✓ overlapping text in pricing list ─────────────── */
    .plan__group .plan__features li{
      padding-left:22px !important;
      position:relative;
    }
    .plan__group .plan__features li::before{
      position:absolute !important;
      left:0;top:0;
      width:auto !important;background:transparent !important;
      font-size:0.95rem;line-height:1.5;
    }

    /* ─── V5: Once you connect - equal card heights ──────────────── */
    .cg__card{display:flex;flex-direction:column}
    .cg__mini{flex-shrink:0;height:96px !important;min-height:96px !important;overflow:hidden}

    /* "Coming soon" tags */
    .cg__soon{
      display:inline-block;
      font-size:0.6rem;font-weight:700;letter-spacing:0.04em;
      text-transform:uppercase;
      padding:2px 7px;border-radius:99px;
      background:rgba(252,142,68,0.15);color:#c05c00;
      margin-left:6px;vertical-align:middle;
    }
    .plan__soon{
      display:inline-block;
      font-size:0.62rem;font-weight:700;
      padding:1px 7px;border-radius:99px;
      background:rgba(252,142,68,0.18);color:#c05c00;
      margin-left:6px;
    }
    .plan--featured .plan__soon{background:rgba(252,142,68,0.25);color:#fdc290}

    /* "Auto-detects your business type" badge */
    .auto-detect{
      font-size:0.85rem;color:var(--blue);font-weight:600;
      margin:0 auto 16px;padding:6px 14px;
      background:rgba(27,89,248,0.06);
      border:1px solid rgba(27,89,248,0.15);
      border-radius:99px;display:inline-block;
    }

    /* ─── V5: Layer 1 ad creatives - consistent vertical aspect ─── */
    .l1-ads{align-items:stretch}
    .l1-ad-real,
    .l1-ad-real--feed,
    .l1-ad-real--reel{aspect-ratio:9/16 !important}
    .l1-ad-real__brand{padding:7px 6px;font-size:0.62rem;line-height:1.05}
    .l1-ad-real__img-feed{flex:1;min-height:0;display:grid;place-items:center;font-size:1.5rem}

    /* ─── V8: Layer 2 banner - dark visual divider with character ───── */
    .layer2-banner{
      position:relative;
      padding:80px 0 90px;
      text-align:center;
      background:linear-gradient(160deg,#050814 0%,#0d1630 50%,#080f24 100%);
      color:#fff;
      overflow:hidden;
      margin-top:40px;
    }
    .layer2-banner::before{
      content:"";position:absolute;
      top:-150px;left:50%;transform:translateX(-50%);
      width:700px;height:500px;border-radius:50%;
      background:radial-gradient(ellipse,rgba(27,89,248,0.18) 0%,rgba(124,58,237,0.10) 40%,transparent 70%);
      pointer-events:none;
    }
    .layer2-banner::after{
      content:"";position:absolute;inset:0;
      background-image:radial-gradient(circle,rgba(255,255,255,0.04) 1px,transparent 1.5px);
      background-size:32px 32px;
      pointer-events:none;opacity:0.5;
    }
    .layer2-banner__inner{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:0 20px}
    .layer2-banner__eyebrow{
      display:inline-block;padding:6px 14px;border-radius:999px;
      background:rgba(125,160,255,0.12);color:#a0b4ff;
      border:1px solid rgba(125,160,255,0.22);
      font-size:0.74rem;font-weight:700;letter-spacing:0.08em;
      margin-bottom:18px;text-transform:uppercase;
    }
    .layer2-banner__h2{
      font-size:clamp(1.7rem,3vw,2.4rem);
      letter-spacing:-0.025em;line-height:1.25;
      color:#fff;margin-bottom:14px;font-weight:800;
    }
    .layer2-banner__sub{
      font-size:1rem;color:rgba(255,255,255,0.6);max-width:560px;margin:0 auto;line-height:1.6;
    }
    .layer2-banner__char{
      position:absolute;right:7%;bottom:14px;
      width:110px;height:110px;
      animation:l2bob 4s ease-in-out infinite;
      pointer-events:none;
    }
    .layer2-banner__char--left{left:7%;right:auto;animation-delay:1s}
    @keyframes l2bob{50%{transform:translateY(-8px)}}
    @media(max-width:880px){.layer2-banner__char{display:none}}
    .layer2-banner__char svg{width:100%;height:100%;filter:drop-shadow(0 12px 30px rgba(27,89,248,.4))}
    .layer2-banner__spark{
      position:absolute;animation:l2bob 3s ease-in-out infinite;
      pointer-events:none;font-size:1rem;
    }
    .layer2-banner__spark--1{top:20%;left:14%;color:#fc8e44;font-size:1.2rem}
    .layer2-banner__spark--2{top:30%;right:18%;color:#a0b4ff;animation-delay:0.5s}
    .layer2-banner__spark--3{bottom:36%;left:22%;color:#7c3aed;animation-delay:1s}
    .layer2-banner__spark--4{bottom:24%;right:24%;color:#fc8e44;font-size:0.85rem;animation-delay:1.5s}

    /* ─── V9: Rich floating preview cards in hero ──────────────── */
    .hero-previews{
      position:absolute;inset:0;
      pointer-events:none;
      max-width:1320px;margin:0 auto;
      z-index:0;
    }
    .hp-card{
      position:absolute;
      background:#fff;border-radius:14px;
      box-shadow:0 18px 40px rgba(27,89,248,0.14),0 0 0 1px rgba(27,89,248,0.06);
      padding:14px;width:215px;
      transform-origin:center;
      animation:hp-float 6s ease-in-out infinite;
    }
    @keyframes hp-float{50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
    .hp-card--cal{top:8%;left:2%;--r:-7deg;transform:rotate(-7deg);animation-delay:0s}
    .hp-card--ad{top:38%;left:0%;--r:5deg;transform:rotate(5deg);animation-delay:1.5s;width:185px}
    .hp-card--strat{top:8%;right:2%;--r:7deg;transform:rotate(7deg);animation-delay:0.7s}
    .hp-card--play{top:38%;right:0%;--r:-5deg;transform:rotate(-5deg);animation-delay:2.2s}
    @media(max-width:1180px){.hero-previews{display:none}}

    .hp-card__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
    .hp-card__dot{width:18px;height:18px;border-radius:5px;flex-shrink:0}
    .hp-card__title{font-size:0.78rem;font-weight:800;color:var(--navy);letter-spacing:-0.2px}
    .hp-card__foot{margin-top:8px;font-size:0.62rem;color:var(--muted);font-weight:600}

    /* Mini calendar */
    .hp-mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
    .hp-d{font-size:0.5rem;color:var(--muted);font-weight:700;text-align:center}
    .hp-cell{
      aspect-ratio:1;border-radius:3px;background:var(--bg);
      border:1px solid var(--border);
      display:grid;place-items:center;
      font-size:0.5rem;font-weight:700;color:var(--muted);
    }
    .hp-cell--p{border:none;color:rgba(0,0,0,0.65)}

    /* Mini ad creative */
    .hp-ad{
      aspect-ratio:9/12;border-radius:8px;overflow:hidden;
      background:#fff;border:1px solid var(--border);
      display:flex;flex-direction:column;
    }
    .hp-ad__brand{
      padding:8px 6px;font-size:0.62rem;font-weight:900;
      color:var(--navy);text-align:center;line-height:1.05;
      letter-spacing:-0.5px;
    }
    .hp-ad__img{flex:1;display:grid;place-items:center;font-size:1.4rem}
    .hp-ad__cta{
      padding:5px;background:var(--navy);color:#fff;
      font-size:0.5rem;font-weight:700;text-align:center;
    }

    /* Mini strategy */
    .hp-strat__big{font-size:1.3rem;font-weight:900;color:var(--navy);letter-spacing:-1px;line-height:1}
    .hp-strat__big span{font-size:0.65rem;color:var(--muted);font-weight:500}
    .hp-strat__sub{font-size:0.6rem;color:var(--green,#22a160);font-weight:700;margin-bottom:8px}
    .hp-strat__bars{display:flex;flex-direction:column;gap:4px}
    .hp-bar{display:grid;grid-template-columns:36px 1fr;gap:6px;align-items:center}
    .hp-bar__lbl{font-size:0.55rem;font-weight:600;color:var(--navy)}
    .hp-bar__track{height:5px;background:var(--bg);border-radius:99px;overflow:hidden;display:block}
    .hp-bar__fill{display:block;height:100%;border-radius:99px}

    /* Mini playbook */
    .hp-play{display:flex;flex-direction:column;gap:4px}
    .hp-play__row{
      display:flex;align-items:center;gap:6px;
      padding:5px 6px;border-radius:5px;
      font-size:0.6rem;color:var(--muted);
      border:1px solid transparent;
    }
    .hp-play__row--active{
      background:linear-gradient(90deg,rgba(27,89,248,0.06),transparent);
      border-color:rgba(27,89,248,0.15);color:var(--navy);
    }
    .hp-w{
      width:22px;height:18px;border-radius:4px;
      background:var(--bg);color:var(--muted);
      display:grid;place-items:center;
      font-size:0.55rem;font-weight:800;
      flex-shrink:0;
    }
    .hp-play__row--active .hp-w{
      background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
    }

    /* Hide the OLD simple float-badges since rich cards replace them */
    .hero-float-badge{display:none}

    /* ─── V11: Platforms standalone section ────────────────────── */
    .platforms{padding:var(--sy) 0;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .platforms .app-connects{
      justify-content:center;
      max-width:900px;margin:46px auto 0;
      padding:0;
      flex-direction:column;
      gap:18px;
    }
    .platforms .app-connects__label{display:none}
    .platforms .app-connects__logos{justify-content:center;gap:12px}
    .platforms .acp{
      padding:8px 14px;border-radius:99px;
      background:#fff;border:1px solid var(--border);
      transition:transform .2s,border-color .2s,box-shadow .2s;
    }
    .platforms .acp:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 6px 18px rgba(27,89,248,.1)}
    .platforms .acp--soon{opacity:0.7}
    /* Suppress the inline " soon" text added by styles.css so we only show the pill below. */
    .platforms .acp--soon .acp__name::after{content:none}
    .platforms .acp--soon::after{
      content:"soon";display:inline-block;
      margin-left:6px;
      font-size:0.6rem;font-weight:700;
      padding:1px 7px;border-radius:99px;
      background:rgba(252,142,68,0.14);color:#c05c00;
      vertical-align:middle;
    }
    .platforms .acp--more{
      background:transparent;border:1.5px dashed var(--border);
      color:var(--muted);font-size:0.85rem;
    }

    /* ─── V10: Tighten character orbit + reduce gap to cards ─────── */
    /* Smaller orbit wrap so character feels more centered */
    .hero__char-wrap{
      width:min(360px,100%) !important;
      height:380px !important;
      padding-top:60px !important;
      margin-top:48px !important;
    }
    /* Slightly smaller orbit ring */
    .char-orbit-ring{inset:30px !important}
    /* Bring the cards down slightly so they're closer to the orbit */
    .hp-card--ad{top:38% !important}
    .hp-card--play{top:38% !important}

        /* ─── V8: Auth modal input fix - prevent grid blowout ────────── */
    .auth-modal__form label{min-width:0}
    .auth-modal__form input{width:100%;box-sizing:border-box;min-width:0}
    .auth-modal__row{min-width:0}
    .auth-modal__row label{min-width:0}
    .auth-modal__row input{width:100% !important;min-width:0 !important;box-sizing:border-box}
    .auth-modal__card{max-height:90vh;overflow-y:auto}

    /* ─── V7: Auth modal ─────────────────────────────────────────── */
    .auth-modal{
      position:fixed;inset:0;z-index:1000;
      display:none;align-items:center;justify-content:center;
      padding:20px;
    }
    .auth-modal[aria-hidden="false"]{display:flex}
    .auth-modal__overlay{
      position:absolute;inset:0;
      background:rgba(13,22,48,0.55);
      backdrop-filter:blur(6px);
    }
    .auth-modal__card{
      position:relative;z-index:1;
      background:#fff;border-radius:18px;
      padding:24px 26px 22px;width:100%;max-width:420px;
      box-shadow:0 32px 80px rgba(13,22,48,.3);
      animation:authModalIn .25s cubic-bezier(.4,0,.2,1);
    }
    @keyframes authModalIn{from{opacity:0;transform:translateY(20px) scale(.95)}}
    .auth-modal__close{
      position:absolute;top:14px;right:14px;
      width:32px;height:32px;border-radius:50%;
      background:transparent;border:none;cursor:pointer;
      font-size:1.4rem;color:var(--muted);
      display:grid;place-items:center;line-height:1;
      transition:background .15s,color .15s;
    }
    .auth-modal__close:hover{background:var(--bg);color:var(--navy)}
    .auth-modal__logo{
      width:42px;height:42px;border-radius:12px;
      background:radial-gradient(circle at 30% 25%,#a0b4ff 0%,#1b59f8 45%,#0b148a 100%);
      margin:0 auto 12px;
      display:grid;place-items:center;
      box-shadow:0 6px 18px rgba(27,89,248,.3);
    }
    .auth-modal__logo svg{width:24px;height:24px}
    .auth-modal h3{
      text-align:center;font-size:1.2rem;font-weight:800;
      letter-spacing:-0.02em;margin-bottom:4px;color:var(--navy);
    }
    .auth-modal__sub{
      text-align:center;color:var(--muted);font-size:0.82rem;
      margin-bottom:14px;line-height:1.4;
    }
    .auth-modal__google{
      display:flex;align-items:center;justify-content:center;gap:10px;
      width:100%;padding:9px 12px;border-radius:9px;
      background:#fff;color:var(--navy);
      border:1.5px solid var(--border);
      font-weight:600;font-size:0.9rem;cursor:pointer;
      transition:border-color .15s,box-shadow .15s;
      font-family:inherit;
    }
    .auth-modal__google:hover{border-color:#a8aebd;box-shadow:0 4px 12px rgba(13,22,48,.06)}
    .auth-modal__google svg{width:16px;height:16px}
    .auth-modal__divider{
      display:flex;align-items:center;gap:10px;
      margin:10px 0;color:var(--muted);font-size:0.72rem;
    }
    .auth-modal__divider::before,
    .auth-modal__divider::after{
      content:'';flex:1;height:1px;background:var(--border);
    }
    .auth-modal__form{display:flex;flex-direction:column;gap:8px}
    .auth-modal__row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .auth-modal__form label{
      display:flex;flex-direction:column;gap:3px;
      font-size:0.72rem;font-weight:600;color:var(--navy);
    }
    .auth-modal__form input{
      padding:8px 11px;border-radius:9px;
      border:1.5px solid var(--border);
      font-size:0.88rem;color:var(--navy);
      transition:border-color .15s,box-shadow .15s;
      font-family:inherit;
    }
    .auth-modal__form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,89,248,.12)}
    .auth-modal__terms{
      display:flex;align-items:flex-start;gap:7px;
      font-size:0.72rem;color:var(--muted);line-height:1.45;
      margin-top:4px;
    }
    .auth-modal__terms input{
      width:auto;margin-top:1px;flex-shrink:0;
    }
    .auth-modal__submit{
      width:100%;padding:10px;border-radius:10px;
      background:linear-gradient(135deg,#2563eb 0%,var(--blue) 50%,#4f46e5 100%);
      color:#fff;font-weight:600;font-size:0.92rem;
      border:none;cursor:pointer;font-family:inherit;
      transition:transform .15s,box-shadow .15s;
      box-shadow:0 4px 14px rgba(27,89,248,.3);
      margin-top:4px;
    }
    .auth-modal__submit:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(27,89,248,.4)}
    .auth-modal__submit:disabled{opacity:0.6;cursor:not-allowed;transform:none}
    .auth-modal__signin{
      text-align:center;color:var(--muted);font-size:0.78rem;
      margin-top:10px;
    }
    .auth-modal__signin a{color:var(--blue);font-weight:600;cursor:pointer}
    .auth-modal__signin a:hover{text-decoration:underline}
    .auth-modal__error{
      background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);
      color:#c0392b;padding:10px 12px;border-radius:8px;
      font-size:0.85rem;margin-bottom:6px;
    }
    .auth-modal__error[hidden]{display:none}

    /* ─── V7: Auth modal ─────────────────────────────────────────── */
/* ─── V6: Early access scarcity band above pricing ──────────── */
    .early-access-band{
      display:inline-flex;align-items:center;gap:10px;
      margin-top:18px;padding:10px 18px;
      background:linear-gradient(135deg,rgba(252,142,68,0.08),rgba(252,142,68,0.04));
      border:1px solid rgba(252,142,68,0.2);
      border-radius:99px;
      font-size:0.85rem;color:var(--navy);
      max-width:580px;
    }
    .early-access-band__icon{font-size:1rem}
    .early-access-band__text strong{font-weight:700;color:#c05c00}

    /* ─── V6: Magnets in pricing ─────────────────────────────────── */
    .plan__magnets{
      display:flex;flex-direction:column;align-items:flex-start;
      padding:14px 16px;border-radius:12px;
      background:linear-gradient(135deg,rgba(27,89,248,0.08),rgba(124,58,237,0.05));
      border:1px solid rgba(27,89,248,0.15);
      margin-bottom:20px;
    }
    .plan__magnets-num{
      font-size:1.6rem;font-weight:900;color:var(--blue);letter-spacing:-1px;
    }
    .plan__magnets-label{
      font-size:0.78rem;font-weight:700;color:var(--navy);
      text-transform:uppercase;letter-spacing:0.05em;
    }
    .plan__magnets-tip{
      font-size:0.72rem;color:var(--muted);margin-top:3px;
    }
    .plan--featured .plan__magnets{
      background:linear-gradient(135deg,rgba(125,160,255,0.12),rgba(160,135,255,0.08));
      border-color:rgba(125,160,255,0.25);
    }
    .plan--featured .plan__magnets-num{color:#a0b4ff}
    .plan--featured .plan__magnets-label{color:rgba(255,255,255,0.95)}
    .plan--featured .plan__magnets-tip{color:rgba(255,255,255,0.5)}

    /* ─── V5: Pro card improved styling ────────────────────────────── */
    .plan--featured{background:linear-gradient(160deg,#0d1630 0%,#06091e 100%) !important}
    .plan--featured .plan__name{color:#fff !important}
    .plan--featured .plan__amount{color:#fff !important}

    /* ─── V3 lean: Categorized pricing groups ────────────────────── */
    .plan__group{margin-bottom:18px}
    .plan__group:last-of-type{margin-bottom:24px}
    .plan__group-title{
      font-size:0.7rem;font-weight:700;letter-spacing:0.08em;
      text-transform:uppercase;color:var(--muted);
      margin-bottom:10px;margin-top:4px;
    }
    .plan__group .plan__features{display:flex;flex-direction:column;gap:7px;list-style:none;padding:0;margin:0}
    .plan__group .plan__features li{
      font-size:0.92rem;color:var(--navy);
      display:flex;align-items:flex-start;gap:8px;padding:0;
    }
    .plan__group .plan__features li::before{
      content:"✓";color:var(--blue);font-weight:700;flex-shrink:0;
    }
    .plan__group .plan__features li.dim{color:#a8aebd;text-decoration:line-through}
    .plan__group .plan__features li.dim::before{content:"×";color:#c8c4ba;text-decoration:none}
    /* Hide the placeholder we used to keep the original ul.plan__features pattern */
    .plan ul.plan__features[style*="display:none"]{display:none !important}

    /* ─── V3 lean: Once you connect 6-icon grid ───────────────────── */
    .connect-grid{padding:var(--sy) 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .cg__list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:46px auto 0}
    .cg__card{
      background:var(--bg);border:1px solid var(--border);
      border-radius:var(--r-lg);padding:24px;
      transition:transform .25s,border-color .25s,box-shadow .25s;
    }
    .cg__card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 12px 30px rgba(27,89,248,.1)}
    .cg__icon{
      width:42px;height:42px;border-radius:11px;
      display:grid;place-items:center;font-size:1.3rem;color:#fff;
      margin-bottom:14px;
    }
    .cg__icon--blue{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 6px 16px rgba(27,89,248,.25)}
    .cg__icon--purple{background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 6px 16px rgba(124,58,237,.25)}
    .cg__icon--pink{background:linear-gradient(135deg,var(--pink),var(--orange));box-shadow:0 6px 16px rgba(236,68,146,.25)}
    .cg__icon--orange{background:linear-gradient(135deg,var(--orange),#f59e0b);box-shadow:0 6px 16px rgba(252,142,68,.25)}
    .cg__icon--green{background:linear-gradient(135deg,#22a160,var(--blue));box-shadow:0 6px 16px rgba(34,161,96,.25)}
    .cg__title{font-size:1.05rem;font-weight:800;margin-bottom:6px;color:var(--navy)}
    .cg__desc{font-size:0.88rem;color:var(--muted);line-height:1.55}
    @media(max-width:880px){.cg__list{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:560px){.cg__list{grid-template-columns:1fr}}
    /* ─── V3: Layer 1 - What you get in 90 seconds ──────────────── */
    .layer1{padding:var(--sy) 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .layer1__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto}
    .l1-card{
      background:var(--bg);border:1px solid var(--border);
      border-radius:var(--r-xl);padding:32px;
      transition:transform .25s,box-shadow .25s;
      position:relative;overflow:hidden;
    }
    .l1-card::before{
      content:'';position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,var(--blue),var(--purple));
    }
    .l1-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(27,89,248,.12)}
    .l1-card__icon{
      width:48px;height:48px;border-radius:14px;
      background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
      display:grid;place-items:center;font-size:1.5rem;
      margin-bottom:18px;
      box-shadow:0 6px 18px rgba(27,89,248,.25);
    }
    .l1-card__title{font-size:1.25rem;font-weight:800;margin-bottom:8px;color:var(--navy)}
    .l1-card__desc{color:var(--muted);font-size:0.94rem;margin-bottom:20px;line-height:1.6}
    .l1-card__visual{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;min-height:140px}
    .l1-mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;font-size:0.62rem;color:var(--muted);font-weight:600;text-align:center}
    .l1-day{aspect-ratio:1;border-radius:5px;background:var(--bg);border:1px solid var(--border);display:grid;place-items:center}
    .l1-day--filled{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border:none}
    .l1-day--soft{background:linear-gradient(135deg,var(--pink),var(--orange));color:#fff;border:none}
    .l1-ad-mocks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
    .l1-ad{aspect-ratio:4/5;border-radius:8px;display:flex;align-items:flex-end;padding:8px;font-size:0.62rem;font-weight:700;color:#fff}
    .l1-ad--1{background:linear-gradient(160deg,var(--blue),var(--purple))}
    .l1-ad--2{background:linear-gradient(160deg,var(--pink),var(--orange))}
    .l1-ad--3{background:linear-gradient(160deg,var(--green,#22a160),var(--blue))}
    .l1-strat{display:flex;flex-direction:column;gap:6px}
    .l1-strat__row{display:flex;justify-content:space-between;font-size:0.82rem;padding:7px 0;border-bottom:1px solid var(--border)}
    .l1-strat__row:last-child{border-bottom:none}
    .l1-strat__row span:first-child{color:var(--muted)}
    .l1-strat__row span:last-child{color:var(--navy);font-weight:700}
    .l1-play{display:flex;flex-direction:column;gap:7px}
    .l1-play__week{padding:9px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:0.78rem}
    .l1-play__week strong{color:var(--blue);font-weight:700}
    .l1-play__week span{color:var(--muted)}
    @media(max-width:780px){.layer1__grid{grid-template-columns:1fr}}

    /* Layer 2 bridge spacing */
    .layer2-intro{padding:calc(var(--sy)*0.7) 0 calc(var(--sy)*0.3);background:var(--bg)}

    /* ─── V2: Built for your business types ──────────────────────── */
    .biztypes{padding:var(--sy) 0;background:#fff;border-top:1px solid var(--border)}
    .biztypes__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
    .biztype{
      background:var(--bg);border:1px solid var(--border);
      border-radius:var(--r-xl);padding:28px 22px;text-align:center;
      transition:transform .25s,border-color .25s,box-shadow .25s;
      position:relative;overflow:hidden;
    }
    .biztype::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(160deg,rgba(27,89,248,0) 0%,rgba(124,58,237,0.07) 100%);
      opacity:0;transition:opacity .25s;pointer-events:none;
    }
    .biztype:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 12px 30px rgba(27,89,248,.12)}
    .biztype:hover::after{opacity:1}
    .biztype__emoji{font-size:2rem;margin-bottom:12px;display:block;position:relative;z-index:1}
    .biztype__title{font-weight:800;font-size:1.05rem;margin-bottom:6px;color:var(--navy);position:relative;z-index:1}
    .biztype__line{font-size:0.84rem;color:var(--muted);line-height:1.55;position:relative;z-index:1}
    @media(max-width:980px){.biztypes__grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:520px){.biztypes__grid{grid-template-columns:1fr}}

    /* Invite-only note under hero CTA */
    .waitlist__note--beta{
      display:inline-flex;align-items:center;gap:6px;
      margin-top:6px;padding:6px 14px;border-radius:999px;
      background:rgba(27,89,248,0.06);
      color:var(--blue);font-weight:600;font-size:0.78rem;
      border:1px solid rgba(27,89,248,0.14);
    }

    /* ─── Unified Inbox showcase mock ─────────────────────────────── */
    .mock-inbox{padding:0;overflow:hidden}
    .mock-inbox .mock-card__header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
    .mock-inbox .mock-badge{background:var(--blue);color:#fff;font-size:0.66rem;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase}
    .inbox-list{display:flex;flex-direction:column}
    .inbox-row{
      display:grid;grid-template-columns:32px 1fr auto;
      gap:12px;align-items:center;
      padding:12px 18px;border-bottom:1px solid #f0f2f8;
      transition:background .15s;
    }
    .inbox-row:hover{background:#fafbfd}
    .inbox-row--new{background:rgba(27,89,248,0.03)}
    .inbox-row--new::before{content:"";display:none}
    .inbox-row--new .inbox-meta strong::after{
      content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);
      display:inline-block;margin-left:6px;vertical-align:middle;
    }
    .inbox-icon{
      width:32px;height:32px;border-radius:9px;
      display:grid;place-items:center;
      color:#fff;font-size:0.62rem;font-weight:800;letter-spacing:0.05em;
    }
    .inbox-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
    .inbox-meta strong{font-size:0.85rem;color:var(--navy);font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .inbox-snippet{font-size:0.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
    .inbox-time{font-size:0.7rem;color:var(--subtle);font-weight:600;flex-shrink:0}
    .inbox-suggested{
      padding:14px 18px;
      background:linear-gradient(135deg,rgba(27,89,248,0.05),rgba(124,58,237,0.04));
      border-top:1px solid rgba(27,89,248,0.08);
    }
    .inbox-suggested__label{font-size:0.7rem;font-weight:800;color:var(--blue);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px}
    .inbox-suggested__text{font-size:0.84rem;color:var(--ink);line-height:1.5;margin-bottom:10px}
    .inbox-suggested__actions{display:flex;gap:6px;justify-content:flex-end}
    .inbox-suggested__actions button{
      padding:6px 12px;border:1px solid var(--border);background:#fff;border-radius:8px;
      font-size:0.74rem;font-weight:600;cursor:pointer;color:var(--navy);font-family:inherit;
    }
    .inbox-suggested__actions .csa-approve{
      background:var(--blue);color:#fff;border-color:var(--blue);
    }

    /* ─── PRICING CARD COMPRESSION ─────────────────────────────────
       Flatten layout from 3 grouped feature lists to 1 flat list.
       Tighter padding + spacing so both cards fit on a laptop without
       scroll-hunting for the CTA.
    */
    .plan{padding:26px 26px 22px !important}
    .plan h3{font-size:1.35rem !important;margin-bottom:2px}
    .plan__for{font-size:0.85rem;padding-bottom:12px;margin-bottom:14px}
    .plan__amount{font-size:2.4rem !important;letter-spacing:-1.5px}
    .plan__vat{font-size:0.7rem;margin-bottom:14px}
    .plan__magnets{margin-bottom:16px !important;padding:12px 14px !important}
    .plan__magnets-num{font-size:1.5rem !important;letter-spacing:-0.5px}
    .plan__magnets-label{font-size:0.7rem !important}
    .plan__includes{
      font-size:0.78rem;font-weight:700;
      color:var(--navy);text-transform:uppercase;
      letter-spacing:0.06em;margin:0 0 10px;
    }
    .plan--featured .plan__includes{color:rgba(255,255,255,0.92)}
    .plan__features{gap:8px !important;margin-bottom:18px !important}
    .plan__features li{font-size:0.9rem !important;padding-left:24px;line-height:1.45}
    .plan__features li::before{top:1px;width:16px;height:16px;font-size:0.6rem}

    /* Magnet costs strip in pricing section */
    .magnet-costs-strip{
      display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
      margin-top:14px;padding:10px 18px;border-radius:14px;
      background:linear-gradient(135deg,rgba(27,89,248,0.06),rgba(124,58,237,0.04));
      border:1px solid rgba(27,89,248,0.12);
      font-size:0.86rem;color:var(--ink);
    }
    .mcs__lead{font-weight:700;color:var(--navy);margin-right:4px}
    .mcs__item{display:inline-flex;align-items:baseline;gap:4px;color:var(--muted)}
    .mcs__item strong{color:var(--blue);font-weight:800;font-size:0.95rem}
    .mcs__sep{color:rgba(13,22,48,0.18);font-weight:400}
    @media(max-width:560px){
      .magnet-costs-strip{font-size:0.78rem;padding:8px 14px;gap:6px}
      .mcs__sep{display:none}
      .mcs__lead{flex-basis:100%;text-align:center;margin-bottom:4px}
    }

    /* ─── MOBILE POLISH (≤768px) ────────────────────────────────────
       Sharp hierarchy: big h1, small subtitle, tight section padding.
       Lighter visuals: smaller mocks, no unnecessary decoration.
       Orbit visible but at smaller radius so it fits the screen.
       This block is last in the cascade so it wins specificity ties.
    */
    @media(max-width:768px){
      /* Tighter section vertical rhythm everywhere */
      :root{--sy:clamp(40px,7vw,56px)}

      /* Container side gutter */
      .container{padding-left:18px;padding-right:18px}

      /* ── HERO ───────────────────────────────────────────────────── */
      .hero{padding-top:28px;padding-bottom:32px}
      .hero h1{
        font-size:clamp(2.6rem,9vw,3.2rem) !important;
        letter-spacing:-0.025em;line-height:1.05;
        margin-bottom:14px;
      }
      .hero__sub{
        font-size:0.88rem !important;line-height:1.5;
        max-width:520px !important;margin:0 auto 22px !important;
        padding:0 8px;color:var(--muted);
      }
      .url-form{flex-direction:column;gap:8px;padding:8px;border-radius:14px}
      .url-form__icon{display:none}
      .url-form__input{width:100%;padding:14px 16px;font-size:1rem;border-radius:10px;background:#f6f8fc}
      .url-form__btn{width:100%;justify-content:center;padding:14px;font-size:1rem}
      .waitlist__note{font-size:0.76rem;margin-top:12px;text-align:center}
      .social-proof{gap:8px;padding:14px 12px 0}
      .sp-text span{font-size:0.8rem}

      /* Hero floating preview cards - hidden, character is the visual */
      .hero-previews{display:none !important}

      /* ── HERO CHARACTER + ORBIT (visible on mobile, smaller radius) ─ */
      .hero__char-wrap{
        width:300px !important;height:300px !important;
        padding-top:0 !important;
        margin:18px auto 0 !important;
      }
      .char-orbit-ring{display:block !important;border:1.5px dashed rgba(27,89,248,0.14) !important}
      .char-orbit-ring::after{display:block !important;inset:18px;border:1px dashed rgba(124,58,237,0.10) !important}
      /* Re-define orbit travel at a smaller radius so pills stay on screen */
      @keyframes orbit-travel{
        from{transform:rotate(0deg) translateX(115px) rotate(0deg)}
        to  {transform:rotate(360deg) translateX(115px) rotate(-360deg)}
      }
      .char-orbit-item{display:block !important}
      .coi-inner{
        padding:4px 10px 4px 4px;font-size:0.62rem;
        gap:5px;box-shadow:0 3px 12px rgba(13,22,48,0.12);
      }
      .coi-icon{width:16px;height:16px;border-radius:5px;font-size:0.55rem}
      /* Slight char shrink so the orbit feels balanced */
      .magneety-char .char-head{width:74px;height:74px}
      .magneety-char .char-glow{width:150px;height:150px}
      .char-sparkle{display:none}

      /* ── LAYER 1 ("What you get") - lighter density ────────────────── */
      .layer1{padding:var(--sy) 0}
      .l1-card{padding:20px 18px}
      .l1-card__title{font-size:1.05rem !important}
      .l1-card__desc{font-size:0.9rem}
      .l1-card__visual{padding:14px;min-height:auto}

      /* ── LAYER 2 BANNER - much tighter ─────────────────────────────── */
      .layer2-banner{padding:42px 0 48px;margin-top:24px}
      .layer2-banner__inner{padding:0 18px}
      .layer2-banner__eyebrow{font-size:0.66rem;padding:5px 11px;margin-bottom:14px}
      .layer2-banner__h2{font-size:1.5rem !important;line-height:1.3;margin-bottom:10px}
      .layer2-banner__sub{font-size:0.88rem;line-height:1.55}
      .layer2-banner__spark{display:none}
      .layer2-banner::after{opacity:0.3}

      /* ── SHOWCASES - one column, smaller mocks ────────────────────── */
      .showcase{padding:var(--sy) 0}
      .showcase__copy h2{font-size:1.7rem !important;line-height:1.2;margin-bottom:10px}
      .showcase__copy p{font-size:0.92rem;line-height:1.55;margin-bottom:14px}
      .showcase__bullets{gap:8px}
      .showcase__bullets li{font-size:0.88rem;padding-left:22px}
      .showcase__inner{gap:24px !important}

      /* ── PLATFORMS STRIP ─────────────────────────────────────────── */
      .platforms{padding:var(--sy) 0}
      .platforms .section-head{margin-bottom:24px}
      .platforms .app-connects__logos{gap:10px;padding:0 8px}

      /* ── COMPARISON TABLE ─────────────────────────────────────────── */
      .compare{padding:var(--sy) 0}
      .compare-cell{font-size:0.78rem !important;line-height:1.35;padding:10px 8px !important}
      .compare-cell--label{font-weight:600;font-size:0.78rem !important}
      .compare-brand__mark{width:22px;height:22px;font-size:0.78rem}
      .compare-brand__name{font-size:0.78rem}
      .cmp-yes,.cmp-no{font-size:0.95rem}
      .cmp-partial{font-size:0.7rem}

      /* ── TESTIMONIALS ─────────────────────────────────────────────── */
      .testimonials{padding:var(--sy) 0}
      .testimonials .section-head__sub{font-size:0.88rem;padding:0 16px}
      .testi-grid{display:grid !important;grid-template-columns:1fr !important;gap:14px;flex-wrap:initial !important;overflow:visible !important;padding:0 !important}
      .testi-card{padding:20px 18px;width:auto !important}
      .testi-card p{font-size:0.92rem;line-height:1.55}

      /* ── TEAM ─────────────────────────────────────────────────────── */
      .team{padding:var(--sy) 0}
      .team__inner--solo{gap:22px}
      .team-card__photo-wrap{aspect-ratio:1/1;max-height:300px;width:100%;height:auto !important}
      .team-card__photo{height:100% !important;width:100% !important;object-fit:cover}
      .team__text h2{font-size:1.7rem !important;line-height:1.2}
      .team__text p{font-size:0.92rem;line-height:1.55}
      .team-card--solo strong{font-size:1.1rem}
      .team-card--solo p{font-size:0.88rem}

      /* ── PRICING ─────────────────────────────────────────────────── */
      .pricing{padding:var(--sy) 0}
      .billing-toggle{margin-bottom:18px}
      .plan{padding:24px 22px}
      .plan h3{font-size:1.3rem}
      .plan__for{font-size:0.85rem;padding-bottom:14px;margin-bottom:14px}
      .plan__amount{font-size:2.3rem}
      .plan__magnets{padding:12px}
      .plan__magnets-num{font-size:1.4rem}
      .plan__magnets-label{font-size:0.78rem}
      .plan__magnets-tip{font-size:0.7rem}
      .plan__badge{font-size:0.6rem;padding:4px 12px}
      .plan__features li{font-size:0.88rem;padding-left:24px}
      .plan__group-title{font-size:0.72rem;letter-spacing:0.08em}
      .early-access-band{font-size:0.82rem;padding:10px 14px;line-height:1.45;flex-wrap:wrap;justify-content:center;text-align:center;gap:6px}

      /* ── FAQ ─────────────────────────────────────────────────────── */
      .faq{padding:var(--sy) 0}
      .faq-list summary{padding:14px 16px;font-size:0.92rem;line-height:1.4}
      .faq-list details p{font-size:0.88rem;line-height:1.55;padding:0 16px 14px}

      /* ── FINAL CTA ───────────────────────────────────────────────── */
      .final-cta{padding:48px 0}
      .final-cta h2{font-size:1.8rem !important;line-height:1.2;margin-bottom:10px}
      .final-cta p{font-size:0.92rem;padding:0 16px;margin-bottom:18px}
      .char-scene--cta{transform:scale(0.75);transform-origin:bottom center}

      /* ── SECTION HEADERS - one consistent pattern ────────────────── */
      .section-head{margin-bottom:28px}
      .section-head h2{font-size:1.7rem !important;line-height:1.2}
      .section-head__sub{font-size:0.92rem;padding:0 12px;margin-top:8px}
      .eyebrow{font-size:0.7rem;letter-spacing:0.1em}

      /* ── AUTH MODAL ──────────────────────────────────────────────── */
      .auth-modal{padding:12px}
      .auth-modal__card{padding:20px 18px 16px;border-radius:16px;max-height:92vh;overflow-y:auto}
      .auth-modal__row{grid-template-columns:1fr;gap:8px}
      .auth-modal h3{font-size:1.1rem}
      .auth-modal__sub{font-size:0.8rem;margin-bottom:10px}
      .auth-modal__google{font-size:0.88rem;padding:10px}
      .auth-modal__divider{margin:10px 0}

      /* ── HEAVY DECORATION OFF (perf + clarity) ─────────────────── */
      .hero__orb--3{display:none}
    }

    /* ─── NARROW PHONES (≤420px) ──────────────────────────────── */
    @media(max-width:420px){
      .container{padding-left:16px;padding-right:16px}
      .hero h1{font-size:2.4rem !important;line-height:1.05}
      .hero__sub{font-size:0.85rem !important}

      /* Orbit even tighter */
      .hero__char-wrap{width:280px !important;height:280px !important}
      @keyframes orbit-travel{
        from{transform:rotate(0deg) translateX(105px) rotate(0deg)}
        to  {transform:rotate(360deg) translateX(105px) rotate(-360deg)}
      }
      .coi-inner{padding:3px 8px 3px 3px;font-size:0.58rem}
      .coi-icon{width:14px;height:14px;font-size:0.5rem}

      /* Comparison: drop the partial-other column too at very small widths */
      .compare-head,.compare-row{grid-template-columns:1.4fr 1fr !important}
      .compare-cell--other:nth-of-type(2){display:none}
      .compare-cell{padding:9px 7px !important;font-size:0.74rem !important}

      /* Pricing tighter */
      .plan{padding:22px 18px}
      .plan__amount{font-size:2.1rem}

      /* Auth modal even tighter */
      .auth-modal{padding:8px}
      .auth-modal__card{padding:18px 16px 14px}
      .auth-modal__form{gap:7px}

      /* Section heads */
      .section-head h2{font-size:1.55rem !important}
      .layer2-banner__h2{font-size:1.35rem !important}
      .final-cta h2{font-size:1.6rem !important}
    }

/* --- mg-redesign layer --- */
    /* ════════════════════════════════════════════════════════════════
       Magneety redesign overrides — layered LAST so they win specificity ties.
       Cream warm palette, Funnel Display headlines, brand-pink highlighter,
       sticker pricing badge, doodle l1-card icons, softer secondary eyebrows.
    ═══════════════════════════════════════════════════════════════════ */

    /* 1. Cream warm background — replaces var(--bg) defaults across the page */
    :root{
      --bg:#fdfbf5;
      --bg-warm:#fcfaf2;
      --bg-warm-deep:#f7f1e3;
      --border:#ecdfc8;
    }
    body{background:#fdfbf5}
    .layer1,.platforms,.testimonials,.team,.pricing,.faq{background:#fdfbf5 !important}
    /* Scope cream override to NON-dark showcases — .showcase--dark must keep
       its dark navy gradient bg or its white text becomes invisible. */
    .showcase:not(.showcase--dark){background:#fcfaf2 !important;border-top:1px solid #ecdfc8 !important}
    /* Showcase--tinted: cool gradient creates intentional contrast vs cream,
       and harmonises with the blue/purple brand mocks inside the section. */
    .showcase--tinted{background:linear-gradient(160deg,#eaf1ff 0%,#f0e9ff 50%,#fde8f1 100%) !important}
    .compare{background:#fcfaf2 !important;border-top:1px solid #ecdfc8;border-bottom:1px solid #ecdfc8}
    .hero{background:#fdfbf5 !important}
    .hero__bg{background:transparent}

    /* 2. Subtle grain overlay — paper-like texture on top of cream */
    body::after{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:2000;
      opacity:0.045;mix-blend-mode:multiply;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }

    /* 3. Funnel Display on h1 + major section headings only.
          Keep Inter for body, sub-heads, lists — display contrast without "everything serif". */
    .hero h1,
    .section-head h2,
    .showcase__copy h2,
    .layer2-banner__h2,
    .final-cta h2,
    .team__text h2{
      font-family:'Funnel Display','Inter',system-ui,-apple-system,sans-serif !important;
      font-weight:800 !important;
      letter-spacing:-0.035em !important;
    }
    /* 4. Bigger hero h1 — confident, playful presence */
    .hero h1{
      font-size:clamp(2.6rem,8vw,5.2rem) !important;
      line-height:1.02 !important;
      letter-spacing:-0.04em !important;
    }

    /* 5. Hand-drawn highlighter squiggle replacing .text-shine gradient.
          Yellow stroke under the emphasized word — like a real marker stroke.
          Works on inline span; preserves text color (no gradient). */
    /* Highlighter underline strategy: put the SVG mark on the span itself as a
       background-image (not as a ::after pseudo). This survives font reflow,
       multi-line wraps cleanly with box-decoration-break, and doesn't depend on
       z-index/stacking — the ::after approach was disappearing after fonts loaded
       because the reflow recalculated its position. */
    .text-shine{
      /* Kill the original gradient-text styling from styles.css */
      -webkit-background-clip:initial !important;
      background-clip:initial !important;
      -webkit-text-fill-color:inherit !important;
      color:var(--navy) !important;
      animation:none !important;

      /* Apply brand-pink highlighter as a background-image on the span itself */
      background-color:transparent !important;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M2 9 Q 50 2, 100 7 T 200 7 T 298 6' stroke='%23ec4492' stroke-width='8' stroke-linecap='round' fill='none' opacity='0.78'/></svg>") !important;
      background-repeat:no-repeat !important;
      background-position:0 92% !important;
      background-size:100% 14px !important;

      display:inline;
      padding-bottom:4px;
      -webkit-box-decoration-break:clone;
      box-decoration-break:clone;
    }
    /* Disable the old ::after approach entirely */
    .text-shine::after{display:none !important}

    /* On dark backgrounds: white text + lighter pink stroke */
    .layer2-banner .text-shine,
    .plan--featured .text-shine,
    .final-cta .text-shine{
      color:#fff !important;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M2 9 Q 50 2, 100 7 T 200 7 T 298 6' stroke='%23f9a8d4' stroke-width='8' stroke-linecap='round' fill='none' opacity='0.95'/></svg>") !important;
    }

    /* 6. Sticker-style "Most popular" badge — slight rotation, no shimmer animation,
          paper-like background with a defined edge. */
    .plan__badge{
      background:#fef3c7 !important;
      color:#92400e !important;
      animation:none !important;
      transform:translateX(-50%) rotate(-4deg) !important;
      box-shadow:0 4px 14px rgba(13,22,48,0.15),0 0 0 1.5px #92400e25 !important;
      font-family:'Caveat',cursive !important;
      font-size:0.95rem !important;
      font-weight:700 !important;
      letter-spacing:0 !important;
      text-transform:none !important;
      padding:4px 16px !important;
      top:-15px !important;
    }
    .plan__badge::before{
      content:'★';margin-right:6px;color:#d97706;
    }

    /* 7. Doodle icons replacing the "01/02/03/04" number badges on l1-cards.
          Hand-drawn vibe — strokes not fills, slightly off-axis.
          NB: use background-COLOR transparent, not background shorthand, or the
          shorthand resets background-image too and the icons vanish. */
    .l1-card__num{
      background-color:transparent !important;
      color:transparent !important;
      width:48px !important;height:48px !important;
      background-size:contain !important;
      background-repeat:no-repeat !important;
      background-position:center !important;
    }
    /* Card 1 — Calendar doodle */
    .l1-card:nth-child(1) .l1-card__num{
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231b59f8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='10' width='34' height='30' rx='3' transform='rotate(-2 24 25)'/><line x1='7' y1='18' x2='41' y2='18'/><line x1='15' y1='6' x2='15' y2='14'/><line x1='33' y1='6' x2='33' y2='14'/><circle cx='15' cy='27' r='1.4' fill='%231b59f8'/><circle cx='24' cy='27' r='1.4' fill='%23ec4492'/><circle cx='33' cy='27' r='1.4' fill='%237c3aed'/><circle cx='15' cy='34' r='1.4' fill='%23fc8e44'/><circle cx='24' cy='34' r='1.4' fill='%231b59f8'/></svg>");
    }
    /* Card 2 — Ad/megaphone doodle */
    .l1-card:nth-child(2) .l1-card__num{
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ec4492' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 28 L8 22 L26 14 L26 36 Z' transform='rotate(-3 17 25)'/><path d='M26 16 Q34 17 36 22 Q37 26 36 30 Q34 35 26 36'/><path d='M14 28 L14 38 L19 38 L19 32'/><circle cx='38' cy='12' r='1.5' fill='%23fc8e44'/><circle cx='42' cy='18' r='1' fill='%23fc8e44'/></svg>");
    }
    /* Card 3 — Strategy/bars doodle */
    .l1-card:nth-child(3) .l1-card__num{
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='40' x2='40' y2='40'/><rect x='12' y='28' width='6' height='12' fill='%231b59f8' stroke='none' opacity='0.6'/><rect x='21' y='20' width='6' height='20' fill='%23ec4492' stroke='none' opacity='0.6'/><rect x='30' y='14' width='6' height='26' fill='%237c3aed' stroke='none' opacity='0.6'/><path d='M14 10 L24 6 L34 12' stroke='%23fc8e44'/><circle cx='34' cy='12' r='1.5' fill='%23fc8e44' stroke='none'/></svg>");
    }
    /* Card 4 — Playbook checklist doodle */
    .l1-card:nth-child(4) .l1-card__num{
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300c48c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='10' y='8' width='28' height='34' rx='2' transform='rotate(2 24 25)'/><circle cx='17' cy='17' r='2' fill='%2300c48c' stroke='none'/><line x1='22' y1='17' x2='34' y2='17'/><circle cx='17' cy='25' r='2' fill='%2300c48c' stroke='none'/><line x1='22' y1='25' x2='32' y2='25'/><circle cx='17' cy='33' r='2' stroke='%2300c48c' fill='none'/><line x1='22' y1='33' x2='34' y2='33'/></svg>");
    }
    /* If l1-cards aren't direct children of a grid, scope the nth-child to .layer1__grid > */
    .layer1__grid > .l1-card:nth-child(1) .l1-card__num{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231b59f8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='10' width='34' height='30' rx='3' transform='rotate(-2 24 25)'/><line x1='7' y1='18' x2='41' y2='18'/><line x1='15' y1='6' x2='15' y2='14'/><line x1='33' y1='6' x2='33' y2='14'/><circle cx='15' cy='27' r='1.4' fill='%231b59f8'/><circle cx='24' cy='27' r='1.4' fill='%23ec4492'/><circle cx='33' cy='27' r='1.4' fill='%237c3aed'/><circle cx='15' cy='34' r='1.4' fill='%23fc8e44'/><circle cx='24' cy='34' r='1.4' fill='%231b59f8'/></svg>")}

    /* 8. Softer eyebrows on lower-importance sections only — drop ALL-CAPS +
          heavy letter-spacing. Keep Inter (Caveat would be a third font + read
          too "cute"). Load-bearing nav-anchor eyebrows (Pricing, FAQ, Platforms,
          Why Magneety) stay in their standard caps-tracked styling. */
    .testimonials .eyebrow,
    .team .eyebrow{
      text-transform:none !important;
      letter-spacing:0 !important;
      font-family:'Inter',system-ui,sans-serif !important;
      font-size:0.85rem !important;
      font-weight:600 !important;
      color:#7c3aed !important;
    }

    /* Sample AI caption preview inside the 7-day content starter card — fills
       the dead space below the 7-day calendar so the card matches the height
       of the 30-day playbook card next to it. */
    .l1-cal-preview{
      margin-top:14px;padding:11px 13px;
      background:rgba(255,255,255,0.55);
      border:1px solid rgba(27,89,248,0.1);
      border-radius:10px;
    }
    .l1-cal-preview__head{
      display:flex;align-items:center;gap:8px;margin-bottom:6px;
    }
    .l1-cal-preview__chip{
      font-size:0.5rem;font-weight:800;padding:2px 7px;border-radius:4px;
      letter-spacing:0.06em;text-transform:uppercase;
    }
    .l1-cal-preview__label{
      font-size:0.58rem;font-weight:800;color:var(--blue);
      letter-spacing:0.06em;text-transform:uppercase;
    }
    .l1-cal-preview__text{
      font-size:0.75rem;line-height:1.5;color:var(--ink);
      font-style:italic;margin-bottom:5px;
    }
    .l1-cal-preview__tags{
      font-size:0.62rem;color:var(--blue);font-weight:600;
    }

    /* ─── FOUNDER TRUST BAND (under hero, above fold-ish) ──────────── */
    .founder-band{
      padding:18px 0;
      background:#fcfaf2;
      border-top:1px solid #ecdfc8;
      border-bottom:1px solid #ecdfc8;
    }
    .founder-band__inner{
      display:flex;align-items:center;justify-content:center;gap:16px;
      max-width:780px;margin:0 auto;text-align:left;
    }
    .founder-band__photo{
      width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;
      box-shadow:0 2px 8px rgba(13,22,48,0.1);
    }
    .founder-band__text{
      font-size:0.95rem;color:var(--ink);line-height:1.5;margin:0;
    }
    .founder-band__text strong{color:var(--navy);font-weight:800}
    @media(max-width:640px){
      .founder-band__inner{flex-direction:row;text-align:left;gap:12px;padding:0 16px}
      .founder-band__text{font-size:0.82rem;line-height:1.4}
      .founder-band__photo{width:42px;height:42px}
    }

    /* ─── 60-SECOND TOUR (3-step strip) ─────────────────────────────── */
    .tour{padding:var(--sy) 0;background:#fdfbf5}
    .tour__head{margin-bottom:36px}
    .tour__steps{
      display:flex;align-items:stretch;justify-content:center;gap:12px;
      max-width:1100px;margin:0 auto;
    }
    .tour-step{
      flex:1;display:flex;gap:14px;
      background:#fff;border:1px solid #ecdfc8;border-radius:18px;
      padding:22px;position:relative;
      transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
    }
    .tour-step:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(13,22,48,0.07)}
    .tour-step__num{
      width:36px;height:36px;border-radius:50%;flex-shrink:0;
      background:linear-gradient(135deg,var(--blue),#7c3aed);
      color:#fff;font-weight:900;font-size:1.05rem;
      display:grid;place-items:center;
      box-shadow:0 4px 10px rgba(27,89,248,0.3);
    }
    .tour-step__body strong{
      display:block;font-size:1.05rem;font-weight:800;
      color:var(--navy);margin-bottom:6px;letter-spacing:-0.01em;
    }
    .tour-step__body p{
      font-size:0.88rem;line-height:1.55;color:var(--muted);margin:0;
    }
    .tour-step__arrow{
      display:flex;align-items:center;justify-content:center;
      font-size:1.5rem;color:rgba(27,89,248,0.4);font-weight:700;
      flex-shrink:0;
    }
    @media(max-width:880px){
      .tour__steps{flex-direction:column}
      .tour-step__arrow{transform:rotate(90deg);padding:4px 0}
    }
    @media(max-width:560px){
      .tour-step{padding:18px}
      .tour-step__arrow{font-size:1.2rem}
    }

    /* ─── BENTO: "everything else in the box" ──────────────────────── */
    .bento{padding:var(--sy) 0;background:#fcfaf2;border-top:1px solid #ecdfc8;border-bottom:1px solid #ecdfc8}
    .bento-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
      max-width:1040px;margin:0 auto;
    }
    .bento-tile{
      position:relative;background:#fff;border:1px solid #ecdfc8;border-radius:18px;
      padding:22px;display:flex;flex-direction:column;gap:14px;
      transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
      overflow:hidden;
    }
    .bento-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(13,22,48,0.07)}
    .bento-tile--wide{grid-column:span 2}
    .bento-tile__visual{
      flex-shrink:0;min-height:120px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;padding:14px;
    }
    .bento-tile__body h3{
      font-size:1.05rem;font-weight:800;margin:0 0 4px;color:var(--navy);
      display:flex;align-items:center;gap:8px;
    }
    .bento-tile__body p{font-size:0.86rem;color:var(--muted);line-height:1.5;margin:0}
    .bento-tile__chip{
      font-size:0.6rem;padding:2px 8px;border-radius:999px;font-weight:700;
      background:rgba(27,89,248,0.1);color:var(--blue);letter-spacing:0.04em;
    }

    /* Tile-specific accents (subtle gradient bgs for the visual area) */
    .bento-tile--brain .bento-tile__visual{
      background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(27,89,248,0.05));
    }
    .bento-tile--ask .bento-tile__visual{
      background:linear-gradient(135deg,rgba(27,89,248,0.08),rgba(167,139,250,0.05));
    }
    .bento-tile--reports .bento-tile__visual{
      background:linear-gradient(135deg,rgba(252,142,68,0.1),rgba(236,68,146,0.05));
    }
    .bento-tile--mcp .bento-tile__visual{
      background:linear-gradient(135deg,rgba(236,68,146,0.08),rgba(124,58,237,0.05));
    }
    .bento-tile--geo .bento-tile__visual{
      background:linear-gradient(135deg,rgba(0,196,140,0.1),rgba(27,89,248,0.04));
    }
    .bento-tile--pages .bento-tile__visual{
      background:linear-gradient(135deg,rgba(167,139,250,0.08),rgba(236,68,146,0.05));
    }

    /* Brand Brain mini visual */
    .brain-mini{width:100%;display:flex;flex-direction:column;gap:10px}
    .brain-mini__row{display:flex;align-items:center;gap:10px;font-size:0.62rem;font-weight:800;color:var(--navy);letter-spacing:0.06em}
    .brain-mini__row span{width:62px;flex-shrink:0}
    .brain-mini__bar{height:7px;border-radius:99px;flex-shrink:0}

    /* Ask Magneety mini visual */
    .ask-bubble{
      width:60px;height:42px;border-radius:14px;
      background:#fff;border:1.5px solid rgba(27,89,248,0.18);
      display:flex;align-items:center;justify-content:center;gap:5px;
      box-shadow:0 4px 12px rgba(27,89,248,0.08);
      position:relative;
    }
    .ask-bubble::after{
      content:'';position:absolute;bottom:-6px;left:18px;
      width:10px;height:10px;background:#fff;
      border-right:1.5px solid rgba(27,89,248,0.18);
      border-bottom:1.5px solid rgba(27,89,248,0.18);
      transform:rotate(45deg);
    }
    .ask-bubble__dot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:ask-dot 1.4s ease-in-out infinite}
    .ask-bubble__dot--2{animation-delay:0.2s}
    .ask-bubble__dot--3{animation-delay:0.4s}
    @keyframes ask-dot{0%,80%,100%{opacity:0.3}40%{opacity:1}}
    .ask-bubble__caption{
      margin-top:14px;font-size:0.7rem;color:var(--muted);font-style:italic;text-align:center;
    }

    /* Branded Reports mini visual */
    .report-mini{
      width:140px;background:#fff;border:1px solid #f3e9d4;border-radius:8px;padding:10px;
    }
    .report-mini__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:0.55rem;font-weight:800;letter-spacing:0.06em}
    .report-mini__logo{color:#fc8e44}
    .report-mini__date{color:var(--muted)}
    .report-mini__bars{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;height:42px}
    .report-mini__bars > div{flex:1;border-radius:2px 2px 0 0}

    /* MCP node-link mini visual */
    .mcp-link{display:flex;align-items:center;gap:0;height:50px}
    .mcp-link__node{
      width:48px;height:48px;border-radius:14px;
      display:grid;place-items:center;font-weight:900;font-size:1.4rem;color:#fff;
      box-shadow:0 6px 14px rgba(13,22,48,0.12);
      flex-shrink:0;
    }
    .mcp-link__node--magneety{background:#fff;border:2px solid rgba(27,89,248,0.18)}
    .mcp-link__node--claude{background:#cc785c}
    .mcp-link__line{
      flex:1;height:2px;
      background-image:linear-gradient(90deg,#7c3aed 0,#7c3aed 4px,transparent 4px,transparent 8px);
      background-size:8px 2px;
      max-width:50px;
    }

    /* AI Search Visibility (GEO/AEO) mini visual */
    .geo-mini{width:100%;display:flex;flex-direction:column;gap:6px}
    .geo-mini__row{
      display:flex;justify-content:space-between;align-items:center;
      padding:5px 10px;background:#fff;border:1px solid #ecdfc8;border-radius:7px;
      font-size:0.66rem;
    }
    .geo-mini__src{font-weight:700;color:var(--navy)}
    .geo-mini__pill{padding:2px 8px;border-radius:99px;font-weight:700;font-size:0.55rem}
    .geo-mini__pill--good{background:rgba(0,196,140,0.15);color:#077a55}
    .geo-mini__pill--bad{background:rgba(239,68,68,0.13);color:#c0392b}

    /* Landing Pages + Quizzes mini visual */
    .pages-mini{display:flex;align-items:flex-end;gap:10px;width:100%;justify-content:center}
    .pages-mini__page{
      width:88px;height:110px;background:#fff;border:1px solid #ecdfc8;border-radius:7px;
      padding:10px 8px;display:flex;flex-direction:column;gap:5px;
    }
    .pages-mini__bar{height:6px;background:#e8eef9;border-radius:2px}
    .pages-mini__bar--hero{height:14px;background:linear-gradient(90deg,#7c3aed,#ec4492)}
    .pages-mini__bar--short{width:60%}
    .pages-mini__btn{margin-top:auto;background:var(--blue);color:#fff;font-size:0.5rem;font-weight:700;padding:4px 6px;border-radius:4px;text-align:center}
    .pages-mini__quiz{
      width:108px;background:#fff;border:1px solid #ecdfc8;border-radius:7px;padding:10px;
      display:flex;flex-direction:column;gap:6px;
    }
    .pages-mini__q{font-size:0.6rem;font-weight:700;color:var(--navy);line-height:1.3}
    .pages-mini__q-opts{display:flex;gap:3px;flex-wrap:wrap}
    .pages-mini__q-opts span{
      font-size:0.5rem;padding:3px 6px;border:1px solid #ecdfc8;border-radius:4px;
      color:var(--muted);
    }
    .pages-mini__q-opts .pages-mini__q-opt--on{
      background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700;
    }

    /* Bento responsive: 3-col -> 2-col -> 1-col */
    @media(max-width:880px){
      .bento-grid{grid-template-columns:repeat(2,1fr)}
      .bento-tile--wide{grid-column:span 2}
    }
    @media(max-width:560px){
      .bento-grid{grid-template-columns:1fr}
      .bento-tile--wide{grid-column:auto}
      .bento-tile__visual{min-height:90px}
    }

    /* ─── Ads, your way (F5) — campaign management mock ───────────── */
    .mock-ads{padding:0;overflow:hidden}
    .mock-ads .mock-card__header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
    .mock-badge--pacing{background:rgba(0,196,140,0.14);color:#077a55;font-size:0.62rem;padding:3px 9px;border-radius:999px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
    .ads-list{display:flex;flex-direction:column;padding:14px 18px;gap:14px}
    .ads-row{padding:12px;border:1px solid #f0f2f8;border-radius:10px;background:#fff}
    .ads-row__head{display:flex;align-items:center;gap:10px}
    .ads-row__platform{
      width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
      color:#fff;font-weight:800;font-size:0.78rem;flex-shrink:0;
    }
    .ads-row__platform--meta{background:#1877f2}
    .ads-row__platform--google{background:linear-gradient(135deg,#4285f4,#34a853)}
    .ads-row__platform--tiktok{background:#000}
    .ads-row__meta{flex:1;min-width:0}
    .ads-row__meta strong{display:block;font-size:0.82rem;color:var(--navy);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ads-row__status{font-size:0.7rem;font-weight:600}
    .ads-row__status--live{color:#077a55}
    .ads-row__status--paused{color:#9c4221}
    .ads-row__btn{
      padding:5px 11px;border:1px solid var(--border);background:#fafbfd;border-radius:7px;
      font-size:0.7rem;font-weight:600;cursor:pointer;color:var(--navy);font-family:inherit;
    }
    .ads-row__btn--undo{background:rgba(27,89,248,0.08);color:var(--blue);border-color:rgba(27,89,248,0.18)}
    .ads-pace{margin-top:10px}
    .ads-pace__track{
      position:relative;height:6px;background:#eef0f5;border-radius:99px;overflow:visible;
    }
    .ads-pace__fill{
      height:100%;background:linear-gradient(90deg,var(--blue),#7c3aed);border-radius:99px;
    }
    .ads-pace__fill--good{background:linear-gradient(90deg,#22c55e,#16a34a)}
    .ads-pace__marker{
      position:absolute;top:-3px;width:2px;height:12px;background:var(--navy);border-radius:1px;
    }
    .ads-pace__labels{display:flex;justify-content:space-between;margin-top:5px;font-size:0.65rem;color:var(--muted);font-weight:600}
    .ads-ai{
      padding:14px 18px;
      background:linear-gradient(135deg,rgba(27,89,248,0.05),rgba(124,58,237,0.04));
      border-top:1px solid rgba(27,89,248,0.08);
    }
    .ads-ai__label{font-size:0.68rem;font-weight:800;color:var(--blue);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px}
    .ads-ai__text{font-size:0.82rem;color:var(--ink);line-height:1.5;margin-bottom:10px}
    .ads-ai__actions{display:flex;gap:6px;justify-content:flex-end}
    .ads-ai__actions button{
      padding:6px 12px;border:1px solid var(--border);background:#fff;border-radius:8px;
      font-size:0.74rem;font-weight:600;cursor:pointer;color:var(--navy);font-family:inherit;
    }
    .ads-ai__actions .csa-approve{background:var(--blue);color:#fff;border-color:var(--blue)}

    /* "Coming soon" eyebrow variant */
    .eyebrow--soon{
      background:rgba(252,142,68,0.14) !important;
      color:#c05c00 !important;
      padding:5px 12px !important;
      border-radius:999px !important;
      display:inline-block !important;
      font-weight:700 !important;
    }

    /* 3-column pricing layout for Starter / Pro / Scale */
    .plans--three{
      grid-template-columns:repeat(3,1fr) !important;
      max-width:1140px !important;
      gap:16px !important;
    }
    @media(max-width:980px){
      .plans--three{grid-template-columns:1fr !important;max-width:520px !important}
    }
    /* Scale tier - slightly subdued vs the featured Pro card */
    .plans--three .plan:last-child{opacity:0.97}

