/* ============================================================
   DESIGN TOKENS (Protagonist AI Design System)
   ============================================================ */
:root{
  --nav-h:78px;
  --black:#000000;--dark-gray:#34343F;--medium-gray:#858591;--light-gray:#C2C2C5;
  --lightest-gray:#EAEAEA;--white:#FAFAFA;
  --ultra:#EFA1FF;--violet:#8D64FF;--azure:#006AFE;--vermilion:#F74646;
  --score-good:#00C87C;--score-medium:#FFB800;--score-bad:#F74646;
  --border-color:#EAEAEA;--card-bg:#FFFFFF;--page-bg:#F5F5F5;
  --font-serif:'BIZ UDPMincho',serif;--font-sans:'DM Sans',sans-serif;--font-mono:'DM Mono',monospace;
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:40px;--space-3xl:64px;--space-4xl:80px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:100px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-sans);color:var(--dark-gray);background:var(--white);line-height:1.6;font-size:16px;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%;height:auto}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 1}
[id]{scroll-margin-top:96px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-2xl)}
@media(max-width:640px){.wrap{padding:0 var(--space-lg)}}

/* ============================================================
   UTILITIES
   ============================================================ */
.grad{background:linear-gradient(90deg,var(--ultra) 0%,var(--azure) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.h1{font-family:var(--font-serif);font-weight:400;text-transform:uppercase;line-height:1.1;letter-spacing:0}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:var(--space-lg)}
/* eyebrow as a badge: ultra is unreadable as 12px text on a light field, but
   it is exactly right as the field itself with black type on top */
.badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--space-lg);
  padding:7px 15px;border-radius:var(--radius-full);background:var(--ultra);
  color:var(--black);font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
@media(max-width:560px){
  .badge{font-size:10px;letter-spacing:1px;padding:6px 12px;white-space:normal}
}

.accent-line{width:80px;height:3px;background:linear-gradient(90deg,var(--ultra) 0%,var(--azure) 100%);margin:var(--space-xl) 0}
.lede{font-size:18px;line-height:1.6;max-width:34em}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:16px 32px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;transition:all .2s;min-height:48px}
.btn-grad{background:linear-gradient(135deg,var(--ultra) 0%,var(--azure) 100%);color:#fff;box-shadow:0 6px 20px rgba(0,106,254,.28)}
.btn-grad:hover{filter:brightness(1.06);box-shadow:0 8px 26px rgba(0,106,254,.36)}
.btn-secondary{background:var(--white);color:var(--dark-gray);border:1px solid var(--lightest-gray)}
.btn-secondary:hover{background:var(--lightest-gray)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-sm{padding:11px 20px;min-height:42px}
.btn:focus-visible{outline:3px solid var(--ultra);outline-offset:2px}

/* ============================================================
   PULSING LIVE DOT
   ============================================================ */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,200,124,.55)}70%{box-shadow:0 0 0 9px rgba(0,200,124,0)}100%{box-shadow:0 0 0 0 rgba(0,200,124,0)}}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--score-good);flex-shrink:0;animation:pulse 2s infinite}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:var(--space-4xl) 0}
.sec-dark{background:var(--dark-gray);color:var(--white)}
.sec-dark .eyebrow{color:var(--ultra)}
.sec-dark .h1{color:#fff}
.sec-dark .lede{color:rgba(255,255,255,.4)}
/* ultra field, everything on it black — the loudest section on the page */
.sec-ultra{background:var(--ultra);color:var(--black)}
.sec-ultra .eyebrow{color:var(--black)}
.sec-ultra .h1{color:var(--black)}
.sec-ultra .lede{color:rgba(0,0,0,.72)}
.sec-ultra .accent-line{background:var(--black)}
.btn-dark{background:var(--black);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.btn-dark:hover{background:var(--dark-gray)}

/* the Guard's field — paper, with vermilion kept for the pen. A full red ground
   between two light sections reads as a slam; red ink on warm paper is the
   thing the section is actually describing. */
.sec-paper{background:#FBEBE8;color:var(--dark-gray)}
.sec-paper .eyebrow{color:var(--vermilion)}
.sec-paper .h1{color:var(--black)}
.sec-paper .lede{color:var(--medium-gray)}

.sec-light{background:var(--white)}
.sec-light .eyebrow{color:#C060D0}
.sec-light .h1{color:var(--dark-gray)}
.sec-light .lede{color:var(--medium-gray)}
.sec-page{background:var(--page-bg)}
.sec-page .eyebrow{color:#C060D0}
.sec-page .h1{color:var(--dark-gray)}
.sec-page .lede{color:var(--medium-gray)}

/* ============================================================
   HEADER — Frosted Glass Nav (from SMB site)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;padding-top:14px;transition:padding .2s}
.nav{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(52,52,63,.08);border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:10px 12px 10px 18px;transition:box-shadow .2s,background .2s}
.site-header.scrolled{padding-top:8px}
.site-header.scrolled .nav{background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand svg{height:28px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:var(--space-lg)}
.nav-links a{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--medium-gray);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--azure)}
.nav-right{display:flex;align-items:center;gap:var(--space-md)}
.spots-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--dark-gray);background:rgba(0,200,124,.1);border:1px solid rgba(0,200,124,.25);border-radius:var(--radius-full);padding:6px 12px}
.spots-pill b{font-weight:600}
/* products dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{cursor:pointer;display:flex;align-items:center;gap:4px}
.nav-dropdown-trigger::after{content:"\e5cf";font-family:'Material Symbols Outlined';font-size:16px;transition:transform .2s}
.nav-dropdown:hover .nav-dropdown-trigger::after{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;opacity:0;pointer-events:none;transition:opacity .2s}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;pointer-events:auto}
.nav-dropdown-inner{background:#fff;border:1px solid var(--lightest-gray);border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(0,0,0,.1);padding:var(--space-md);min-width:250px;max-width:320px}
.nav-dropdown-inner a{display:block;padding:10px 14px;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--dark-gray);text-decoration:none;transition:background .15s;line-height:1.4}
.nav-dropdown-inner a:hover{background:var(--page-bg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:var(--space-3xl) 0 var(--space-4xl)}
.hero .h1{font-size:clamp(40px,6vw,72px);line-height:.92}
.hero .cta-row{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center;margin-top:var(--space-xl)}
.spots{margin-top:var(--space-xl);display:flex;flex-direction:column;gap:10px}
.spots-head{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--dark-gray)}
.spots-head b{font-weight:600}
/* Seat indicators — radio-style dots, one per spot in the cohort */
.spots-bar{display:flex;gap:10px;align-items:center}
.spots-bar i{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--light-gray);background:transparent;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,box-shadow .2s}
.spots-bar i.filled{border-color:var(--ultra);background:var(--ultra);box-shadow:0 0 0 3px rgba(239,161,255,.2)}
.spots-bar i.filled::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--dark-gray)}

/* on the ultra field the seat dots invert — pink on pink reads as nothing */
.sec-ultra .spots-bar i{border-color:rgba(0,0,0,.3)}
.sec-ultra .spots-bar i.filled{background:var(--black);border-color:var(--black);
  box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.sec-ultra .spots-bar i.filled::after{background:var(--ultra)}

/* ---- availability -----------------------------------------------------------
   The month's capacity, stated once and plainly: the claim on the left, the
   thing you act on — price, seats left, CTA — boxed on the right. */
.avail{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-3xl);
  align-items:center}
.avail-copy{font-size:16px;line-height:1.6;color:rgba(0,0,0,.72);max-width:34em;
  margin-top:var(--space-lg)}
.avail-card{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.12);
  border-radius:var(--radius-lg);padding:var(--space-xl);display:grid;
  gap:var(--space-lg);justify-items:center;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.10)}
.avail-price{display:grid;gap:4px}
.avail-price b{font-family:var(--font-sans);font-size:clamp(38px,5vw,54px);font-weight:700;
  line-height:1;letter-spacing:-1.5px;color:var(--black)}
.avail-price span{font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;color:rgba(0,0,0,.55)}
.avail-then{font-size:13.5px;line-height:1.5;color:rgba(0,0,0,.7);margin-top:-8px}
.avail-then b{font-weight:700;color:var(--black)}
.avail-seats{display:grid;gap:10px;justify-items:center;padding:var(--space-lg) 0;
  border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);
  width:100%}
.avail-count{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(0,0,0,.6)}
.avail-count b{font-weight:700;color:var(--black)}
@media(max-width:860px){
  .avail{grid-template-columns:1fr;gap:var(--space-2xl)}
}

/* ============================================================
   LOGO CAROUSEL
   ============================================================ */
.logo-carousel{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:var(--space-2xl) 0;overflow:hidden}
.logo-carousel .eyebrow{text-align:center;margin-bottom:var(--space-xl);color:var(--medium-gray)}
.logo-track{display:flex;gap:var(--space-3xl);animation:marquee 60s linear infinite;width:max-content}
/* Uniform optical box — logos range from 0.54:1 to 10.15:1 */
.logo-track img{width:170px;height:64px;object-fit:contain;object-position:center;flex:none;opacity:.4;filter:grayscale(100%);transition:opacity .3s,filter .3s;mix-blend-mode:multiply}
.logo-track img:hover{opacity:.8;filter:grayscale(0%)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats{background:var(--page-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);padding:var(--space-2xl) 0}
.stat{text-align:center}
.stat .n{font-family:var(--font-serif);font-weight:400;font-size:clamp(24px,3vw,34px);color:var(--dark-gray);line-height:1;text-transform:uppercase}
.stat .l{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--medium-gray);margin-top:10px}
.stat + .stat{border-left:1px solid var(--border-color)}

/* ============================================================
   BENTO PRODUCT GRID
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);margin-top:var(--space-2xl)}
.bento-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-xl);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;gap:var(--space-md)}
.bento-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.bento-card.featured{grid-column:1 / -1}
.bento-card.featured:hover{border-color:var(--vermilion)}
.bento-card:nth-child(2):hover{border-color:var(--azure)}
.bento-card:nth-child(3):hover{border-color:var(--ultra)}
.bento-card:nth-child(4):hover{border-color:var(--violet)}
.bento-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.bento-icon.audit{background:rgba(247,70,70,.14);color:var(--vermilion)}
.bento-icon.os{background:rgba(0,106,254,.14);color:var(--azure)}
.bento-icon.challenge{background:rgba(239,161,255,.14);color:#C060D0}
.bento-icon.guide{background:rgba(141,100,255,.14);color:var(--violet)}
.bento-card h3{font-family:var(--font-sans);font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--dark-gray)}
.bento-card p{font-size:15px;line-height:1.55;color:var(--medium-gray)}
.bento-link{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;margin-top:auto;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.bento-card:hover .bento-link{color:var(--azure)}

/* ============================================================
   GUARANTEE SPLASH (from SMB site)
   ============================================================ */
.guarantee-splash{background:var(--dark-gray);position:relative;overflow:hidden;text-align:center}
.guarantee-splash .wrap{position:relative;z-index:1}
.guarantee-splash::before{content:"";position:absolute;top:50%;left:50%;width:860px;height:860px;max-width:135%;transform:translate(-50%,-56%);background:radial-gradient(circle,rgba(0,106,254,.24) 0%,rgba(239,161,255,.14) 38%,transparent 68%);pointer-events:none}
.gsplash-k{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ultra);margin-bottom:var(--space-lg)}
.gseal-wrap{display:flex;justify-content:center;margin-bottom:var(--space-xl)}
.gseal-wrap .dod-seal{width:clamp(190px,27vw,270px);height:clamp(190px,27vw,270px)}
.gsplash-h{font-family:var(--font-serif);font-weight:400;text-transform:uppercase;font-size:clamp(36px,6.2vw,76px);line-height:1.03;color:#fff;margin-bottom:var(--space-lg);text-wrap:balance}
.gsplash-sub{font-size:clamp(16px,2vw,19px);line-height:1.6;color:rgba(255,255,255,.55);max-width:46ch;margin:0 auto}
.dod-spin{transform-box:fill-box;transform-origin:center;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal-ring{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite}
.dod-seal{filter:drop-shadow(0 12px 30px rgba(141,100,255,.22))}

/* ============================================================
   QUALIFIER — WHO THIS IS FOR
   ============================================================ */
.qualifier-list{list-style:none;margin-top:var(--space-2xl);display:grid;gap:var(--space-md);max-width:680px}
.qualifier-list li{display:flex;gap:var(--space-md);align-items:flex-start;font-size:17px;line-height:1.5;color:var(--dark-gray)}
.qualifier-list li::before{content:"\e5ca";font-family:'Material Symbols Outlined';font-size:22px;color:var(--azure);flex-shrink:0;margin-top:2px}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-lg);margin-top:var(--space-2xl)}
.testimonial-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md)}
.testimonial-card blockquote{font-size:16px;line-height:1.6;color:var(--dark-gray);font-style:italic;margin:0}
.testimonial-card blockquote::before{content:"\201C";font-family:var(--font-serif);font-size:48px;color:var(--ultra);line-height:0;position:relative;top:18px;margin-right:4px}
.testimonial-meta{display:flex;align-items:center;gap:var(--space-md);margin-top:auto}
.testimonial-meta .avatar{width:44px;height:44px;border-radius:50%;background:var(--lightest-gray)}
.testimonial-meta .name{font-weight:600;font-size:14px;color:var(--dark-gray)}
.testimonial-meta .title{font-size:13px;color:var(--medium-gray)}

/* ============================================================
   PODCAST
   ============================================================ */
.podcast-section{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2xl);align-items:center}
.podcast-art{width:200px;height:200px;border-radius:var(--radius-lg);background:var(--lightest-gray);flex-shrink:0}
.podcast-links{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
.podcast-links a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--dark-gray);text-decoration:none;padding:10px 18px;border:1px solid var(--lightest-gray);border-radius:var(--radius-full);transition:all .2s}
.podcast-links a:hover{border-color:var(--azure);color:var(--azure)}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter{text-align:center;max-width:560px;margin:0 auto}
.news-form{display:flex;gap:8px;max-width:400px;margin:var(--space-xl) auto 0}
.news-form input{flex:1;min-width:0;height:48px;background:var(--card-bg);border:1px solid var(--lightest-gray);border-radius:8px;padding:0 16px;color:var(--dark-gray);font-family:var(--font-sans);font-size:14px}
.news-form input::placeholder{color:var(--light-gray)}
.news-form input:focus{outline:none;border-color:var(--azure)}

/* ============================================================
   SOCIAL
   ============================================================ */
.social-grid{display:flex;justify-content:center;gap:var(--space-lg);margin-top:var(--space-2xl)}
.social-card{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--lightest-gray);color:var(--medium-gray);text-decoration:none;transition:all .2s}
.social-card:hover{border-color:var(--azure);color:var(--azure);background:rgba(0,106,254,.06)}
.social-card svg{width:24px;height:24px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:760px;margin:var(--space-2xl) auto 0}
.faq details{border-bottom:1px solid var(--border-color);padding:var(--space-lg) 0}
.faq summary{font-family:var(--font-sans);font-weight:600;font-size:17px;letter-spacing:-.25px;color:var(--dark-gray);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\e145";font-family:'Material Symbols Outlined';font-size:22px;color:var(--azure);transition:transform .2s;flex-shrink:0;font-variation-settings:'FILL' 1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:var(--space-md);color:var(--medium-gray);font-size:14px}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{background:var(--black);text-align:center;padding:clamp(80px,12vh,140px) 0}
.final-cta .h1{color:#fff;font-size:clamp(28px,4.5vw,56px);text-wrap:balance}
.final-cta .lede{color:rgba(255,255,255,.45);margin:var(--space-lg) auto 0}
.final-cta .cta-row{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;margin-top:var(--space-xl)}

/* ============================================================
   FOOTER (from SMB site)
   ============================================================ */
.mega-footer{position:relative;overflow:hidden;background:var(--dark-gray);border-top:1px solid rgba(255,255,255,.1);padding:var(--space-3xl) 0 0}
.foot-top{display:flex;flex-wrap:wrap;gap:var(--space-2xl) var(--space-4xl)}
.foot-col h4{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--medium-gray);margin-bottom:var(--space-md)}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--medium-gray);border:1px solid rgba(255,255,255,.18);transition:all .2s}
.socials a:hover{color:#fff;border-color:var(--azure);background:rgba(0,106,254,.14)}
.socials svg{width:18px;height:18px}
.foot-credit{text-align:center;padding:var(--space-xl) 0 var(--space-2xl);display:flex;flex-direction:column;gap:12px;align-items:center}
.foot-credit .links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.foot-credit a{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.72);text-decoration:none}
.foot-credit a:hover{color:#fff}
.foot-credit .sig{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--medium-gray)}
.foot-credit .sig .pulse-dot{display:inline-block;vertical-align:middle;margin-right:9px}
.foot-credit .os-logo{display:inline-block;vertical-align:middle;margin:0 4px}
.foot-credit .os-logo svg{height:24px;width:auto;display:block}
.foot-credit .copy{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.foot-mega{line-height:0;margin-bottom:0;padding-top:var(--space-lg)}
.foot-mega-svg{width:100%;height:auto;display:block}

/* ============================================================
   UPDG POPUP
   ============================================================ */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.popup-overlay.active{opacity:1;pointer-events:auto}
.popup{background:var(--white);border-radius:var(--radius-lg);padding:var(--space-2xl);max-width:480px;width:90%;position:relative;text-align:center}
.popup-close{position:absolute;top:var(--space-md);right:var(--space-md);background:none;border:none;cursor:pointer;color:var(--medium-gray);font-size:24px;line-height:1;transition:color .2s}
.popup-close:hover{color:var(--dark-gray)}
.popup .h1{font-size:28px;margin-bottom:var(--space-md)}
.popup p{color:var(--medium-gray);margin-bottom:var(--space-lg)}
.popup .news-form{margin:0 auto}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.aon .ax{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
.ax.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .aon .ax{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .pulse-dot{animation:none}
  .dod-spin,.seal-ring{animation:none}
  .logo-track{animation:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .bento{grid-template-columns:1fr}
  .bento-card.featured{grid-column:auto}
  .podcast-section{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media(max-width:760px){
  .nav-links{display:none}
}
@media(max-width:640px){
  section{padding:var(--space-3xl) 0}
  .hero{padding:var(--space-2xl) 0 var(--space-3xl)}
  .brand svg{height:24px}
  .spots-pill{display:none}
  .lede{font-size:16px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0}
  .stat{padding:var(--space-lg) var(--space-sm)}
  .stat + .stat{border-left:none}
  .stat:nth-child(2){border-left:1px solid var(--border-color)}
  .stat:nth-child(3){grid-column:1 / -1;border-top:1px solid var(--border-color)}
  .testimonial-grid{grid-template-columns:1fr}
  .social-grid{gap:var(--space-md)}
}
/* ============================================================
   PRODUCT PAGE HERO (PDP)
   Shared by the three product pages. The job is to signal "you are
   somewhere else" the moment you land, so it deliberately drops the
   homepage's signatures: no gradient aurora (flat neutral field), and
   the product name is set in the SANS rather than uppercase Mincho.
   Object-led, calm, one price and one action. Ref: VanMoof (Mobbin).
   ============================================================ */
.pdp{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 115% 85% at 62% 42%,#F4F4F4 0%,#E9E9E9 52%,#DEDEDE 100%);
  min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;align-items:safe center;
  padding:clamp(40px,6vh,88px) 0}
.pdp-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;width:100%}

.pdp-kicker{display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--medium-gray);
  margin-bottom:var(--space-lg)}
/* the sans, on purpose — the homepage owns uppercase Mincho display type, so
   using it here would make the product pages read as more homepage */
.pdp-name{font-family:var(--font-sans);font-weight:600;letter-spacing:-1.6px;
  font-size:clamp(32px,4.4vw,58px);line-height:1.03;color:var(--dark-gray);text-wrap:balance}
.pdp-sub{margin-top:var(--space-lg);font-size:17px;line-height:1.6;
  color:var(--medium-gray);max-width:32em}
.pdp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px var(--space-md);
  margin-top:var(--space-xl)}
.pdp-price b{font-family:var(--font-sans);font-weight:600;font-size:clamp(22px,2vw,28px);
  line-height:1;color:var(--dark-gray)}
.pdp-price span{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--light-gray)}
.pdp-actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;
  margin-top:var(--space-lg)}
.pdp-note{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--medium-gray);text-decoration:none;
  border-bottom:1px solid rgba(52,52,63,.28);padding-bottom:2px;transition:border-color .2s}
.pdp-note:hover{border-color:var(--dark-gray)}

/* the product itself, floating on the field — no card, no frame */
.pdp-object{position:relative}
.pdp-object img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 44px 64px rgba(0,0,0,.26)) drop-shadow(0 8px 18px rgba(0,0,0,.10))}

@media(max-width:900px){
  .pdp{min-height:0;padding:clamp(32px,5vh,64px) 0}
  .pdp-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
  .pdp-object{order:-1;max-width:420px;margin:0 auto}
}

/* ============================================================
   PDP — DARK VARIANT + CODE WINDOWS
   For the developer products, the artifact IS the product: the call you
   make and what comes back. Beats a logomark sitting in an empty frame,
   and needs no screenshots. Ref: Stripe, Spade (Mobbin).
   ============================================================ */
.pdp-dark{background:#0C0C10;color:#fff}
.pdp-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 78% 40%,rgba(0,106,254,.20),transparent 62%),
             radial-gradient(ellipse 60% 50% at 12% 78%,rgba(239,161,255,.14),transparent 66%)}
.pdp-dark .pdp-kicker{color:var(--ultra)}
.pdp-dark .pdp-name{color:#fff}
.pdp-dark .pdp-sub{color:rgba(255,255,255,.62)}
.pdp-dark .pdp-price b{color:#fff}
.pdp-dark .pdp-price span{color:rgba(255,255,255,.45)}
.pdp-dark .pdp-note{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.32)}
.pdp-dark .pdp-note:hover{border-bottom-color:#fff}
.pdp-dark .pdp-cohort{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  margin-top:var(--space-md);font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pdp-dark .pdp-cohort b{font-weight:700;color:#fff}
.pdp-dark .spots-bar i{border-color:rgba(255,255,255,.28)}
.pdp-dark .spots-bar i.filled{border-color:var(--ultra);background:var(--ultra)}

/* code window — the call, then what it returns */
.code-win{background:#141419;border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.55)}
.code-win + .code-win{margin-top:var(--space-md)}
.code-win-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.code-win-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.code-win-bar i:first-child{background:rgba(239,161,255,.7)}
.code-win pre{margin:0;padding:18px 20px;overflow-x:auto;
  font-family:var(--font-mono);font-size:13px;line-height:1.75;color:rgba(255,255,255,.82)}
.code-win code{font-family:inherit}
.tok-fn{color:#EFA1FF}
.tok-key{color:#63A4FF}
.tok-str{color:#7BE0A8}
.tok-num{color:#FFC46B}
.tok-mut{color:rgba(255,255,255,.34)}
@media(max-width:900px){
  .code-win pre{font-size:12px;padding:14px 16px}
}

/* ---- chat window — step 3 of the hero demo -------------------------------
   The same chrome as the code windows so it reads as one sequence, but the
   body is a chat transcript: what the person asked, and what came back once
   the assistant had the playbook. Spans both columns under the two windows. */
/* deliberately NOT the code card: lighter lifted surface, rounder corners,
   a soft top edge and an app label instead of terminal traffic lights. */
.chat-win{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.16);border-radius:18px;overflow:hidden;
  box-shadow:0 26px 54px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
.chat-bar{display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
  font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.2px;
  color:rgba(255,255,255,.72)}
.chat-app{display:inline-flex;align-items:center;gap:8px}
.chat-bar .code-win-status{font-size:9.5px}
.chat-body{padding:18px 20px 20px;display:grid;gap:16px}
.chat-row{display:flex;gap:12px;align-items:flex-start}
.chat-row.is-user{justify-content:flex-end}
.chat-bubble{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);
  border-radius:16px 16px 5px 16px;padding:10px 15px;max-width:82%;
  font-size:14px;line-height:1.5;color:#fff;min-height:1.5em}
/* before the ask is typed there is nothing to frame */
.chat-bubble:empty{display:none}
.chat-av{width:26px;height:26px;border-radius:50%;flex:none;margin-top:1px;
  background:linear-gradient(135deg,var(--ultra),var(--azure))}
.chat-av.is-sm{width:15px;height:15px;margin:0}
.chat-msg{min-width:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.82)}
.chat-msg p{margin:0;min-height:1.65em}
.chat-msg b{color:#fff;font-weight:600}
.chat-tool{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  padding:4px 10px;border-radius:var(--radius-full);
  background:rgba(0,106,254,.14);border:1px solid rgba(0,106,254,.28);
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:#63A4FF}
.chat-tool::before{content:"";width:6px;height:6px;border-radius:50%;background:#63A4FF}
.chat-tool[hidden]{display:none}
@media(max-width:900px){
  .chat-body{padding:14px 16px 16px}
  .chat-bubble,.chat-msg{font-size:13px}
}

/* product name set as the real lockup rather than type */
.pdp-logo{line-height:0}
.pdp-logo img{width:min(100%,420px);height:auto;display:block}
@media(max-width:900px){.pdp-logo img{width:min(100%,320px)}}

/* ---- PDP flush-to-top variant ---------------------------------------------
   Pulls the hero up under the sticky nav so the field runs to the very top of
   the page and the nav pill floats on it, rather than sitting on a strip of
   body background above it. Matters on the dark hero, where the seam shows.
   The top padding gives the nav's height back so nothing hides behind it. */
.pdp-flush{margin-top:calc(-1 * var(--nav-h));
  min-height:100vh;min-height:100svh;
  padding-top:calc(var(--nav-h) + clamp(40px,6vh,88px))}
@media(max-width:900px){
  .pdp-flush{min-height:0;padding-top:calc(var(--nav-h) + clamp(32px,5vh,64px))}
}

/* ---- PDP stacked variant --------------------------------------------------
   The logo gets the page to itself before anything else arrives; everything
   below is one idea per row so it can be scanned rather than read. */
.pdp-stack .wrap{text-align:center;width:100%}
.pdp-mark{margin:0 auto;line-height:0}
.pdp-mark img{width:min(76%,300px);height:auto;display:inline-block}
.pdp-line{margin:clamp(24px,3.4vh,40px) auto 0;max-width:34em;
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.60)}
/* ---- flow rail + transcript stage -----------------------------------------
   The demo is one chat window, the way someone would actually meet MessageOS:
   inside the assistant they already use. Fixed footprint, the thread scrolls
   itself, and the rail above names the beat the transcript is on. */
.pdp-demo{display:block;max-width:780px;margin:clamp(22px,3.4vh,40px) auto 0;
  text-align:left}

.flow-rail{display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,1.4vw,14px);margin-bottom:clamp(12px,1.8vh,18px);flex-wrap:wrap}
.flow-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(255,255,255,.34);transition:color .4s}
.flow-tab b{font-weight:500;color:rgba(255,255,255,.26);transition:color .4s}
.flow-tab.is-on{color:#fff}
.flow-tab.is-on b{color:transparent;
  background:linear-gradient(135deg,var(--ultra),#63A4FF);
  -webkit-background-clip:text;background-clip:text}
.flow-sep{width:clamp(14px,3vw,34px);height:1px;flex:none;
  background:rgba(255,255,255,.18)}

/* the window is a real app frame: bar, scrolling thread, composer. Height is
   fixed so the hero never reflows as messages arrive. */
.chat-win.is-app{display:flex;flex-direction:column;
  height:clamp(340px,46vh,438px)}
.chat-conn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.chat-conn::before{content:"";width:6px;height:6px;border-radius:50%;background:#7BE0A8}
.chat-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth;display:grid;gap:18px;align-content:start;
  padding:18px 20px 6px;
  /* what scrolls past the top dissolves instead of cutting against the bar */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);
  mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
.chat-thread::-webkit-scrollbar{width:6px}
.chat-thread::-webkit-scrollbar-track{background:transparent}
.chat-thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
/* each message arrives rather than appears, the way a real thread reads */
.chat-thread .chat-row{animation:mosRowIn .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes mosRowIn{from{opacity:0;transform:translateY(10px)}}

/* the tool call the assistant makes, opened inline in its own answer */
.tool-call{margin:0 0 11px;border-radius:12px;overflow:hidden;
  background:#141419;border:1px solid rgba(255,255,255,.10)}
.tool-head{display:flex;align-items:center;gap:9px;padding:8px 13px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1.3px;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.tool-head::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#63A4FF;flex:none}
.tool-io{margin:0;padding:12px 14px;overflow-x:auto;font-family:var(--font-mono);
  font-size:11.5px;line-height:1.72;color:rgba(255,255,255,.8)}
.tool-io code{font-family:inherit}

/* composer — where the ask is typed before it becomes a bubble */
.chat-composer{flex:none;display:flex;align-items:center;gap:10px;
  margin:8px 14px 14px;padding:10px 10px 10px 15px;border-radius:14px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14)}
.chat-input{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-ph{color:rgba(255,255,255,.32)}
.chat-ph[hidden]{display:none}
.chat-send{width:28px;height:28px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--ultra),var(--azure));
  opacity:.32;transition:opacity .3s ease}
.chat-send svg{width:14px;height:14px}
.chat-composer.is-ready .chat-send{opacity:1}
@media(prefers-reduced-motion:reduce){
  .chat-thread{scroll-behavior:auto}
  .chat-thread .chat-row{animation:none}
}
@media(max-width:860px){
  .chat-win.is-app{height:clamp(330px,62vh,400px)}
  .tool-io{font-size:10.5px;padding:10px 12px}
}
@media(max-width:560px){
  /* a phone cannot scroll a code block it cannot see the edge of: wrap it */
  .tool-io{font-size:10px;white-space:pre-wrap;word-break:break-word;overflow-x:visible}
  .chat-bubble,.chat-msg{font-size:12.5px}
}
.pdp-foot{display:flex;align-items:center;justify-content:center;
  gap:var(--space-md) var(--space-xl);flex-wrap:wrap;margin-top:clamp(26px,4vh,46px)}
.pdp-foot-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(255,255,255,.48)}
.pdp-foot-meta b{font-weight:700;color:rgba(255,255,255,.82)}

/* ---- live demo ------------------------------------------------------------ */
.code-win-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.34)}
.code-win-status::before{content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.24)}
.code-win-status[data-state="scoring"]{color:#FFC46B}
.code-win-status[data-state="scoring"]::before{background:#FFC46B;animation:mosBlink .8s steps(2,start) infinite}
.code-win-status[data-state="done"]{color:#7BE0A8}
.code-win-status[data-state="done"]::before{background:#7BE0A8}
@keyframes mosBlink{to{opacity:.25}}
.caret{display:inline-block;width:7px;height:1.05em;vertical-align:-.18em;margin-left:1px;
  background:var(--ultra);animation:mosCaret 1s steps(2,start) infinite}
.caret[hidden]{display:none}
@keyframes mosCaret{to{opacity:0}}
/* verdict colour follows the score, so a bad line reads as a bad line */
.is-bad{color:#FF9F6B !important}
.is-good{color:#7BE0A8 !important}
@media(prefers-reduced-motion:reduce){
  .caret,.code-win-status::before{animation:none}
}

/* seat dots sit inline with the meta line */
.pdp-foot-meta{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdp-dark .pdp-foot-meta .spots-bar i{border-color:rgba(255,255,255,.28)}
.pdp-dark .pdp-foot-meta .spots-bar i.filled{border-color:var(--ultra);background:var(--ultra)}

/* ============================================================
   PRODUCT UI VISUALS
   Faithful miniatures of the real MessageOS screens, rebuilt in HTML so
   they stay crisp and responsive. Everything here comes from the app:
   the light-theme tokens are [data-theme="light"] in frontend/src/index.css
   (#fff surfaces, #f9fbfd containers, #0e0f0f / #7a7d7e text); the seven
   key-message dimensions and hexes are from utils/messageos/
   reportDimensions.js; score bands from utils/messageos/scoreUtils.js
   (>=76 azure, >=55 amber, else red). Figures are illustrative.
   ============================================================ */
.uiv{background:#fff;border:1px solid #E6E8EC;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 14px 34px rgba(14,15,15,.08)}
.uiv-head{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;
  padding:16px 18px;background:#F9FBFD;border-bottom:1px solid #E6E8EC}
.uiv-title{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:#0E0F0F}
.uiv-score{font-family:var(--font-sans);font-size:30px;font-weight:700;line-height:1}
.uiv-body{padding:14px 18px 18px}
/* score bands, straight from scoreUtils.js */
.s-hi{color:#006AFE}.s-mid{color:#D89400}.s-lo{color:#F74646}

/* ---- what you get (Message Guard) ------------------------------------------ */
.inc{max-width:820px;margin:var(--space-2xl) auto 0;display:grid;gap:var(--space-xl)}
.inc-item{display:grid;grid-template-columns:52px 1fr;gap:var(--space-lg);align-items:start}
.inc-num{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(247,70,70,.1);color:var(--vermilion);
  font-family:var(--font-sans);font-weight:900;font-size:19px}
.inc-item h3{font-size:19px;font-weight:700;margin-bottom:6px;line-height:1.3}
.inc-item p{color:var(--medium-gray);font-size:15px;line-height:1.6}

/* ---- scoring: three marks, seven dimensions ------------------------------- */
/* the marks stay as cards — three of them, each a thing you can be given */
.scale{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);
  max-width:820px;margin:var(--space-2xl) auto 0}
.scale-item{display:grid;gap:9px;justify-items:start;padding:15px 17px;
  border-radius:11px;background:#fff;border:1px solid rgba(247,70,70,.16);
  box-shadow:0 10px 26px rgba(247,70,70,.14)}
.scale-item p{font-size:13px;line-height:1.5;color:var(--medium-gray)}

/* the dimensions are a sentence, so they are set as one: seven fragments that
   read straight through, each carrying the dimension it is scored under */
.spine-lead{margin:var(--space-3xl) auto var(--space-lg);text-align:center;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--medium-gray)}
.spine{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:26px clamp(14px,2.4vw,26px);max-width:940px;margin:0 auto}
.spine-part{display:grid;gap:3px;position:relative}
.spine-key{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--vermilion)}
.spine-say{font-size:clamp(19px,2.3vw,27px);font-weight:700;line-height:1.15;
  letter-spacing:-.4px;color:var(--black)}
/* the pen: each fragment underscored the way a strategist would mark it */
.spine-part::after{content:"";height:2px;border-radius:1px;background:rgba(247,70,70,.7);
  margin-top:5px}
@media(max-width:640px){
  .scale{grid-template-columns:1fr}
  .inc-item{grid-template-columns:40px 1fr;gap:var(--space-md)}
  .inc-num{width:40px;height:40px;border-radius:11px;font-size:15px}
  .spine{justify-content:flex-start;gap:12px 16px}
}

/* ---- fit table ------------------------------------------------------------- */
.fit{max-width:760px;margin:var(--space-2xl) auto 0}
.fit table{width:100%;border-collapse:collapse}
.fit th{padding:0 0 12px;text-align:left;border-bottom:1px solid var(--lightest-gray);
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1.3px;
  text-transform:uppercase;color:#9CA3AF}
.fit th:last-child{text-align:right}
.fit td{padding:15px 0;border-bottom:1px solid #EEF0F3;font-size:15px;line-height:1.5;
  color:var(--dark-gray)}
.fit td:last-child{text-align:right;padding-left:var(--space-lg);white-space:nowrap}
.fit tr:last-child td{border-bottom:0}
.fit-yes{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:var(--radius-full);background:rgba(0,200,124,.12);color:#009159;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase}
.fit-yes::before{content:"\2713";font-size:11px}
.fit-no{display:inline-flex;align-items:center;gap:6px;color:var(--azure);
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(0,106,254,.35);
  padding-bottom:2px;transition:border-color .2s}
.fit-no:hover{border-color:var(--azure)}
.fit-no::after{content:"\2192"}
@media(max-width:560px){
  .fit td,.fit th{font-size:14px}
  .fit td:last-child{padding-left:var(--space-md)}
}

/* ---- workshop dialog (MessageOS timeline) ----------------------------------
   "Learn more" opens over whatever you were reading, so the answer is never
   parked at the bottom of the section. Light surface, one short line per item,
   everything visible at once — an explainer, not a document. */
.tl-more{margin-top:var(--space-md);appearance:none;border:0;background:transparent;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--azure);transition:gap .2s}
.tl-more::after{content:"\2192";transition:transform .2s}
.tl-more:hover{gap:10px}
.tl-more:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:3px}

.wsm{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--space-lg)}
.wsm[hidden]{display:none}
.wsm-scrim{position:absolute;inset:0;background:rgba(14,15,15,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:wsmFade .2s ease}
.wsm-dialog{position:relative;width:min(760px,100%);max-height:86vh;overflow-y:auto;
  background:#fff;border-radius:18px;padding:clamp(22px,3vw,32px);
  box-shadow:0 40px 90px rgba(14,15,15,.35);animation:wsmRise .24s cubic-bezier(.2,.7,.3,1)}
.wsm-dialog:focus{outline:none}
@keyframes wsmFade{from{opacity:0}}
@keyframes wsmRise{from{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){
  .wsm-scrim,.wsm-dialog{animation:none}
}
.wsm-head{display:flex;align-items:center;gap:var(--space-md)}
.wsm-day{flex:none;font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:#0E0F0F;background:var(--ultra);border-radius:var(--radius-full);
  padding:5px 11px}
.wsm-head h3{flex:1;min-width:0;font-size:clamp(19px,2.2vw,24px);font-weight:700;color:#0E0F0F}
.wsm-close{appearance:none;border:0;background:#F1F3F6;color:#34343F;cursor:pointer;
  width:30px;height:30px;border-radius:50%;font-size:18px;line-height:1;flex:none;
  transition:background .2s}
.wsm-close:hover{background:#E2E5EA}
.wsm-lead{margin-top:12px;max-width:58ch;font-size:14.5px;line-height:1.6;color:var(--medium-gray)}
.wsm-label{margin:var(--space-xl) 0 12px;font-family:var(--font-mono);font-size:9.5px;
  font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:#9CA3AF}
.wsm-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px clamp(16px,2.6vw,28px)}
.wsm-pick{appearance:none;border:0;background:none;cursor:pointer;padding:0;text-align:left}

/* Day 1 — the levers, as the toggles they are everywhere else on the site.
   Brand hues exactly: ultra, violet, azure. The knob goes dark so an ultra
   track still reads as a switch on a white surface. */
.wsm-lever{--lv:var(--ultra);display:flex;align-items:center;gap:10px;padding:6px 0;
  font-family:var(--font-mono);font-size:clamp(11px,1vw,13px);font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--light-gray);
  transition:color .25s ease}
.wsm-lever.lv-product{--lv:var(--ultra)}
.wsm-lever.lv-audience{--lv:var(--violet)}
.wsm-lever.lv-channel{--lv:var(--azure)}
.wsm-lever.is-on{color:var(--dark-gray)}
.wsm-switch{position:relative;width:38px;height:21px;flex:none;border-radius:var(--radius-full);
  background:#E2E5EA;transition:background .25s ease,box-shadow .25s ease}
.wsm-switch::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(14,15,15,.25);
  transition:left .25s cubic-bezier(.16,.8,.24,1),background .25s ease}
.wsm-lever.is-on .wsm-switch{background:var(--lv);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lv) 22%,transparent)}
.wsm-lever.is-on .wsm-switch::after{left:20px;background:var(--dark-gray)}
.wsm-lever:focus-visible{outline:2px solid var(--lv);outline-offset:4px;border-radius:var(--radius-sm)}

/* Day 2 — the seven, set as the sentence they make, one of them lit */
.wsm-frag{display:grid;gap:3px}
.wsm-frag-key{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--light-gray);transition:color .2s}
.wsm-frag-say{font-size:clamp(15px,1.7vw,19px);font-weight:700;line-height:1.15;
  letter-spacing:-.2px;color:var(--light-gray);transition:color .2s}
.wsm-frag::after{content:"";height:2px;border-radius:1px;margin-top:5px;background:#E6E8EC;
  transition:background .2s}
.wsm-frag:hover .wsm-frag-say{color:var(--medium-gray)}
.wsm-frag.is-on .wsm-frag-say{color:#0E0F0F}
.wsm-frag.is-on .wsm-frag-key{color:#C060D0}
.wsm-frag.is-on::after{background:linear-gradient(90deg,var(--ultra),var(--azure))}
.wsm-frag:focus-visible{outline:2px solid var(--azure);outline-offset:4px;border-radius:4px}

/* the note the pick populates — fixed floor so switching never jumps the page */
.wsm-detail{margin-top:var(--space-xl);padding-top:var(--space-lg);
  border-top:1px solid #EEF0F3;min-height:118px}
.wsm-detail-head{font-size:16px;font-weight:700;color:#0E0F0F;margin-bottom:6px}
.wsm-detail-body{font-size:14.5px;line-height:1.6;color:var(--dark-gray);max-width:62ch}
.wsm-eg{margin-top:10px;font-family:var(--font-mono);font-size:11.5px;line-height:1.55;
  color:var(--medium-gray)}
.wsm-eg span{display:block;margin-bottom:3px;font-size:9px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--light-gray)}

.wsm-out{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid #EEF0F3;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:var(--medium-gray)}
@media(max-width:640px){
  .wsm-body.is-seven .wsm-rows{grid-template-columns:1fr}
  .wsm-dialog{padding:20px}
}

/* ---- audit widget (Message Guard hero) -------------------------------------
   The Audit Conductor's ChannelPostCard as a click-through. Both columns are
   labelled, and the piece carries a platform stamp above it, so the left side
   reads as "your post, as it ran" rather than as an illustration. Rows are
   cards with a twirl, because a flat row does not look like it opens.
   Score bands are the audit engine's: 1 missing, 2 weak, 3 robust. */
.aud{display:block;max-width:920px;margin:clamp(22px,3.4vh,40px) auto 0;text-align:left}
.aud-win{background:#FAFAFA;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.5)}

/* channel tabs, each stamped with the platform it audits */
.aud-bar{display:flex;align-items:center;gap:3px;padding:8px 10px;
  background:#F1F3F6;border-bottom:1px solid #E6E8EC;flex-wrap:wrap}
.aud-bar-label{margin-right:8px;font-family:var(--font-mono);font-size:9px;font-weight:500;
  letter-spacing:1.4px;text-transform:uppercase;color:#9CA3AF}
.aud-tab{appearance:none;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:8px;font-family:var(--font-mono);font-size:10.5px;
  font-weight:500;letter-spacing:1.1px;text-transform:uppercase;color:#858591;
  transition:background .18s,color .18s}
.aud-ico{width:13px;height:13px;flex:none;opacity:.55;transition:opacity .18s}
.aud-tab:hover{background:#E6E8EC;color:#0E0F0F}
.aud-tab:hover .aud-ico{opacity:.9}
.aud-tab.is-on{background:#fff;color:#0E0F0F;box-shadow:0 1px 2px rgba(14,15,15,.12)}
.aud-tab.is-on .aud-ico{opacity:1}
.aud-tab:focus-visible{outline:2px solid var(--azure);outline-offset:1px}

.aud-body{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.aud-left{background:#EDEFF2;border-right:1px solid #E6E8EC;padding:14px 18px 20px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.aud-panel{padding:14px 20px 18px;background:#fff;min-width:0}
/* one label per column, so neither side has to be guessed at */
.aud-col-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1.3px;
  text-transform:uppercase;color:#9CA3AF}
.aud-col-head em{font-style:normal;letter-spacing:.4px;text-transform:none;color:#C2C2C5}

/* the stamp: platform, which piece, and how the piece scored overall */
/* stamp and post travel together, centred as one group */
.aud-stack{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.aud-src{display:flex;align-items:center;gap:10px}
.aud-src-mark{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  color:#fff}
.aud-src-mark svg{width:14px;height:14px}
.aud-src-id{flex:1;min-width:0;display:grid}
.aud-src-id b{font-size:12.5px;font-weight:600;color:#0E0F0F}
.aud-src-id em{font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.4px;
  color:#858591}
.aud-piece{display:flex;justify-content:center;min-width:0}

/* rows read as cards that open */
.aud-dims{display:grid;gap:6px;margin-top:12px}
.aud-dim{border:1px solid #EDEFF2;border-radius:9px;background:#fff;transition:border-color .18s}
.aud-dim:hover{border-color:#DCE0E6}
.aud-dim.is-open{border-color:#D6DAE0;background:#FCFCFD}
.aud-dim-btn{width:100%;appearance:none;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left}
.aud-dim-btn:focus-visible{outline:2px solid var(--azure);outline-offset:-2px;border-radius:9px}
.aud-dim-name{flex:1;min-width:0;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.7px;text-transform:uppercase;color:#858591;transition:color .18s}
.aud-dim-btn:hover .aud-dim-name,.aud-dim.is-open .aud-dim-name{color:#0E0F0F}
.aud-pill{flex:none;font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.9px;text-transform:uppercase;padding:3px 10px;
  border-radius:var(--radius-full)}
/* the three bands, straight from the presentation deck's SCORE_STYLES */
.aud-pill[data-band="1"]{background:#FDE8E8;color:#F74646}
.aud-pill[data-band="2"]{background:#FFF8E1;color:#B98600}
.aud-pill[data-band="3"]{background:#E6F4EA;color:#009159}
/* a plus that becomes a minus — the clearest "this opens" there is */
.aud-twirl{position:relative;width:14px;height:14px;flex:none}
.aud-twirl::before,.aud-twirl::after{content:"";position:absolute;background:#9CA3AF;
  border-radius:1px;transition:transform .22s ease,opacity .22s ease}
.aud-twirl::before{top:6px;left:1px;width:12px;height:2px}
.aud-twirl::after{left:6px;top:1px;width:2px;height:12px}
.aud-dim.is-open .aud-twirl::after{transform:rotate(90deg);opacity:0}
.aud-dim-btn:hover .aud-twirl::before,.aud-dim-btn:hover .aud-twirl::after{background:#0E0F0F}
.aud-note{display:none;padding:0 12px 12px}
.aud-dim.is-open .aud-note{display:block}
.aud-note p{margin:0;font-size:13px;line-height:1.6;color:#34343F}

/* ---- channel replicas ---- */
.pv{width:100%;font-size:13px;color:#0E0F0F}
.pv-web{background:#fff;border:1px solid #E6E8EC;border-radius:8px;overflow:hidden;
  box-shadow:0 8px 22px rgba(14,15,15,.10)}
.pv-chrome{display:flex;align-items:center;gap:5px;padding:8px 11px;background:#F1F3F6;
  border-bottom:1px solid #E6E8EC}
.pv-chrome i{width:7px;height:7px;border-radius:50%;background:#D6D9DE;flex:none}
.pv-chrome span{margin-left:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.6px;
  color:#9CA3AF}
.pv-page{padding:16px 18px 20px;display:grid;gap:10px;justify-items:start}
.pv-nav{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pv-nav b{font-size:12px;font-weight:700}
.pv-nav em{font-style:normal;font-size:10px;color:#9CA3AF}
.pv-page h3{font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.3px}
.pv-page p{font-size:12px;line-height:1.55;color:#6B7280;max-width:34ch}
.pv-btn{background:#0E0F0F;color:#fff;border-radius:6px;padding:7px 14px;font-size:11px;
  font-weight:600}
.pv-social{background:#fff;border:1px solid #E6E8EC;border-radius:10px;padding:14px 16px 16px;
  display:grid;gap:9px;box-shadow:0 8px 22px rgba(14,15,15,.10)}
.pv-who{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.pv-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-style:normal;font-weight:700;font-size:14px}
.pv-who span{display:grid}
.pv-who b{font-size:12.5px;font-weight:600}
.pv-who em{font-style:normal;font-size:10.5px;color:#9CA3AF}
.pv-social p{font-size:12.5px;line-height:1.55}
.pv-social p b{font-weight:600}
.pv-mut{color:#9CA3AF}
/* stand-in for the image on an image-first channel */
.pv-shot{height:96px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#E9ECF1,#DDE2EA)}
.pv-shot span{font-family:var(--font-mono);font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:#9CA3AF}

@media(max-width:860px){
  .aud-body{grid-template-columns:1fr}
  .aud-left{border-right:0;border-bottom:1px solid #E6E8EC}
}
@media(max-width:560px){
  /* four channels will not sit on one phone line, so let the row scroll
     rather than wrap into a block of chips */
  .aud-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;padding:7px 8px}
  .aud-bar::-webkit-scrollbar{display:none}
  .aud-bar-label{display:none}
  .aud-tab{padding:7px 10px;font-size:10px;letter-spacing:.8px;flex:none}
  .aud-left{padding:12px 14px 16px;gap:10px}
  .aud-panel{padding:12px 14px 16px}
  .aud-src-id b{font-size:12px}
  .aud-dim-btn{padding:9px 11px;gap:8px}
  .aud-dim-name{font-size:9.5px;letter-spacing:.5px}
  .aud-pill{font-size:9px;padding:3px 8px;letter-spacing:.6px}
  .aud-note p{font-size:12.5px}
  .pv-page h3{font-size:17px}
}

/* ---- mobile nav ------------------------------------------------------------
   Below the breakpoint the links and the CTA collapse into one hamburger; the
   panel is built from the nav that is already on the page (nav.js). */
/* the products sit next to the wordmark now, with the CTA pushed to the end */
.nav-links{margin-right:auto}
.nav-toggle{display:none;appearance:none;border:0;background:transparent;cursor:pointer;
  width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;
  flex:none;transition:background .2s}
.nav-toggle:hover{background:rgba(52,52,63,.07)}
.nav-toggle:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.nav-bars{position:relative;display:block;width:18px;height:14px}
.nav-bars i{position:absolute;left:0;top:0;width:18px;height:2px;border-radius:1px;
  background:var(--dark-gray);transform-origin:50% 50%;
  transition:transform .25s cubic-bezier(.2,.7,.3,1)}
/* both bars sit on whole pixels and are drawn identically; only the offset
   differs, so neither one renders heavier than the other */
.nav-bars i:first-child{transform:translateY(3px)}
.nav-bars i:last-child{transform:translateY(9px)}
/* the twirl: two bars become an x */
.nav-toggle.is-open .nav-bars i:first-child{transform:translateY(6px) rotate(45deg)}
.nav-toggle.is-open .nav-bars i:last-child{transform:translateY(6px) rotate(-45deg)}

.nav-menu{display:none}
.nav-menu-group{display:grid;gap:2px;padding:var(--space-md) 0;
  border-bottom:1px solid rgba(52,52,63,.1)}
.nav-menu-label{margin-bottom:6px;font-family:var(--font-mono);font-size:9px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--medium-gray)}
.nav-menu a{display:block;padding:11px 12px;border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--dark-gray);text-decoration:none;line-height:1.4}
.nav-menu a:hover{background:rgba(52,52,63,.06)}
.nav-menu-foot{display:grid;gap:var(--space-md);justify-items:start;
  padding-top:var(--space-lg)}
/* .nav-menu a would otherwise win the colour off the gradient button */
.nav-menu-foot .btn{width:100%;justify-content:center;text-align:center;color:#fff;
  padding:16px 20px;min-height:52px;font-size:12px;letter-spacing:1.4px}
/* the cohort pill hides in the bar on small screens; in the menu there is room,
   and it reads as a pair with the button when it matches its width */
.nav-menu-foot{justify-items:stretch}
.nav-menu-foot .spots-pill{display:flex;width:100%;justify-content:center;
  padding:12px 16px}

@media(max-width:860px){
  .site-header .nav{position:relative;padding:8px 8px 8px 16px}
  .site-header .nav-links{display:none}
  .site-header .nav-right{display:none}
  .site-header .nav-toggle{display:inline-flex}
  .site-header .nav-menu[hidden]{display:none}
  .site-header .nav-menu{display:block;position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(52,52,63,.1);border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.16);padding:var(--space-sm) var(--space-md) var(--space-lg);
    max-height:calc(100vh - var(--nav-h) - 24px);overflow-y:auto;
    animation:navDrop .22s cubic-bezier(.2,.7,.3,1)}
  .site-header .brand svg{height:24px}
  @keyframes navDrop{from{opacity:0;transform:translateY(-8px)}}
  .brand svg{height:24px}
}
@media(prefers-reduced-motion:reduce){
  .nav-menu{animation:none}
  .nav-bars i{transition:none}
}

/* visually-hidden label — lived only in index.html's stylesheet, so any page
   using the shared sheet was rendering its "hidden" labels in full */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- qualification funnel ---------------------------------------------------
   Ported out of guide/index.html so the product page can embed the same form
   rather than a second implementation of it. Both pages load these rules and
   /funnel.js, so the questions only exist once. */

/* ============================================================
   UPDG QUALIFICATION FUNNEL
   Three questions. Everyone lands on /guide/ready; the answers only
   tag the lead as qualified/nurture for later segmentation.
   ============================================================ */
/* The questions ARE the page, so the funnel centres itself in the first screen
   rather than sitting under a stack of intro copy. `safe center` keeps the top
   of the card reachable if the questions ever outgrow a short viewport;
   browsers without it fall back to the plain `center` above. */
.funnel{position:relative;isolation:isolate;
  padding:clamp(24px,4vh,56px) 0;
  min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
.funnel .wrap{max-width:1120px;width:100%}
/* Split rail: the offer stays in view on the left while the form advances on
   the right — one question per screen instead of a wall of four.
   Reference: Ploy, MasterClass (Mobbin). */
.funnel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){
  .funnel-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
  .funnel-pitch{text-align:center;max-width:420px;margin:0 auto}
}
/* capped so "DIFFERENTIATION" — the longest unbreakable word — still fits the
   left column instead of running under the form card */
/* capped so "DIFFERENTIATION" — the longest unbreakable word — still fits the
   left column instead of running under the form card */
.funnel-pitch .h1{font-size:clamp(28px,3.6vw,44px);line-height:.98;margin-bottom:var(--space-xl)}
/* Runs wider than its own column and bleeds left into the page gutter — the
   card is to the right, so the only safe direction to grow is outward-left. */
.funnel-art{width:min(116%,520px);margin:0 0 var(--space-lg) -8%}
/* Gone the moment the grid stacks. Beside the card the cover shot is free
   real estate; above it, it is ~300px of scroll between someone arriving and
   seeing the first question, which is the one thing this page has to get
   right. The headline already says what they are downloading. */
@media(max-width:900px){
  .funnel-art{display:none}
}
/* the stack shot already sits at an angle, so this only nudges it */
.funnel-art img{width:100%;height:auto;display:block;transform:rotate(-3deg);
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.22)) drop-shadow(0 4px 10px rgba(0,0,0,.10))}
@media(prefers-reduced-motion:reduce){.funnel-art img{transform:none}}
.funnel-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--medium-gray)}

.card{position:relative;background:var(--card-bg);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:clamp(24px,3.2vw,40px);box-shadow:0 10px 34px rgba(0,0,0,.07)}

/* progress — a filling rail plus a plain "2 / 4" counter */
.prog{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}
.prog-track{flex:1;height:4px;border-radius:var(--radius-full);background:var(--lightest-gray);overflow:hidden}
.prog-track i{display:block;height:100%;width:25%;border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--ultra),var(--azure));
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.prog-count{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--light-gray);flex:none}
.prog-count b{font-weight:600;color:var(--dark-gray)}

/* one step visible at a time; the rest are removed from the tree entirely */
.step[hidden]{display:none}
.step.is-on{animation:stepIn .4s cubic-bezier(.16,.8,.24,1) both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.back{margin-top:var(--space-lg);background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--medium-gray);transition:color .15s}
.back:hover{color:var(--dark-gray)}
.back[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
  .step.is-on{animation:none}
  .prog-track i{transition:none}
}

/* questions — one per step now, so the title can carry real weight */
.q-title{display:block;font-family:var(--font-sans);font-size:clamp(19px,1.7vw,24px);font-weight:600;
  letter-spacing:-.4px;line-height:1.2;color:var(--dark-gray);margin-bottom:var(--space-lg);
  text-wrap:balance}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.opts.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.opts,.opts.two{grid-template-columns:1fr}}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:13px 16px;border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--card-bg);cursor:pointer;font-size:15px;color:var(--dark-gray);transition:border-color .15s,background .15s,box-shadow .15s;text-align:left;width:100%;font-family:var(--font-sans)}
.opt:hover{border-color:var(--light-gray);background:#FCFCFD}
.opt .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--light-gray);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.opt[aria-checked="true"]{border-color:var(--ultra);background:rgba(239,161,255,.12);box-shadow:0 0 0 3px rgba(239,161,255,.22)}
.opt[aria-checked="true"] .dot{border-color:var(--ultra);background:var(--ultra)}
.opt[aria-checked="true"] .dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--dark-gray)}
.opt:focus-visible{outline:3px solid var(--ultra);outline-offset:2px}

/* contact block — names side by side, email across the bottom */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field-wide{grid-column:1/-1}
@media(max-width:520px){.fields{grid-template-columns:1fr}}
.fields input{width:100%;min-height:52px;background:var(--card-bg);border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);padding:14px 16px;color:var(--dark-gray);
  font-family:var(--font-sans);font-size:16px;transition:border-color .15s,box-shadow .15s}
.fields input::placeholder{color:var(--light-gray)}
.fields input:focus{outline:none;border-color:var(--ultra);box-shadow:0 0 0 3px rgba(239,161,255,.22)}
.fields input[aria-invalid="true"]{border-color:var(--vermilion)}

.err{display:flex;align-items:center;gap:8px;color:var(--vermilion);font-size:14px;margin-top:var(--space-lg)}
.err[hidden]{display:none}  /* .err beats the UA [hidden] rule on specificity without this */
.err .material-symbols-outlined{font-size:20px}
.actions{margin-top:var(--space-xl);display:flex;gap:var(--space-md);flex-wrap:wrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The Turnstile bot check. Lives here rather than in funnels.css for the same
   reason the rest of the card does: /guide/ and the product page that embeds it
   load styles.css only.

   Sits under the fields and above the button, the same slot as .consent, so it
   is dealt with before the click rather than after it. Cloudflare renders a
   fixed 300x65 iframe inside.

   No min-height reserved on purpose. Reserving the space would leave a
   permanent empty gap on any browser that blocks the script — which is exactly
   the browser we least want showing a form that looks half-loaded. :empty also
   collapses the margin, so a blocked widget takes up nothing at all. */
.turnstile{margin-top:var(--space-lg)}
.turnstile:empty{margin-top:0}

/* Short laptop screens: tighten the vertical rhythm. Far less critical now
   that only one question is on screen at a time, but the left rail's artwork
   is what runs long here, so that takes the biggest cut. */
@media(max-height:780px){
  .funnel{padding:clamp(12px,2vh,24px) 0}
  .funnel-pitch .h1{font-size:clamp(24px,3.2vw,38px);margin-bottom:var(--space-lg)}
  .funnel-art{width:min(104%,360px);margin-bottom:var(--space-md)}
  .prog{margin-bottom:var(--space-lg)}
  .card{padding:clamp(20px,2.4vw,30px)}
  .q-title{font-size:18px;margin-bottom:var(--space-md)}
  .opts{gap:8px}
  .opt{min-height:46px;padding:10px 14px;font-size:14px}
  /* font-size stays 16px — anything smaller makes iOS zoom on focus */
  .fields input{min-height:46px;padding:10px 14px}
  .actions{margin-top:var(--space-lg)}
}

/* runs up behind the sticky header so the aurora reaches the top of the frame */
.hero-field{position:absolute;left:0;right:0;top:calc(-1 * var(--nav-h));bottom:0;
  z-index:-1;overflow:hidden;pointer-events:none}
.hero-field i{position:absolute;display:block;border-radius:50%}
.hero-field .f1{width:56vw;height:56vw;min-width:440px;min-height:440px;top:-22%;left:-10%;background:radial-gradient(circle,rgba(239,161,255,.30),rgba(239,161,255,0) 68%);animation:drift1 26s ease-in-out infinite alternate}
.hero-field .f2{width:48vw;height:48vw;min-width:380px;min-height:380px;top:-6%;right:-12%;background:radial-gradient(circle,rgba(0,106,254,.18),rgba(0,106,254,0) 68%);animation:drift2 32s ease-in-out infinite alternate}
.hero-field .f3{width:42vw;height:42vw;min-width:340px;min-height:340px;bottom:-34%;left:32%;background:radial-gradient(circle,rgba(141,100,255,.20),rgba(141,100,255,0) 68%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7%,9%,0) scale(1.14)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-9%,7%,0) scale(.92)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.94)}to{transform:translate3d(-7%,-11%,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hero-field i{animation:none}}

/* embedded on the guide product page: no full-screen centring, and the card
   sits on the dark band rather than on the page ground */
/* the embedded funnel is a destination on the page, not a footnote: it gets a
   full band of its own, and the card holds one height so the band does not
   jump as the questions advance */
.qfunnel{padding:clamp(64px,8vw,112px) 0;min-height:0;display:block}
.qfunnel .funnel-grid{margin:0}
.qfunnel .getform-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--space-3xl);align-items:center}
.qfunnel .card{box-shadow:0 24px 60px rgba(0,0,0,.28);min-height:420px;
  display:flex;flex-direction:column;justify-content:center}
.qfunnel .prog{position:absolute;top:clamp(24px,3.2vw,40px);left:clamp(24px,3.2vw,40px);
  right:clamp(24px,3.2vw,40px);margin:0}
.qfunnel .back{margin-top:var(--space-lg)}
@media(max-width:820px){
  .qfunnel .getform-grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .qfunnel .card{min-height:0}
}

/* ---- legal pages ------------------------------------------------------------
   Long-form prose: one column at a readable measure, tables that scroll rather
   than squeeze, and enough hierarchy to scan by section. */
.legal{background:var(--white);padding:calc(var(--nav-h) + clamp(32px,5vh,64px)) 0 var(--space-4xl)}
.legal .wrap{max-width:860px}
.legal-head{padding-bottom:var(--space-xl);border-bottom:1px solid var(--lightest-gray);
  margin-bottom:var(--space-2xl)}
.legal-head .h1{font-size:clamp(34px,5vw,58px);color:var(--dark-gray);margin-top:var(--space-md)}
.legal-dates{margin-top:var(--space-md);font-family:var(--font-mono);font-size:11px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--medium-gray)}
.legal-dates b{color:var(--dark-gray);font-weight:500}

.legal-body{font-size:16px;line-height:1.7;color:var(--dark-gray)}
.legal-body h2{font-family:var(--font-serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:0;color:var(--black);
  margin:var(--space-3xl) 0 var(--space-md)}
.legal-body h3{font-size:17px;font-weight:700;color:var(--black);
  margin:var(--space-xl) 0 var(--space-sm)}
.legal-body p{margin-bottom:var(--space-md);max-width:68ch}
.legal-body strong{color:var(--black);font-weight:600}
.legal-body ul{margin:0 0 var(--space-md);padding-left:var(--space-lg);max-width:68ch}
.legal-body li{margin-bottom:8px}
.legal-body li::marker{color:var(--light-gray)}
.legal-body hr{border:0;border-top:1px solid var(--lightest-gray);margin:var(--space-2xl) 0}
/* the first rule after the intro would double the header's own rule */
.legal-body > hr:first-child{display:none}

.legal-table{overflow-x:auto;margin:0 0 var(--space-lg);border:1px solid var(--border-color);
  border-radius:var(--radius-md);background:#fff}
.legal-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.legal-table th{text-align:left;padding:12px 16px;background:#F9FBFD;
  border-bottom:1px solid var(--border-color);font-family:var(--font-mono);font-size:10px;
  font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--medium-gray)}
.legal-table td{padding:13px 16px;border-bottom:1px solid #EEF0F3;vertical-align:top;
  line-height:1.55}
.legal-table tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .legal-body{font-size:15px}
  .legal-body h2{margin-top:var(--space-2xl)}
}

/* ---- download button --------------------------------------------------------
   Every button that hands over the guide carries the same mark. */
/* the button says what it does: the arrow drops toward the tray on a slow
   loop, and lands on it when you hover */
.dl-btn{gap:10px}
.dl-ico{display:inline-flex;width:18px;height:18px;flex:none}
.dl-ico svg{width:100%;height:100%;overflow:visible}
.dl-arrow{animation:dlDrop 2.4s cubic-bezier(.5,0,.5,1) infinite;transform-origin:12px 12px}
@keyframes dlDrop{
  0%,62%,100%{transform:translateY(0)}
  74%{transform:translateY(3.5px)}
  86%{transform:translateY(0)}
}
.dl-btn:hover .dl-arrow{animation:dlLand .5s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes dlLand{
  0%{transform:translateY(-2px)}
  55%{transform:translateY(4px)}
  100%{transform:translateY(-2px)}
}
.dl-tray{opacity:.7}
.dl-btn:hover .dl-tray{opacity:1}
@media(prefers-reduced-motion:reduce){
  .dl-arrow,.dl-btn:hover .dl-arrow{animation:none}
}

/* ---- guide capture layout ---------------------------------------------------
   The band that holds the funnel: copy on the left, the card on the right. */
.getform-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-2xl);align-items:center}
@media(max-width:820px){
  .getform-grid{grid-template-columns:1fr;gap:var(--space-lg)}
}
/* the guide page runs fewer sections than the product pages, so each one takes
   more room rather than reading as a stack of short bands */
#inside,#faq{padding-top:clamp(80px,9vw,132px);padding-bottom:clamp(80px,9vw,132px)}

/* ---- what's inside (guide page) --------------------------------------------
   Three cards, each led by a preview of the thing it describes rather than an
   icon standing in for it. */
.ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);
  margin-top:var(--space-3xl)}
.ins-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg);
  padding:var(--space-lg);box-shadow:0 14px 34px rgba(14,15,15,.06)}
.ins-card h3{font-size:19px;font-weight:700;line-height:1.3;margin:6px 0 8px}
.ins-card p{font-size:14px;line-height:1.6;color:var(--medium-gray)}
.ins-meta{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--light-gray)}

/* the preview panel at the top of each card */
.ins-shot{display:grid;gap:8px;align-content:center;min-height:172px;margin-bottom:var(--space-lg);
  padding:var(--space-md);border-radius:12px;background:#F5F7FA;border:1px solid #EDEFF2}

/* 1 — the levers, as levers */
.ins-lever{--lv:var(--ultra);display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:9px;background:#fff;border:1px solid #E6E8EC}
.ins-lever.lv-product{--lv:var(--ultra)}
.ins-lever.lv-audience{--lv:var(--violet)}
.ins-lever.lv-channel{--lv:var(--azure)}
.ins-lever b{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--dark-gray)}
.ins-switch{position:relative;width:30px;height:17px;flex:none;border-radius:var(--radius-full);
  background:var(--lv)}
.ins-switch::after{content:"";position:absolute;top:3px;left:16px;width:11px;height:11px;
  border-radius:50%;background:var(--dark-gray)}

/* 2 — the case, as the numbers that make it */
.ins-bar{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.ins-bar span{font-size:12.5px;font-weight:600;color:#0E0F0F}
.ins-bar b{font-family:var(--font-mono);font-size:11px;color:var(--dark-gray)}
.ins-bar i{grid-column:1 / -1;display:block;height:8px;border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--ultra),var(--azure))}
.ins-bar.is-mut span,.ins-bar.is-mut b{color:var(--medium-gray)}
.ins-bar.is-mut i{background:#DDE1E7}
.ins-shot-cap{margin-top:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.4px;
  color:var(--medium-gray)}

/* 3 — the assistant, as an exchange */
.ins-msg{padding:9px 11px;border-radius:10px;background:#fff;border:1px solid #E6E8EC}
.ins-msg.is-ai{background:rgba(0,106,254,.06);border-color:rgba(0,106,254,.18)}
.ins-msg p{font-size:12.5px;line-height:1.5;color:var(--dark-gray)}

@media(max-width:900px){
  .ins{grid-template-columns:1fr;gap:var(--space-md);margin-top:var(--space-2xl)}
  .ins-shot{min-height:0}
}

/* ---- offer block ------------------------------------------------------------
   The component the homepage runs under the hero: copy on the left, the product
   photographed large on the right, on black. Ported here from index.html's own
   stylesheet so the guide page can use the same block rather than a lookalike.
   (index.html still carries its own copy, which wins every tie; the values are
   identical, so the two agree.) */
.offer{background:var(--black);color:#fff;position:relative;overflow:hidden;
  padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px);
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  /* `safe` keeps the top reachable if the stack ever outgrows a short screen */
  align-items:safe center}
/* brand aurora blooming out from behind the cover */
.offer::before{content:"";position:absolute;right:-4%;top:50%;width:min(940px,90vw);aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(239,161,255,.34) 0%,rgba(141,100,255,.20) 34%,rgba(0,106,254,.12) 54%,transparent 72%)}
.offer .wrap{position:relative;z-index:1;width:100%}
/* col 1 has to fit "DIFFERENTIATE" on one line at the headline's max size,
   which is what sets the 1.25/.75 split and the 62px cap below */
.offer-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--space-2xl);align-items:center}

.offer .eyebrow{color:var(--ultra)}
/* the stock ultra→azure ramp bottoms out too dark on black — lift the blue end */
.offer .grad{background:linear-gradient(90deg,var(--ultra) 0%,#63A4FF 100%);
  -webkit-background-clip:text;background-clip:text}
.offer-headline{font-family:var(--font-serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,62px);line-height:.94;letter-spacing:-.5px;color:#fff;
  margin-bottom:var(--space-md)}
/* the subhead under the display line: says what the reader does with the three */
.offer-sub{font-family:var(--font-sans);font-size:clamp(16px,1.5vw,20px);font-weight:600;
  line-height:1.35;letter-spacing:-.2px;color:#fff;
  margin-bottom:var(--space-xl);max-width:26ch}

/* The three levers — the actual payload of the framework. Borrows the switch
   language from the Differentiation Levers component (Figma → Brand Components
   PRO, node 336:11) but drops the bordered card, which reads clunky at this
   size. These are real controls: flip them and the readout below re-scores,
   so the section argues the point instead of stating it. Real <button
   role="switch"> elements, so Space/Enter and screen readers work for free. */
.lever-toggles{list-style:none;display:flex;flex-wrap:wrap;
  gap:var(--space-md) var(--space-xl);margin-bottom:var(--space-lg)}
.lv-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;
  cursor:pointer;font-family:var(--font-mono);font-size:clamp(11px,1vw,13px);font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--lv);
  transition:color .25s ease}
.lv-btn:focus-visible{outline:3px solid var(--lv);outline-offset:4px;border-radius:var(--radius-sm)}
.lv-switch{position:relative;width:38px;height:21px;flex:none;border-radius:var(--radius-full);
  background:var(--lv);box-shadow:0 0 18px var(--lvg);
  transition:background .25s ease,box-shadow .25s ease}
.lv-switch::after{content:"";position:absolute;top:3px;left:20px;width:15px;height:15px;
  border-radius:50%;background:#fff;transition:left .25s cubic-bezier(.16,.8,.24,1)}
/* off — the lever you are choosing not to pull */
.lv-btn[aria-checked="false"]{color:rgba(255,255,255,.35)}
.lv-btn[aria-checked="false"] .lv-switch{background:rgba(255,255,255,.16);box-shadow:none}
.lv-btn[aria-checked="false"] .lv-switch::after{left:3px;background:rgba(255,255,255,.65)}
/* the component's on-state hues, lifted off their print values so the blue end
   still reads against black */
.lv-product{--lv:#EFA1FF;--lvg:rgba(239,161,255,.45)}
.lv-audience{--lv:#A98BFF;--lvg:rgba(169,139,255,.45)}
.lv-channel{--lv:#63A4FF;--lvg:rgba(99,164,255,.45)}

/* running score — the calculator readout */
.lever-score{display:flex;align-items:baseline;gap:var(--space-md);flex-wrap:wrap;
  margin-bottom:var(--space-xl);min-height:44px}
.lever-score b{font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);
  line-height:1;color:#fff}
.lever-score b span{color:rgba(255,255,255,.32)}
.lever-score-label{font-family:var(--font-mono);font-size:clamp(11px,1vw,13px);font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--score-c);transition:color .3s ease}
.lever-score[data-n="0"]{--score-c:#FF8A8A}
.lever-score[data-n="1"]{--score-c:rgba(255,255,255,.6)}
.lever-score[data-n="2"]{--score-c:#C9A8FF}
.lever-score[data-n="3"]{--score-c:#EFA1FF}
@media(prefers-reduced-motion:reduce){
  .lv-btn,.lv-switch,.lv-switch::after,.lever-score-label{transition:none}
}

.offer-cta{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.offer-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(255,255,255,.45)}

/* Cover breaks the right edge, oversized and tilted. It overflows to the
   RIGHT only (left edge pinned to its column) so it never crowds the type;
   .offer's overflow:hidden does the trimming at the section edge.
   The shots cross-fade, so they stack in one aspect-boxed frame and use
   object-fit:contain — they have different native ratios (768 vs 910 tall). */
/* Sized off the column so the proportions never change, with a vw floor so it
   keeps growing past 1120px — the wrap caps there and the art would otherwise
   stop scaling on large monitors. */
.offer-art{position:relative;width:max(178%,46vw);aspect-ratio:100/86;
  transform:rotate(-7deg) translateZ(0);transform-origin:0 50%}
.offer-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center;opacity:0;transition:opacity 1.1s ease;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.65)) drop-shadow(0 0 90px rgba(239,161,255,.28))}
.offer-art img.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.offer-art img{transition:none}}

@media(max-width:900px){
  .offer-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
  .offer-art{order:-1;width:min(320px,78vw);margin:0 auto;transform:rotate(-5deg)}
  .offer::before{right:-30%;top:22%}
}
@media(prefers-reduced-motion:reduce){.offer-art{transform:none}}


/* the guide page runs this as its hero, where the product should be larger and
   the headline is an h1 rather than a section head */
/* run as a page hero: the field starts under the nav rather than after a strip
   of body background, the stack is tighter, and the columns are evened out so
   the art stops outweighing the words */
/* full screen, starting under the nav: the field runs to the very top of the
   page rather than after a strip of body background */
.offer-hero{margin-top:calc(-1 * var(--nav-h));
  min-height:100vh;min-height:100svh;
  padding-top:calc(var(--nav-h) + clamp(28px,4vh,56px));
  padding-bottom:clamp(48px,6vw,88px)}
.offer-hero .offer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-lg)}
/* the product carries the hero, so it runs half again over its column and the
   overflow sits to the right where there is nothing to collide with */
.offer-hero .offer-art{width:150%;transform:rotate(-6deg);transform-origin:0 50%}
.offer-hero .offer-headline{font-size:clamp(30px,3.9vw,52px)}
@media(max-width:900px){
  .offer-hero .offer-grid{grid-template-columns:1fr}
  .offer-hero .offer-art{width:min(360px,82vw)}
}

/* ---- feature rows (product pages) ------------------------------------------
   Copy beside its visual on desktop; stacked, copy first, on a phone. The
   alternating side is a modifier rather than an inline order, so it can be
   undone at the breakpoint. */
.feat{display:grid;gap:var(--space-3xl);margin-top:var(--space-2xl)}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:center}
.feat-visual{min-width:0}
.feat-visual.is-first{order:-1}
@media(max-width:820px){
  .feat{gap:var(--space-2xl)}
  .feat-row{grid-template-columns:1fr;gap:var(--space-lg)}
  /* every row reads the same way once stacked: what it is, then what it looks
     like. The alternating side is a desktop idea only. */
  .feat-visual,.feat-visual.is-first{order:2}
}

/* ---- report cards ---------------------------------------------------------
   The app stacks these as expandable cards you read top to bottom. Here the
   same figures are cut to be scanned: a header that answers "how are we
   doing" in one number and one sentence, then a body that answers "where"
   without prose — ranked bars for competitors, a matrix for channels.
   Semantics are the shared score tokens, so a colour means one thing in both
   cards; the dimension hues stay in the app where a legend exists. */
.rpt{background:#fff;border:1px solid #E6E8EC;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 14px 34px rgba(14,15,15,.08)}
.rpt-head{padding:20px 22px 18px;background:#F9FBFD;border-bottom:1px solid #E6E8EC;
  display:grid;gap:10px}
.rpt-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.6px;
  text-transform:uppercase;color:#858591}
.rpt-label u{text-decoration:none;color:#C2C2C5;letter-spacing:1.2px}
/* the number is the headline: everything else in the card explains it */
.rpt-score{font-family:var(--font-sans);font-size:46px;font-weight:700;line-height:.9;
  letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.rpt-score i{font-style:normal;font-size:15px;font-weight:500;letter-spacing:0;color:#C2C2C5}
.rpt-verdict{margin:0;font-size:13.5px;line-height:1.45;color:#34343F;max-width:32em}
/* the target is drawn on the bar, not written in a caption */
.rpt-gauge{position:relative;height:8px;border-radius:var(--radius-full);background:#EEF0F3;
  margin-top:2px}
.rpt-fill{display:block;height:100%;border-radius:var(--radius-full)}
.rpt-mark{position:absolute;top:-3px;width:2px;height:14px;border-radius:1px;
  background:#34343F}
.rpt-body{padding:26px 22px 18px}

/* section label + the count the app prints beside it */
.rpt-sub{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:14px;font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:1.4px;text-transform:uppercase;color:#858591}
.rpt-sub span{color:#C2C2C5}

/* ranked competitors — the bar carries the comparison, the tick carries the goal */
.rpt-rank{list-style:none;display:grid;gap:14px}
.rpt-rank li{display:grid;grid-template-columns:1fr 40px;align-items:baseline;
  column-gap:12px;row-gap:8px}
.rpt-rank .rpt-name{grid-area:1 / 1}
.rpt-rank b{grid-area:1 / 2}
.rpt-track{grid-area:2 / 1 / 3 / -1}
.rpt-name{min-width:0;font-size:13px;font-weight:600;color:#0E0F0F;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpt-name i{font-family:var(--font-mono);font-style:normal;font-weight:400;font-size:9.5px;
  letter-spacing:.4px;color:#C2C2C5;margin-left:6px}
.rpt-rank b{justify-self:end;font-family:var(--font-sans);font-size:15px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
.rpt-track{position:relative;height:6px;border-radius:var(--radius-full);background:#EEF0F3}
.rpt-track i{display:block;height:100%;border-radius:var(--radius-full)}
.rpt-track u{position:absolute;top:-2px;width:1px;height:10px;background:#C2C2C5}
.rpt-note{margin-top:18px;padding-top:14px;border-top:1px solid #EEF0F3;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;color:#858591}
.rpt-note span{display:block;margin-bottom:5px;font-size:9.5px;font-weight:500;
  letter-spacing:1.4px;text-transform:uppercase;color:#C2C2C5}

/* channel × key-message matrix — read a column to find the message that is
   going quiet everywhere, a row to read one channel */
.rpt-matrix{display:grid;gap:2px}
.rpt-row{display:grid;grid-template-columns:1fr 30px minmax(0,196px);align-items:center;
  gap:12px;padding:9px 0;border-top:1px solid #EEF0F3}
.rpt-row.is-head{border-top:0;padding:0 0 6px}
.rpt-row b{font-family:var(--font-sans);font-size:15px;font-weight:700;line-height:1;
  text-align:right;font-variant-numeric:tabular-nums}
.rpt-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.rpt-cells i{height:16px;border-radius:3px;font-style:normal}
.rpt-row.is-head .rpt-cells i{height:auto;font-family:var(--font-mono);font-size:8.5px;
  font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#9CA3AF;text-align:center}
/* one semantic scale, used the same way in both cards */
.c-ok{background:#00C87C}
.c-warn{background:#FFB800}
.c-miss{background:rgba(247,70,70,.16);box-shadow:inset 0 0 0 1px rgba(247,70,70,.42)}
.rpt-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:#9CA3AF}
.rpt-key span{width:9px;height:9px;border-radius:2px;flex:none}
.rpt-key span + span{margin-left:8px}

@media(max-width:560px){
  .rpt-score{font-size:38px}
  /* give the matrix the width, the channel name only what it needs */
  .rpt-row{grid-template-columns:minmax(52px,1fr) 24px minmax(0,192px);gap:7px}
  .rpt-cells{gap:3px}
  .rpt-row.is-head .rpt-cells i{font-size:7px;letter-spacing:0}
  .rpt-name i{display:none}
}

/* Message Lab variant rows */
.uiv-var{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-md);align-items:center;
  padding:11px 0;border-top:1px solid #EEF0F3;font-size:12.5px;color:#0E0F0F}
.uiv-var:first-of-type{border-top:0}
.uiv-var .metric{font-family:var(--font-mono);font-size:11px;color:#7A7D7E;
  letter-spacing:.5px;white-space:nowrap}
.uiv-var .metric b{color:#0E0F0F;font-weight:700}
.uiv-win{background:#3FA96A;color:#fff;border-radius:var(--radius-full);
  padding:3px 9px;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase}
.uiv-note{margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:#9CA3AF}
@media(max-width:560px){
  .uiv-var{grid-template-columns:1fr;gap:6px}
}

/* ============================================================
   SETUP TIMELINE
   Ported from the SMB site's homepage process graphic: a centre spine
   with cards alternating either side, collapsing to a single left rail
   on small screens. Used on the MessageOS page for the engine build.
   ============================================================ */
.timeline{margin-top:var(--space-2xl);position:relative;max-width:900px;margin-left:auto;margin-right:auto}
.timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(var(--ultra),var(--azure))}
.tl-item{position:relative;width:50%;padding:0 44px var(--space-xl);box-sizing:border-box}
.tl-item:nth-child(even){margin-left:50%}
.tl-item:nth-child(odd){text-align:right}
.tl-node{position:absolute;top:10px;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,var(--ultra),var(--azure));box-shadow:0 0 0 4px var(--white),0 0 0 6px rgba(0,106,254,.15)}
.tl-item:nth-child(odd) .tl-node{right:-7px}
.tl-item:nth-child(even) .tl-node{left:-8px}
.tl-card{display:inline-block;text-align:left;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);box-shadow:0 10px 30px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s}
.tl-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.tl-day{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:transparent;background:linear-gradient(135deg,var(--ultra),var(--azure));-webkit-background-clip:text;background-clip:text;margin-bottom:8px}
.tl-card h3{font-family:var(--font-sans);font-size:18px;font-weight:600;letter-spacing:-.3px;color:var(--dark-gray);margin-bottom:6px}
.tl-card p{font-size:14px;line-height:1.55;color:var(--medium-gray)}
@media(max-width:640px){
  .timeline{max-width:none}
  .timeline::before{left:7px}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;text-align:left;padding:0 0 var(--space-lg) 38px}
  .tl-item:nth-child(odd){text-align:left}
  .tl-item:nth-child(odd) .tl-node{right:auto;left:0}
  .tl-item:nth-child(even) .tl-node{left:0}
}