/* StreakoBot — shared design system (StreakoAI brand system)
   Base is StreakoAI black/white/grayscale. Layered on top: a
   purple->pink->orange gradient used sparingly for buttons, badges, kicker
   marks and ONE highlighted word per headline. Section grounds are
   cream/blush rather than pure white. The gradient never replaces the base.
   Supersedes the earlier "strict grayscale, no accent colour" rule.
   Newsreader (headlines), Space Grotesk (body/UI), Space Mono (small
   uppercase accents). Pill buttons, soft rounded panels. */

:root{
  --black:#0b0b0c; --ink-900:#141416; --ink-800:#1e1e21; --ink-700:#2a2a2e;
  --gray-500:#6b6b70; --gray-400:#98989c; --gray-300:#c2c2c4; --gray-200:#dedede; --gray-100:#ececec;
  --paper:#FBF1EA; --paper-dim:#F4E3D7; --white:#fff;
  --line:rgba(0,0,0,0.10);
  --nav-bg:rgba(251,241,234,0.85);

  /* accent gradient — red -> orange, from the StreakoBot icon (#C8304A -> #F88000;
     --grad-2 is their midpoint). Use sparingly, never on the wordmark. */
  --grad-1:#C8304A; --grad-2:#E05825; --grad-3:#F88000;
  --grad:linear-gradient(120deg,var(--grad-1) 0%,var(--grad-2) 52%,var(--grad-3) 100%);
  --grad-soft:linear-gradient(120deg,rgba(200,48,74,.14),rgba(224,88,37,.14),rgba(248,128,0,.14));
  --serif:'Newsreader',Georgia,serif;
  --sans:'Space Grotesk',sans-serif;
  --mono:'Space Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans);background:var(--paper);color:var(--ink-900);line-height:1.6;
     transition:background .2s ease,color .2s ease;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;}
:focus-visible{outline:2px solid var(--black);outline-offset:3px;}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
.section{padding:72px 0;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--gray-500);display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.eyebrow::before{content:"";width:6px;height:6px;background:currentColor;transform:rotate(45deg);}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
        color:var(--gray-400);margin-bottom:14px;}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,38px);max-width:17ch;margin-bottom:14px;}
.prose p.lede{font-size:17px;color:var(--gray-500);max-width:58ch;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
     font-weight:500;font-size:15px;padding:13px 26px;border-radius:999px;border:1px solid transparent;
     cursor:pointer;transition:.15s ease;white-space:nowrap;}
.btn.primary{background:var(--black);color:var(--white);}
.btn.primary:hover{background:var(--ink-800);}
.btn.secondary{background:transparent;color:var(--ink-900);border-color:var(--ink-700);}
.btn.secondary:hover{background:var(--white);border-color:var(--black);}
.btn:active{transform:scale(.97);}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);
     border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px;}
.nav .brand{flex:0 1 auto;min-width:0;}
.nav .brand span.bt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav .links{flex:0 0 auto;}
.nav .links{display:flex;align-items:center;gap:26px;font-size:14.5px;}
.nav .links a:hover{color:var(--gray-500);}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:16.5px;letter-spacing:-.01em;}
/* Icon mark: icon_gradient.png inside a .lockup.icon clip box (see BRAND LAYER). */
/* live-text wordmark beside the icon on dark grounds, where the black
   wordmark artwork would disappear */
.brand-text{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.02em;
            line-height:1;color:var(--white);white-space:nowrap;}
.brand-text b{font-weight:600;}

/* hero + pipeline */
.hero{padding:76px 0 40px;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.2vw,64px);line-height:1.06;max-width:16ch;}
.hero .sub{font-size:18px;color:var(--gray-500);max-width:52ch;margin-top:22px;}
.hero .actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.pipeline{background:linear-gradient(150deg,#17171a,#0b0b0c);border:1px solid rgba(255,255,255,.08);
          border-radius:24px;padding:26px 22px 18px;color:#fff;}
.pipeline .plabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
                  color:#98989c;margin-bottom:10px;}
.pipeline svg{width:100%;height:auto;}
.pipeline .legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;
                  letter-spacing:.06em;text-transform:uppercase;color:#98989c;margin-top:12px;
                  border-top:1px solid rgba(255,255,255,.12);padding-top:12px;}

/* industry rails */
.vert-rail{overflow:hidden;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);}
.vert-track{display:flex;width:max-content;gap:12px;animation:vscroll 34s linear infinite;}
.vert-rail:hover .vert-track{animation-play-state:paused;}
.vert-rail.reverse .vert-track{animation-duration:42s;animation-direction:reverse;}
@keyframes vscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.vert-rail{padding:10px 0;}
.vert{flex:none;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;
      border:1px solid var(--line);background:var(--white);border-radius:14px;
      padding:14px 22px;color:var(--ink-900);white-space:nowrap;
      box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px -6px rgba(0,0,0,.10);
      transition:box-shadow .2s ease,transform .2s ease;}
.vert:hover{transform:translateY(-2px);
      box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 28px -10px rgba(0,0,0,.16);}
.vert .vdot{width:7px;height:7px;flex:none;background:var(--ink-900);transform:rotate(45deg);opacity:.55;}
.vert.other{border-style:dashed;color:var(--gray-500);box-shadow:none;}
.vert.other .vdot{opacity:.3;}
.vert.other:hover{transform:none;box-shadow:none;}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px;transition:.2s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.card h3{font-size:17px;margin-bottom:10px;}
.card p{color:var(--gray-500);font-size:14.5px;margin:0;}
.card .idx{font-family:var(--mono);font-size:11px;color:var(--gray-400);margin-bottom:12px;}

/* how it works shots */
.shot{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.shot .bar{height:34px;background:var(--paper-dim);border-bottom:1px solid var(--line);display:flex;
           align-items:center;gap:6px;padding:0 12px;}
.shot .bar i{width:8px;height:8px;border-radius:50%;background:var(--gray-300);display:block;}
.shot .bar span{font-family:var(--mono);font-size:10px;color:var(--gray-400);margin-left:8px;}
.shot .body{padding:18px;}
.step-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;padding:34px 0;
          border-top:1px solid var(--line);}
.step-row.first{border-top:none;}
.step-row h3{font-size:20px;margin-bottom:10px;}
.step-row p{color:var(--gray-500);font-size:15px;}
.step-row .num{font-family:var(--mono);font-size:11px;color:var(--gray-400);margin-bottom:12px;letter-spacing:.1em;}

/* form bits reused inside shots */
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
             text-transform:uppercase;color:var(--gray-500);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;font-size:14.5px;
  font-family:var(--sans);border:1px solid var(--gray-200);border-radius:8px;background:var(--white);color:var(--ink-900);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--black);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);}

table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--gray-500);padding:8px 10px;border-bottom:1px solid var(--line);}
table.data td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;}
table.data tr:last-child td{border-bottom:none;}
.tag-pill{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;padding:3px 8px;
  border-radius:5px;background:var(--gray-100);color:var(--gray-500);white-space:nowrap;}
.tag-pill.ok{background:#e9efe6;color:#3b5a2f;}
.tag-pill.wait{background:#f3ede1;color:#7a5a1e;}
.code-box{font-family:var(--mono);font-size:12px;background:#141416;color:#e8e8e8;padding:16px;
  border-radius:10px;overflow-x:auto;white-space:pre;margin-bottom:12px;}

/* chat widget mock */
.widget{width:100%;max-width:330px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
        background:var(--white);box-shadow:0 14px 40px rgba(0,0,0,.08);}
.widget .whead{background:var(--black);color:var(--white);padding:12px 14px;display:flex;align-items:center;gap:10px;}
.widget .lockup.logo-mark{--lh:30px;}
.widget .whead strong{font-size:13.5px;font-weight:600;}
.widget .whead small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--gray-400);letter-spacing:.06em;}
.widget .wbody{padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--paper);}
.bub{font-size:13px;padding:9px 12px;border-radius:12px;max-width:84%;}
.bub.them{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px;}
.bub.me{background:var(--black);color:var(--white);align-self:flex-end;border-bottom-right-radius:4px;}
.bub .src{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
          color:var(--gray-400);margin-top:6px;}
.widget .wfoot{border-top:1px solid var(--line);padding:10px 14px;font-size:12.5px;color:var(--gray-400);
               display:flex;justify-content:space-between;background:var(--white);}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;}
.plan{border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;background:var(--white);}
.plan.featured{background:var(--black);color:var(--white);position:relative;}
.plan.featured::before{content:"Most popular";position:absolute;top:-1px;right:24px;background:var(--white);
  color:var(--black);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:0 0 6px 6px;}
.plan-name{font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.02em;}
.plan-note{color:var(--gray-500);font-size:13px;margin-top:8px;min-height:34px;}
.plan.featured .plan-note{color:var(--gray-400);}
.price{font-size:36px;font-weight:600;margin:20px 0;}
.price small{font-size:13px;font-weight:400;color:var(--gray-500);}
.plan.featured .price small{color:var(--gray-400);}
.plan ul{margin-bottom:24px;flex:1;}
.plan li{position:relative;padding-left:20px;margin-bottom:10px;font-size:13.5px;}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:currentColor;
  transform:rotate(45deg);opacity:.7;}
.fineprint{font-family:var(--mono);font-size:11.5px;color:var(--gray-400);margin-top:20px;letter-spacing:.03em;}

/* footer */
footer{background:var(--paper-dim);padding:56px 0 28px;margin-top:40px;}
footer .top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--line);}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
          color:var(--gray-400);margin-bottom:14px;}
footer a{display:block;font-size:14px;color:var(--ink-700);margin-bottom:10px;}
footer a:hover{color:var(--black);}
footer .bottom{padding-top:20px;font-size:13px;color:var(--gray-400);display:flex;justify-content:space-between;
               gap:14px;flex-wrap:wrap;}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:60px 32px 80px;}
.legal h1{font-family:var(--serif);font-weight:500;font-size:38px;margin-bottom:8px;}
.legal .meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
             color:var(--gray-400);margin-bottom:26px;}
.legal h2{font-size:17px;margin:32px 0 10px;}
.legal p,.legal li{color:var(--ink-700);font-size:15px;}
.legal ul{list-style:disc;padding-left:20px;margin:10px 0;}
.legal a.inline{text-decoration:underline;}
.disclaimer{background:var(--paper-dim);border-left:3px solid var(--black);padding:16px 18px;
            font-size:14px;color:var(--ink-700);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
  .vert-track{flex-wrap:wrap;width:auto;}
}
@media (max-width:940px){
  .hero .wrap,.step-row{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr 1fr;}
  footer .top{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .card-grid,.pricing-grid{grid-template-columns:1fr;}
  .nav .links{gap:14px;}
  .nav .links .hide-sm{display:none;}
  .legal{padding:40px 20px 60px;}
}


/* ---- industries served (factual, no client names) ---- */
.served{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
        background:var(--paper-dim);padding:26px 0;}
.served .lead{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
              color:var(--gray-400);margin-bottom:20px;}
.served-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.served-item{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
             box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px -12px rgba(0,0,0,.12);}
.served-item strong{display:block;font-size:14.5px;margin-bottom:4px;}
.served-item span{font-size:12.5px;color:var(--gray-500);}

/* ---- where it installs ---- */
.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
.plat{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);
      border-radius:14px;padding:20px 22px;
      box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px -14px rgba(0,0,0,.14);}
.plat-tile{width:44px;height:44px;flex:none;border-radius:12px;background:var(--ink-900);
           display:flex;align-items:center;justify-content:center;}
.plat-tile svg{width:22px;height:22px;fill:none;stroke:var(--white);stroke-width:1.8;
               stroke-linecap:round;stroke-linejoin:round;}
.plat .plat-text{min-width:0;}
.plat strong{display:block;font-size:15px;}
.plat .plat-text span{font-size:12.5px;color:var(--gray-500);}

@media (max-width:940px){
  .served-grid{grid-template-columns:1fr 1fr;}
  .platforms{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav .wrap{height:64px;gap:10px;}
  .brand{font-size:15px;gap:9px;}
  .lockup.logo-mark{--lh:30px;}
  .served-grid{grid-template-columns:1fr;}
  .vert{padding:12px 18px;font-size:13.5px;}
}


/* ============================================================
   BRAND LAYER — StreakoAI gradient accents
   Base stays black/white/grayscale. Gradient is an accent only:
   buttons, badges, kicker marks, and ONE word per headline.
   ============================================================ */

/* Brand lockups.
   The artwork sits on a 2000x2000 canvas with the mark occupying only a
   band in the middle, so most of each file is padding. Setting a height
   on the <img> would draw the mark at a fraction of that height.
   Instead the wrapper is the visible box and the image is scaled up inside
   it and clipped, showing the artwork at true size without altering files.

   Measured from the supplied PNGs:
     StreakoBot lockup  content 1335x283 of 2000 -> scale 7.067, aspect 4.717,
                        centre 2.5px right / 11.5px above canvas centre
     StreakoBot icon    content 1001x976 of 2000, boxed as a 1001px square
                        -> scale 1.998, centre 29.5px left / 65px above
     StreakoAI lockup   content 1169x283 of 2000 -> scale 7.067, aspect 4.131,
                        centre 8.5px left / 11.5px above canvas centre
   Offsets are corrected via --xoff/--yoff, in units of --lh.

   --lh is the visible mark height. Set that; the rest follows. */
.lockup{--lh:34px; --scale:7.067; --aspect:4.717; --xoff:-0.0088; --yoff:0.0406;
        display:block;position:relative;flex:none;
        height:var(--lh);width:calc(var(--lh) * var(--aspect));overflow:hidden;}
.lockup img{position:absolute;top:calc(50% + var(--lh) * var(--yoff));left:calc(50% + var(--lh) * var(--xoff));
            transform:translate(-50%,-50%);max-width:none;display:block;
            width:calc(var(--lh) * var(--scale));height:calc(var(--lh) * var(--scale));}
.lockup.icon{--scale:1.998; --aspect:1; --xoff:0.0295; --yoff:0.0644;}
.lockup.ai{--aspect:4.131; --xoff:0.0300;}

.nav .lockup{--lh:34px;}
footer .lockup{--lh:38px;}
.lockup-sm{--lh:26px;}

/* The white artwork variants exist as their own files, so a dark ground
   swaps the src rather than filtering. Never use brightness(0) invert(1)
   on these marks — it flattens the dot pattern. Plain invert(1) only. */
.invert-mark{filter:invert(1);}

/* one highlighted word per headline */
.grad-word{background:var(--grad);-webkit-background-clip:text;background-clip:text;
           color:transparent;-webkit-text-fill-color:transparent;}

/* kicker + eyebrow marks pick up the gradient */
.kicker{display:flex;align-items:center;gap:9px;}
.kicker::before{content:"";width:7px;height:7px;flex:none;background:var(--grad);
                transform:rotate(45deg);border-radius:1px;}
.eyebrow::before{background:var(--grad);border-radius:1px;}

/* primary action + featured badge */
.btn.primary{background:var(--grad);color:var(--white);border-color:transparent;
             background-size:160% 160%;background-position:0% 50%;
             transition:background-position .45s ease,transform .15s ease,box-shadow .2s ease;}
.btn.primary:hover{background:var(--grad);background-size:160% 160%;background-position:100% 50%;
                   box-shadow:0 10px 26px -12px rgba(224,88,37,.65);}
.plan.featured::before{background:var(--grad);color:var(--white);}
.plan li::before,.ob-plan li::before{background:var(--grad);opacity:1;}
.tag-pill.ok{background:var(--grad-soft);color:#8a2436;}
.vert .vdot{background:var(--grad);opacity:1;}

/* cream/blush section grounds; cards keep white so they lift off it */
.served{background:var(--paper-dim);}
footer{background:var(--paper-dim);}

/* ============================================================
   MOTION SYSTEM — landing page only.
   Everything below is gated on [data-motion="full"], which is set
   on <body> of the marketing page alone. The onboarding flow and the
   dashboard are transactional surfaces and deliberately opt out.
   ============================================================ */

[data-motion="full"] .parallax-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
[data-motion="full"] .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.38;
                           will-change:transform;}
[data-motion="full"] .blob.b1{width:520px;height:520px;left:-140px;top:4%;
                              background:radial-gradient(circle,rgba(200,48,74,.85),transparent 68%);}
[data-motion="full"] .blob.b2{width:460px;height:460px;right:-120px;top:32%;
                              background:radial-gradient(circle,rgba(224,88,37,.8),transparent 68%);}
[data-motion="full"] .blob.b3{width:500px;height:500px;left:18%;top:68%;
                              background:radial-gradient(circle,rgba(248,128,0,.75),transparent 68%);}
[data-motion="full"] .rail-svg{position:absolute;top:0;left:50%;transform:translateX(-50%);
                               height:100%;width:260px;opacity:.5;will-change:transform;}

/* 3D mouse tilt — JS writes --rx/--ry */
[data-motion="full"] .tilt{transform-style:preserve-3d;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s cubic-bezier(.22,.61,.36,1);will-change:transform;}

/* 3D flip-in scroll reveal */
[data-motion="full"] .reveal{opacity:0;transform:perspective(900px) rotateX(9deg) translateY(26px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;}
[data-motion="full"] .reveal.in{opacity:1;transform:perspective(900px) rotateX(0) translateY(0);}

/* the hero pipeline, now a real scroll-parallax element */
[data-motion="full"] .pipeline{position:relative;overflow:hidden;}
[data-motion="full"] .pipeline .flow{will-change:transform;}
[data-motion="full"] .pipeline::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(200,48,74,.20),rgba(224,88,37,.12) 50%,rgba(248,128,0,.18));
  mix-blend-mode:screen;opacity:.75;}

/* count-up stats */
.stat-band{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.stat-tile{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 24px;
           box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 30px -20px rgba(0,0,0,.18);}
.stat-tile .sv{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1;
               background:var(--grad);-webkit-background-clip:text;background-clip:text;
               color:transparent;-webkit-text-fill-color:transparent;}
.stat-tile .sk{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
               color:var(--gray-500);margin-top:12px;}
.stat-tile .sd{font-size:13px;color:var(--gray-500);margin-top:6px;}
@media (max-width:940px){.stat-band{grid-template-columns:1fr;}}

/* motion is a progressive enhancement: with it reduced, everything is
   simply present and still. The blanket rule earlier in this file kills
   transitions, so reveals must not be left at opacity:0. */
@media (prefers-reduced-motion:reduce){
  [data-motion="full"] .reveal{opacity:1 !important;transform:none !important;}
  [data-motion="full"] .tilt{transform:none !important;}
  [data-motion="full"] .parallax-field{display:none;}
}


/* ============================================================
   Widget preview (.pvw)
   A faithful stand-in for the embedded widget, used by both the
   dashboard's Bot settings pane and the signup flow, so what someone
   sees while configuring matches what their visitors get. Kept
   separate from .widget, which is the marketing page's mock and has
   its own look.
   Dark by default; .pvw-light flips it, mirroring the theme setting.
   ============================================================ */
/* The stage stands in for the page the widget sits on, so the launcher
   bubble has something to sit against. It follows the widget theme, which
   is the only signal we have about the site: a business picking the black
   theme has a dark site and usually a pale logo, and vice versa. Without
   it a pale transparent logo on a transparent launcher is invisible here,
   which is exactly the thing being previewed. */
.pvw-stage{background:#131316;border:1px solid rgba(0,0,0,.08);border-radius:20px;
           padding:20px;display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.pvw-stage.pvw-stage-light{background:#ececed;}
.pvw-stage.pvw-stage-left{align-items:flex-start;}

/* The launcher, exactly as the widget draws it: the logo on its chosen
   backing, or the StreakoAI mark on the gradient when there is no logo.
   No background of its own otherwise — that disc was the bug. */
.pvw-launch{width:56px;height:56px;border-radius:50%;flex:none;overflow:hidden;
            display:flex;align-items:center;justify-content:center;
            box-shadow:0 10px 30px rgba(0,0,0,.35);}
.pvw-launch img{width:100%;height:100%;object-fit:contain;display:block;}
.pvw-launch.pvw-fallback{background:var(--pg,linear-gradient(135deg,#8B5CF6 0%,#F0669B 55%,#FB923C 100%));}
.pvw-launch.pvw-bg-white,.pvw-launch.pvw-bg-black,.pvw-launch.pvw-bg-gradient{padding:7px;}

.pvw{--pg:linear-gradient(135deg,#8B5CF6 0%,#F0669B 55%,#FB923C 100%);
     --pp:#0d0d0f;--praised:#1a1a1e;--pline:rgba(255,255,255,.10);
     --pfg:#f4f4f5;--pmuted:#8e8e96;
     position:relative;width:100%;max-width:340px;border-radius:18px;overflow:hidden;
     background:var(--pp);color:var(--pfg);border:1px solid var(--pline);
     display:flex;flex-direction:column;min-height:400px;
     box-shadow:0 20px 50px -18px rgba(0,0,0,.5);}
.pvw.pvw-light{--pp:#fff;--praised:#f2f2f4;--pline:rgba(0,0,0,.10);
               --pfg:#0d0d0f;--pmuted:#6b6b72;}

/* the brand glow pooling at the foot, as the widget has */
.pvw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  pointer-events:none;z-index:0;opacity:.30;
  background:radial-gradient(120% 100% at 50% 100%,#8B5CF6 0%,#F0669B 38%,rgba(251,146,60,0) 72%);}
.pvw.pvw-light::after{opacity:.16;}
.pvw-head,.pvw-body,.pvw-form,.pvw-brand{position:relative;z-index:1;}

.pvw-head{display:flex;align-items:center;gap:10px;padding:13px 15px;flex:none;
          border-bottom:1px solid var(--pline);}
.pvw-ava{width:30px;height:30px;border-radius:8px;flex:none;overflow:hidden;
         display:flex;align-items:center;justify-content:center;}
.pvw-ava img{width:100%;height:100%;object-fit:contain;display:block;}
.pvw-ava.pvw-fallback{border-radius:50%;background:var(--pg);}
.pvw-title{flex:1;min-width:0;font-size:14px;font-weight:600;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pvw-x{color:var(--pmuted);font-size:16px;line-height:1;flex:none;}

.pvw-body{flex:1;padding:16px;display:flex;flex-direction:column;}
.pvw-welcome{margin:auto 0;display:flex;flex-direction:column;align-items:center;
             text-align:center;gap:4px;}
.pvw-mark{width:60px;height:60px;border-radius:13px;overflow:hidden;margin-bottom:10px;
          display:flex;align-items:center;justify-content:center;}
.pvw-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.pvw-mark.pvw-fallback{border-radius:50%;background:var(--pg);}
.pvw-hi{font-size:13px;color:var(--pmuted);}
.pvw-ask{font-size:20px;font-weight:600;letter-spacing:-.01em;}
.pvw-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px;}
.pvw-chip{border:1px solid var(--pline);border-radius:999px;padding:6px 12px;
          font-size:11.5px;color:var(--pfg);white-space:nowrap;}

/* the backing a business can put behind its own logo */
.pvw-bg-white{background:#fff;padding:3px;}
.pvw-bg-black{background:#0b0b0c;padding:3px;}
.pvw-bg-gradient{background:var(--pg,linear-gradient(135deg,#8B5CF6 0%,#F0669B 55%,#FB923C 100%));padding:3px;}

.pvw-form{flex:none;padding:11px;display:flex;gap:8px;align-items:center;
          border-top:1px solid var(--pline);}
.pvw-input{flex:1;background:var(--praised);border-radius:11px;padding:11px 13px;
           font-size:12.5px;color:var(--pmuted);}
.pvw-send{width:36px;height:36px;flex:none;border-radius:11px;background:var(--pg);
          display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;}
.pvw-brand{flex:none;text-align:center;padding:0 0 9px;font-family:var(--mono);
           font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pmuted);}

/* Messages inside a preview, matching the widget: visitor on the right in a
   raised bubble, assistant on the left as plain text beside the mark. */
.pvw-body.pvw-convo{justify-content:flex-start;gap:11px;overflow:hidden;}
.pvw-row{display:flex;gap:8px;align-items:flex-start;}
.pvw-row.pvw-mine{justify-content:flex-end;}
.pvw-bub{font-size:12.5px;line-height:1.5;max-width:85%;overflow-wrap:anywhere;}
.pvw-mine .pvw-bub{background:var(--praised);padding:9px 12px;border-radius:13px;}
.pvw-rowava{width:21px;height:21px;flex:none;margin-top:1px;overflow:hidden;}
.pvw-rowava img{width:100%;height:100%;object-fit:contain;display:block;}
.pvw-src{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.05em;
         text-transform:uppercase;color:var(--pmuted);margin-top:5px;}