@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-sans-400.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-sans-500.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/dm-sans-600.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/dm-sans-700.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/dm-sans-800.woff2') format('woff2');}
:root{
  --purple:#4225A6; --purple-dark:#2E1A7A; --purple-deep:#1a1d23; --purple-night:#111318;
  --magenta:#D51254; --magenta-soft:#F0407E;
  --hl-dark:#C4B5FD;--hl-soft:#DDD6FE; --hl-light:#4225A6;
  --lilac:#F0EEF8; --lilac-2:#EDE9FC; --paper:#FCFBFF;
  --ink:#17123B; --ink-soft:#4A4270;
  --amber:#F4B740; --teal:#12B3A6;
  --hair:rgba(66,37,166,.14);
  --hair-light:rgba(255,255,255,.14);
  --grad-head:linear-gradient(135deg,#4225a6 34%,#6d1f8e 73%,#8b1b7d 93%);
  --shadow:0 24px 60px -28px rgba(21,12,54,.45);
  --shadow-sm:0 10px 30px -18px rgba(21,12,54,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--ink);
  background:var(--lilac);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;position:relative}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow .sig{width:8px;height:8px;border-radius:50%;background:var(--magenta);flex:none}
h1,h2,h3{letter-spacing:-.03em;line-height:1.04;font-weight:800}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- Progress flight-path spine ---------- */
#spine{position:fixed;left:34px;top:12vh;bottom:12vh;width:2px;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 2px,transparent 2px 9px);
  mix-blend-mode:difference}
#spine .plane{position:absolute;left:50%;top:0;width:14px;height:14px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--magenta);box-shadow:0 0 0 5px rgba(213,18,84,.22),0 0 18px rgba(213,18,84,.7)}
#spine .plane::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
@media(max-width:960px){#spine{display:none}}

/* ---------- Top bar ---------- */
header.bar{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
  padding:20px 0}
header.bar.solid{background:rgba(14,8,36,.82);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);padding:12px 0}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brandlock{display:flex;align-items:center;gap:14px}
.brandlock img{height:27px}
.brandlock .x{color:rgba(255,255,255,.5);font-weight:600;font-size:13px;letter-spacing:.1em}
.brandlock .eg-logo{height:22px;width:auto}
nav.jump{display:flex;align-items:center;gap:26px}
@media(max-width:1040px){nav.jump{gap:18px}.brandlock{gap:10px}}
nav.jump a{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.02em;position:relative;padding:4px 0}
nav.jump a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--magenta);transition:width .3s var(--ease)}
nav.jump a:hover{color:#fff}nav.jump a:hover::after{width:100%}
.edition{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:6px 12px;white-space:nowrap}
/* Raised from 820px: the enlarged lockup needs more room before the nav and
   edition pill can share the row without being squeezed. */
@media(max-width:900px){nav.jump,.edition{display:none}}

/* ---------- Hero ---------- */
/* padding-top is load-bearing: the hero bottom-aligns inside min-height, so
   whenever the content is taller than 82vh (any landscape phone) it overflows
   upward. With no top padding that put the kicker and H1 underneath the fixed
   bar, which sits at z-index 60 against the hero content's z-index 3.
   Reserving the bar's height makes the section grow instead of collide. */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;
  padding:92px 0 6vh;overflow:hidden;background:var(--purple-night)}
.hero .bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.hero .bg img{width:100%;height:120%;object-fit:cover;object-position:center 40%;filter:saturate(1.02)}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,8,36,.72) 0%,rgba(14,8,36,.38) 30%,rgba(21,12,54,.86) 78%,var(--purple-night) 100%)}
.hero .scrim2{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;
  background:linear-gradient(120deg,rgba(66,37,166,.75),transparent 60%)}
/* Deliberately NOT position:relative. The stat panel is nested in here now, and
   on desktop it is absolutely positioned against .hero -- giving .wrap a
   position would make it the containing block and shift the panel. z-index
   still applies because .wrap is a flex item of .hero. */
.hero .wrap{position:static;z-index:3;width:100%}
/* On desktop both of these are plain blocks: the panel inside is absolute and
   out of flow, so the headline and paragraph lay out exactly as they always did.
   Neither may ever carry .reveal or any other transform -- a transformed
   ancestor becomes the containing block for the absolutely positioned panel and
   would drag it out of position, then jump it back when the transform clears.
   The reveals belong on the h1 and p themselves. */
.hero-mid{}
.hero-copy{}
.hero .kicker{color:rgba(255,255,255,.86);margin-bottom:20px}
.hero h1{color:#fff;font-size:clamp(40px,6.8vw,88px);max-width:14ch}
.hero h1 .hl{color:#fff;position:relative;display:inline-block;z-index:1}
.hero h1 .hl::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:.03em;height:.16em;
  background:#D51254;z-index:-1;border-radius:2px}
.hero p.sub{color:rgba(255,255,255,.8);font-size:clamp(15px,1.8vw,19px);max-width:52ch;margin-top:18px;font-weight:400}
.flightstrip{display:inline-flex;align-items:center;gap:0;margin-top:28px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;
  backdrop-filter:blur(8px);overflow:hidden}
.flightstrip .leg{padding:14px 22px;display:flex;flex-direction:column;gap:2px}
.flightstrip .leg .code{font-size:20px;font-weight:800;color:#fff;letter-spacing:.04em}
.flightstrip .leg .lbl{font-size:10px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.6);text-transform:uppercase}
.flightstrip .path{position:relative;width:96px;height:2px;background:rgba(255,255,255,.28);margin:0 4px}
.flightstrip .path .plane-icon{position:absolute;top:50%;left:0;transform:translateY(-50%) rotate(0deg);
  width:16px;height:16px;animation:flyPlane 3.4s var(--ease) infinite}
@keyframes flyPlane{0%{left:-8px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}

/* --fs-px drives both the panel's padding and the rule's negative margin, so
   the rule stays full-bleed at every breakpoint from one value. */
.hero .floatstat{--fs-px:30px;
  position:absolute;right:6%;top:44%;z-index:3;will-change:transform;min-width:296px;
  padding:26px var(--fs-px) 22px;border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 8px 32px rgba(14,8,36,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.hero .floatstat .n{font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
/* The headline metric is pure white, digits and % alike, so nothing competes
   with it. The two supporting stats sit a step back in a soft lavender --
   number and unit in the same colour, so each reads as one value rather than
   a figure with a differently-coloured sign stuck on. */
.hero .floatstat .fs-lead .n,
.hero .floatstat .fs-lead .n b,
.hero .floatstat .fs-lead .n .u{color:#fff}
.hero .floatstat .fs-cell .n,
.hero .floatstat .fs-cell .n b,
.hero .floatstat .fs-cell .n .u{color:var(--hl-soft)}
.hero .floatstat .l{font-weight:600;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero .floatstat .fs-lead{text-align:center}
.hero .floatstat .fs-lead .n{font-size:clamp(44px,5.4vw,68px)}
.hero .floatstat .fs-lead .l{font-size:11px;letter-spacing:.18em;margin-top:9px}
.hero .floatstat .fs-rule{height:1px;background:rgba(255,255,255,.16);
  margin:18px calc(var(--fs-px) * -1) 16px}
.hero .floatstat .fs-sub{display:grid;grid-template-columns:1fr 1fr}
/* Desktop keeps the two stats side by side, split by a vertical border, so the
   horizontal divider between them is mobile-only. */
.hero .floatstat .fs-sub .fs-rule{display:none}
.hero .floatstat .fs-cell{text-align:center;padding:0 10px}
/* ~ not +: the divider element now sits between the two cells, so the adjacent
   sibling selector would no longer match. */
.hero .floatstat .fs-cell ~ .fs-cell{border-left:1px solid rgba(255,255,255,.16)}
.hero .floatstat .fs-cell .n{font-size:clamp(19px,1.9vw,25px)}
.hero .floatstat .fs-cell .l{font-size:9px;letter-spacing:.13em;margin-top:7px;color:rgba(255,255,255,.62)}
@media(max-width:1080px){.hero .floatstat{--fs-px:24px;right:4%;top:auto;bottom:20%;
  padding:20px var(--fs-px) 18px;min-width:262px}}

/* Below 820px the panel drops out of its absolute slot and becomes the right
   column of a two-column row. The left column is the headline AND the paragraph
   together, so the panel spans both: its top lines up with the headline, its
   bottom with the last line of the paragraph.

   align-items:stretch does the real work. This row used to be
   align-items:center with the paragraph alone, so a panel taller than the
   paragraph pushed dead space above and below it. Stretching the panel to the
   copy's height removes that gap by construction rather than by tuning margins,
   and "no overlap" stays structural: the copy cannot grow under the panel,
   because the panel owns its own column. */
@media(max-width:820px){
  .hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
  .hero-mid{display:flex;align-items:stretch;gap:14px}
  .hero-copy{flex:1 1 auto;min-width:0}
  .hero p.sub{font-size:13px;line-height:1.5;max-width:none;margin-top:20px}

  /* display:contents dissolves .fs-sub, so all five pieces -- lead, divider,
     stat, divider, stat -- become direct children of one flex column. That is
     what makes space-between able to give every gap the same height. Nesting
     the two stats inside a wrapper meant their spacing was set by the wrapper's
     own rules and could never match the gaps around the first divider.
     Equal-height bands with justify-content:center could not do this either:
     the lead's number is larger, so centring left less room under it than under
     the smaller stats. Spacing the gaps directly, rather than the bands, is
     what makes them even. */
  .hero .floatstat{--fs-px:11px;
    position:static;flex:0 0 auto;width:fit-content;min-width:0;margin:0;
    padding:15px var(--fs-px);border-radius:14px;text-align:center;
    display:flex;flex-direction:column;justify-content:space-between;
    transform:none !important}          /* !important beats the parallax inline transform */
  .hero .floatstat .fs-sub{display:contents}
  .hero .floatstat .fs-sub .fs-rule{display:block}
  .hero .floatstat .fs-rule{margin:0;flex:0 0 auto}
  .hero .floatstat .fs-lead{flex:0 0 auto;text-align:center}
  .hero .floatstat .fs-lead .n{font-size:24px}
  .hero .floatstat .fs-lead .l{font-size:7.5px;letter-spacing:.1em;margin-top:4px}
  .hero .floatstat .fs-cell{flex:0 0 auto;text-align:center;padding:0}
  .hero .floatstat .fs-cell ~ .fs-cell{border-left:none}
  .hero .floatstat .fs-cell .n{font-size:15px}
  .hero .floatstat .fs-cell .l{font-size:7.5px;letter-spacing:.06em;margin-top:3px}
}
/* Landscape phones: 82vh is only ~320px, far less than the hero content needs.
   Drop the min-height entirely and scale the type down so it fits without the
   section ballooning. Keyed on height, so it catches landscape at any width. */
@media(max-height:560px){
  .hero{min-height:auto;padding:88px 0 44px}
  .hero h1{font-size:clamp(28px,4.4vw,42px)}
  .hero p.sub{font-size:14.5px;margin-top:12px;max-width:60ch}
  .hero .kicker{margin-bottom:14px}
  .flightstrip{margin-top:18px}
  .flightstrip .leg{padding:10px 16px}
  .flightstrip .leg .code{font-size:16px}
}

/* Remove default focus/active outline ring on interactive elements */
.note, .cta, .chat-prompt, .gate, .pass, button, a, input {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.note:focus, .cta:focus, .chat-prompt:focus, button:focus, a:focus {
  outline: none;
}

/* ---------- Section shells ---------- */
section{position:relative}
/* Section rhythm. All .pad sections share one value so the space above every
   eyebrow stays identical; change it here and the whole page stays even. */
.pad{padding:88px 0}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4.4vw,52px);margin-top:16px}
.sec-head p{margin-top:18px;font-size:17px;color:var(--ink-soft);font-weight:400}
.dark{background:var(--purple-deep);color:#fff}
.dark .sec-head p{color:rgba(255,255,255,.5)}
.dark .eyebrow{color:rgba(255,255,255,.8)}

/* ---------- Departure board (KPIs) ---------- */
.board{border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;background:rgba(0,0,0,.28);border-bottom:1px solid rgba(255,255,255,.1)}
.board-top .t{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:10px}
.board-top .t .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);animation:blink 2.4s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
.board-top .now{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;
  font-size:12px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase}
/* The reporting period is the one thing a reader checks first, so it gets a
   pill rather than being buried in the same grey run as the scope text. */
.board-top .now .range{color:#fff;font-weight:700;letter-spacing:.1em;white-space:nowrap;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);border-radius:100px;padding:5px 12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr)}
.kpi{padding:34px 26px;border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
.kpi:nth-child(4n){border-right:none}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(213,18,84,.14);transition:width .5s var(--ease)}
.kpi:hover::before{width:100%}
.kpi .val{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;position:relative}
.kpi .val .pre,.kpi .val .suf{color:var(--hl-dark)}
.kpi .lbl{position:relative;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kpi .sub{position:relative;margin-top:6px;font-size:13px;color:rgba(255,255,255,.44);font-weight:400}
.kpi.flip .val{animation:flipIn .6s var(--ease) both}
@keyframes flipIn{0%{transform:rotateX(-90deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- Month-on-month chart ---------- */
.mom{margin-top:22px;border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.mom-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;background:rgba(0,0,0,.28);border-bottom:1px solid rgba(255,255,255,.1)}
.mom-top .t{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:10px}
.mom-top .t .dot{width:8px;height:8px;border-radius:50%;background:var(--hl-dark);box-shadow:0 0 12px var(--hl-dark);flex:none}
.mom-top .now{font-size:12px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase;white-space:nowrap}
.mom-body{padding:26px 24px 22px}
.mom-legend{display:flex;align-items:center;gap:22px;margin-bottom:6px}
.mom-legend .lg{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.mom-legend .lg i{width:16px;height:3px;border-radius:2px;flex:none}
.mom-legend .roas i{background:var(--hl-dark)}
.mom-legend .cpa i{background:var(--magenta-soft)}
.mom-chart svg{width:100%;height:auto;display:block;overflow:visible}
.mom-chart .grid{stroke:rgba(255,255,255,.10);stroke-width:1}
.mom-chart .axis{fill:rgba(255,255,255,.5);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.mom-chart .axis-title{fill:rgba(255,255,255,.42);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.mom-chart .ln{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mom-chart .ln.roas{stroke:var(--hl-dark)}
.mom-chart .ln.cpa{stroke:var(--magenta-soft)}
.mom-chart .pt{stroke:var(--purple-deep);stroke-width:2}
.mom-chart .pt.roas{fill:var(--hl-dark)}
.mom-chart .pt.cpa{fill:var(--magenta-soft)}
.mom-chart .dl{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mom-chart .dl.roas{fill:var(--hl-dark)}
.mom-chart .dl.cpa{fill:var(--magenta-soft)}
.mom-chart .jun-band{fill:rgba(255,255,255,.06)}
.mom-chart .jun-rule{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 4}
.mom-chart .jun-tick{fill:#fff;font-weight:700}
.mom-chart .pill-bg.roas{fill:var(--hl-dark)}
.mom-chart .pill-bg.cpa{fill:var(--magenta-soft)}
.mom-chart .pill-tx{font-size:12px;font-weight:800;fill:var(--purple-deep);font-variant-numeric:tabular-nums}
.mom-chart .halo{fill:none;stroke-width:2}
.mom-chart .halo.roas{stroke:var(--hl-dark);opacity:.45}
.mom-chart .halo.cpa{stroke:var(--magenta-soft);opacity:.45}
.mom-chart .mini-title{fill:rgba(255,255,255,.7);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mom-foot{font-size:13px;color:rgba(255,255,255,.55);font-weight:400;margin-top:18px;max-width:70ch}
.mom-foot b{color:rgba(255,255,255,.92);font-weight:700}
.mom-chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.5s var(--ease)}
.mom.in .mom-chart .draw{stroke-dashoffset:0}
.mom-chart .fadein{opacity:0;transition:opacity .6s var(--ease) .9s}
.mom.in .mom-chart .fadein{opacity:1}
@media(prefers-reduced-motion:reduce){
  .mom-chart .draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .mom-chart .fadein{opacity:1;transition:none}
}

/* ---------- Boarding passes (brands) ---------- */
/* All four passes share one size. The priority pass is marked by colour
   (magenta border, magenta stub) rather than by being larger. */
.passes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pass{position:relative;background:var(--paper);border-radius:18px;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:1fr 104px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  border:1px solid var(--hair)}
.pass:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pass .main{padding:20px 22px}
.pass .flag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--magenta);margin-bottom:12px}
.pass .flag .sig{width:6px;height:6px;border-radius:50%;background:var(--magenta);animation:pulse 2s infinite}
.pass .flag.alt{color:var(--purple)}
.pass .flag.alt .sig{background:var(--purple);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(213,18,84,.5)}50%{box-shadow:0 0 0 6px rgba(213,18,84,0)}}
.pass .toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pass .logo{height:21px;display:flex;align-items:center}
.pass .logo img{height:100%;width:auto;object-fit:contain}
.pass .logo img.tall{height:17px}
.pass .fmt{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);
  background:var(--lilac-2);padding:5px 10px;border-radius:100px;white-space:nowrap}
.pass .fields{display:grid;grid-template-columns:repeat(3,auto);gap:16px}
.pass .field .fl{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.pass .field .fv{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pass .field.roas .fv{color:var(--purple)}
/* flex-wrap is the safety net: "Activated via [DSP]" plus the benchmark chip
   does not fit on one line in every pass at every width, and without wrapping
   the overflow shoves the ticket stub outside the card. */
.pass .dsp{margin-top:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;row-gap:10px;
  font-size:11.5px;color:var(--ink-soft);font-weight:500}
.pass .dsp .bm{margin-left:auto}
.pass .dsp .chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:#fff;border:1px solid var(--hair);border-radius:7px;flex:none}
.pass .dsp .chip img{height:13px;width:auto}
.pass .stub{position:relative;background:var(--grad-head);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:16px 10px}
.pass .stub::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:16px;
  background:radial-gradient(circle at 0 50%,transparent 0 7px,var(--paper) 7px) 0 0/16px 22px repeat-y}
.pass .stub .brl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pass .stub .barcode{height:52px;width:28px;background:
  repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 9px,#fff 9px 10px,transparent 10px 13px)}
.pass .stub .seat{font-size:16px;font-weight:800;letter-spacing:.02em}
/* priority pass: colour only, same footprint as the rest */
.pass.priority{border:1px solid rgba(213,18,84,.4);box-shadow:0 26px 60px -34px rgba(213,18,84,.5)}
.pass.priority .stub{background:linear-gradient(160deg,var(--magenta),#8b1b7d)}
/* Raised from 760px: two passes side by side leave the DSP row too narrow for
   the benchmark chip once the stub takes its 104px. */
@media(max-width:900px){.passes{grid-template-columns:1fr}}
@media(max-width:760px){
  .pass{grid-template-columns:1fr 84px}
  /* Type comes down a step across the whole pass so the three fields fit on one
     line. "Post-ad Rev" was wrapping to "Post-ad / Rev" on narrower handsets,
     which broke the row into two heights and threw the ticket out of line. */
  .pass .main{padding:16px 16px}
  .pass .fields{gap:10px}
  .pass .field .fl{font-size:8px;letter-spacing:.08em;white-space:nowrap}
  .pass .field .fv{font-size:15px}
  .pass .flag{font-size:8.5px;letter-spacing:.1em;margin-bottom:10px}
  .pass .fmt{font-size:8px;padding:4px 8px}
  .pass .logo{height:18px}
  .pass .logo img.tall{height:15px}
  .pass .dsp{font-size:10.5px;margin-top:13px;gap:7px}
  .pass .dsp .chip{height:23px;padding:0 8px}
  .pass .dsp .chip img{height:11px}
  /* The benchmark chips leave with the space: on a phone the pass has to carry
     spend, revenue and pROAS legibly first, and the same callouts are still in
     the format table right below. */
  .pass .dsp .bm{display:none}
}

/* ---------- Benchmark callouts ----------
   One chip, used on the boarding passes and in the format table so the two
   never disagree. Purple for above, magenta for below: magenta is the palette's
   attention colour, and a line under its benchmark is exactly the thing a
   reader should not skim past. Greying the misses would have been quieter but
   would also have hidden them. */
.bm{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  font-variant-numeric:tabular-nums;line-height:1}
.bm .arw{font-size:7px;line-height:1;transform:translateY(.5px)}
.bm.up{background:var(--lilac-2);color:var(--purple)}
.bm.down{background:rgba(213,18,84,.09);color:var(--magenta)}

/* Format Overview table */
.fmt-table-wrap{border-radius:20px;overflow:hidden;background:var(--paper);border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
.fmt-table-head{padding:22px 28px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--hair)}
.fmt-table-head .eyebrow{color:var(--purple)}
.fmt-sub{font-size:14px;color:var(--ink-soft);font-weight:400}
.fmt-table-outer{overflow-x:auto}
.fmt-table{width:100%;border-collapse:collapse;font-size:14px}
.fmt-table thead tr{background:linear-gradient(135deg,#4225a6 0%,#2e1a7a 60%,#1f1252 100%)}
.fmt-table th{text-align:left;padding:16px 20px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;border-bottom:none;white-space:nowrap}
.fmt-table th.r,.fmt-table td.r{text-align:right}
.fmt-table th.hl-col{color:#fff}
.fmt-table td{padding:16px 20px;border-bottom:1px solid var(--hair);font-weight:500;vertical-align:middle}
.fmt-table tr:last-child td{border-bottom:none}
.fmt-table tr.hi{background:rgba(66,37,166,.04)}
.fmt-table td.r{font-variant-numeric:tabular-nums;font-weight:700}
.fmt-table td.hl-col{color:var(--purple);font-weight:800;font-size:16px}
.fmt-pill{display:inline-block;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.04em}
.fmt-pill.disp{background:var(--lilac-2);color:var(--purple)}
.fmt-pill.ctv-pill{background:rgba(244,183,64,.12);color:#b5870a}
.brand-cell{min-width:120px}
.tb-logo{height:20px;width:auto;object-fit:contain}
.tb-logo.vrbo-tb{height:16px}
.tb-logo.hotels-tb{height:18px}
.dsp-text{display:inline-block;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.06em;
  background:var(--lilac-2);color:var(--purple)}

/* ---------- Insights (dot grid) ---------- */
.insights{background:var(--purple-night);color:#fff;position:relative;overflow:hidden}
#dotgrid{position:absolute;inset:0;z-index:0}
.insights .wrap{position:relative;z-index:2}
.insights .sec-head p{color:rgba(255,255,255,.72)}
.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.note{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:32px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);transition:transform .4s var(--ease),border-color .4s var(--ease)}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--purple);transition:width .5s var(--ease);z-index:-1}
.note:hover{transform:translateY(-6px);border-color:rgba(213,18,84,.4)}
.note:hover::before{width:100%}
.note .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(213,18,84,.14);border:1px solid rgba(213,18,84,.3);margin-bottom:20px}
.note .ic svg{width:22px;height:22px;stroke:var(--magenta-soft);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.note:hover .ic{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.note:hover .ic svg{stroke:#fff}
.note .tag{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.note h3{font-size:21px;font-weight:800;margin:8px 0 12px;letter-spacing:-.01em}
.note p{font-size:15px;color:rgba(255,255,255,.72);font-weight:400}
.pubchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pubchips .pc{height:34px;padding:0 14px;background:#fff;border-radius:8px;display:flex;align-items:center;transition:transform .3s var(--ease)}
.pubchips .pc:hover{transform:translateY(-3px) scale(1.03)}
.pubchips .pc img{height:15px;width:auto;object-fit:contain}
.pubchips .pc img.sm{height:13px}
@media(max-width:700px){.notes{grid-template-columns:1fr}}

/* ---------- Upsell ---------- */
.upsell{position:relative;overflow:hidden;background:var(--purple-deep);color:#fff}
.upsell .bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.upsell .bg img{width:100%;height:124%;object-fit:cover;object-position:center 55%}
.upsell .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--purple-deep) 0%,rgba(21,12,54,.94) 42%,rgba(21,12,54,.74) 100%)}
.upsell .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.upsell .flag{color:#D51254;margin-bottom:22px}
.upsell h2{font-size:clamp(34px,5vw,60px);color:#fff}
.upsell h2 .hl{color:var(--hl-dark)}
.omnireach-wordmark{display:inline-flex;align-items:center;vertical-align:-.12em}
.omnireach-inline{height:clamp(30px,4.4vw,52px);width:auto;display:block}
.upsell p.lead{font-size:18px;color:rgba(255,255,255,.82);margin-top:22px;max-width:46ch;font-weight:400}
.omni-feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.omni-feats span{font-size:13px;font-weight:500;letter-spacing:.02em;padding:10px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06)}

.nextpass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:20px;
  backdrop-filter:blur(10px);overflow:hidden}
.nextpass .np-top{padding:18px 24px;border-bottom:1px dashed rgba(255,255,255,.24);display:flex;justify-content:space-between;align-items:center}
.nextpass .np-top .lbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.nextpass .np-top .to{font-size:22px;font-weight:800;color:#fff}
.nextpass .np-body{padding:24px}
.nextpass .np-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.nextpass .np-row:last-of-type{border-bottom:none}
.nextpass .np-row .k{color:rgba(255,255,255,.6)}
.nextpass .np-row .v{font-weight:700}
.cta{margin-top:20px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 22px;border-radius:12px;background:var(--magenta);color:#fff;font-weight:700;font-size:15px;font-family:'DM Sans',Arial,sans-serif;
  letter-spacing:.01em;cursor:pointer;border:none;position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.cta span{position:relative;z-index:2}
.cta::before{content:"";position:absolute;inset:0;background:var(--purple);transform-origin:left center;transform:scaleX(0);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);z-index:1}
.cta:hover::before{transform:scaleX(1)}
.cta:hover{transform:translateY(-2px);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cta svg{width:18px;height:18px;position:relative;z-index:2;transition:transform .3s var(--ease)}
.cta:hover svg{transform:translateX(4px)}
#dealLibraryCta:hover svg{transform:none}
@media(max-width:860px){.upsell .wrap{grid-template-columns:1fr;gap:34px}}

/* placeholder note */
.phnote{margin-top:26px;font-size:12px;color:rgba(255,255,255,.5);font-weight:400;
  border-left:2px solid rgba(255,255,255,.3);padding-left:12px;max-width:44ch}

/* ---------- Footer ---------- */
footer{background:var(--purple-night);color:rgba(255,255,255,.7);padding:70px 0 46px;position:relative}
footer .ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;
  padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .fl img{height:24px;margin-bottom:16px}
footer .fl p{font-size:14px;max-width:40ch;font-weight:400}
footer .fr{display:flex;gap:56px;flex-wrap:wrap}
footer .fcol h4{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
footer .fcol a{display:block;font-size:14px;color:rgba(255,255,255,.8);padding:5px 0;transition:color .3s}
footer .fcol a:hover{color:var(--magenta-soft)}
footer .fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px}
footer .fbot p{font-size:12px;color:rgba(255,255,255,.5)}
footer .fbot .conf{display:inline-flex;align-items:center;gap:8px}
footer .fbot .conf .sig{width:7px;height:7px;border-radius:50%;background:var(--magenta)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero .bg,.band .bg,.upsell .bg,.hero .floatstat{transform:none!important}
}


/* Gated PDF section */
.gated-pdf{background:var(--purple-deep);color:#fff}
.gated-pdf .eyebrow{color:#fff}
.gated-card{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);border:1px solid rgba(255,255,255,.14);
  border-radius:24px;padding:52px}
.gated-left h2{font-size:clamp(28px,4vw,42px);color:#fff;margin-top:16px;letter-spacing:-.02em;line-height:1.1}
.gated-left p{margin-top:18px;color:rgba(255,255,255,.72);font-size:15px;max-width:42ch}
.gated-right{background:var(--paper);border-radius:18px;padding:32px;box-shadow:var(--shadow-sm)}
.gated-form{display:flex;flex-direction:column;gap:16px}
.gf-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft)}
.gf-field input{border:1px solid var(--hair);border-radius:10px;padding:12px 14px;font-size:15px;
  font-family:'DM Sans',Arial,sans-serif;color:var(--ink);outline:none;transition:border-color .2s;font-weight:400}
.gf-field input:focus{border-color:var(--purple)}
.gf-submit{width:100%;justify-content:center;margin-top:4px}
.gf-note{font-size:12px;color:var(--ink-soft);margin-top:2px;font-weight:400}
/* handleGatedSubmit() adds .hidden to the form, but nothing ever acted on it,
   so .gated-form{display:flex} kept the Unlock button on screen and the success
   block rendered directly beneath it -- tick flush against the button. The form
   was always meant to disappear on submit; it just never did. */
.gated-form.hidden{display:none}
.gated-success{text-align:center}
.gated-success.hidden{display:none}
.gs-icon{width:52px;height:52px;border-radius:50%;background:var(--lilac-2);color:var(--purple);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.gated-success h3{font-size:20px;color:var(--ink);font-weight:800}
.gated-success p{color:var(--ink-soft);font-size:14px;margin-top:8px;font-weight:400;line-height:1.5}
@media(max-width:820px){.gated-card{grid-template-columns:1fr;padding:32px}}


/* ============================================================
   MOBILE OVERRIDES (<=680px)
   Scoped fixes for: logo image distortion, format table,
   boarding passes, the month-on-month chart, and the gated PDF
   form. Upsell Spotlight and Flight Notes are intentionally left
   untouched.
   ============================================================ */
@media(max-width:680px){

  /* ---- 0a. Live PMP Performance board. Four KPI columns collapse to a 2x2
     grid; at 4-up each cell is only ~35px of content on a phone, which wraps
     "$18.10M" onto three lines. Border sides are re-dealt for two columns. ---- */
  .board-top{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px 18px; }
  .board-top .t{ font-size:11px; letter-spacing:.16em; }
  /* Stacked, the row is left-aligned, so the pill must be too -- it inherits
     justify-content:flex-end from the desktop layout otherwise and reads as a
     stray indent. */
  .board-top .now{ font-size:11px; letter-spacing:.1em; justify-content:flex-start; gap:10px; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .kpi{ padding:22px 16px; border-right:1px solid rgba(255,255,255,.1); }
  .kpi:nth-child(4n){ border-right:1px solid rgba(255,255,255,.1); }
  .kpi:nth-child(2n){ border-right:none; }
  .kpi:nth-last-child(-n+2){ border-bottom:none; }
  .kpi .val{ font-size:26px; }
  .kpi .lbl{ font-size:10px; letter-spacing:.12em; margin-top:10px; }
  .kpi .sub{ font-size:11.5px; margin-top:5px; }

  /* ---- 0b. Month-on-month chart. The chart itself swaps to a separate
     two-chart render in JS (see the chart block in the script); these are
     only the surrounding shell fixes. The header strip stacks instead of
     letting the date range wrap mid-phrase. ---- */
  .mom-top{ flex-direction:column; align-items:flex-start; gap:6px; padding:14px 18px; }
  .mom-top .t{ font-size:11px; letter-spacing:.16em; }
  .mom-top .now{ font-size:11px; letter-spacing:.1em; }
  .mom-body{ padding:18px 14px 16px; }
  .mom-legend{ gap:16px; margin-bottom:2px; }
  .mom-legend .lg{ font-size:11px; letter-spacing:.1em; }
  .mom-chart svg + svg{ margin-top:14px; }
  .mom-foot{ font-size:12.5px; margin-top:14px; }

  /* Hero kicker is the only June marker on mobile, since the top-bar
     edition pill is hidden below 820px. Keep it from wrapping oddly. */
  .hero .kicker{ font-size:10px; letter-spacing:.16em; margin-bottom:16px; }

  /* Hero type down a step on phones so the block clears the bar comfortably
     and the lines stop crowding each other. The paragraph's size is set once in
     the 820px block, beside the layout that depends on it -- do not re-set it
     here or the two breakpoints disagree. */
  .hero h1{ font-size:34px; }
  .flightstrip{ margin-top:22px; }
  .flightstrip .leg{ padding:11px 16px; }
  .flightstrip .leg .code{ font-size:17px; }
  .flightstrip .leg .lbl{ font-size:9px; }
  .flightstrip .path{ width:64px; }

  /* Header logos are larger now; keep the bar compact on small screens. */
  .brandlock img{ height:23px; }
  .brandlock .eg-logo{ height:19px; }

  /* Section rhythm again, tighter: 88px of dead space at each end of every
     section is a lot of thumb-scrolling on a phone. */
  .pad{ padding:64px 0; }
}

/* Very small phones (320px). Two KPI columns leave ~94px of content each, and
   "$18.10M" at 26px needs 96. Two pixels, but it clips the M. */
@media(max-width:360px){
  .kpi{ padding:20px 12px; }
  .kpi .val{ font-size:22px; }
  .kpi .lbl{ font-size:9px; letter-spacing:.1em; }
  .kpi .sub{ font-size:10.5px; }

  /* ---- 1. Logo/vector safety: never let fixed height + shrinking
     containers squash aspect ratio. max-height (not height) lets the
     browser scale both dimensions together. ---- */
  .tb-logo, .pass .logo img, .pass .logo img.tall,
  footer .fl img, .dsp-badge img {
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }
  .tb-logo{ max-height:18px; }
  .tb-logo.vrbo-tb{ max-height:14px; }
  .tb-logo.hotels-tb{ max-height:16px; }
  .pass .logo{ height:22px; }
  .pass .logo img{ max-height:22px; }
  .pass .logo img.tall{ max-height:18px; }

  /* ---- 2. Format Overview table -> stacked cards ---- */
  .fmt-table-outer{ overflow-x:visible; }
  .fmt-table, .fmt-table thead, .fmt-table tbody,
  .fmt-table th, .fmt-table td, .fmt-table tr{
    display:block;
    width:100%;
  }
  .fmt-table thead{ display:none; }
  .fmt-table tr{
    border-bottom:1px solid var(--hair);
    padding:14px 18px 16px;
  }
  .fmt-table tr:last-child{ border-bottom:none; }
  .fmt-table tr.hi{ background:rgba(66,37,166,.05); }
  .fmt-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:7px 0;
    border-bottom:none;
    white-space:normal;
    text-align:right;
  }
  .fmt-table td.r{ text-align:right; }
  .fmt-table td::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    flex:none;
    text-align:left;
  }
  .fmt-table td.hl-col{ font-size:17px; }
  .fmt-table .brand-cell{ min-width:0; }
  .fmt-table .tb-logo{ margin-left:auto; }
  .fmt-table .dsp-badge, .fmt-table .dsp-text{ margin-left:auto; }
  .fmt-table .fmt-pill{ margin-left:auto; white-space:nowrap; }

  /* ---- 3. Boarding passes: stack main content above a horizontal stub ---- */
  .pass, .pass.priority{
    grid-template-columns:1fr !important;
  }
  .pass .main, .pass.priority .main{
    padding:22px 20px;
  }
  .pass .stub, .pass.priority .stub{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
    gap:12px;
  }
  /* swap the vertical perforation for a horizontal one along the top */
  .pass .stub::before{
    left:0; right:0; top:-8px; bottom:auto; width:auto; height:16px;
    background:radial-gradient(circle at 50% 0,transparent 0 7px,var(--paper) 7px) 0 0/26px 16px repeat-x;
  }
  .pass .stub .brl{
    writing-mode:horizontal-tb;
    transform:none;
    font-size:10px;
  }
  .pass .stub .barcode{
    height:34px; width:70px;
    background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 9px,#fff 9px 10px,transparent 10px 13px);
  }
  .pass .stub .seat{ font-size:16px; }

  .pass .fields, .pass.priority .fields{
    grid-template-columns:repeat(3,1fr) !important;
    gap:14px !important;
  }
  .pass .field .fv{ font-size:17px; }
  .pass.priority .field.roas .fv{ font-size:26px; }
  .pass .toprow{ flex-wrap:wrap; row-gap:10px; }
  .pass .logo{ max-width:60%; }
  .pass .fmt{ font-size:9px; padding:5px 9px; }
  .pass .dsp{ flex-wrap:wrap; }

  /* ---- 4. Gated PDF form: fix CSS Grid min-width overflow bug + center ---- */
  .gated-card{
    grid-template-columns:1fr !important;
    padding:24px !important;
    gap:26px !important;
  }
  .gated-left, .gated-right{
    min-width:0;
    width:100%;
  }
  .gated-left{ text-align:center; }
  .gated-left h2{ font-size:clamp(24px,7vw,32px); }
  .gated-left p{ margin-left:auto; margin-right:auto; }
  .gated-right{
    margin:0 auto;
    max-width:100%;
    padding:24px 20px;
  }
  .gf-field input{ width:100%; box-sizing:border-box; }
}

/* Chatbot */
#chatbot-fab{position:fixed;bottom:28px;right:28px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:var(--purple);box-shadow:0 6px 24px rgba(66,37,166,.45);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
#chatbot-fab:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(66,37,166,.6)}
#chatbot-fab svg{width:26px;height:26px}
.chatwin{position:fixed;bottom:96px;right:28px;z-index:90;width:380px;max-height:520px;border-radius:18px;
  background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;
  font-family:'DM Sans',Arial,sans-serif;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.chatwin.hidden{opacity:0;pointer-events:none;transform:translateY(16px) scale(.96)}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  background:var(--grad-head);color:#fff;gap:10px}
.chat-head-l{display:flex;align-items:center;gap:12px}
.chat-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.chat-title{font-size:14px;font-weight:700;letter-spacing:-.01em}
.chat-sub{font-size:11px;color:rgba(255,255,255,.7);font-weight:400}
.chat-close{background:none;border:none;color:rgba(255,255,255,.8);font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
.chat-close:hover{color:#fff}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;max-height:340px;min-height:200px}
.chat-msg{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.5;max-width:90%;font-weight:400;animation:msgIn .3s var(--ease)}
@keyframes msgIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.chat-msg.bot{background:var(--lilac-2);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:var(--purple);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg.typing{color:var(--ink-soft)}
.chat-msg.typing::after{content:"...";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:"."}33%{content:".."}66%{content:"..."}100%{content:"."}}
.chat-followup{display:flex;flex-direction:column;gap:10px}
.chat-followup-label{font-size:12px;color:var(--ink-soft);font-weight:600;padding:2px 2px 0}
.chat-prompts{display:flex;flex-direction:column;gap:8px}
.chat-prompt{background:none;border:1px solid var(--hair);border-radius:12px;padding:10px 14px;font-size:13px;
  color:var(--purple);font-weight:500;text-align:left;cursor:pointer;font-family:'DM Sans',Arial,sans-serif;
  transition:background .2s,border-color .2s}
.chat-prompt:hover{background:var(--lilac-2);border-color:var(--purple)}
.chat-input-wrap{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--hair)}
.chat-input{flex:1;border:1px solid var(--hair);border-radius:12px;padding:10px 14px;font-size:14px;
  font-family:'DM Sans',Arial,sans-serif;outline:none;transition:border-color .2s}
.chat-input:focus{border-color:var(--purple)}
.chat-send{width:38px;height:38px;border-radius:50%;background:var(--purple);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.chat-send:hover{background:var(--magenta)}
@media(max-width:440px){.chatwin{right:8px;left:8px;width:auto;bottom:88px}}