/* ============================================================
   Hopscotch Play — website UI kit shared styles
   Full-bleed colour-block sections + friendly-round components,
   built on the design-system tokens (../../styles.css).
   ============================================================ */
* { box-sizing: border-box; }
body { margin: 0; background: #fff; font-family: var(--font-sans); color: var(--hp-body); }
a { text-decoration: none; }
/* Images keep their file aspect ratio when CSS sizes only their width. The width/height
   attributes on every <img> reserve space before load; they must never decide the shape. */
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 32px; }

/* ---- Full-bleed colour-block sections ---- */
section { width: 100%; }
.sec { padding: 96px 0; }
.sec-sm { padding: 64px 0; }
/* Phones and landscape phones (under 500px tall): 96px of section padding was a quarter of the
   screen, and a header pinned to the top ate another quarter — let both scroll away. */
@media (max-width: 600px), (max-height: 500px) {
  .sec { padding: 64px 0; }
  .sec-sm { padding: 48px 0; }
}
.s-white { background: #fff; }
.s-sand  { background: var(--hp-sand); }
.s-cream { background: var(--hp-cream); }
.s-blue  { background: var(--hp-blue); color: #fff; }
.s-ink   { background: var(--hp-ink); color: #fff; }
.s-lime  { background: var(--hp-lime); }
.s-cyan  { background: var(--hp-cyan); }
.s-pink  { background: var(--hp-nav-pink); }
.s-yellow{ background: var(--hp-yellow); }
.s-blue h1, .s-blue h2, .s-blue h3, .s-ink h1, .s-ink h2, .s-ink h3,
.s-blue .display, .s-blue .h2, .s-blue .h2-lg, .s-blue .h3,
.s-ink .display, .s-ink .h2, .s-ink .h2-lg, .s-ink .h3 { color: #fff; }
.s-blue p, .s-ink p { color: var(--hp-on-blue-85); }

/* ---- Type ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--hp-blue); }
.eyebrow .rule { width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow.coral { color: var(--hp-coral); }
.eyebrow.on-blue { color: var(--hp-yellow); }
h1.display { margin: 0; font-weight: 600; font-size: var(--fs-display); line-height: 1.08; letter-spacing: 1px; color: var(--hp-ink); }
h2.h2 { margin: 0; font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -1px; color: var(--hp-ink); }
h2.h2-lg { margin: 0; font-weight: 600; font-size: var(--fs-h2-lg); line-height: 1.12; letter-spacing: 1px; color: var(--hp-ink); }
h3.h3 { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.4; color: var(--hp-ink); }
.lead { font-size: 18px; line-height: 28.8px; }
.muted { color: var(--hp-muted); }
.chubb { font-family: var(--font-display); }
.hl-y { color: var(--hp-yellow); }
.hl-c { color: var(--hp-coral); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none;
  cursor: pointer; font-family: var(--font-sans); font-weight: 700; letter-spacing: .2px; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur) var(--ease-out); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-lg { font-size: 15px; padding: 15.5px 32.5px; border-radius: var(--r-pill); }
.btn-sm { font-size: 13px; padding: 9px 18px; border-radius: var(--r-sm); }
.btn-primary { background: var(--hp-coral); color: #fff; box-shadow: var(--shadow-coral); }
.btn-accent { background: var(--hp-yellow); color: var(--hp-blue-ink); }
.btn-outline { background: transparent; color: var(--hp-blue); box-shadow: var(--ring-blue); }
.btn-outline.on-blue { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.btn-white { background: #fff; color: var(--hp-blue); }
.link { font-weight: 700; font-size: 14px; color: var(--hp-blue); }
/* Tap targets: small text links get a 24px-plus hit area (WCAG 2.5.8). Padding only, no layout
   change beyond 4px; inline links inside sentences are exempt and left alone. */
.link, .compare, .promo a, .persona .body > a, .fcard > a, .fbar .legal a, .crumb a, .fcol a { display: inline-block; padding-block: 4px; }
.fcol a { display: block; padding-block: 0; } /* already 26px tall from line-height: 2 */
.lock { padding-block: 2px; }
.btn { min-height: 24px; }
.s-blue .link, .s-ink .link { color: var(--hp-yellow); }

/* ---- Cards ---- */
.card { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 26px; }
.card-flat { border-radius: var(--r-card-lg); padding: 26px; }
.card h3, .card-flat h3 { margin: 0 0 8px; font-weight: 600; font-size: 20px; line-height: 1.4; color: var(--hp-ink); }
.card p, .card-flat p { margin: 0; font-size: 14px; line-height: 22.4px; color: var(--hp-body); }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Split / zigzag rows ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.wide-left { grid-template-columns: 1.15fr 1fr; }
.split.wide-right { grid-template-columns: 1fr 1.15fr; }
.split.reverse > :first-child { order: 2; }

/* ---- Media / illustration wells ---- */
.well { border-radius: var(--r-card-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frame { border-radius: 20px; box-shadow: var(--frame-ink); }
.pill { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--hp-cyan); color: var(--hp-blue-link); font-weight: 700; font-size: var(--fs-micro); box-shadow: var(--shadow-pill); }
.spot { width: 100%; height: auto; }

/* ---- Eyebrow head block ---- */
.head { display: flex; flex-direction: column; gap: 14px; }
.head.center { align-items: center; text-align: center; }
.btns { flex-wrap: wrap; }
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.head .lead { max-width: 620px; }

/* ---- Metric / stat ---- */
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-stat); line-height: 1; letter-spacing: 1px; } /* 28px on a 360px phone: "THOUSANDS" in the display face is ~9px wide per px of type */

/* ---- Promo + Nav ---- */
.promo { background: var(--hp-blue); color: #fff; text-align: center; font-size: 13px; padding: 9px 20px;
  display: flex; gap: 8px; align-items: center; justify-content: center; }
.promo a { color: var(--hp-yellow); font-weight: 700; text-decoration: underline; white-space: nowrap; }
.promo .spark { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: relative; }
.promo .spark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--hp-yellow-bright); }
.nav { background: var(--hp-nav-pink); position: sticky; top: 0; z-index: 60; }
/* Landscape phones (under 500px tall): the header scrolls away instead of holding a quarter of the
   screen. Must come AFTER the sticky rule above — same specificity, last one wins. */
@media (max-height: 500px) { .nav { position: static; } }
.nav .row { display: flex; align-items: baseline; gap: 36px; height: 81px; }
.lock { display: inline-flex; align-items: baseline; gap: 5px; line-height: 1; }
.lock .bug { align-self: center; height: 30px; width: auto; margin-right: 10px; transform: translateY(-4px); }
.lock .w { font-size: 20px; letter-spacing: -.4px; color: var(--hp-blue); }
.lock .p { font-family: var(--font-display); font-size: 22px; color: var(--hp-blue); }
.nav-links { display: flex; align-items: center; gap: 8px; flex: 1; }
.nav-item { position: static; height: 81px; display: flex; align-items: center; }
.nav-trigger { font-weight: 500; font-size: 14px; color: var(--hp-body); display: inline-flex; align-items: center;
  gap: 6px; text-decoration: none; cursor: pointer; padding: 8px 12px; border-radius: var(--r-pill); white-space: nowrap; transition: background .15s, color .15s; }
.nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger { color: var(--hp-blue); background: rgba(255,255,255,.55); }
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--hp-coral); opacity: .8; transition: transform .2s var(--ease-out); }
.nav-item:hover .caret { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 81px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s; z-index: 100; pointer-events: none; }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* .mega is a full-width strip; anim.js (initNav → alignMegas) sets margin-left on .mega-inner so the
   panel opens under its trigger, clamped to the container. Without JS it stays left-aligned. */
.mega-inner { display: inline-block; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(28,52,107,.18), var(--ring-hairline); padding: 28px; margin-top: 10px; }
.mega-head { margin-bottom: 20px; }
.mega-head h4 { margin: 0; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--hp-blue); font-weight: 700; }
.mega-head p { margin: 5px 0 0; font-size: 14px; color: var(--hp-muted); }
.mega-grid { display: grid; gap: 18px; }
.cols-3 { grid-template-columns: repeat(3, 300px); }
.cols-2 { grid-template-columns: repeat(2, 300px); }
.mcard { display: flex; flex-direction: column; text-decoration: none; transition: transform .15s var(--ease-out); }
.mcard:hover { transform: translateY(-3px); }
.mthumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--ring-hairline); }
.mthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mthumb.spot img { width: auto; height: 96px; object-fit: contain; }
.mcard .mt { font-weight: 700; font-size: 15px; color: var(--hp-ink); margin-top: 12px; }
.mcard .md { font-size: 13px; line-height: 1.45; color: var(--hp-body); margin-top: 3px; }
.mega-split { display: grid; grid-template-columns: max-content 300px; gap: 40px; align-items: stretch; }
.mlist { display: flex; flex-direction: column; gap: 2px; align-self: center; }
.mlink { display: flex; flex-direction: column; padding: 13px 16px; border-radius: 14px; text-decoration: none; transition: background .15s; }
.mlink:hover { background: var(--hp-sand); }
.mlink .mt { font-weight: 700; font-size: 15px; color: var(--hp-ink); }
.mlink .md { font-size: 13px; color: var(--hp-body); margin-top: 2px; }
.nav-cta { display: flex; align-items: center; align-self: center; gap: 10px; }
/* Drawer is transparent on desktop; hamburger hidden until narrow. */
.nav-drawer { display: contents; }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto; padding: 0 10px; background: transparent; border: none;
  cursor: pointer; border-radius: 10px; }
.nav-hamburger span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--hp-blue);
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out); }
.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---- Final CTA panel ---- */
.cta-panel { border-radius: 36px; background: var(--hp-blue); padding: 80px 32px 96px; text-align: center; color: #fff; }
.cta-panel h2 { margin: 0; font-weight: 600; font-size: var(--fs-cta-title); line-height: var(--lh-cta-title); letter-spacing: -1px; color: #fff; }
.cta-panel .sub { margin: 14px auto 0; max-width: 540px; font-size: 17px; line-height: 27.2px; color: var(--hp-on-blue-85); }
.cta-panel .btns { display: flex; gap: 12px; justify-content: center; margin: 30px 0 14px; flex-wrap: wrap; }
.cta-panel .fine { font-size: 15px; color: var(--hp-on-blue-60); margin: 0; }

/* ---- Footer ---- */
footer.site { background: var(--hp-ink); padding: 64px 0 24px; }
.fcols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; }
.fcols .about p { font-size: 13px; line-height: 20.8px; color: var(--hp-on-blue-60); max-width: 240px; margin: 13px 0 0; }
.fcol h4 { margin: 0 0 12px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--hp-on-blue-60); }
.fcol a { display: block; font-size: 13px; line-height: 2; color: var(--hp-on-blue-60); }
.fbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  border-top: 1px solid var(--hp-hairline-footer); margin-top: 48px; padding-top: 20px; }
.fbar span, .fbar a { font-size: 12px; color: var(--hp-on-blue-60); }
.fbar .legal { display: flex; gap: 22px; }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--hp-hairline); padding: 22px 0; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.faq-q .q { font-weight: 600; font-size: 17px; line-height: 27px; color: var(--hp-ink); }
.toggle { width: 28px; height: 28px; border-radius: 50%; background: var(--hp-blue); color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; transition: transform .2s; }
.faq-item.open .toggle { transform: rotate(45deg); }
.faq-a { font-size: 14px; line-height: 23.8px; color: var(--hp-body); max-width: 620px; /* ~85 characters per line at 14px */ margin: 12px 0 0; display: none; }
.faq-item.open .faq-a { display: block; }

@media (max-width: 900px) {
  .split, .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr) !important; }
  .split.reverse > :first-child { order: 0; }
  .fcols { grid-template-columns: 1fr 1fr; }
}

/* ---- Nav → hamburger ----
   The desktop row (logo, five menu items, two buttons) needs 1100px to fit inside the 32px gutters;
   below that the buttons ran off the right edge and phones/tablets zoomed the whole page out to fit
   (every page at 932–1024px: large phones in landscape, iPad mini landscape, iPad Pro portrait).
   Grids collapse at 900px (above); the menu switches earlier, at 1100px. */
@media (max-width: 1100px) {
  .nav .row { height: 64px; gap: 0; justify-content: space-between; align-items: center; }
  .nav-hamburger { display: inline-flex; }
  .nav-drawer { display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: var(--hp-nav-pink); gap: 4px;
    padding: 8px 20px 20px; box-shadow: 0 24px 40px rgba(28,52,107,.16);
    max-height: calc(100vh - var(--drawer-top, 64px)); max-height: calc(100dvh - var(--drawer-top, 64px)); overflow-y: auto; }
  .nav-open .nav-drawer { display: flex; }
  .nav-links { flex: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-item { position: static; height: auto; display: block; }
  .nav-trigger { width: 100%; height: auto; justify-content: space-between; padding: 14px 12px;
    font-size: 16px; border-radius: 12px; }
  .caret { display: none; }
  .mega { display: none !important; }
  .nav-cta { width: 100%; align-self: stretch; flex-direction: row; align-items: stretch; gap: 10px; margin-top: 8px; }
  .nav-cta .btn { flex: 1; justify-content: center; padding: 13px 18px; font-size: 15px; }
}

@media (max-width: 600px) {
  .fcols, .prev-cards, .moments { grid-template-columns: 1fr; }
  .btn { white-space: normal; }
  .pw-addon { flex-wrap: wrap; row-gap: 6px; }
  .pw-addon-label { flex: 1 1 200px; }
  .pw-addon-price { margin-left: 40px; } /* under the label, in line with its text, when the price wraps onto its own line */
  .wrap, .wrap-narrow { padding: 0 20px; }
  .cta-panel { padding: 56px 24px 64px; }
}

/* ---- Shared library/format-page pieces ---- */
.crumb { font-size: 13px; color: var(--hp-muted); padding: 20px 0 0; }
.crumb a { color: var(--hp-muted); }
.reassure { font-size: 13px; color: var(--hp-muted); margin: 0; }
.prev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gcard { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); overflow: hidden; }
.gcard .th { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-weight: 700;
  color: rgba(63,63,66,.45); position: relative; }
.gcard.lock .th::after { content: "🔒"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(63,63,66,.25); font-size: 22px; }
.gcard .b { padding: 14px; }
.gcard h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--hp-ink); }
.gcard .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gtag { font-size: var(--fs-micro); font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.gtag.skill { background: var(--hp-lime); color: var(--hp-teal-ink); }
.gtag.age { background: var(--hp-pink); color: var(--hp-coral); }
.gtag.mech { background: var(--hp-sand); color: var(--hp-muted); }
.gate { margin-top: 28px; text-align: center; background: var(--hp-blue); border-radius: 24px; padding: 40px; box-shadow: var(--shadow-blue-glow); color: #fff; }
.gate h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 30px; color: #fff; }
.gate p { margin: 0 0 18px; color: var(--hp-on-blue-85); }
.checklist { display: grid; gap: 16px; }
.chk { display: flex; gap: 14px; align-items: flex-start; }
.chk .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--hp-lime); color: var(--hp-teal-ink);
  font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chk h3 { margin: 0 0 3px; font-size: 16px; font-weight: 600; }
.chk p { margin: 0; font-size: 14px; line-height: 21px; }
.s-blue .chk h3 { color: #fff; } .s-blue .chk p { color: var(--hp-on-blue-80); }
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.moment { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px; }
.moment .lab { display: inline-block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--hp-lime); color: var(--hp-teal-ink); margin-bottom: 10px; }
.moment h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--hp-ink); }
.moment p { margin: 0; font-size: 13px; line-height: 19px; color: var(--hp-body); }
@media (max-width: 900px) { .prev-cards { grid-template-columns: 1fr 1fr; } .moments { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .prev-cards, .moments { grid-template-columns: 1fr; } }


/* ===== Accessibility: skip-to-content link ===== */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 1000;
  background: var(--hp-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* FAQ question is a <button> — neutralize default button chrome (keeps .faq-q flex row) */
.faq-q {
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

/* ============================================================
   "Watch a demo" popup video player
   Markup is created on demand by the widget at the bottom of anim.js; any
   element with data-demo opens it. A native <dialog> is used on purpose —
   the browser gives us the focus trap, Escape-to-close, inert background
   and backdrop for free, which a hand-rolled overlay has to reimplement.
   ============================================================ */
.vdlg {
  /* The dialog is the full-viewport stage; the video sits in .vdlg-frame inside it,
     so a click that lands on the dialog itself is unambiguously a backdrop click. */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.vdlg::backdrop {
  background: rgba(20, 24, 40, 0.78);
  backdrop-filter: blur(4px);
}
.vdlg[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sizes the video and anchors the close button above it. The shell does NOT clip its
   overflow, so the button can sit outside the video's rounded corners. */
.vdlg-shell {
  position: relative;
  /* ~80% of the screen width, but never so wide that the 16:9 box (plus room for the
     close button above it) runs past the top and bottom of the viewport. */
  width: min(80vw, calc((100vh - 128px) * 16 / 9));
  width: min(80vw, calc((100dvh - 128px) * 16 / 9));
  max-width: 1400px;
}

.vdlg-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0d1020;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.vdlg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.vdlg-video.is-ready {
  opacity: 1;
}

.vdlg-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--hp-on-blue-70);
}

/* Sits just above the frame's top-right corner, clear of the player's own controls. */
.vdlg-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Stays legible against the backdrop once focus moves into the player. */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  color: var(--hp-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.vdlg-close:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.06);
}
.vdlg-close:focus-visible {
  outline: 2px solid var(--hp-white);
  outline-offset: 3px;
}
.vdlg-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

@media (max-width: 600px) {
  .vdlg-shell {
    width: min(94vw, calc((100vh - 112px) * 16 / 9));
    width: min(94vw, calc((100dvh - 112px) * 16 / 9));
  }
  .vdlg-frame {
    border-radius: var(--r-card);
  }
  .vdlg-close {
    top: -48px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes vdlg-pop {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.97);
    }
  }
  .vdlg[open] .vdlg-shell {
    animation: vdlg-pop 0.26s var(--ease-out);
  }
}

/* ---- Pricing widgets (.pw) — shared component ----
   Markup is generated by tools/pricing.js from content/pricing/, behaviour lives in
   www/pricing.js. Variants: .pw-solo .pw-group .pw-full .pw-compact .pw-compact-ent. */
.pw { --pw-fill: var(--hp-blue); }
.pw-toolbar { display: flex; gap: 36px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin-bottom: 36px; }
.pw-tg { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pw-l { font-size: var(--fs-micro); letter-spacing: 1px; text-transform: uppercase; color: var(--hp-muted); font-weight: 600; }
.pw-toggle { display: inline-flex; background: #fff; border-radius: var(--r-pill); padding: 4px; gap: 4px; box-shadow: var(--ring-hairline); }
.pw-opt { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 20px; border-radius: var(--r-pill); cursor: pointer; color: var(--hp-body); background: none; border: 0; }
.pw-opt.is-on { background: var(--hp-blue); color: #fff; }
.pw-opt:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
.pw-save { font-size: var(--fs-micro); background: var(--hp-lime); color: var(--hp-teal-ink); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px; }
.pw-seatbar { display: flex; flex-direction: column; gap: 12px; max-width: 1120px; margin: -12px auto 20px; background: #fff; border-radius: 18px; padding: 18px 24px 16px; box-shadow: var(--ring-hairline); text-align: left; }
.pw-w2 .pw-seatbar { max-width: 760px; }
.pw-seatbar[hidden] { display: none; }
.pw-seatbar-top { display: flex; align-items: baseline; gap: 14px 18px; flex-wrap: wrap; }
.pw-seatbar-l { font-weight: 700; font-size: 15px; color: var(--hp-ink); margin-right: auto; }
.pw-seatbar-hint { margin: 0; font-size: 12px; color: var(--hp-muted); }
.pw-seats-n { font-size: 14px; font-weight: 700; color: var(--hp-ink); display: inline-flex; align-items: baseline; gap: 5px; }
.pw-seats-n input { width: 4.5em; font: inherit; font-weight: 700; color: var(--hp-ink); text-align: center; background: var(--hp-sand); border: 0;
  border-radius: 8px; padding: 5px 6px; box-shadow: var(--ring-hairline); -moz-appearance: textfield; appearance: textfield; }
.pw-seats-n input:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 1px; }
.pw-seats-n input::-webkit-outer-spin-button, .pw-seats-n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pw-range { --pct: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: var(--r-pill); margin: 2px 0 0; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--pw-fill) var(--pct), rgba(0,0,0,.12) var(--pct)); }
.pw-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pw-fill); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.pw-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pw-fill); border: 3px solid #fff; cursor: pointer; }
.pw-range:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; }

/* Cards: a grid, so every card in a row stretches to the tallest one (Basic and Pro always
   match). With three plans the Enterprise card spans both rows and the add-on sits under
   Basic and Pro. */
.pw-grid { display: grid; gap: 20px; max-width: 1120px; margin: 0 auto; align-items: stretch; text-align: left; }
.pw-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.pw-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pw-cols-3.has-addon .pw-card.enterprise { grid-column: 3; grid-row: 1 / span 2; }
.pw-addon { grid-column: 1 / -1; }
.pw-cols-3.has-addon .pw-addon { grid-column: 1 / 3; grid-row: 2; }
.pw-card { border-radius: 24px; padding: 30px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.pw-card.basic { background: #fff; box-shadow: var(--shadow-card); color: var(--hp-ink); }
.pw-card.pro { background: var(--hp-blue); box-shadow: var(--shadow-blue-glow); color: #fff; }
.pw-card.enterprise { background: var(--hp-ink); color: #fff; }
.pw-badge { position: absolute; top: 20px; right: 20px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--hp-yellow); color: var(--hp-teal-ink); padding: 4px 10px; border-radius: var(--r-pill); }
.pw-name { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pw-card.basic .pw-name { color: var(--hp-coral); } .pw-card.pro .pw-name { color: var(--hp-yellow); } .pw-card.enterprise .pw-name { color: var(--hp-lime); }
.pw-tag { font-size: 13px; line-height: 19px; margin: 4px 0 0; min-height: 38px; }
.pw-card.basic .pw-tag { color: var(--hp-body); } .pw-card.pro .pw-tag { color: var(--hp-on-blue-80); } .pw-card.enterprise .pw-tag { color: rgba(255,255,255,.72); }
.pw-amt { font-weight: 700; font-size: 44px; letter-spacing: -1px; line-height: 1.1; }
.pw-amt-sm { font-size: 30px; }
.pw-per { font-size: 14px; opacity: .7; font-weight: 400; }
.pw-billed { font-size: 12px; margin: 4px 0 0; }
.pw-card.basic .pw-billed { color: var(--hp-muted); } .pw-card.pro .pw-billed { color: var(--hp-on-blue-70); } .pw-card.enterprise .pw-billed { color: rgba(255,255,255,.6); }
.pw-cta { width: 100%; justify-content: center; text-align: center; }
.pw-card.pro .pw-cta.btn-white { box-shadow: none; }
.pw-list-h { font-size: var(--fs-micro); letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.pw-card.basic .pw-list-h { color: var(--hp-muted); } .pw-card.pro .pw-list-h { color: var(--hp-on-blue-70); } .pw-card.enterprise .pw-list-h { color: rgba(255,255,255,.6); }
.pw-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; align-content: start; }
.pw-list li { font-size: 13px; line-height: 18px; padding-left: 24px; position: relative; }
.pw-list li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.pw-card.basic li { color: var(--hp-body); } .pw-card.basic li::before { color: var(--hp-coral); }
.pw-card.pro li { color: var(--hp-on-blue-85); } .pw-card.pro li::before { color: var(--hp-yellow); }
.pw-card.enterprise li { color: rgba(255,255,255,.85); } .pw-card.enterprise li::before { color: var(--hp-lime); }

.pw-addon { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 20px 26px; box-shadow: var(--ring-hairline); cursor: pointer; }
.pw-addon input { position: absolute; opacity: 0; width: 0; height: 0; }
.pw-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--hp-hairline); display: inline-flex; align-items: center; justify-content: center; transition: all .15s var(--ease-out); }
.pw-check::after { content: "\2713"; color: #fff; font-size: 14px; font-weight: 700; opacity: 0; }
.pw-addon input:checked + .pw-check { background: var(--hp-blue); box-shadow: inset 0 0 0 2px var(--hp-blue); }
.pw-addon input:checked + .pw-check::after { opacity: 1; }
.pw-addon input:focus-visible + .pw-check { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
.pw-addon-label { flex: 1; font-size: 14px; line-height: 20px; color: var(--hp-body); }
.pw-addon-label b { color: var(--hp-ink); font-weight: 700; }
.pw-addon-price { font-weight: 700; font-size: 20px; letter-spacing: -.5px; color: var(--hp-ink); white-space: nowrap; }
.pw-addon-price span { font-size: 13px; font-weight: 400; opacity: .7; }

/* Pricing cards stack with the hamburger (1100px): three cards in 901–980px were ~260px wide. */
@media (max-width: 1100px) {
  .pw-grid, .pw-cols-2, .pw-cols-3 { grid-template-columns: minmax(0, 1fr); max-width: 460px; } /* minmax(0,…): a card's intrinsic width must not widen a 360px phone */
  .pw-cols-3.has-addon .pw-card.enterprise, .pw-cols-3.has-addon .pw-addon, .pw-addon { grid-column: auto; grid-row: auto; }
  .pw-toolbar { gap: 20px; }
}

/* ---- Privacy banner (anim.js "Privacy choices") ---- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 600px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px;
  background: var(--hp-nav-pink); color: var(--hp-ink); border-radius: 18px;
  box-shadow: 0 14px 40px rgba(28,52,107,.20), var(--ring-blue); /* the header's pink + a blue ring: brand chrome, distinct from every section colour */
  font-size: 14px; line-height: 1.5; }
.consent p { margin: 0; flex: 1 1 280px; }
.consent a { color: var(--hp-blue); text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent .btn { padding: 9px 16px; font-size: 14px; border-radius: var(--r-pill); white-space: nowrap; }
.consent-yes { background: var(--hp-blue); color: #fff; }
.consent-no { background: #fff; color: var(--hp-blue); box-shadow: var(--ring-blue); } /* white, so it reads as a button on the pink card */
@media (max-width: 600px) { .consent { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; } }
@media print { .consent { display: none; } }