/* Presenter3D cleaned shared/site stylesheet. Generated from the active source CSS files. */

/* ===== Source: p3d.css ===== */
/* ============================================================
   Presenter3D — Landing system v2
   One continuous canvas · frameless · soft neumorphic depth
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&family=Space+Grotesk:wght@400..700&family=Hanken+Grotesk:wght@400..700&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* One canvas. Raised elements are lighter; nothing is boxed by borders. */
  --bg:         rgb(235, 235, 235);        /* page canvas */
  --bg-2:       rgb(232, 232, 232);
  --surface:    rgb(245, 245, 245);        /* raised chips/buttons */
  --surface-2:  rgb(240, 240, 240);
  --hairline:   rgb(219, 219, 219);
  --hairline-2: rgb(228, 228, 228);

  /* Ink — neutral grey */
  --ink:        rgb(46, 46, 48);
  --ink-soft:   rgb(99, 99, 103);
  --ink-faint:  rgb(135, 135, 140);
  --ink-ghost:  rgb(170, 170, 174);

  /* Brand rose */
  --rose:       #df2d64;
  --rose-deep:  #c01f53;
  --rose-soft:  color-mix(in oklab, var(--rose) 60%, var(--ink));

  /* Type */
  --font-display: "Geist", system-ui, sans-serif;
  --font-body:    "Geist", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
  --display-tracking: -0.022em;

  /* Soft "extruded" depth — white glow above, grey shadow below (top-lit) */
  --shadow-dark:  rgb(210, 210, 210);
  --raise-sm:
    0 -3px 8px 1px #fff,
    0 6px 11px rgb(216, 216, 216);
  --raise:
    0 -5px 12px 2px #fff,
    0 10px 15px rgb(210, 210, 210);
  --raise-lg:
    0 -6px 16px 3px #fff,
    0 18px 28px rgb(203, 203, 203);
  /* pressed-in well */
  --inset:
    inset 0 5px 12px -5px rgb(204, 204, 204),
    inset 0 -3px 8px -2px #fff;

  --radius:   18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Type pairing variants ---------- */
:root[data-type="grotesk"] {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --display-tracking: -0.018em;
}
:root[data-type="hanken"] {
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --display-tracking: -0.015em;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.006em;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in oklab, var(--rose) 24%, transparent); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.anchor-target { position: relative; top: -96px; display: block; width: 0; height: 0; overflow: hidden; }

/* ---------- Mono eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.55; }
.eyebrow.neutral { color: var(--ink-faint); }

/* ============================================================
   NAV — sits on the canvas, no chrome until scrolled
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(235, 235, 235, 0.72); /* iOS 15 fallback — color-mix() unsupported before Safari 16.2 */
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.scrolled {
  background: rgba(235, 235, 235, 0.88); /* iOS 15 fallback */
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 22px -16px var(--shadow-dark);
}
.nav-inner { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; justify-self: start; }
.brand .wordmark { width: 135px; height: auto; }
.brand .logo-mark { height: 36px; width: auto; display: none; }   /* shown only at narrow widths (with burger) */

/* ----- burger menu (narrow nav) ----- */
.nav-right .nav-burger-wrap { display: none; }      /* shown only at narrow widths */
.nav-burger {
  background: var(--surface); box-shadow: var(--raise-sm); border: 0;
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.nav-burger:hover { transform: translateY(-1px); box-shadow: var(--raise); }
.burger-box { position: relative; width: 17px; height: 12px; }
.burger-box span {
  position: absolute; left: 0; width: 100%; height: 1.8px; border-radius: 2px;
  background: var(--ink); transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}
.burger-box span:nth-child(1) { top: 0; }
.burger-box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-box span:nth-child(3) { bottom: 0; }
.nav-burger-wrap.open .burger-box span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-burger-wrap.open .burger-box span:nth-child(2) { opacity: 0; }
.nav-burger-wrap.open .burger-box span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.burger-panel { min-width: 244px; padding: 8px; }
.burger-panel .bm-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  padding: 10px 12px 5px; display: block;
}
.burger-panel .bm-sep { height: 1px; background: var(--hairline); margin: 6px 8px; }

/* collapsible groups (Features / Guides) — collapsed by default, expand on click */
.bm-group-trigger {
  font-family: var(--font-body); font-size: 14px; font-weight: 450;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 9px; line-height: 1.3;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.bm-group-trigger:hover { background: color-mix(in oklab, var(--rose) 8%, var(--surface-2)); }
.bm-group-trigger .chev {
  font-size: 13px; color: var(--ink-ghost);
  transition: transform 0.28s var(--ease);
}
.bm-group-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bm-sub { height: 0; overflow: hidden; transition: height 0.34s var(--ease); }
.bm-sub-inner { padding: 2px 0 4px 8px; display: flex; flex-direction: column; gap: 1px; }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  justify-self: center;
}
.nav-right { display: flex; align-items: center; gap: 9px; justify-self: end; }
.nav-links a {
  font-size: 14.5px; color: var(--ink-soft); font-weight: 450;
  padding: 8px 13px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links .chev { font-size: 13px; color: var(--ink-ghost); transform: translateY(-1px); }

.lang-btn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 450;
  color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 11px; border: 0;
  background: var(--surface); box-shadow: var(--raise-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), color 0.2s var(--ease);
}
.lang-btn:hover { transform: translateY(-1px); box-shadow: var(--raise); color: var(--ink); }
/* plain variant — no card, just text + globe (per Houman) */
.lang-btn.plain { background: transparent; box-shadow: none; padding-left: 6px; padding-right: 6px; }
.lang-btn.plain:hover { transform: none; box-shadow: none; color: var(--ink); }
.lang-btn .globe { opacity: 0.75; }
.lang-btn .chev { font-size: 13px; color: var(--ink-ghost); transform: translateY(-1px); }

/* ============================================================
   DROPDOWN MENUS — nav flyouts + language pickers
   ============================================================ */
.menu-wrap { position: relative; display: inline-flex; }
.menu-wrap .chev { transition: transform 0.28s var(--ease); }
.menu-wrap.open > .menu-trigger .chev { transform: translateY(-1px) rotate(180deg); }

/* nav triggers match the existing nav links exactly */
.nav-links .menu-trigger {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 450;
  color: var(--ink-soft); background: transparent; border: 0; cursor: pointer;
  padding: 8px 13px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.2s var(--ease);
}
.nav-links .menu-trigger:hover,
.nav-links .menu-wrap.open .menu-trigger { color: var(--ink); }

/* the floating panel */
.menu-panel {
  position: absolute; top: calc(100% + 9px); left: 0;
  min-width: 212px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--raise-lg);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; transform: translateY(-7px) scale(0.985); transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.2s var(--ease);
  z-index: 60;
}
.menu-wrap.open > .menu-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.menu-panel.align-right { left: auto; right: 0; transform-origin: top right; }

.menu-panel a, .menu-panel button {
  font-family: var(--font-body); font-size: 14px; font-weight: 450;
  color: var(--ink-soft); text-align: left; cursor: pointer;
  background: transparent; border: 0; width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px; line-height: 1.3;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.menu-panel a:hover, .menu-panel button:hover {
  background: color-mix(in oklab, var(--rose) 8%, var(--surface-2));
  color: var(--ink);
}
/* leading marker for nav items */
.menu-panel .mi-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-ghost);
  flex: 0 0 5px; transition: background 0.16s var(--ease);
}
.menu-panel a:hover .mi-dot { background: var(--rose); }

/* language items: code + name + check */
.lang-menu { min-width: 186px; }
.lang-menu .mi-code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); flex: 0 0 22px; }
.lang-menu .mi-name { flex: 1; }
.lang-menu .mi-check { color: var(--rose); opacity: 0; font-size: 13px; transition: opacity 0.16s var(--ease); }
.lang-menu [aria-checked="true"] { color: var(--ink); }
.lang-menu [aria-checked="true"] .mi-code { color: var(--rose); }
.lang-menu [aria-checked="true"] .mi-check { opacity: 1; }

/* dark variant for the footer — opens upward */
.menu-panel.on-dark {
  top: auto; bottom: calc(100% + 9px); transform-origin: bottom left;
  background: #2c2c30; border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.16), 0 16px 32px -10px rgba(0, 0, 0, 0.55);
}
.menu-panel.on-dark.align-right { transform-origin: bottom right; }
.menu-panel.on-dark a, .menu-panel.on-dark button { color: var(--f-link); }
.menu-panel.on-dark a:hover, .menu-panel.on-dark button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.menu-panel.on-dark .mi-code { color: var(--f-head); }
.menu-panel.on-dark [aria-checked="true"] .mi-code { color: var(--rose); }

.login-btn {
  font-size: 14px; font-weight: 450; color: var(--ink-soft);
  white-space: nowrap;
  padding: 8px 14px; border-radius: 11px;
  transition: color 0.2s var(--ease);
}
.login-btn:hover { color: var(--ink); }
/* soft variant — raised card (the style the language switcher originally had) */
.login-btn.soft {
  background: var(--surface); box-shadow: var(--raise-sm);
  padding: 8px 16px; border-radius: 11px;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), color 0.2s var(--ease);
}
.login-btn.soft:hover { transform: translateY(-1px); box-shadow: var(--raise); color: var(--ink); }

/* ---------- Buttons — float on the canvas via soft depth, no border ---------- */
.btn {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 21px; border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer; border: 0;
  box-shadow: var(--raise-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--raise); }
.btn:active { transform: translateY(0); box-shadow: var(--inset); }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
  background: var(--rose); color: #fff;
  box-shadow:
    0 12px 24px -8px color-mix(in oklab, var(--rose) 60%, transparent),
    0 -4px 10px 1px oklch(1 0 0 / 0.25) inset,
    0 1px 0 oklch(1 0 0 / 0.25) inset;
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--rose) 92%, white);
  transform: translateY(-2px);
  box-shadow:
    0 20px 38px -10px color-mix(in oklab, var(--rose) 65%, transparent),
    0 -4px 10px 1px oklch(1 0 0 / 0.3) inset,
    0 1px 0 oklch(1 0 0 / 0.3) inset;
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--rose) 60%, transparent); }
.btn-ghost { background: transparent; box-shadow: none; color: var(--ink-soft); }
.btn-ghost:hover { background: transparent; box-shadow: none; color: var(--ink); transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 11px; }
.btn-lg { padding: 15px 27px; font-size: 16.5px; border-radius: 15px; }

.tlink {
  font-size: 15px; font-weight: 500; color: var(--rose);
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap 0.25s var(--ease), color 0.2s var(--ease);
}
.tlink .arrow { transition: transform 0.3s var(--ease); }
.tlink:hover { color: var(--rose-deep); }
.tlink:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HERO — frameless. H1 top, sub + CTA bottom, video floats centre.
   ============================================================ */
.hero { position: relative; padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero-inner { position: relative; min-height: clamp(480px, 66vh, 660px); }

/* the floating 3D video stand-in — NO frame, sits on the page canvas */
.hero-media { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
.hero-video {
  width: min(52%, 580px);
  height: auto;
  max-height: 94%;
  object-fit: contain;
  /* Temporary dark loop: feather all four edges so the rectangle melts into the
     canvas as a soft background element. When the final on-canvas (page-grey)
     loop is dropped in, this mask can be removed. */
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 42%, transparent 84%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 42%, transparent 84%);
}

.hero-copy-tl {
  position: absolute; z-index: 3;
  top: clamp(10px, 2vw, 30px); left: clamp(4px, 1vw, 10px);
  max-width: min(740px, 66%);
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 26px);
}
h1.hero-h1 {
  font-family: var(--font-display); font-weight: 560;
  line-height: 1.04; letter-spacing: var(--display-tracking);
  color: var(--ink); text-wrap: balance; margin: 0;
}
.h1-lead { display: block; color: var(--rose); font-size: clamp(30px, 4.4vw, 47px); font-weight: 560; }
.h1-sub  { display: block; color: rgb(105, 105, 109); font-size: clamp(21px, 3.1vw, 34px); font-weight: 400; }
h1.hero-h1 .rose { color: var(--rose); }
.hero-sub { font-size: clamp(17px, 1.6vw, 23px); color: var(--ink-soft); line-height: 1.4; text-wrap: pretty; margin: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.hero-badges {
  position: absolute; z-index: 3;
  bottom: clamp(8px, 1.6vw, 22px); left: 0; right: 0;
  display: flex; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap; max-width: none;
  justify-content: center;
}
.badge {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  padding: 7px 13px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }

/* ----- Play button ----- */
.playbtn {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: var(--raise);
  cursor: pointer; border: 0;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}
.playbtn::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--rose) 38%, transparent);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.playbtn:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: var(--raise-lg); }
.playbtn:hover::before { opacity: 1; transform: scale(1); }
.playbtn .tri {
  width: 0; height: 0; margin-left: 5px;
  border-left: 21px solid var(--rose);
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}

/* ============================================================
   3D PLACEHOLDER SCENE — frameless, floats on the canvas
   ============================================================ */
.scene3d { position: relative; width: 100%; height: 100%; display: grid; place-items: center; perspective: 1100px; }
.scene3d .floor {
  position: absolute; left: 50%; bottom: 30%;
  width: 360px; height: 92px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--shadow-dark) 85%, transparent), transparent 70%);
  filter: blur(10px); border-radius: 50%;
}
.cube { position: relative; width: 152px; height: 152px; transform-style: preserve-3d; animation: spin 22s linear infinite; }
.cube-rig { transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.5s var(--ease-out); }
@keyframes spin { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.cube .face {
  position: absolute; width: 152px; height: 152px; border-radius: 17px;
  background: linear-gradient(150deg, oklch(0.998 0.001 250), oklch(0.93 0.002 250));
  box-shadow:
    inset 0 2px 0 oklch(1 0 0 / 0.95),
    inset 0 -14px 26px -14px color-mix(in oklab, var(--shadow-dark) 90%, transparent);
}
.cube .face.accent {
  background: linear-gradient(150deg, color-mix(in oklab, var(--rose) 30%, var(--surface)), color-mix(in oklab, var(--rose) 52%, var(--surface)));
}
.cube .f1 { transform: rotateY(0deg)   translateZ(76px); }
.cube .f2 { transform: rotateY(90deg)  translateZ(76px); }
.cube .f3 { transform: rotateY(180deg) translateZ(76px); }
.cube .f4 { transform: rotateY(270deg) translateZ(76px); }
.cube .f5 { transform: rotateX(90deg)  translateZ(76px); }
.cube .f6 { transform: rotateX(-90deg) translateZ(76px); }

.scene-caption {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(6px, 1.4vw, 16px); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-ghost); display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.scene-caption .lstop { width: 6px; height: 6px; border-radius: 1px; background: var(--rose); }

/* ----- HERO LAYOUT VARIANTS ----- */
:root[data-hero="split"] .hero-copy-tl,
:root[data-hero="stacked"] .hero-copy-tl {
  position: static; max-width: none; align-items: flex-start;
}
:root[data-hero="stacked"] .hero-badges { display: none; }

:root[data-hero="split"] .hero-inner {
  display: grid; grid-template-columns: 1fr 1.12fr;
  grid-template-areas: "tl media" "badges badges";
  align-items: center;
  row-gap: clamp(24px, 3vw, 40px);
}
:root[data-hero="split"] .hero-copy-tl { grid-area: tl; }
:root[data-hero="split"] .hero-media { position: static; grid-area: media; min-height: clamp(380px, 50vh, 540px); }
:root[data-hero="split"] .hero-badges {
  display: flex; position: static; inset: auto;
  grid-area: badges; justify-content: center;
}

:root[data-hero="stacked"] .hero-inner {
  display: grid; grid-template-columns: 1fr;
  grid-template-areas: "tl" "media";
  row-gap: clamp(28px, 4vw, 48px);
}
:root[data-hero="stacked"] .hero-copy-tl { grid-area: tl; }
:root[data-hero="stacked"] .hero-media { position: static; grid-area: media; min-height: clamp(360px, 46vh, 520px); }

/* ============================================================
   SECTION 2 — FEATURE CHIPS (bordered, gapped — allowed here)
   ============================================================ */
.features { padding-top: clamp(20px, 3vw, 40px); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 20px); }
.chip {
  position: relative;
  text-decoration: none; color: inherit; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 2.2vw, 30px);
  display: flex; flex-direction: column;
  box-shadow: var(--raise-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.chip:focus-visible { outline: none; box-shadow: var(--raise), 0 0 0 3px color-mix(in oklab, var(--rose) 30%, transparent); }
/* clickability affordance — arrow appears on hover/focus */
.chip::after {
  content: "→"; position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  font-size: 15px; color: var(--rose); line-height: 1;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.chip:hover::after, .chip:focus-visible::after { opacity: 1; transform: translateX(0); }
.chip-num { font-family: var(--font-mono); font-size: 12px; color: var(--rose); letter-spacing: 0.08em; }
.chip h3 { font-family: var(--font-display); font-weight: 540; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 8px; line-height: 1.14; color: var(--ink); }
.chip p { font-size: 14px; color: var(--ink-faint); line-height: 1.5; }

/* deep-dive blocks are scroll targets from the chips — offset for the sticky nav */
.dblock { scroll-margin-top: 96px; }
@keyframes dblock-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  18% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 34%, transparent); }
}
.dblock.flash { animation: dblock-flash 1.3s var(--ease); border-radius: var(--radius); }
:root[data-rose="subtle"] .chip::after { color: var(--ink-faint); }

/* chip style variants (tweak) */
:root[data-cards="outline"] .chip { box-shadow: none; }
:root[data-cards="outline"] .chip:hover { box-shadow: var(--raise-sm); transform: translateY(-2px); }
:root[data-cards="flat"] .chip { border-color: transparent; box-shadow: none; background: var(--surface-2); }
:root[data-cards="flat"] .chip:hover { background: var(--surface); box-shadow: var(--raise-sm); }

/* ============================================================
   SECTION 3 — DEEP-DIVE BLOCKS (frameless, no cards/borders)
   ============================================================ */
.section-head { max-width: 780px; margin-inline: auto; margin-bottom: clamp(40px, 5vw, 68px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.section-head h2 { font-family: var(--font-display); font-weight: 550; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.024em; color: var(--ink); text-wrap: balance; }
.section-head h2 .rose { color: var(--rose); }
.section-head p { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft); max-width: 620px; }

.deep { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 120px); }
.dblock {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 88px); align-items: center;
}
.dblock:nth-child(even) .dblock-copy { order: 2; }
.dblock:nth-child(even) .dblock-media { order: 1; }
.dblock-copy { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.dblock-copy h3 { font-family: var(--font-display); font-weight: 550; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.dblock-copy p { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-soft); line-height: 1.58; text-wrap: pretty; }
.dblock-copy .tlink { margin-top: 6px; }

/* Full-service-scope heading — single size, arrows in rose */
.dblock-copy h3.fss { text-wrap: nowrap; }
.fss i { color: var(--rose); font-style: normal; padding: 0 0.06em; }

/* frameless floating media (no tile, no border) */
.dmedia { position: relative; aspect-ratio: 5 / 4; min-height: 240px; max-height: 320px; display: grid; place-items: center; }
.dmedia::after {
  content: "Experience video · loops here";
  position: absolute; z-index: 3; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-ghost); white-space: nowrap;
}
.dmedia .cube { width: 124px; height: 124px; }
.dmedia .cube .face { width: 124px; height: 124px; border-radius: 13px; }
.dmedia .cube .f1 { transform: rotateY(0deg)   translateZ(62px); }
.dmedia .cube .f2 { transform: rotateY(90deg)  translateZ(62px); }
.dmedia .cube .f3 { transform: rotateY(180deg) translateZ(62px); }
.dmedia .cube .f4 { transform: rotateY(270deg) translateZ(62px); }
.dmedia .cube .f5 { transform: rotateX(90deg)  translateZ(62px); }
.dmedia .cube .f6 { transform: rotateX(-90deg) translateZ(62px); }
.dmedia .floor { bottom: 26%; width: 240px; }
.dmedia .playbtn { width: 62px; height: 62px; z-index: 4; }
.dmedia .playbtn .tri { border-left-width: 16px; border-top-width: 9px; border-bottom-width: 9px; }

/* ============================================================
   SECTION 4 — WHO IT'S FOR (soft-raised tiles)
   ============================================================ */
.audience .section-head { margin-bottom: clamp(34px, 4vw, 56px); }
.audience-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
}
.atile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--raise-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.atile:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.atile h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -0.02em;
  line-height: 1.15; color: var(--ink);
  display: flex; align-items: center; gap: 11px;
}
.atile .amark {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px;
  background: var(--rose);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rose) 12%, transparent);
}
.atile p { font-size: 14.5px; color: var(--ink-faint); line-height: 1.55; text-wrap: pretty; }

.audience-close {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 760px; text-align: center;
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.32;
  letter-spacing: -0.018em; color: var(--ink-soft); text-wrap: balance;
}
.audience-close .rose { color: var(--rose); font-weight: 520; }

/* tile style variants follow the chip tweak */
:root[data-cards="outline"] .atile { box-shadow: none; }
:root[data-cards="outline"] .atile:hover { box-shadow: var(--raise-sm); transform: translateY(-2px); }
:root[data-cards="flat"] .atile { border-color: transparent; box-shadow: none; background: var(--surface-2); }
:root[data-cards="flat"] .atile:hover { background: var(--surface); box-shadow: var(--raise-sm); }
:root[data-rose="bold"] .atile { background: linear-gradient(160deg, var(--surface), color-mix(in oklab, var(--rose) 7%, var(--surface))); }
:root[data-rose="subtle"] .atile .amark { background: var(--ink-faint); box-shadow: none; }
:root[data-rose="subtle"] .audience-close .rose { color: var(--ink); }
:root[data-rose="subtle"] .audience .eyebrow { color: var(--ink-faint); }

/* ============================================================
   SECTION 5 — EXAMPLES (media-bearing showcase cards)
   ============================================================ */
.examples .section-head { margin-bottom: clamp(34px, 4vw, 56px); }
.examples-grid {
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 2vw, 30px); justify-content: center;
}
.example-card {
  flex: 1 1 460px; max-width: 600px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--raise-sm);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.example-card:hover { transform: translateY(-4px); box-shadow: var(--raise); }

/* media slot — user drops an image / looped video here */
.ex-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.ex-ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgb(0 0 0 / 0.018) 0 13px, transparent 13px 26px),
    radial-gradient(130% 130% at 50% 0%, var(--surface), var(--surface-2));
  box-shadow: var(--inset);
}
.ex-media .playbtn { width: 64px; height: 64px; box-shadow: var(--raise); }
.ex-media .playbtn .tri { border-left-width: 16px; border-top-width: 9px; border-bottom-width: 9px; }
.ex-cap {
  position: absolute; z-index: 3; left: 15px; bottom: 13px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-ghost); display: flex; align-items: center; gap: 7px;
}
.ex-cap::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--rose); }

.ex-body { padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.ex-body h3 {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.13;
  letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
}
.ex-body > p { font-size: clamp(14.5px, 1.1vw, 16px); color: var(--ink-soft); line-height: 1.58; text-wrap: pretty; }
.ex-tags-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  margin: 4px 0 -4px;
}
.ex-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; padding: 0; }
.ex-tags li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--hairline); padding: 6px 12px 6px 10px; border-radius: 9px;
  box-shadow: var(--raise-sm);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ex-tags li::before {
  content: ""; flex: none; width: 4px; height: 8px;
  border: solid var(--rose); border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg); margin: 0 3px 2px 0; opacity: 0.9;
}
.ex-tags li:hover { color: var(--ink); border-color: color-mix(in oklab, var(--rose) 40%, var(--hairline)); transform: translateY(-1px); }
.ex-body .tlink { margin-top: 6px; align-self: flex-start; }

/* example-card follows the card + rose tweaks */
:root[data-cards="outline"] .example-card { box-shadow: none; }
:root[data-cards="outline"] .example-card:hover { box-shadow: var(--raise-sm); transform: translateY(-2px); }
:root[data-cards="flat"] .example-card { border-color: transparent; box-shadow: none; }
:root[data-cards="flat"] .example-card:hover { box-shadow: var(--raise-sm); }
:root[data-rose="subtle"] .ex-cap::before { background: var(--ink-faint); }
:root[data-rose="subtle"] .ex-tags li::before { border-color: var(--ink-faint); }
:root[data-rose="subtle"] .ex-tags li:hover { border-color: var(--ink-soft); }
:root[data-rose="subtle"] .examples .eyebrow { color: var(--ink-faint); }

/* ============================================================
   SECTION 6 — PRICING (layer cards + cost estimator)
   ============================================================ */
.pricing .section-head { margin-bottom: clamp(34px, 4vw, 56px); }
.pricing-layers {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  align-items: stretch;
}
.player {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--raise-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.player:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.player-price {
  font-family: var(--font-display); color: var(--ink);
  display: flex; align-items: baseline; gap: 7px; margin-top: 4px;
  letter-spacing: -0.02em;
}
.player-price strong { font-weight: 560; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.player-price .from { font-size: 15px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.player-price .per  { font-size: 15px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.player-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.player p { font-size: 14px; color: var(--ink-soft); line-height: 1.56; text-wrap: pretty; margin-top: 6px; }
.player-badges { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.player-badges .badge { background: var(--surface-2); }

/* ----- merged management + estimator card ----- */
.player--mgmt {
  margin-top: clamp(16px, 1.6vw, 22px);
  padding: 0; overflow: hidden;
}
/* standalone bookkeeping card — match the vertical rhythm above it */
.player--standalone { margin-top: clamp(16px, 1.6vw, 22px); }
/* center the lone trailing audience tile when the grid is 3 columns wide */
@media (min-width: 941px) {
  #audience .audience-grid article:nth-child(7) { grid-column: 2; }
}
.player--mgmt:hover { transform: none; box-shadow: var(--raise-sm); }
.mgmt-grid { display: grid; grid-template-columns: 0.92fr 1fr; align-items: stretch; }
.mgmt-intro {
  padding: clamp(26px, 2.8vw, 40px);
  display: flex; flex-direction: column; gap: 13px;
}
.mgmt-tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--rose); background: color-mix(in oklab, var(--rose) 11%, var(--surface));
  padding: 5px 11px; border-radius: 999px; margin-top: 2px;
}
.mgmt-includes-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 8px;
}
.mgmt-intro > p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.56; text-wrap: pretty; margin: 0; }
.mgmt-note { font-size: 13px; color: var(--ink-faint); line-height: 1.5; margin-top: 2px !important; }
.mgmt-intro > .mgmt-pricing-note {
  font-size: 12.5px;
  color: color-mix(in oklab, var(--ink-faint) 82%, var(--bg));
  line-height: 1.48;
  margin-top: 0 !important;
}
.pricing-tax-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.48;
  color: var(--ink-faint);
}

/* estimator pane — sheds the standalone card chrome, sits inside the merged card */
.mgmt-calc {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(26px, 2.8vw, 40px);
  border-left: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--surface-2) 55%, var(--surface));
}
.mgmt-calc .p3d-price-top--calculator { padding: 0; gap: 20px; display: flex; flex-direction: column; }
.mgmt-calc .p3d-price-features { padding: 18px 0 0; margin: 0; border-top: 1px solid var(--hairline); }
.mgmt-calc .p3d-price-actions { padding: 0; }

/* calculator now lives in its own focused card below the four plan cards */
.player--calc {
  max-width: 720px;
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  padding: 0;
  overflow: hidden;
}
.player--calc:hover { transform: none; box-shadow: var(--raise-sm); }
.player--calc .mgmt-calc { border-left: 0; background: var(--surface); }
/* pricing fine-print now sits inside a normal plan card */
.player .mgmt-pricing-note {
  font-size: 12.5px;
  color: color-mix(in oklab, var(--ink-faint) 82%, var(--bg));
  line-height: 1.48;
  margin-top: 6px;
}

/* ----- number stepper ----- */
.p3d-stepper { display: inline-flex; align-items: stretch; }
.p3d-stepper .p3d-price-input {
  width: 58px; border-radius: 9px 0 0 9px; border-right: 0; position: relative; z-index: 1;
}
.p3d-stepper__arrows { display: flex; flex-direction: column; width: 28px; }
.p3d-step {
  flex: 1; min-height: 0; padding: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline);
  display: grid; place-items: center;
  transition: background 0.2s var(--ease);
}
.p3d-step:first-child { border-radius: 0 9px 0 0; border-bottom: 0; }
.p3d-step:last-child  { border-radius: 0 0 9px 0; }
.p3d-step:hover { background: var(--surface-2); }
.p3d-step:active { box-shadow: var(--inset); }
.p3d-step-ico { width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
.p3d-step[data-step="up"] .p3d-step-ico   { border-bottom: 5.5px solid var(--ink-soft); }
.p3d-step[data-step="down"] .p3d-step-ico { border-top: 5.5px solid var(--ink-soft); }
.p3d-step:hover .p3d-step-ico { filter: none; }
.p3d-step[data-step="up"]:hover .p3d-step-ico   { border-bottom-color: var(--rose); }
.p3d-step[data-step="down"]:hover .p3d-step-ico { border-top-color: var(--rose); }

/* ----- the estimator card ----- */
.calc-wrap { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 48px); }
.p3d-price-card--calculator {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--raise);
  overflow: hidden;
}
.p3d-price-top--calculator { padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 22px; }
.p3d-price-header h3 {
  font-family: var(--font-display); font-weight: 550; color: var(--ink);
  font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.02em;
}

.p3d-price-output { display: flex; flex-direction: column; gap: 4px; }
.p3d-price-output__monthly {
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(15px, 1.4vw, 17px); font-weight: 450;
}
.p3d-price-output__monthly #p3d-price-monthly {
  font-weight: 560; font-size: clamp(36px, 4vw, 50px); letter-spacing: -0.026em;
  color: var(--rose); margin-right: 4px;
}
.p3d-price-output__yearly { font-size: 13.5px; color: var(--ink-faint); }
.p3d-price-output__save {
  align-self: flex-start; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--rose); background: color-mix(in oklab, var(--rose) 12%, var(--surface));
  padding: 4px 10px; border-radius: 999px;
}

.p3d-price-controls { display: flex; flex-direction: column; gap: 12px; }
.p3d-price-control {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-sm); padding: 12px 15px;
}
.p3d-price-control__label {
  font-size: 14.5px; color: var(--ink); font-weight: 450;
  display: inline-flex; align-items: center; gap: 7px;
}
.p3d-price-input {
  width: 74px; text-align: center;
  font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 9px; padding: 8px 6px;
  box-shadow: var(--inset);
  -moz-appearance: textfield;
}
.p3d-price-input:focus { outline: 2px solid color-mix(in oklab, var(--rose) 45%, transparent); outline-offset: 1px; }
.p3d-price-input::-webkit-outer-spin-button,
.p3d-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----- toggle ----- */
.p3d-toggle { position: relative; display: inline-flex; width: 44px; height: 25px; flex: 0 0 auto; }
.p3d-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.p3d-toggle__track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--surface); box-shadow: var(--inset);
  transition: background 0.28s var(--ease);
}
.p3d-toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 0.18);
  transition: transform 0.28s var(--ease);
}
.p3d-toggle input:checked + .p3d-toggle__track { background: var(--rose); box-shadow: none; }
.p3d-toggle input:checked + .p3d-toggle__track::after { transform: translateX(19px); }
.p3d-toggle input:focus-visible + .p3d-toggle__track { outline: 2px solid color-mix(in oklab, var(--rose) 45%, transparent); outline-offset: 2px; }
/* disabled / dependent-control states (e.g. Analytics PLUS + experience count when Experience Management is off) */
.p3d-toggle input:disabled { cursor: not-allowed; }
.p3d-toggle input:disabled + .p3d-toggle__track { opacity: 0.5; }
.p3d-price-control.is-disabled { opacity: 0.42; }
.p3d-price-control.is-disabled .p3d-price-input,
.p3d-price-control.is-disabled .p3d-step { cursor: not-allowed; }

/* ----- features list ----- */
.p3d-price-features {
  list-style: none; margin: 0; padding: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 11px;
}
.p3d-price-features li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.45;
  display: flex; align-items: center; gap: 7px;
}
.p3d-price-features li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--rose);
}
.p3d-price-features li[hidden] { display: none; }
.p3d-price-features #p3d-views-count { font-family: var(--font-mono); color: var(--ink); }
.p3d-feat-free {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--surface);
  padding: 2px 7px; border-radius: 6px; box-shadow: var(--inset);
}

/* ----- tooltip ----- */
.p3d-tooltip {
  position: relative; cursor: help;
  font-size: 12px; color: var(--ink-ghost);
  display: inline-flex; align-items: center; line-height: 1;
}
.p3d-tooltip__content {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 220px;
  background: var(--ink); color: #f4f4f4;
  font-family: var(--font-body); font-size: 12px; line-height: 1.4; letter-spacing: 0;
  padding: 8px 11px; border-radius: 9px;
  box-shadow: 0 12px 26px -10px rgb(0 0 0 / 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 6;
}
.p3d-tooltip__content::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.p3d-tooltip:hover .p3d-tooltip__content,
.p3d-tooltip:focus .p3d-tooltip__content,
.p3d-tooltip:focus-visible .p3d-tooltip__content { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----- estimator CTA (maps p3d-btn to the system) ----- */
.p3d-price-actions { padding: 0 clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px); }
.p3d-btn {
  font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 22px; border-radius: 13px;
  cursor: pointer; border: 0;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.25s var(--ease);
}
.p3d-btn-primary {
  background: var(--rose); color: #fff;
  box-shadow:
    0 12px 24px -8px color-mix(in oklab, var(--rose) 60%, transparent),
    0 -4px 10px 1px oklch(1 0 0 / 0.25) inset,
    0 1px 0 oklch(1 0 0 / 0.25) inset;
}
.p3d-btn-primary:hover {
  background: color-mix(in oklab, var(--rose) 92%, white); transform: translateY(-2px);
  box-shadow:
    0 20px 38px -10px color-mix(in oklab, var(--rose) 65%, transparent),
    0 -4px 10px 1px oklch(1 0 0 / 0.3) inset,
    0 1px 0 oklch(1 0 0 / 0.3) inset;
}
.p3d-btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--rose) 60%, transparent); }

/* pricing follows the card + rose tweaks */
:root[data-cards="outline"] .player { box-shadow: none; }
:root[data-cards="outline"] .player:hover { box-shadow: var(--raise-sm); transform: translateY(-2px); }
:root[data-cards="flat"] .player { border-color: transparent; box-shadow: none; background: var(--surface-2); }
:root[data-rose="subtle"] .player-price strong { color: var(--ink); }
:root[data-rose="subtle"] .p3d-price-output__monthly #p3d-price-monthly { color: var(--ink); }
:root[data-rose="subtle"] .p3d-price-features li::before { background: var(--ink-faint); }
:root[data-rose="subtle"] .pricing .eyebrow { color: var(--ink-faint); }
:root[data-rose="subtle"] .p3d-toggle input:checked + .p3d-toggle__track { background: var(--ink-soft); }

/* ============================================================
   COLOR INTENSITY VARIANTS (tweak)
   ============================================================ */
:root[data-rose="subtle"] h1.hero-h1 .rose,
:root[data-rose="subtle"] .dblock-copy h3 .rose,
:root[data-rose="subtle"] .section-head h2 .rose { color: var(--ink); }
:root[data-rose="subtle"] .cube .face.accent { background: linear-gradient(150deg, oklch(0.998 0.001 250), oklch(0.93 0.002 250)); }
:root[data-rose="subtle"] .chip-num { color: var(--ink-faint); }
:root[data-rose="subtle"] .eyebrow { color: var(--ink-faint); }

:root[data-rose="bold"] .chip { background: linear-gradient(160deg, var(--surface), color-mix(in oklab, var(--rose) 7%, var(--surface))); }
:root[data-rose="bold"] .chip-num { font-weight: 500; }

/* ============================================================
   SECTION 7 — FAQ (editorial rail + frameless accordion)
   ============================================================ */
.faq .section-head { display: none; }            /* uses its own editorial rail */
.faq-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(36px, 5vw, 96px); align-items: start;
}

/* ---- left rail ---- */
.faq-rail {
  position: sticky; top: 104px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.faq-rail h2 {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05;
  letter-spacing: -0.024em; color: var(--ink); text-wrap: balance;
}
.faq-rail h2 .rose { color: var(--rose); }
.faq-rail p {
  font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-soft);
  line-height: 1.56; max-width: 300px; text-wrap: pretty; margin-top: 2px;
}
.faq-rail .tlink { margin-top: 6px; }

/* ---- accordion list ---- */
.faq-list { --faq-indent: 46px; display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }

.faq-q {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-body);
  display: flex; align-items: flex-start; gap: 20px;
  padding: clamp(20px, 2vw, 27px) 2px;
  text-align: left; color: var(--ink);
  transition: color 0.25s var(--ease);
}
.faq-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--rose); padding-top: 4px; flex: 0 0 26px;
  transition: color 0.25s var(--ease);
}
.faq-q .faq-title {
  flex: 1; font-family: var(--font-display); font-weight: 520;
  font-size: clamp(17px, 1.5vw, 20.5px); line-height: 1.32;
  letter-spacing: -0.018em; color: inherit; text-wrap: pretty;
}
.faq-q:hover { color: var(--rose); }
.faq-item.open .faq-q { color: var(--ink); }

/* plus → minus toggle (gradient-drawn — always paints, animates via background-size) */
.faq-icon {
  flex: 0 0 18px; height: 18px; margin-top: 5px;
  background-image: linear-gradient(var(--rose), var(--rose)), linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 13px 1.8px, 1.8px 13px;   /* horizontal bar, vertical bar */
  transition: background-size 0.4s var(--ease), transform 0.45s var(--ease);
}
.faq-item.open .faq-icon {
  background-size: 13px 1.8px, 1.8px 0;       /* vertical bar collapses → minus */
  transform: rotate(180deg);
}

/* answer — height-animated */
.faq-a { height: 0; overflow: hidden; transition: height 0.42s var(--ease); }
.faq-a__inner {
  padding: 0 26px clamp(22px, 2.2vw, 28px) var(--faq-indent);
}
.faq-a p {
  font-size: clamp(14.5px, 1.1vw, 16.5px); color: var(--ink-soft);
  line-height: 1.62; max-width: 600px; text-wrap: pretty;
}
.faq-a p + p { margin-top: 12px; }
.faq-a .rose { color: var(--rose); font-weight: 500; }

/* rose-subtle tweak: neutralise the FAQ accents */
:root[data-rose="subtle"] .faq-num,
:root[data-rose="subtle"] .faq-q:hover { color: var(--ink-faint); }
:root[data-rose="subtle"] .faq-icon {
  background-image: linear-gradient(var(--ink-faint), var(--ink-faint)), linear-gradient(var(--ink-faint), var(--ink-faint));
}
:root[data-rose="subtle"] .faq-rail h2 .rose,
:root[data-rose="subtle"] .faq-a .rose { color: var(--ink); }

/* ============================================================
   SECTION 8 — FINAL CTA BANNER (climactic soft-raised panel)
   ============================================================ */
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(168deg, var(--surface), color-mix(in oklab, var(--rose) 9%, var(--surface)));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--raise-lg);
  padding: clamp(52px, 7vw, 100px) clamp(26px, 5vw, 72px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(16px, 1.8vw, 24px);
}
.cta-panel::before {                       /* soft rose glow rising from the base */
  content: ""; position: absolute; z-index: -1; inset: auto -12% -45% -12%; height: 78%;
  background: radial-gradient(58% 80% at 50% 100%, color-mix(in oklab, var(--rose) 22%, transparent), transparent 70%);
  filter: blur(12px); opacity: 0.5; pointer-events: none;
}
.cta-h2 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05;
  letter-spacing: -0.026em; color: var(--ink); text-wrap: balance; max-width: 16ch;
}
.cta-strike { color: var(--ink-faint); }
.cta-sub {
  font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft);
  line-height: 1.45; text-wrap: pretty; max-width: 42ch;
}
.cta-actions { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* tweak variants */
:root[data-cards="outline"] .cta-panel { box-shadow: none; }
:root[data-cards="flat"] .cta-panel { border-color: transparent; box-shadow: none; }
:root[data-rose="subtle"] .cta-panel { background: var(--surface); }
:root[data-rose="subtle"] .cta-panel::before { display: none; }

/* ============================================================
   SECTION 9 — SITE FOOTER (grounded dark band · full link map)
   ============================================================ */
.site-footer {
  --f-bg:   #232326;
  --f-text: #a4a4aa;
  --f-head: #7d7d85;
  --f-link: #c8c8cd;
  --f-hair: rgba(255, 255, 255, 0.09);
  background: var(--f-bg);
  color: var(--f-text);
  padding-block: clamp(52px, 5.5vw, 84px) 0;
}
.footer-top {
  position: relative;
  display: grid; grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: clamp(22px, 2.6vw, 46px);
}
.footer-top > .anchor-target {
  position: absolute;
  top: -96px;
  left: 0;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; padding-right: clamp(12px, 2vw, 32px); }
.footer-brand .wordmark { width: 158px; height: auto; margin-bottom: 20px; }
.footer-brand p {
  font-size: 14px; line-height: 1.6; color: var(--f-text);
  max-width: 252px; text-wrap: pretty; margin-bottom: 22px;
}
.footer-cta {
  font-size: 14px; font-weight: 500; color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.25s var(--ease);
}
.footer-cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.footer-cta:hover { gap: 11px; }

.fcol-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-head);
  margin-bottom: 15px;
}
.fcol ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.fcol a { font-size: 14px; color: var(--f-link); line-height: 1.3; transition: color 0.2s var(--ease); }
.fcol a:hover { color: #fff; }

.footer-bottom {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding: 22px 0 26px;
  border-top: 1px solid var(--f-hair);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--f-head);
}
.footer-bottom .f-meta { display: flex; align-items: center; gap: 22px; }
.footer-bottom .f-meta a { color: var(--f-link); transition: color 0.2s var(--ease); }
.footer-bottom .f-meta a:hover { color: #fff; }
.footer-bottom .f-lang {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--f-text);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.footer-bottom .f-lang .chev { color: var(--f-head); font-size: 12px; }

@media (max-width: 1040px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); row-gap: clamp(30px, 4vw, 44px); }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
  .footer-brand p { max-width: 360px; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   DEMO / QUOTE MODAL
   ============================================================ */
.p3d-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 36px);
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.p3d-modal.open { visibility: visible; opacity: 1; }
.p3d-modal__backdrop {
  position: absolute; inset: 0;
  background: oklch(0.22 0.012 285 / 0.46);
  backdrop-filter: saturate(1.1) blur(7px);
}
.p3d-modal__dialog {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: min(90vh, 800px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--raise-lg);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.36s var(--ease);
}
.p3d-modal.open .p3d-modal__dialog { transform: none; }

.p3d-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--raise-sm);
  transition: transform 0.25s var(--ease), color 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.p3d-modal__close:hover { transform: translateY(-1px); color: var(--ink); box-shadow: var(--raise); }

.p3d-modal__content { display: flex; flex-direction: column; min-height: 0; }

.p3d-modal-header {
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px) 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.p3d-modal-header h2 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -0.022em;
  line-height: 1.08; color: var(--ink); text-wrap: balance;
}
.p3d-modal-note { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; max-width: 46ch; }

/* scroll region */
.p3d-form-card { min-height: 0; display: flex; flex-direction: column; }
.p3d-form-scroll {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px clamp(24px, 3.4vw, 44px) 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.p3d-form { display: flex; flex-direction: column; gap: 20px; padding: 8px 0; }
.p3d-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.p3d-form legend {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 0; float: none; width: 100%;
}
.p3d-form legend em, .p3d-field span em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--ink-ghost); font-family: var(--font-body); font-size: 11.5px;
}

/* select */
.p3d-select-wrap { position: relative; }
.p3d-select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px;
  border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.p3d-form select,
.p3d-form input[type="text"],
.p3d-form input[type="email"],
.p3d-form textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.p3d-form select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.p3d-form textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.p3d-form select:focus,
.p3d-form input:focus,
.p3d-form textarea:focus {
  outline: none; border-color: var(--rose); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 16%, transparent);
}

/* labelled fields */
.p3d-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p3d-field { display: flex; flex-direction: column; gap: 6px; }
.p3d-field > span {
  font-size: 12.5px; color: var(--ink-soft); font-weight: 450;
  display: inline-flex; gap: 6px; align-items: baseline;
}

/* collapsible fieldsets — accordion vocabulary shared with the FAQ */
.p3d-fieldset { gap: 0; border-top: 1px solid var(--hairline); }
.p3d-fieldset legend { width: 100%; }
.p3d-fieldset-toggle {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--font-display); font-weight: 480; font-size: 15px;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink);
  padding: 15px 2px; text-align: left;
}
.p3d-fieldset-toggle em {
  font-style: normal; color: var(--ink-ghost); font-size: 11.5px;
  font-family: var(--font-body); margin-left: auto; margin-right: 6px;
}
.p3d-fieldset-arrow {
  flex: 0 0 16px; height: 16px;
  background-image: linear-gradient(var(--rose), var(--rose)), linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat, no-repeat; background-position: center, center;
  background-size: 12px 1.8px, 1.8px 12px;
  transition: background-size 0.4s var(--ease), transform 0.45s var(--ease);
}
.p3d-fieldset-toggle[aria-expanded="true"] .p3d-fieldset-arrow { background-size: 12px 1.8px, 1.8px 0; transform: rotate(180deg); }
.p3d-fieldset-body {
  box-sizing: border-box; height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  transition: height 0.36s var(--ease);
}
.p3d-fieldset-body > :last-child { margin-bottom: 16px; }

/* pill choices */
.p3d-choice--pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; user-select: none;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 11px 15px;
  font-size: 14.5px; color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.p3d-choice--pill:hover { border-color: color-mix(in oklab, var(--rose) 38%, var(--hairline)); }
.p3d-choice--pill input { accent-color: var(--rose); width: 17px; height: 17px; flex: none; cursor: pointer; }
.p3d-choice--pill:has(input:checked) {
  border-color: var(--rose);
  background: color-mix(in oklab, var(--rose) 7%, var(--surface));
  box-shadow: var(--raise-sm);
}

/* footer actions */
.p3d-modal-actions {
  display: flex; align-items: center; gap: 16px;
  padding: 16px clamp(24px, 3.4vw, 44px) clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--hairline);
}
.p3d-form-status { flex: 1; font-size: 13.5px; color: var(--ink-soft); min-height: 1em; line-height: 1.4; }
.p3d-form-status.ok { color: var(--rose); }
.p3d-modal-actions .p3d-btn { flex: none; width: auto; min-width: 150px; }

@media (max-width: 480px) {
  .p3d-form-row { grid-template-columns: 1fr; }
  .p3d-modal__dialog { max-height: 92vh; }
  .p3d-modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .p3d-modal-actions .p3d-btn { width: 100%; }
  .p3d-form-status { text-align: center; }
}

/* rose-subtle tweak */
:root[data-rose="subtle"] .p3d-fieldset-arrow {
  background-image: linear-gradient(var(--ink-faint), var(--ink-faint)), linear-gradient(var(--ink-faint), var(--ink-faint));
}
:root[data-rose="subtle"] .p3d-choice--pill:has(input:checked) { border-color: var(--ink-soft); background: var(--surface-2); }
:root[data-rose="subtle"] .p3d-modal .eyebrow { color: var(--ink-faint); }
:root[data-rose="subtle"] .p3d-form-status.ok { color: var(--ink); }

/* ============================================================
   HERO VIDEO MODAL
   ============================================================ */
.p3d-video-modal {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 36px);
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.p3d-video-modal.open { visibility: visible; opacity: 1; }
.p3d-video-modal__backdrop {
  position: absolute; inset: 0;
  background: oklch(0.17 0.014 285 / 0.72);
  backdrop-filter: saturate(1.1) blur(8px);
}
.p3d-video-modal__dialog {
  position: relative; z-index: 1;
  width: min(1180px, 100%);
  outline: none;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.36s var(--ease);
}
.p3d-video-modal.open .p3d-video-modal__dialog { transform: none; }
.p3d-video-modal__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, white 16%, transparent);
  background: #000;
  box-shadow: var(--raise-lg);
}
.p3d-video-modal__media video {
  display: block;
  width: 100%;
  max-height: min(84vh, 760px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.p3d-video-modal__close {
  position: absolute; top: -18px; right: -18px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--raise);
  transition: transform 0.25s var(--ease), color 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.p3d-video-modal__close:hover { transform: translateY(-1px); color: var(--ink); box-shadow: var(--raise-lg); }
@media (max-width: 640px) {
  .p3d-video-modal__close { top: -12px; right: -8px; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
:root.reveals-done .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal[data-d="1"] { transition-delay: 0.06s; }
.reveal[data-d="2"] { transition-delay: 0.12s; }
.reveal[data-d="3"] { transition-delay: 0.18s; }
.reveal[data-d="4"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cube { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-layers { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
  .faq-rail { position: static; }
  .mgmt-grid { grid-template-columns: 1fr; }
  .mgmt-calc { border-left: 0; border-top: 1px solid var(--hairline); }
  .dblock, .dblock:nth-child(even) { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 36px); }
  .dblock:nth-child(even) .dblock-copy { order: 1; }
  .dblock:nth-child(even) .dblock-media { order: 2; }
  .dmedia { aspect-ratio: auto; height: clamp(230px, 38vw, 300px); min-height: 0; max-height: none; overflow: hidden; }
}
/* Nav: swap inline links for a burger before the row gets cramped (≥1040px keeps
   the full inline nav; below it the Log-in + links would crowd and wrap). */
@media (max-width: 1040px) {
  .nav-inner { grid-template-columns: 1fr auto; }  /* drop empty middle col so nav-right stays right */
  .nav-links { display: none; }
  .nav-right .login-btn { display: none; }   /* Log in moves into the burger panel */
  .nav-right .nav-burger-wrap { display: inline-flex; }
  .brand .wordmark { display: none; }         /* swap wordmark → compact icon */
  .brand .logo-mark { display: block; }
}
/* Tablet & below — collapse the hero into normal vertical flow (all layouts).
   Triggers at 1090px: below this the split's two columns get too narrow and the
   H1 wraps into the media, so we stack copy-over-media while it still has room. */
@media (max-width: 1090px) {
  :root[data-hero] .hero-inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; gap: clamp(20px, 4vw, 30px); }
  :root[data-hero] .hero-copy-tl { position: static; max-width: none; order: 1; align-items: flex-start; }
  :root[data-hero] .hero-media { position: relative; inset: auto; order: 2; min-height: clamp(280px, 56vw, 440px); }
  :root[data-hero] .hero-badges { position: static; max-width: none; order: 3; justify-content: center; display: flex; }
  .hero-actions { justify-content: flex-start; }
  /* The <video> carries an inline width:580px from an earlier edit; override it
     here (and reset the inline height) so the hero media can't push past the
     viewport on tablets/phones. */
  .hero-video { width: min(78%, 520px) !important; height: auto !important; }
  /* Release the single-line lock on the "Modeling → hosting → integration"
     heading before the two-column deep blocks get too tight — otherwise it
     overflows / clips on tablets and phones. */
  .dblock-copy h3.fss { text-wrap: balance; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; gap: 0; }
  /* Single column: drop the card framing, run number inline with the title */
  .chip {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 15px 2px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 11px;
    row-gap: 3px;
    align-items: baseline;
    border-bottom: 1px solid var(--hairline);
  }
  .features-grid .chip:last-child { border-bottom: none; }
  .chip:hover { transform: none; box-shadow: none; }
  .chip-num { grid-row: 1; grid-column: 1; }
  .chip h3 { grid-row: 1; grid-column: 2; margin: 0; }
  .chip p { grid-row: 2; grid-column: 2; margin: 0; }
  .chip p br { display: none; }
  .chip::after { display: none; }
  .audience-grid { grid-template-columns: 1fr; }
  .hero-video { width: min(88%, 440px) !important; height: auto !important; }
  .h1-lead { font-size: clamp(27px, 8vw, 34px); }
  .h1-sub { font-size: clamp(19px, 5.6vw, 24px); }
  .nav-inner { gap: 14px; }
}

/* ----- Phones: keep the narrow hero tidy ----- */
@media (max-width: 430px) {
  /* When the CTA pair can no longer sit side-by-side, stack it and share a
     centre axis so "See live examples" is centred under "Get a quote"
     (instead of jumping to the left edge). */
  .hero-actions {
    flex-direction: column; align-items: center;
    width: fit-content; gap: 12px;
  }
  /* CTA pair stacks & centres; nav already shows the burger here. */
  .nav-inner { gap: 12px; }
}
@media (max-width: 380px) {
  /* Final squeeze — keep the nav row from overflowing on tiny phones. */
  .nav-inner { gap: 10px; }
  .btn-sm { padding: 9px 13px; }
}


/* ===== Source: p3d-schemas.css ===== */
/* ============================================================
   Presenter3D — loop placeholder schemas
   Static schematic stand-ins for the deep-dive video loops.
   Matches the landing system: top-lit neumorphic grey canvas,
   rose accent, Geist / Geist Mono, frameless floating media.
   ============================================================ */

.sch {
  --bg:        rgb(235, 235, 235);
  --surface:   rgb(245, 245, 245);
  --surface-2: rgb(240, 240, 240);
  --ink:       rgb(46, 46, 48);
  --ink-soft:  rgb(99, 99, 103);
  --ink-faint: rgb(135, 135, 140);
  --ink-ghost: rgb(170, 170, 174);
  --hairline:  rgb(219, 219, 219);
  --rose:      #df2d64;
  --rose-deep: #c01f53;
  --raise-sm: 0 -3px 8px 1px #fff, 0 5px 10px rgb(216, 216, 216);
  --raise:    0 -5px 12px 2px #fff, 0 10px 16px rgb(209, 209, 209);
  --inset:    inset 0 5px 11px -5px rgb(203, 203, 203), inset 0 -3px 8px -2px #fff;

  position: absolute; inset: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  letter-spacing: -0.006em;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.sch * { box-sizing: border-box; }

/* shared atoms ------------------------------------------------ */
.sch-mono {
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sch-cap {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-ghost); white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.sch-cap::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.6; }

.sch-raise   { background: var(--surface); box-shadow: var(--raise-sm); }
.sch-raise-lg{ background: var(--surface); box-shadow: var(--raise); }
.sch-inset   { background: var(--surface-2); box-shadow: var(--inset); }

.sch-rose { color: var(--rose); }
.sch-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); flex: 0 0 auto; }

/* iso-box (the 3D model motif) ------------------------------- */
.sch-iso-top  { fill: var(--surface); }
.sch-iso-left { fill: rgb(224, 224, 224); }
.sch-iso-right{ fill: rgb(214, 214, 214); }
.sch-iso-edge { stroke: rgb(196, 196, 200); stroke-width: 1.4; stroke-linejoin: round; fill: none; }
.sch-iso-wire { stroke: rgb(170, 170, 176); stroke-width: 1.3; stroke-linejoin: round; fill: none; }
.sch-iso-rose { stroke: var(--rose); stroke-width: 1.6; fill: none; }

/* ============================================================
   Embedded-in-landing helpers (static markup in the deep blocks)
   ============================================================ */
.sch--embed { position: absolute; inset: 0; }

/* when a schema fills a .dmedia slot, drop the slot's caption + cube chrome */
.dmedia:has(.sch--embed)::after { display: none; }

/* fixed-size schematics: scale to fit the media slot so they never crop on
   narrow screens. Container query measures the actual slot width, so the
   2-column desktop layout (where the slot is plenty wide) stays at scale 1. */
.sch--embed { container-type: inline-size; }
.sch-fit { transform-origin: left center; }
.sch-fit--scenario { transform: scale(min(1, (100cqw - 16px) / 372px)); }
.sch-fit--commerce { transform: scale(min(1, (100cqw - 16px) / 300px)); }

/* scenario — node graph */
.sch-node { position: absolute; width: 58px; text-align: center; }
.sch-node__card { width: 58px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.sch-node__card.is-accent { outline: 1.5px solid var(--rose); outline-offset: 2px; }
.sch-node__lbl { margin-top: 7px; font-size: 8.5px; color: var(--ink-faint); }
.sch-node__lbl.is-accent { color: var(--rose); }

/* business — variant × data matrix */
.sch-th     { font-size: 7.5px; color: var(--ink-ghost); text-align: left; }
.sch-swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: var(--raise-sm); }
.sch-price  { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.sch-stock  { display: flex; align-items: center; gap: 6px; }
.sch-stock__dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(150, 170, 150); }
.sch-stock__dot.is-low { background: var(--rose); }
.sch-stock__n   { font-size: 10px; color: var(--ink-soft); }
.sch-stock__n.is-low { color: var(--rose); }
.sch-region { font-size: 9px; padding: 3px 8px; border-radius: 7px; justify-self: start; color: var(--ink-soft); }

/* business — checkout button + "just clicked" cursor on the commerce card */
.sch-commerce-card { position: relative; }
.sch-checkout-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.sch-checkout {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 11.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink); background: var(--surface); border: 0; border-radius: 9px;
  padding: 8px 14px; cursor: default;
  box-shadow: var(--raise-sm);
}
.sch-checkout svg { display: block; color: var(--ink-soft); }
/* depressed "just clicked" state */
.sch-checkout.is-clicked {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--inset);
}

/* click feedback — anchored to the button (zero-size anchor point) */
.sch-click { position: absolute; right: 60px; bottom: 30px; width: 0; height: 0; z-index: 6; pointer-events: none; }
.sch-click__ring {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 1.6px solid var(--rose); opacity: 0;
  animation: sch-click-ring 2.6s var(--ease-out) infinite;
}
@keyframes sch-click-ring {
  0%, 100% { transform: scale(0.25); opacity: 0; }
  12%      { opacity: 0.65; }
  55%      { transform: scale(1); opacity: 0; }
}
.sch-cursor-arrow {
  position: absolute; left: -3px; top: -2px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
  animation: sch-click-press 2.6s var(--ease-out) infinite;
}
@keyframes sch-click-press {
  0%, 8%, 100% { transform: translate(0, 0); }
  4%           { transform: translate(1.5px, 1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-click__ring, .sch-cursor-arrow { animation: none; }
  .sch-click__ring { opacity: 0.55; transform: scale(0.85); }
}

/* end-to-end — pipeline steps + browser frame */
.sch-step { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.sch-step__frame { width: 96px; height: 108px; border-radius: 13px; display: grid; place-items: center; }
.sch-step__lbl   { font-size: 7.5px; color: var(--ink-faint); }
.sch-browser { border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.sch-browser__bar { height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 9px; border-bottom: 1px solid var(--hairline); }
.sch-browser__bar span { width: 5px; height: 5px; border-radius: 50%; background: rgb(205, 205, 208); }
.sch-browser__body { flex: 1; display: grid; place-items: center; }

/* end-to-end — single object, fidelity build-up (mesh → shade → texture) */
.es-wire { fill: none; stroke: rgb(164, 164, 170); stroke-width: 1; }
.es-zl   { font-family: "Geist Mono", ui-monospace, monospace; font-size: 8px; letter-spacing: 0.1em; fill: var(--ink-ghost); }

/* end-to-end — supplied product render (frameless, blends with canvas) */
.sch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }


/* ===== Source: p3d-refine.css ===== */
/* ============================================================
   Presenter3D — Refined (light) variant overlay
   Keeps the calm, continuous light canvas but adds editorial
   structure: a tightened section order, full-bleed "chapter"
   hairlines, a whisper-soft alternating tint, and indexed
   section eyebrows.

   Loaded ONLY by "Presenter3D Landing (refined).html".
   The original version and shared p3d.css are untouched.
   ============================================================ */

/* ---------- Section order ----------
   Reordered via flex `order` so the markup stays put. Proof
   ("See it working") moves up to follow the differentiation
   claim, before "who it's for" and pricing. */
main#top { display: flex; flex-direction: column; }
main#top > .hero         { order: 0; }
main#top > #how          { order: 1; }   /* Overview */
main#top > #capabilities { order: 2; }   /* What makes it different */
main#top > #examples     { order: 3; }   /* See it working */
main#top > #how-it-works { order: 4; }   /* How it works — process, before Who it's for */
main#top > #audience     { order: 5; }   /* Who it's for */
main#top > #pricing      { order: 6; }   /* Pricing */
main#top > #faq          { order: 7; }   /* FAQ */
main#top > #get-started  { order: 8; }   /* Final CTA */

/* ---------- Chapter hairline + gentle tint (full-bleed) ----------
   A 1px rule marks each section start; alternating sections sit on
   a slightly cooler/darker tint so they read as distinct rooms.
   The tint also deepens the canvas→card contrast, so the soft cards
   lift a touch more. */
.chapter { position: relative; isolation: isolate; }
.chapter::before {
  content: "";
  position: absolute; z-index: 1;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 1px;
  background: var(--hairline);
}
/* The Who-it's-for → Business layer boundary is tint-on-tint (both sections
   share the dim band background), so the standard hairline disappears into it.
   Give just this one seam a slightly deeper tone so it stays a barely-there
   1px line against the tint. */
main#top > #business-layer.chapter::before {
  background: rgb(231, 231, 235);
}
.chapter.tint::after {
  content: "";
  position: absolute; z-index: -1;
  inset-block: 0; left: 50%; transform: translateX(-50%);
  width: 100vw;
  background: rgb(218, 218, 223);
}

/* ---------- Indexed section eyebrow ----------
   Turns the mono eyebrow into a running chapter index, e.g.
   "02 / Capabilities" — the index neutral, the label rose.
   Replaces the base eyebrow's leading dash. */
.eyebrow.idx { gap: 9px; }
.eyebrow.idx::before {
  content: attr(data-idx) "  /";
  width: auto; height: auto;
  background: none; opacity: 1;
  color: var(--ink-faint);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

/* The two sections that previously had no eyebrow now do; keep their
   centered section-head rhythm tidy with a touch more space. */
.section-head .eyebrow.idx { margin-bottom: 2px; }

/* On a tinted section the embedded schema's own grey backdrop would
   read as a faint lighter block — nudge it to match the tint so the
   illustrations stay frameless and calm. */
.chapter.tint .sch { background: rgb(218, 218, 223); }

/* ---------- Capabilities · scenario schema readability ----------
   The node cards were pure white (245) and the iso-cube's TOP face was
   also 245 — so the cube blended into the card and you couldn't read
   the shape. Dim the card, keep the cube top bright so it pops, firm up
   the edges, and darken + enlarge the SCENE 01 / DECIDE / BRANCH labels. */
#cap-scenario .sch-node__card {
  background: rgb(232, 232, 236);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 9px 18px -11px rgba(0, 0, 0, 0.28);
}
#cap-scenario .sch-iso-top  { fill: rgb(248, 248, 250); }  /* bright top pops on the dimmer card */
#cap-scenario .sch-iso-left { fill: rgb(206, 206, 211); }
#cap-scenario .sch-iso-edge { stroke: rgb(168, 168, 175); }
#cap-scenario .sch-node__lbl {
  color: rgb(64, 64, 68);
  font-size: 9.5px;
}
#cap-scenario .sch-node__lbl.is-accent { color: var(--rose); }

/* real example render dropped into the media slot (16:10, fills cleanly) */
.ex-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The audience close-line and examples intro keep their measure; nudge
   the chapter rule clear of the sticky nav by giving sections that
   start near the top a hair more breathing room (optional polish). */


/* ===== Source: p3d-refine-shadows.css ===== */
/* ============================================================
   Presenter3D — Dim-section card shadows (refined v2)
   The neumorphic --raise shadows in p3d.css are top-lit for the
   ~235 canvas: white glow on top, grey shadow below. On the dim
   (218) tint bands that white top-glow halos awkwardly.

   Per the brief: keep the ORIGINAL offsets/blur/spread, only
   recolor — a shade ~10 darker than the band on top, and a
   highlight brighter than the card on the bottom. (Same recipe
   the originals use, just measured against the dim band instead
   of the light canvas.)

   Loaded by "Presenter3D Landing (refined v3).html".
   ============================================================ */

/* dim band = rgb(218,218,223); cards = rgb(245).
   top  → darker than the band   ·  base → matched to the card */
.chapter.tint {
  --raise-sm:
    0 -3px 8px 1px rgb(200, 200, 205),
    0 3px 11px rgb(245, 245, 246);
  --raise:
    0 -3px 8px 1px rgb(200, 200, 205),
    0 3px 11px rgb(245, 245, 246);
  --raise-lg:
    0 -3px 8px 1px rgb(200, 200, 205),
    0 3px 11px rgb(245, 245, 246);
}

/* the one neumorphic card in Capabilities — the business-data matrix —
   uses the schema's own (top-lit) --raise, so give it the dim recipe too */
.chapter.tint #cap-business .sch-raise-lg {
  box-shadow:
    0 -3px 8px 1px rgb(200, 200, 205),
    0 3px 11px rgb(245, 245, 246);
}


/* ===== Source: p3d-refine-v3.css ===== */
/* ============================================================
   Presenter3D — Refined v3 polish layer
   Small, self-contained editorial refinements on top of the v2
   favorite. Loaded ONLY by "Presenter3D Landing (refined v3).html".
   ============================================================ */

/* ---------- 1 · Editorial index: a rose tick + tighter setting ----------
   Gives the running section index ("01 / Overview") a small rose
   lead tick so the numbering reads as a deliberate editorial system,
   and tightens the mono setting. Self-positioned inside the eyebrow,
   so nothing depends on section padding. */
.eyebrow.idx {
  align-items: center;
  gap: 10px;
}
.eyebrow.idx::after {
  content: "";
  order: -2;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose);
  opacity: 0.9;
}
.eyebrow.idx::before {
  order: -1;
  letter-spacing: 0.18em;
}

/* ---------- 2 · Let the page LAND: warm the final CTA ----------
   The CTA was the one section closing on flat neutral. A whisper of
   warm rose in the panel + a faint rose border gives the page a
   closing accent without shouting. */
#get-started .cta-panel {
  background:
    radial-gradient(125% 150% at 50% 0%,
      color-mix(in oklab, var(--rose) 8%, var(--surface)) 0%,
      var(--surface) 60%);
  border: 1px solid color-mix(in oklab, var(--rose) 16%, var(--hairline));
}

/* ---------- 3 · Hero badges: quiet rose dots ----------
   Threads the rose accent up into the hero so it shares the
   accent language of the indexed sections below. */
.hero-badges .badge .dot { background: var(--rose); opacity: 0.85; }

/* ---------- 4 · LiveControls video: sized box + feathered edges ----------
   The supplied clip's plate (rgb 210,212,218) is a hair darker/bluer than
   the tint band (rgb 218,218,223), so its rectangle would show a faint
   seam. Give THIS media slot the clip's own 5:4 ratio (so the video fills
   it with no letterbox and the box never clips at the ≤1080px breakpoint),
   then feather all four edges so it reads as a frameless, floating render. */
#cap-livecontrols .dmedia {
  aspect-ratio: 400 / 320;
  width: min(400px, 100%);
  height: auto;
  min-height: 0;
  max-height: 320px;
  margin-inline: auto;
  overflow: visible;
}
#cap-livecontrols video.sch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* ============================================================
   5 · BUSINESS LAYER — value section (inserted before pricing)
   A tinted interlude that frames the optional business layer as
   commerce infrastructure. Two soft cards ("handles" vs "doesn't
   replace") reuse the same frameless depth and rose accent system
   as .player / .atile, so it reads as native to the page.
   ============================================================ */
.biz .section-head { max-width: 880px; }

.biz-intro {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.biz-intro p {
  font-size: clamp(15px, 1.3vw, 18px); color: var(--ink-soft);
  line-height: 1.6; text-wrap: pretty;
}
.biz-intro p:first-child { color: var(--ink); }

.biz-compare {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(30px, 3.4vw, 50px);
  align-items: start;
}
.biz-col {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 2.4vw, 34px);
  box-shadow: var(--raise-sm);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.biz-col:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.biz-col__head { display: flex; flex-direction: column; gap: 11px; }
.biz-col__tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px;
}
.biz-col--handles .biz-col__tag {
  color: var(--rose); background: color-mix(in oklab, var(--rose) 11%, var(--surface));
}
.biz-col--excludes .biz-col__tag {
  color: var(--ink-faint); background: var(--surface-2);
}
.biz-col__head h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.02em;
  line-height: 1.15; color: var(--ink);
}
.biz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.biz-list li {
  position: relative; padding: 11px 0 11px 30px;
  font-size: clamp(14px, 1.05vw, 15.5px); color: var(--ink-soft);
  line-height: 1.42; text-wrap: pretty;
  border-top: 1px solid var(--hairline-2);
}
.biz-list li:first-child { border-top: 0; }

/* affirmative column — rose check tick */
.biz-col--handles .biz-list li::before {
  content: ""; position: absolute; left: 5px; top: 1.18em;
  width: 5px; height: 9px;
  border: solid var(--rose); border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
/* excluded column — muted dash, dimmer ink */
.biz-col--excludes .biz-list li { color: var(--ink-faint); }
.biz-col--excludes .biz-list li::before {
  content: ""; position: absolute; left: 4px; top: calc(1.18em + 3px);
  width: 11px; height: 1.8px; border-radius: 2px;
  background: var(--ink-ghost);
}

.biz-close {
  max-width: 820px; margin: clamp(32px, 3.6vw, 52px) auto 0;
  text-align: center;
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(17px, 1.7vw, 23px); line-height: 1.4;
  letter-spacing: -0.014em; color: var(--ink-soft); text-wrap: balance;
}
.biz-close strong { color: var(--ink); font-weight: 560; }
.biz-close .rose { color: var(--rose); font-weight: 520; }

.biz-cta { display: flex; justify-content: center; margin-top: clamp(20px, 2vw, 28px); }

/* Pricing — management card: muted, smaller fine-print under the Includes body.
   Kept readable (not hidden) so AI / search crawlers can scan the price, which
   otherwise lives only in the estimator's JS. Raised specificity to beat
   .mgmt-intro > p. */
.mgmt-intro .mgmt-pricing-note {
  font-size: 12px; color: var(--ink-faint);
  line-height: 1.5; margin-top: 8px;
}

/* The standalone VAT line under the pricing cards — same quiet fine-print
   treatment, centred beneath the grid. */
.pricing .pricing-tax-note {
  margin-top: clamp(16px, 1.8vw, 24px);
  text-align: center;
  font-size: 12px; color: var(--ink-faint);
  line-height: 1.5; text-wrap: pretty;
}

@media (max-width: 760px) {
  .biz-compare { grid-template-columns: 1fr; }
}

/* follow the existing card + rose intensity tweaks */
:root[data-cards="outline"] .biz-col { box-shadow: none; }
:root[data-cards="outline"] .biz-col:hover { box-shadow: var(--raise-sm); transform: translateY(-2px); }
:root[data-cards="flat"] .biz-col { border-color: transparent; box-shadow: none; background: var(--surface-2); }
:root[data-cards="flat"] .biz-col:hover { background: var(--surface); box-shadow: var(--raise-sm); }
:root[data-rose="subtle"] .biz .eyebrow { color: var(--ink-faint); }
:root[data-rose="subtle"] .biz-col--handles .biz-col__tag { color: var(--ink-faint); background: var(--surface-2); }
:root[data-rose="subtle"] .biz-col--handles .biz-list li::before { border-color: var(--ink-faint); }
:root[data-rose="subtle"] .biz-close .rose { color: var(--ink); }


/* ===== Source: p3d-compact.css ===== */
/* ============================================================
   Presenter3D — Compact layer (v4 only)
   Loads LAST, after p3d-refine-v3.css. Tightens vertical rhythm:
   smaller inter-section padding, tighter deep-block gaps, and a
   more compact hero with everything shifted upward. Horizontal
   layout, type, and color are all inherited unchanged.
   ============================================================ */

/* ---------- 1 · Inter-section padding ----------
   The single biggest source of whitespace. Base is
   clamp(64px, 9vw, 128px); pull it in ~40% while keeping a
   comfortable floor so sections never collide. */
.section { padding-block: clamp(40px, 5.4vw, 74px); }

/* Deep-dive stack: gap between the alternating media/copy rows. */
.deep { gap: clamp(40px, 5vw, 76px); }

/* Section intros sit closer to their content. */
.section-head { margin-bottom: clamp(26px, 3.2vw, 44px); }
.audience .section-head,
.examples .section-head,
.pricing  .section-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* The feature-chips band carries its own top padding on top of the
   hero's bottom padding — trim it so the two don't compound. */
.features { padding-top: clamp(12px, 1.8vw, 24px); }

/* ---------- 2 · Hero: more compact, shifted up ----------
   Shorten the stage and pull its top padding in so the headline
   starts higher; tighten the bottom so the badges ride up with it. */
.hero { padding-top: clamp(8px, 1.4vw, 18px); padding-bottom: clamp(28px, 3.6vw, 52px); }
.hero-inner { min-height: clamp(380px, 52vh, 520px); }

/* Anchor the headline nearer the top of the (now shorter) stage. */
.hero-copy-tl { top: clamp(2px, 1vw, 12px); gap: clamp(14px, 1.6vw, 20px); }

/* Badges ride up a touch from the lower edge. */
.hero-badges { bottom: clamp(4px, 1vw, 14px); }


/* ===== Source: p3d-examples-slider.css ===== */
/* ============================================================
   B5 — Examples as a horizontal slider of (vertical) cards.
   Keeps the original image-on-top card, but lays cards out on
   a horizontal scroll track so the section keeps a fixed height
   no matter how many examples are added — they scroll sideways
   instead of stacking and pushing pricing further down.
   ============================================================ */

.examples-slider { position: relative; }

.examples-grid {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 6px;
  scroll-padding-inline: 2px;
}
.examples-grid::-webkit-scrollbar { display: none; }

/* A lone card sits centered; once a second card makes the track
   overflow, it left-aligns so nothing gets clipped. */
.examples-grid.is-centered { justify-content: center; }

/* Fixed-width vertical card (image on top, copy below). */
.example-card {
  flex: 0 0 auto;
  width: min(650px, 92vw);
  max-width: none;
  scroll-snap-align: center;
}

/* Keep the image height as it was at the old ~600px width
   (≈375px). 650 / 375 = 26 / 15, so the media box stays the
   same height while the card is a touch wider. */
.ex-media { aspect-ratio: 26 / 15; }

/* Feature badges — even spacing, a touch more air. */
.ex-tags {
  justify-content: space-evenly;
  gap: 12px;
}

/* Nav arrows — appear only when the track overflows (2+ cards). */
.ex-nav {
  position: absolute; top: 38%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--raise-sm);
  color: var(--ink-soft);
  font-size: 24px; line-height: 1;
  padding-bottom: 3px;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .25s var(--ease),
              color .2s var(--ease), opacity .2s var(--ease);
}
.ex-nav:hover {
  color: var(--ink);
  box-shadow: var(--raise);
  transform: translateY(-50%) scale(1.07);
}
.ex-nav[hidden] { display: none; }
.ex-nav[disabled] { opacity: 0; pointer-events: none; }
.ex-nav--prev { left: 6px; }
.ex-nav--next { right: 6px; }

/* Pagination dots. */
.ex-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: clamp(16px, 1.8vw, 24px);
}
.ex-dots[hidden] { display: none; }
.ex-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hairline);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.ex-dot:hover { background: var(--ink-faint); }
.ex-dot.is-active {
  background: var(--rose);
  transform: scale(1.25);
}

/* Narrow viewports — drop the arrows; native scroll still works. */
@media (max-width: 760px) {
  .example-card { width: min(440px, 86vw); }
  .ex-nav { display: none; }
}


/* ===== Source: p3d-feature.css ===== */
/* ============================================================
   Presenter3D — Feature page · Scenario logic
   Page-specific layout that sits on top of the landing system
   (p3d.css + refines). Same tokens: top-lit neumorphic grey
   canvas, rose accent, Geist / Geist Mono, frameless media.
   ============================================================ */

/* ---------- Feature hero ---------- */
.fhero { padding-top: clamp(20px, 3vw, 44px); padding-bottom: clamp(40px, 5vw, 72px); }
.fhero-inner { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 52px); }
.fhero-copy {
  max-width: 920px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(16px, 1.8vw, 24px);
}
.fhero h1 {
  font-family: var(--font-display); font-weight: 560;
  line-height: 1.04; letter-spacing: var(--display-tracking);
  color: var(--ink); text-wrap: balance; margin: 0;
}
.fhero h1 .lead {
  display: block; color: var(--rose); font-weight: 560;
  font-size: clamp(30px, 4.6vw, 52px);
}
.fhero h1 .sub {
  display: block; color: rgb(105, 105, 109); font-weight: 400;
  font-size: clamp(22px, 3.2vw, 36px); margin-top: 2px;
}
.fhero-intro {
  font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft);
  line-height: 1.5; max-width: 64ch; text-wrap: pretty; margin: 0;
}
.fhero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fhero-badges { display: flex; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; margin-top: 4px; }

/* ---------- Placeholder media (final video / image drops in) ---------- */
.ph {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, rgb(0 0 0 / 0.020) 0 14px, transparent 14px 28px),
    radial-gradient(135% 135% at 50% 0%, var(--surface), var(--surface-2));
  box-shadow: var(--inset);
  display: grid; place-items: center;
}
.chapter.tint .ph {
  background:
    repeating-linear-gradient(135deg, rgb(0 0 0 / 0.024) 0 14px, transparent 14px 28px),
    rgb(222, 222, 227);
}
.ph__inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: clamp(22px, 3vw, 40px); text-align: center;
}
/* static play disc — signals a looped video slot (not a real control) */
.ph__play {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--raise);
  display: grid; place-items: center;
}
.ph__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 17px solid var(--rose);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
/* small square glyph — signals an image / diagram slot */
.ph__glyph {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--surface); box-shadow: var(--raise-sm);
  display: grid; place-items: center;
}
.ph__glyph::before {
  content: ""; width: 18px; height: 18px; border-radius: 4px;
  border: 1.8px solid var(--rose);
}
.ph__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  line-height: 1.75; max-width: 40ch;
}
.ph__tag b { color: var(--rose); font-weight: 500; letter-spacing: 0.13em; }

/* hero / featured wide slot */
.ph--wide { width: 100%; aspect-ratio: 16 / 9; }
.ph--embed { width: 100%; aspect-ratio: 16 / 8; }

/* deep-block media slot */
.dblock-media .ph { width: 100%; aspect-ratio: 5 / 4; min-height: clamp(230px, 30vw, 320px); }

/* ---------- Five animation layers ---------- */
.layers-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.2vw, 18px); align-items: stretch;
}
.layer {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: clamp(20px, 1.8vw, 26px);
  box-shadow: var(--raise-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.layer:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.layer__n { font-family: var(--font-mono); font-size: 12px; color: var(--rose); letter-spacing: 0.08em; }
.layer h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(15px, 1.2vw, 17.5px); letter-spacing: -0.018em;
  line-height: 1.18; color: var(--ink); margin-top: 4px;
}
.layer p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; text-wrap: pretty; }
.layer .tlink { font-size: 13px; margin-top: auto; padding-top: 8px; }

/* ---------- Featured embed (dynamic variables) ---------- */
.embed-wrap { max-width: 1000px; margin-inline: auto; }
.embed-note {
  margin: clamp(18px, 2vw, 24px) auto 0; max-width: 620px; text-align: center;
  font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-soft);
  line-height: 1.55; text-wrap: pretty;
}
.embed-note .rose { color: var(--rose); font-weight: 500; }

/* ---------- Benefits (2 × 2 soft tiles) ---------- */
.bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.4vw, 20px); }

/* ---------- Related features / guides ---------- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 20px); }
.related-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  text-decoration: none; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: clamp(24px, 2.2vw, 32px);
  box-shadow: var(--raise-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.related-card h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -0.02em;
  line-height: 1.16; color: var(--ink);
}
.related-card p { font-size: 14px; color: var(--ink-faint); line-height: 1.52; text-wrap: pretty; }
.related-card .rl-go {
  margin-top: auto; padding-top: 6px;
  font-size: 14px; font-weight: 500; color: var(--rose);
  display: inline-flex; align-items: center; gap: 7px;
}
.related-card .rl-go .arrow { transition: transform 0.3s var(--ease); }
.related-card:hover .rl-go .arrow { transform: translateX(4px); }

/* ---------- rose-subtle tweak parity ---------- */
:root[data-rose="subtle"] .fhero h1 .lead { color: var(--ink); }
:root[data-rose="subtle"] .ph__play::before { border-left-color: var(--ink-faint); }
:root[data-rose="subtle"] .ph__glyph::before { border-color: var(--ink-faint); }
:root[data-rose="subtle"] .ph__tag b { color: var(--ink-faint); }
:root[data-rose="subtle"] .layer__n { color: var(--ink-faint); }
:root[data-rose="subtle"] .related-card .rl-go { color: var(--ink-soft); }
:root[data-rose="subtle"] .embed-note .rose { color: var(--ink); }
:root[data-rose="subtle"] .fhero .eyebrow,
:root[data-rose="subtle"] .related .eyebrow { color: var(--ink-faint); }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .layers-grid { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bgrid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .layers-grid { grid-template-columns: 1fr; }
}


/* ===== Source: p3d-production.css ===== */
/* ============================================================
   Presenter3D — Feature page · Production path
   Sits on top of the landing system. Same tokens: top-lit
   neumorphic grey canvas, rose accent, Geist / Geist Mono.
   ============================================================ */

/* ---------- The path — numbered step timeline ---------- */
.path {
  max-width: 980px; margin-inline: auto;
  display: flex; flex-direction: column;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 76px) 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  padding-bottom: clamp(28px, 3.4vw, 48px);
}
.step:last-child { padding-bottom: 0; }

/* connecting rail behind the numbered discs */
.step::before {
  content: "";
  position: absolute;
  left: calc(clamp(56px, 6vw, 76px) / 2);
  top: clamp(54px, 6vw, 74px); bottom: -2px;
  width: 2px; transform: translateX(-1px);
  background: linear-gradient(to bottom, var(--rose) 0%, color-mix(in oklch, var(--rose) 22%, transparent) 100%);
  opacity: 0.55;
}
.step:last-child::before { display: none; }

.step__disc {
  position: relative; z-index: 1;
  width: clamp(54px, 6vw, 74px); height: clamp(54px, 6vw, 74px);
  border-radius: 50%;
  background: var(--surface); box-shadow: var(--raise);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(20px, 2vw, 26px); color: var(--rose);
  letter-spacing: -0.02em;
}

.step__body { padding-top: clamp(8px, 1vw, 14px); }
.step__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.step h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em;
  line-height: 1.14; color: var(--ink); margin: 0;
}
.step p { font-size: clamp(15px, 1.2vw, 16.5px); color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; margin: 0; max-width: 62ch; }
.step .opt-pill {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 4px 9px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--inset);
}

/* ---------- What we need — three tiles ---------- */
.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 20px); }
.need-tile {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: clamp(24px, 2.2vw, 32px);
  box-shadow: var(--raise-sm);
}
.need-tile__n { font-family: var(--font-mono); font-size: 12px; color: var(--rose); letter-spacing: 0.08em; }
.need-tile h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(16px, 1.3vw, 18.5px); letter-spacing: -0.018em;
  line-height: 1.16; color: var(--ink);
}
.need-tile p { font-size: 14px; color: var(--ink-faint); line-height: 1.52; text-wrap: pretty; }
.need-note {
  max-width: 720px; margin: clamp(20px, 2.4vw, 30px) auto 0; text-align: center;
  font-size: clamp(14.5px, 1.15vw, 16px); color: var(--ink-soft); line-height: 1.55; text-wrap: pretty;
}

/* ---------- Timeline reality — three scale tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 20px); align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: clamp(26px, 2.4vw, 36px);
  box-shadow: var(--raise-sm);
}
.tier__gauge { display: flex; gap: 6px; }
.tier__gauge span { height: 6px; flex: 1; border-radius: 3px; background: var(--surface); box-shadow: var(--inset); }
.tier__gauge span.on { background: var(--rose); box-shadow: none; }
.tier__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tier h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -0.02em;
  line-height: 1.16; color: var(--ink);
}
.tier p { font-size: 14px; color: var(--ink-faint); line-height: 1.52; text-wrap: pretty; }
.tier__pace { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 500; color: var(--rose); }
.tier-note {
  max-width: 720px; margin: clamp(20px, 2.4vw, 30px) auto 0; text-align: center;
  font-size: clamp(14.5px, 1.15vw, 16px); color: var(--ink-soft); line-height: 1.55; text-wrap: pretty;
}
.tier-note .rose { color: var(--rose); font-weight: 500; }

/* ---------- rose-subtle tweak parity ---------- */
:root[data-rose="subtle"] .step__disc { color: var(--ink); }
:root[data-rose="subtle"] .step::before { background: var(--hairline); opacity: 1; }
:root[data-rose="subtle"] .need-tile__n { color: var(--ink-faint); }
:root[data-rose="subtle"] .tier__gauge span.on { background: var(--ink-faint); }
:root[data-rose="subtle"] .tier__pace { color: var(--ink-soft); }
:root[data-rose="subtle"] .tier-note .rose { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .need-grid, .tier-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .step { grid-template-columns: clamp(46px, 13vw, 56px) 1fr; gap: 16px; }
  .step::before { left: calc(clamp(46px, 13vw, 56px) / 2); }
}
/* Phones: drop the rail, stack the number top-left, give text the full width */
@media (max-width: 480px) {
  .step {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 26px;
  }
  .step::before { display: none; }
  .step__disc { width: 46px; height: 46px; font-size: 19px; }
  .step__body { padding-top: 0; }
  .step p { max-width: none; }
}


/* ===== Source: p3d-contact.css ===== */
/* ============================================================
   Presenter3D — Contact page
   Reuses p3d.css system tokens & vocabulary. Layout only here.
   ============================================================ */

/* ---------- Page header ---------- */
.contact-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(8px, 1.4vw, 20px); }
.contact-hero .section-head { align-items: flex-start; text-align: left; margin-inline: 0; max-width: 760px; }
.contact-hero .section-head h1 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02;
  letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance;
}
.contact-hero .section-head h1 .rose { color: var(--rose); }
.contact-hero .section-head p { max-width: 560px; }

/* ---------- Two-column body: rail + form ---------- */
.contact-grid {
  display: grid; grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(32px, 4.5vw, 84px); align-items: start;
  padding-top: clamp(36px, 4vw, 60px);
}

/* ----- left rail ----- */
.contact-rail { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }
.contact-rail .rail-lead {
  font-family: var(--font-display); font-weight: 440;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4;
  letter-spacing: -0.014em; color: var(--ink-soft); text-wrap: pretty;
  max-width: 340px;
}
.contact-rail .rail-lead .rose { color: var(--rose); font-weight: 520; }

/* contact channel cards */
.channels { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 16px); }
.channel {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(18px, 1.8vw, 24px);
  box-shadow: var(--raise-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
a.channel { color: inherit; }
a.channel:hover { transform: translateY(-3px); box-shadow: var(--raise); }
.channel-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--rose) 9%, var(--surface-2));
  color: var(--rose); box-shadow: var(--raise-sm);
}
.channel-ico svg { width: 19px; height: 19px; }
.channel-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.channel-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.channel-value {
  font-family: var(--font-display); font-weight: 520;
  font-size: clamp(16px, 1.4vw, 18.5px); letter-spacing: -0.014em;
  color: var(--ink); line-height: 1.25; word-break: break-word;
}
.channel-sub { font-size: 13.5px; color: var(--ink-faint); line-height: 1.4; }
a.channel:hover .channel-value { color: var(--rose); }

/* studio / legal meta block */
.studio-meta {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(18px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 13px;
}
.studio-meta-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.meta-rows { display: flex; flex-direction: column; gap: 9px; }
.meta-row { display: flex; flex-direction: column; gap: 1px; }
.meta-row .mk {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-ghost);
}
.meta-row .mv { font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.meta-row .mv strong { font-weight: 540; }

/* ----- right: form card ----- */
.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--raise);
  overflow: hidden;
}
.contact-form-head {
  padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.8vw, 40px) 4px;
  display: flex; flex-direction: column; gap: 9px;
}
.contact-form-head h2 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(21px, 2vw, 27px); letter-spacing: -0.022em;
  line-height: 1.1; color: var(--ink); text-wrap: balance;
}
.contact-form-head p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; max-width: 48ch; }

.contact-form-card .p3d-form { padding: clamp(18px, 2vw, 26px) clamp(24px, 2.8vw, 40px); }

.contact-form-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 18px clamp(24px, 2.8vw, 40px) clamp(24px, 2.8vw, 32px);
  border-top: 1px solid var(--hairline);
}
.contact-form-foot .p3d-form-status { flex: 1; }
.contact-form-foot .p3d-btn { flex: none; width: auto; min-width: 160px; }

/* card follows the card-style tweak */
:root[data-cards="outline"] .channel,
:root[data-cards="outline"] .contact-form-card { box-shadow: none; }
:root[data-cards="outline"] a.channel:hover { box-shadow: var(--raise-sm); transform: translateY(-2px); }
:root[data-cards="flat"] .channel { border-color: transparent; box-shadow: none; background: var(--surface-2); }
:root[data-cards="flat"] .contact-form-card { border-color: transparent; box-shadow: none; }
:root[data-rose="subtle"] .channel-ico { color: var(--ink-soft); background: var(--surface-2); }
:root[data-rose="subtle"] a.channel:hover .channel-value { color: var(--ink); }
:root[data-rose="subtle"] .contact-rail .rail-lead .rose { color: var(--ink); }
:root[data-rose="subtle"] .contact-hero .section-head h1 .rose { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .contact-rail { order: 2; }
  .contact-form-card { order: 1; }
}
@media (max-width: 480px) {
  .contact-form-foot { flex-direction: column-reverse; align-items: stretch; }
  .contact-form-foot .p3d-btn { width: 100%; }
  .contact-form-foot .p3d-form-status { text-align: center; }
}


/* ===== Source: p3d-legal.css ===== */
/* ============================================================
   Presenter3D — Legal / policy pages
   Reuses p3d.css tokens. Sticky TOC rail + readable prose.
   ============================================================ */

/* ---------- Page header ---------- */
.legal-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(8px, 1.2vw, 16px); }
.legal-hero .section-head { align-items: flex-start; text-align: left; margin-inline: 0; max-width: 820px; }
.legal-hero h1 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02;
  letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance;
}
.legal-hero h1 .rose { color: var(--rose); }
.legal-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: clamp(16px, 2vw, 22px);
}
.legal-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 7px 14px;
}
.legal-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.legal-lead {
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5;
  letter-spacing: -0.012em; color: var(--ink-soft); text-wrap: pretty;
  max-width: 68ch; margin-top: clamp(18px, 2vw, 26px);
}
.legal-lead strong { font-weight: 560; color: var(--ink); }

/* ---------- Body: TOC rail + article ---------- */
.legal-grid {
  display: grid; grid-template-columns: 248px 1fr;
  gap: clamp(36px, 5vw, 88px); align-items: start;
  padding-top: clamp(36px, 4vw, 56px);
}

/* ----- sticky TOC ----- */
.legal-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.legal-toc-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  padding-left: 14px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.legal-toc a {
  display: flex; gap: 11px; align-items: baseline;
  padding: 7px 14px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-faint);
  text-decoration: none; border-left: 2px solid transparent;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.legal-toc a .tn {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-ghost);
  flex: 0 0 auto; min-width: 16px; transition: color 0.2s var(--ease);
}
.legal-toc a:hover { color: var(--ink); background: var(--surface-2); }
.legal-toc a.active {
  color: var(--rose); background: color-mix(in oklab, var(--rose) 6%, transparent);
  border-left-color: var(--rose); font-weight: 500;
}
.legal-toc a.active .tn { color: var(--rose); }

/* ----- article prose ----- */
.legal-article { max-width: 760px; min-width: 0; }
.legal-section { padding-block: clamp(26px, 3vw, 40px); border-top: 1px solid var(--hairline); }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-section h2 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -0.022em;
  line-height: 1.12; color: var(--ink); text-wrap: balance;
  display: flex; gap: 14px; align-items: baseline; scroll-margin-top: 96px;
}
.legal-section h2 .sn {
  font-family: var(--font-mono); font-size: 0.55em; font-weight: 500;
  color: var(--rose); letter-spacing: 0.04em; flex: 0 0 auto;
  transform: translateY(-0.2em);
}
.legal-section h3 {
  font-family: var(--font-display); font-weight: 540;
  font-size: clamp(15.5px, 1.3vw, 17px); letter-spacing: -0.012em;
  color: var(--ink); margin-top: clamp(20px, 2vw, 26px); margin-bottom: 2px;
}
.legal-section p,
.legal-section li {
  font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty;
}
.legal-section p { margin-top: 12px; max-width: 70ch; }
.legal-section h2 + p { margin-top: 14px; }
.legal-section a { color: var(--rose); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--rose) 35%, transparent); transition: border-color 0.2s var(--ease); }
.legal-section a:hover { border-bottom-color: var(--rose); }
.legal-section strong { color: var(--ink); font-weight: 560; }

/* bulleted lists */
.legal-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; max-width: 70ch; }
.legal-list li { position: relative; padding-left: 22px; }
.legal-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.66em;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, var(--rose) 70%, transparent);
}

/* definition-style key/value rows (controller info, retention) */
.legal-defs { margin: 16px 0 0; display: flex; flex-direction: column; gap: 0; max-width: 70ch; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.legal-defs .row {
  display: grid; grid-template-columns: 230px 1fr; gap: 18px;
  padding: 14px 18px; border-top: 1px solid var(--hairline); align-items: baseline;
}
.legal-defs .row:first-child { border-top: 0; }
.legal-defs .row:nth-child(odd) { background: var(--surface-2); }
.legal-defs .dk {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.5;
}
.legal-defs .dv { font-size: 15px; color: var(--ink); line-height: 1.5; }
.legal-defs .dv a { color: var(--rose); }

/* callout note (the "Important" lines) */
.legal-note {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 18px 0 0; padding: 16px 20px; max-width: 70ch;
  background: color-mix(in oklab, var(--rose) 5%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--rose) 22%, var(--hairline));
  border-radius: var(--radius);
}
.legal-note .ni {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; color: #fff; background: var(--rose);
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; line-height: 1;
}
.legal-note p { margin: 0 !important; font-size: 14.5px; color: var(--ink); }
.legal-note p strong { color: var(--ink); }

/* contact-back footer inside article */
.legal-contact-card {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--raise-sm);
}
.legal-contact-card .lc-copy h3 {
  font-family: var(--font-display); font-weight: 560; font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.018em; color: var(--ink); margin: 0;
}
.legal-contact-card .lc-copy p { margin: 5px 0 0; font-size: 14px; color: var(--ink-soft); }

/* rose-subtle alignment */
:root[data-rose="subtle"] .legal-hero h1 .rose,
:root[data-rose="subtle"] .legal-section h2 .sn { color: var(--ink); }
:root[data-rose="subtle"] .legal-pill .dot { background: var(--ink-faint); }
:root[data-rose="subtle"] .legal-toc a.active { color: var(--ink); border-left-color: var(--ink-soft); background: var(--surface-2); }
:root[data-rose="subtle"] .legal-toc a.active .tn { color: var(--ink-soft); }
:root[data-rose="subtle"] .legal-list li::before { background: var(--ink-faint); }
:root[data-rose="subtle"] .legal-section a,
:root[data-rose="subtle"] .legal-defs .dv a { color: var(--ink); border-bottom-color: var(--ink-faint); }
:root[data-rose="subtle"] .legal-note { background: var(--surface-2); border-color: var(--hairline); }
:root[data-rose="subtle"] .legal-note .ni { background: var(--ink-soft); }

/* card tweaks */
:root[data-cards="outline"] .legal-contact-card { box-shadow: none; }
:root[data-cards="flat"] .legal-contact-card { box-shadow: none; border-color: transparent; background: var(--surface-2); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .legal-grid { grid-template-columns: 1fr; gap: clamp(8px, 2vw, 18px); }
  .legal-toc {
    position: static; flex-direction: row; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline); scrollbar-width: thin;
  }
  .legal-toc-title { display: none; }
  .legal-toc ol { flex-direction: row; gap: 6px; }
  .legal-toc a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px; padding: 7px 12px; }
  .legal-toc a.active { border-left: 0; border-bottom-color: var(--rose); }
}
@media (max-width: 560px) {
  .legal-defs .row { grid-template-columns: 1fr; gap: 4px; }
  .legal-contact-card { flex-direction: column; align-items: stretch; text-align: left; }
  .legal-contact-card .p3d-btn, .legal-contact-card .btn { width: 100%; }
}


/* ===== Source: p3d-demo.css ===== */
/* ============================================================
   Presenter3D — Main Demo page
   Demo-forward hero (centered headline + large video player),
   definition / "what is" section, supporting points.
   Builds on p3d.css tokens; mirrors the contact page scaffold.
   ============================================================ */

/* ---------- Page header ---------- */
.demo-hero { padding-top: clamp(26px, 4vw, 54px); padding-bottom: clamp(28px, 4vw, 52px); }
.demo-hero .section-head { align-items: center; text-align: center; max-width: 820px; gap: 18px; margin-bottom: clamp(30px, 4vw, 48px); }
.demo-hero .section-head h1 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(33px, 4.5vw, 56px); line-height: 1.02;
  letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance;
}
.demo-hero .section-head h1 .rose { color: var(--rose); }
.demo-hero .section-head p { max-width: 600px; }

/* ---------- The demo player ---------- */
.demo-stage { max-width: 940px; margin-inline: auto; }
.demo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--raise-lg);
}
.demo-frame video,
.demo-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* caption beneath the player */
.demo-note {
  max-width: 640px; margin: clamp(22px, 2.6vw, 32px) auto 0; text-align: center;
  font-size: clamp(15px, 1.3vw, 17.5px); color: var(--ink-soft); line-height: 1.56; text-wrap: pretty;
}

/* actions */
.demo-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(22px, 2.6vw, 30px); }

/* ---------- Definition / "what is" section ---------- */
.demo-def .section-head { max-width: 720px; }
.demo-prose { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; }
.demo-prose p { font-size: clamp(15.5px, 1.25vw, 17.5px); color: var(--ink-soft); line-height: 1.62; text-wrap: pretty; }
.demo-prose p .rose { color: var(--rose); font-weight: 500; }
.demo-prose strong { color: var(--ink); font-weight: 560; }

/* supporting points (static tiles, reuse audience grid spacing) */
.demo-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .demo-points { grid-template-columns: 1fr; }
}


/* ===== Source: p3d-consent.css ===== */
/* ============================================================
   Presenter3D — Cookie / privacy consent
   Banner (corner toast) + details modal. Uses p3d.css tokens.
   ============================================================ */

.p3d-consent { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.p3d-consent[hidden] { display: none; }

/* backdrop only shows in details mode */
.p3d-consent__backdrop {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: oklch(0.22 0.012 285 / 0.42); backdrop-filter: saturate(1.1) blur(6px);
  transition: opacity 0.35s var(--ease);
}
.p3d-consent.is-details .p3d-consent__backdrop { opacity: 1; pointer-events: auto; }

/* ---------- shared card ---------- */
.p3d-consent__card {
  position: absolute; pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--raise-lg);
  display: none; flex-direction: column;
}

/* ---------- banner (corner toast) ---------- */
.p3d-consent__card--banner {
  left: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  width: min(440px, calc(100vw - 32px));
  padding: clamp(20px, 2.2vw, 26px);
  transform: translateY(14px); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.p3d-consent.is-banner .p3d-consent__card--banner { display: flex; }
.p3d-consent.is-banner.in .p3d-consent__card--banner { transform: none; opacity: 1; }

.p3d-consent__card--banner .p3d-consent__copy strong {
  display: block; font-family: var(--font-display); font-weight: 560;
  font-size: 16.5px; letter-spacing: -0.016em; color: var(--ink); margin-bottom: 7px;
}
.p3d-consent__card--banner .p3d-consent__copy p {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty;
}
.p3d-consent__card--banner .p3d-consent__copy a { color: var(--rose); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--rose) 35%, transparent); }

.p3d-consent__card--banner .p3d-consent__actions {
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px;
}

/* ---------- details modal ---------- */
.p3d-consent__card--details {
  left: 50%; top: 50%; transform: translate(-50%, -48%) scale(0.985);
  width: min(560px, calc(100vw - 32px)); max-height: min(82vh, 720px);
  opacity: 0; transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.p3d-consent.is-details .p3d-consent__card--details { display: flex; }
.p3d-consent.is-details.in .p3d-consent__card--details { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.p3d-consent-details__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.p3d-consent-details__close:hover { color: var(--ink); transform: rotate(90deg); }
.p3d-consent-details__close svg { width: 15px; height: 15px; }

.p3d-consent__card--details .p3d-consent__row { display: flex; flex-direction: column; min-height: 0; }
.p3d-consent__card--details .p3d-consent__copy {
  padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.8vw, 34px) 16px;
}
.p3d-consent__card--details .p3d-consent__copy strong {
  display: block; font-family: var(--font-display); font-weight: 560;
  font-size: clamp(18px, 1.9vw, 22px); letter-spacing: -0.02em; color: var(--ink);
}

.p3d-consent-details__scroll {
  overflow-y: auto; min-height: 0; padding: 0 clamp(24px, 2.8vw, 34px);
  scrollbar-width: thin;
}
.p3d-consent-details__sections { display: flex; flex-direction: column; }

/* each category */
.p3d-consent-detail { border-top: 1px solid var(--hairline); padding: 16px 0; }
.p3d-consent-detail:first-child { border-top: 0; }
.p3d-consent-detail__head { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.p3d-consent-detail__expand {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0;
  font-family: var(--font-display); font-weight: 520; font-size: 15px;
  letter-spacing: -0.012em; color: var(--ink);
}
.p3d-consent-detail__arrow {
  flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center;
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; line-height: 1;
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
}
.p3d-consent-detail.is-open .p3d-consent-detail__arrow,
.p3d-consent-detail__expand[aria-expanded="true"] .p3d-consent-detail__arrow { transform: rotate(90deg); color: var(--rose); }

.p3d-consent-detail__summary {
  margin: 9px 0 0; padding-left: 26px;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty;
}
.p3d-consent-detail__panel {
  padding-left: 26px; overflow: hidden;
  height: 0; opacity: 0; transition: height 0.34s var(--ease), opacity 0.3s var(--ease), margin 0.34s var(--ease);
}
.p3d-consent-detail.is-open .p3d-consent-detail__panel { opacity: 1; margin-top: 12px; }
.p3d-consent-detail__panel p {
  margin: 0 0 9px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
}
.p3d-consent-detail__panel p:last-child { margin-bottom: 2px; }
.p3d-consent-detail__panel strong { color: var(--ink); font-weight: 560; }
.p3d-consent-detail__panel a { color: var(--rose); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--rose) 30%, transparent); }

/* switch — mirrors .p3d-toggle */
.p3d-consent-switch { position: relative; display: inline-flex; width: 44px; height: 25px; flex: 0 0 auto; }
.p3d-consent-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.p3d-consent-switch input:disabled { cursor: default; }
.p3d-consent-switch__slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--surface); box-shadow: var(--inset);
  transition: background 0.28s var(--ease);
}
.p3d-consent-switch__slider::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.28s var(--ease);
}
.p3d-consent-switch input:checked + .p3d-consent-switch__slider { background: var(--rose); box-shadow: none; }
.p3d-consent-switch input:checked + .p3d-consent-switch__slider::after { transform: translateX(19px); }
.p3d-consent-switch input:disabled:checked + .p3d-consent-switch__slider { background: color-mix(in oklab, var(--rose) 42%, var(--surface-2)); }
.p3d-consent-switch input:focus-visible + .p3d-consent-switch__slider { outline: 2px solid color-mix(in oklab, var(--rose) 45%, transparent); outline-offset: 2px; }

/* actions */
.p3d-consent__card--details .p3d-consent__actions {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end;
  padding: 16px clamp(24px, 2.8vw, 34px) clamp(22px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline); margin-top: 4px;
}

/* consent buttons — quiet by default, one primary */
.p3d-consent-btn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
  box-shadow: var(--raise-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.p3d-consent-btn:hover { transform: translateY(-2px); box-shadow: var(--raise); }
.p3d-consent-btn:active { transform: translateY(0); }
.p3d-consent-btn--primary {
  background: var(--rose); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--rose) 60%, transparent), 0 1px 0 oklch(1 0 0 / 0.25) inset;
}
.p3d-consent-btn--primary:hover { background: color-mix(in oklab, var(--rose) 92%, white); }

/* rose-subtle alignment */
:root[data-rose="subtle"] .p3d-consent-switch input:checked + .p3d-consent-switch__slider { background: var(--ink-soft); }
:root[data-rose="subtle"] .p3d-consent-detail.is-open .p3d-consent-detail__arrow { color: var(--ink-soft); }
:root[data-rose="subtle"] .p3d-consent-btn--primary { background: var(--ink); }
:root[data-rose="subtle"] .p3d-consent-btn--primary:hover { background: color-mix(in oklab, var(--ink) 88%, white); }
:root[data-rose="subtle"] .p3d-consent__copy a,
:root[data-rose="subtle"] .p3d-consent-detail__panel a { color: var(--ink); border-bottom-color: var(--ink-faint); }

/* card tweaks */
:root[data-cards="flat"] .p3d-consent-btn { box-shadow: none; }

@media (max-width: 480px) {
  .p3d-consent__card--banner { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .p3d-consent__card--banner .p3d-consent__actions .p3d-consent-btn { flex: 1; }
  .p3d-consent__card--details .p3d-consent__actions { flex-direction: column-reverse; }
  .p3d-consent__card--details .p3d-consent__actions .p3d-consent-btn { width: 100%; }
}


/* ============================================================
   Promoted inline styles — moved off the elements into the sheet
   so the markup stays clean and direct-editable. Renders identically
   to the previous inline values (ID/compound selectors win over the
   base rules; mobile !important overrides still apply as before).
   ============================================================ */
.hero-media .hero-video { margin: 0; width: 580px; height: 560px; }
.hero-media .p3d-video-play { background-color: rgba(245, 245, 245, 0.576); }
#how { padding: 37px 56px 76px; }
#how .section-head { margin: 0 auto 30px; }
#capabilities .section-head { margin: 0 auto 32px; }
#capabilities .deep { gap: 3px; }
.dblock-copy h3.fss i { color: rgb(46, 46, 48); }


/* ---------- Calculator-control tooltips ----------
   The estimator card uses overflow:hidden with zero padding (its inner pane
   fills edge-to-edge), so a centered popup on a left-aligned icon gets clipped
   on the left. Anchor these popups near the icon and let them grow rightward
   into the card; the arrow still points at the icon. */
.p3d-price-controls .p3d-tooltip__content {
  left: 50%;
  transform: translateX(-14px) translateY(4px);
}
.p3d-price-controls .p3d-tooltip:hover .p3d-tooltip__content,
.p3d-price-controls .p3d-tooltip:focus .p3d-tooltip__content,
.p3d-price-controls .p3d-tooltip:focus-visible .p3d-tooltip__content {
  transform: translateX(-14px) translateY(0);
}
.p3d-price-controls .p3d-tooltip__content::after { left: 14px; transform: translateX(-50%); }