/* =================== TOKENS =================== */
:root{
  --paper:#FFFFFF; --ink:#0D0F13; --slate:#6B7280; --mist:#F6F7FB;
  --accent:#EC3B83; --ring:#8AB4FF; --success:#22c55e;
  --radius:16px; --radius-sm:12px; --grid:22px; --wrap:1120px;
  --hairline:1px solid #ececf1;
  --shadow-sm:0 8px 24px rgba(13,15,19,.08);
  --shadow:0 24px 80px rgba(13,15,19,.10);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* =================== BASE =================== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink) }
body{ font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px }
:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; border-radius:10px }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:16px; top:12px; width:auto; height:auto; padding:8px 10px; background:#000; color:#fff; z-index:10002; border-radius:8px }

/* =================== HEADER (SHARED) =================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:color-mix(in oklab,var(--paper) 86%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid color-mix(in oklab,var(--ink) 10%,transparent);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px }
.brand{ display:flex; align-items:center; gap:10px }
.brand img{ display:block; max-height:56px; width:auto; object-fit:contain; object-position:center; }
.brand-name{ font:700 16px/1 Inter }
.controls{ display:flex; align-items:center; gap:10px }

/* Icon button */
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid #E6E7EB; background:#fff; border-radius:10px; cursor:pointer;
  transition: transform .18s, box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.06) }

/* Speaker state */
#speakerBtn .ic-off{ display:none }
#speakerBtn[data-state="off"]{
  color:var(--accent); background:#fff0f6; border-color:#ffd0e6;
}
#speakerBtn[data-state="off"] .ic-on{ display:none }
#speakerBtn[data-state="off"] .ic-off{ display:inline }

/* Hamburger */
.hamburger-btn{ position:relative }
.hamburger,.hamburger::before,.hamburger::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition: transform .22s ease, opacity .22s ease;
}
.hamburger::before{ transform:translateY(-5px) }
.hamburger::after { transform:translateY(5px) }
.hamburger-btn[aria-expanded="true"] .hamburger{ transform:scaleX(0); opacity:0 }
.hamburger-btn[aria-expanded="true"] .hamburger::before{ transform:rotate(45deg) }
.hamburger-btn[aria-expanded="true"] .hamburger::after { transform:rotate(-45deg) }

/* =================== DRAWER (SHARED) =================== */
.drawer{ position:fixed; inset:0; z-index:9999; pointer-events:none }
.drawer.open{ pointer-events:auto }
.drawer .scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .18s ease;
}
.drawer.open .scrim{ opacity:1 }
.drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,86vw);
  background:#fff; border-left:1px solid #ececf1; box-shadow:-24px 0 80px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .24s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open .panel{ transform:translateX(0) }
body.drawer-open{ overflow:hidden }

.panel-head{
  display:flex; align-items:center; gap:10px; padding:12px 12px;
  border-bottom:1px dashed #ffd0e6;
}
.panel-mark{ color:var(--accent); font-size:18px }
.panel-head h2{
  margin:0; font:800 14px/1 Inter,system-ui,sans-serif; letter-spacing:.06em; color:var(--ink); text-transform:uppercase;
}
.panel-close{
  margin-left:auto; width:32px; height:32px; border-radius:10px; border:1px solid #ececf1; background:#fff; color:#6B7280;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .18s, background-color .18s, color .18s, box-shadow .18s;
}
.panel-close:hover{ transform:rotate(90deg); background:#fff0f6; color:var(--accent); box-shadow:0 8px 24px rgba(236,59,131,.14) }

.panel-links{ display:flex; flex-direction:column; padding:10px }
.panel-links a{
  display:flex; align-items:center; gap:10px; padding:12px 10px;
  border-radius:12px; color:var(--ink); border:1px solid transparent;
  transition: background-color .18s, transform .18s, border-color .18s;
}
.panel-links a .i{ width:22px; display:inline-grid; place-items:center; opacity:.9 }
.panel-links a:hover{
  background:#fff0f6; border-color:#ffd0e6; transform:translateX(2px);
  box-shadow:0 8px 24px rgba(236,59,131,.10);
}
.drawer.open .panel-links a{ animation:link-in .28s ease both }
.panel-links a:nth-child(1){ animation-delay:.02s }
.panel-links a:nth-child(2){ animation-delay:.06s }
.panel-links a:nth-child(3){ animation-delay:.10s }
@keyframes link-in{ from{opacity:0; transform:translateX(8px)} to{opacity:1; transform:translateX(0)} }

/* =================== CASE STUDY — HERO =================== */
.cs-hero{ padding:40px 0 26px }
.hero-wrap{ max-width:var(--wrap); }
.eyebrow{ color:#6b7280; font:700 12px/1 Inter; letter-spacing:.12em; text-transform:uppercase; text-align:center; margin:0 0 8px }
.hero-title{
  margin:0 auto 14px; text-align:center;
  font:700 clamp(26px,3.6vw,40px)/1.15 Poppins,Inter,sans-serif;
  max-width: 920px;
}
.exec{ max-width:900px; margin:0 auto 18px; text-align:center }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 10px }
.pill{
  background:#fff0f6; color:#EC3B83; font-weight:800; font-size:12px;
  padding:7px 10px; border-radius:999px; letter-spacing:.02em; border:1px solid #ffd0e6;
}
.hero-points{ margin:8px auto 14px; padding-left:18px; text-align:left; max-width:760px }
.hero-points li{ margin:.35rem 0 }
.meta-cards{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 auto; max-width:820px;
}
.meta{
  background:#fff; border:var(--hairline); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:10px 12px; display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;
}
.meta b{ font-size:12px; color:#475569; text-transform:uppercase; letter-spacing:.06em; }
.meta span{ font-size:14px }

.hero-media{
  display:grid; place-items:center;
  background:radial-gradient(700px 320px at 50% 100%, #fff0f6, transparent 70%);
  padding:18px; border-radius:20px; border:1px solid #ffe3f0;
  margin-top:14px;
}
.hero-media svg, .hero-media img{
  width:min(980px, 100%); height:auto; object-fit:contain;
  filter: drop-shadow(0 14px 42px rgba(14, 23, 42, .12));
}

/* =================== CASE STUDY — SECTIONS =================== */
.cs-section{ padding:28px 0 }
.section-head{ text-align:center; margin:0 0 12px }
.section-head h2{ margin:0; font:700 clamp(20px,2.8vw,28px)/1.2 Poppins,Inter,sans-serif; }
.section-head .kicker{ margin:6px 0 0; color:var(--slate); font:600 14px/1.6 Inter }
.lede{ margin:6px auto 0; max-width:920px; color:#1f2937 }
.bullets{ margin:10px 0 0; padding-left:20px }
.bullets li{ margin:.35em 0 }
.two-col{ columns:2; column-gap:26px }
@media (max-width:860px){ .two-col{ columns:1 } }

/* Ecosystem layout */
.system-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center; margin-top:8px;
}

.system-media{
  border:var(--hairline); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm);
  display:grid; place-items:center; min-height:340px;
}
@media (max-width:980px){ .system-grid{ grid-template-columns:1fr } }

/* Mobile screens (4-up) */
.screen-grid{
  display:grid; gap:14px; margin-top:8px;
}
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){ .grid-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:820px){ .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:540px){ .grid-4{ grid-template-columns: 1fr; } }

.screen{ display:flex; flex-direction:column; gap:8px }
.device-frame{
  border-radius:26px; border:1px solid #e7e8ee; background:#fff; box-shadow:var(--shadow-sm);
  padding:14px; aspect-ratio: 9 / 19.5; display:grid; place-items:center;
}
.device-screen{
  width:100%; height:100%; border-radius:22px; overflow:hidden; border:1px solid #ececf1;
  background:#fff;
}
.screen figcaption{ font:600 13px/1.55 Inter; color:#475569; }

/* Placeholders */
.ph{ display:grid; place-items:center; color:#6b7280; font:600 13px/1.4 Inter; }
.ph-mobile{ background:linear-gradient(180deg,#fff,#fffafc); }

/* Impact */
.impact-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:10px }
@media (max-width:720px){ .impact-list{ grid-template-columns:1fr } }
.impact-item{
  background:#fff; border:var(--hairline); border-radius:16px; box-shadow:var(--shadow-sm);
  padding:14px; display:flex; align-items:center; gap:12px;
}
.impact-badge{
  min-width:72px; text-align:center; font-weight:900; color:#0b0f14; background:#fff0f6;
  border-radius:12px; padding:10px 8px; border:1px solid #ffd0e6;
}
.muted{ color:#6b7280 }

/* Disclaimer */
.disclaimer .note{ max-width:900px; margin:0 auto; color:#6b7280; font:600 13px/1.6 Inter }

/* Reveal */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* =================== FOOTER CTA (SHARED EXACT) =================== */
.finale-warning{ background: linear-gradient(180deg,#fff,#fff0f6); border-top:1px solid #ececf1; padding:56px 0 42px; }
.warn-card{ background:#fff; border:2px solid #ffd9ea; border-radius:16px; padding:18px 16px; position:relative; overflow:hidden; }
.warn-head{ display:flex; gap:10px; align-items:center; justify-content:center; text-align:center; }
.warn-ic{ color:#EC3B83; display:inline-grid; place-items:center; }
.finale-warning h2{ margin:0; font:700 clamp(18px,2.4vw,26px)/1.25 Poppins,Inter,sans-serif; }
.warn-sub{ margin:8px auto 0; text-align:center; color:#6B7280; font:600 14px/1.6 Inter; max-width:760px; }

/* footer CTA row — centered */
.finale-warning .cta-row{ display:flex; justify-content:center; align-items:center; gap:12px; margin:16px 0 10px; flex-wrap:wrap; }
.finale-warning .btn{
  border:1px solid #ffd0e6; background:#fff; color:#0D0F13;
  border-radius:12px; padding:12px 16px; font:700 14px/1 Inter; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  box-shadow:none;
}
.finale-warning .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(236,59,131,.12); }
.finale-warning .btn.primary{ background:#EC3B83; color:#fff; border-color:transparent; }
.finale-warning .btn.ghost{ background:transparent; color:#EC3B83; }

/* animated values strip */
.warn-strip{
  position:relative; overflow:hidden; margin:16px 0 0; padding:10px 0;
  border-top:1px dashed #ffd0e6; border-bottom:1px dashed #ffd0e6; background:#fff;
}
.warn-track{
  display:flex; gap:24px; white-space:nowrap; color:#EC3B83;
  font:800 11px/1 Inter,system-ui,sans-serif; letter-spacing:.12em;
  animation:warn-marquee 14s linear infinite; will-change:transform;
}
@keyframes warn-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.finale-warning .rights{ text-align:center; color:#6B7280; font:600 13px/1.6 Inter; margin:12px 0 0; }

/* =================== PREMIUM DIALOGS (SHARED) =================== */
.script-dlg{ border:none; padding:0; width:min(720px,92vw); background:transparent; }
.script-dlg::backdrop{
  background: color-mix(in oklab, black 22%, transparent);
  backdrop-filter: blur(6px) saturate(120%);
  animation: dlg-backdrop-in .22s ease;
}
@keyframes dlg-backdrop-in{ from{opacity:0} to{opacity:1} }

.dlg-card{
  position:relative; background:#fff; border:1px solid #ececf1; border-radius:16px;
  box-shadow:0 40px 120px rgba(13,15,19,.18), 0 8px 24px rgba(13,15,19,.10);
  overflow:clip; transform-origin:50% 38%; animation: dlg-pop-in .26s var(--ease);
}
@keyframes dlg-pop-in{ from{ transform:translateY(8px) scale(.98); opacity:0 } to{ transform:translateY(0) scale(1); opacity:1 } }

.dlg-close{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:10px;
  border:1px solid #ececf1; background:#fff; cursor:pointer; display:grid; place-items:center; color:#6B7280;
  transition: transform .18s, background-color .18s, color .18s, box-shadow .18s;
}
.dlg-close:hover{ transform: rotate(90deg); background:#fff0f6; color:#EC3B83; box-shadow:0 8px 24px rgba(236,59,131,.14); }

.dlg-h{ padding:18px 18px 10px; }
.dlg-pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font:700 11px/1 Inter; letter-spacing:.04em; background:#fff0f6; color:#EC3B83; border:1px solid #ffd0e6; margin-bottom:8px;
}
.dlg-b{ padding:10px 18px 14px }
.script-block{
  margin:0; padding:14px 14px; background: linear-gradient(180deg,#fff,#fffafc);
  border:1px solid #ececf1; border-radius:12px; font:600 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:#2a2f35; white-space:pre-wrap; user-select:text; position:relative; box-shadow: inset 0 0 0 1px #fff;
}
.script-block::before{
  content:""; position:absolute; top:-6px; left:16px; width:54px; height:12px;
  background:#fff; border:1px solid #ececf1; border-bottom:none; border-radius:8px 8px 0 0;
}
.dlg-f{ padding:10px 18px 18px; display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.dlg-f .btn{
  border:1px solid #ffd0e6; background:#fff; color:#0D0F13;
  border-radius:10px; padding:10px 14px; font:700 13px/1 Inter; cursor:pointer;
  transition:transform .18s, box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.dlg-f .btn:hover{ transform: translateY(-1px); box-shadow:0 8px 24px rgba(236,59,131,.12) }
.dlg-f .btn.primary{ background:#EC3B83; color:#fff; border-color:transparent }
.dlg-f .btn.ghost{ color:#EC3B83; background:#fff }

/* Copy success morph + confetti bits */
.btn.success{ background:var(--success) !important; border-color:transparent !important; color:#fff !important; }
.script-block.flash{ animation: flash 600ms ease; outline:2px solid #ffd0e6; outline-offset:2px; }
@keyframes flash{ 0%{ box-shadow:0 0 0 0 rgba(236,59,131,.35) } 100%{ box-shadow:0 0 0 12px rgba(236,59,131,0) } }
.confetti{ position:absolute; pointer-events:none; width:8px; height:6px; background:#fff; border:1px solid #ffd0e6; border-radius:2px; box-shadow:0 1px 0 rgba(236,59,131,.25); }


:root{
    --gap: 24px;                 /* stays between 20–32px */
    --frame-radius: 24px;        /* black phone curve */
    --caption-color: #4b5563;
  }

  .screens-section{ max-width: 1200px; margin: 0 auto 40px; padding: 0 16px; }
  .screens-header h2{ margin: 0 0 4px; }
  .screens-header p{ margin: 0 0 16px; color: #6b7280; }

  /* Tight grid with consistent spacing */
  .screen-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--gap);
    align-items: start;
  }
  @media (max-width: 1100px){ .screen-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 820px){  .screen-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px){  .screen-grid{ grid-template-columns: 1fr; } }

  figure.screen{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }

  /* PHONE FRAME — fixed proportion (390×844), black, responsive width */
  .phone{
    width: min(100%, 390px);     /* can shrink, never exceed 390 */
    aspect-ratio: 390 / 844;     /* exact Figma proportion */
    background: #000;            /* black frame */
    border-radius: var(--frame-radius);
    overflow: hidden;            /* UI image stays inside */
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    display: block;
  }

  /* UI IMAGE — fill the frame without layout shifts */
  .phone img{
    width: 100%;
    height: 100%;
    display: block;              /* removes baseline whitespace */
    object-fit: contain;         /* show entire screenshot */
    object-position: center;     /* center it if aspect slightly differs */
    background: #000;            /* any letterbox stays black */
    user-select: none;
    pointer-events: none;        /* images are just display */
  }

  figcaption{
    text-align: center;
    color: var(--caption-color);
    font-size: .95rem;
    line-height: 1.35;
    max-width: 390px;
  }