/* =========================================================
   METADATA CASE STUDY — FULL PAGE CSS
   (Header, QuickNav, Finale kept consistent with your finalized pattern)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Surfaces & ink */
  --bg: #FAFCFF;
  --surface: #FFFFFF;
  --ink: #0b0f14;
  --muted: #6B7280;

  /* Accents (inherits your site theme).
     If you want the "blue" variant here, just override --accent + --accent-weak. */
  --accent: #D70654;        /* <- keep as-is to match your global site; override outside if needed */
  --accent-weak: #FDE7F0;   /* subtle tint of accent for pills/badges */

  /* Lines & shadows */
  --hairline: 1px solid rgba(12, 17, 23, 0.08);
  --shadow-sm: 0 8px 20px rgba(12,17,23,0.06);
  --shadow:    0 14px 36px rgba(12,17,23,0.10);

  /* Layout */
  --wrap: 1120px;
  --r: 16px;
  --card-r: 16px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font: 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial;
}
img, svg, video{ max-width:100%; height:auto; display:block }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
h1,h2,h3,h4{ margin:0 0 .6rem }
h1{ font-size: clamp(28px, 5.6vw, 44px); line-height:1.11; letter-spacing:-0.01em }
h2{ font-size: clamp(22px, 3vw, 28px); line-height:1.18 }
h3{ font-size: 18px; line-height:1.25 }
p{ margin:.4rem 0 1rem }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px }

/* Skip */
.skip-link{ position:absolute; left:-9999px; top:auto }
.skip-link:focus{ left:12px; top:12px; background:#000; color:#fff; padding:8px 10px; border-radius:8px; z-index:999 }

/* =========================================================
   HEADER (finalized pattern)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.2) blur(8px);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-bottom: var(--hairline);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 16px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit }
.brand img{ height:48px; width:auto }
.brand-name{ font-weight:800; font-size:15px; letter-spacing:.01em; white-space:nowrap }

.controls{ display:flex; gap:8px; align-items:center }
.icon-btn{
  appearance:none; border:0; background:#fff; color:var(--ink);
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, background .2s ease;
}
.icon-btn:hover{ background: var(--accent-weak) }
.icon-btn:active{ transform: scale(.96) }
.ic{ display:none }
.icon-btn[data-state="on"] .ic-on{ display:block }
.icon-btn[data-state="off"] .ic-off{ display:block }



/* =========================================================
   QUICK NAV DRAWER (finalized pattern)
   ========================================================= */
.drawer{ position:fixed; inset:0; pointer-events:none; z-index:55 }
.drawer .scrim{ position:absolute; inset:0; background:#0006; opacity:0; transition:opacity .28s ease }
.drawer .panel{
  position:absolute; top:0; right:0; width:min(340px,90vw); height:100%; background:#fff;
  border-left: var(--hairline);
  box-shadow:-20px 0 50px rgba(0,0,0,.08);
  transform: translateX(105%);
  transition: transform .36s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
}
.panel-head{
  display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:var(--hairline)
}
.panel-mark{ font-size:18px }
.panel-close{
  margin-left:auto; appearance:none; border:0; background:#fff; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); cursor:pointer;
}
.panel-links{ display:flex; flex-direction:column; gap:6px; padding:12px 12px 16px }
.panel-links a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:var(--ink); font-weight:700;
}
.panel-links a:hover{ background: var(--accent-weak) }
.panel-foot{ margin-top:auto; padding:10px 12px; border-top:var(--hairline); color:var(--muted); font-size:12px }
.drawer.open{ pointer-events:auto }
.drawer.open .panel{ transform: translateX(0) }
.drawer.open .scrim{ opacity:1 }

/* =========================================================
   HERO — Executive summary centered + big 16:9 media
   ========================================================= */
.cs-hero{ padding:28px 0 16px }
.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:12px;
  color:#52606D; text-align:center; margin:6px 0 10px;
}
.hero-title{
  text-align:center; max-width: 980px; margin: 0 auto 14px;
}
.hero-title .hero-sub{ font-weight:700 }
.hero-summary{
  max-width: 860px; margin: 0 auto; text-align:center;
}
.lede{
  font-size: clamp(16px, 1.6vw, 18px); color:#334155; margin: 4px 0 12px;
}
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:6px 0 12px }
.pill{
  background: var(--accent-weak);
  color: color-mix(in srgb, var(--accent) 80%, #0b0f14 20%);
  font-weight:800; font-size:12px; padding:7px 10px; border-radius:999px; letter-spacing:.01em;
}
.hero-points{
  display:grid; gap:6px; margin: 8px 0 16px; padding:0; list-style:none;
}
.hero-points li{ margin:0; }
.meta-cards{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px; margin: 8px 0 0;
}
.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;
}
.meta b{
  font-size:11px; color:#475569; text-transform:uppercase; letter-spacing:.08em;
}
.meta span{ font-weight:700 }

.hero-media{
  margin: 18px auto 0; max-width: 980px;
  border-radius: 18px; border:1px solid #dbe8f2; overflow:hidden;
  background: radial-gradient(800px 360px at 50% 100%, #f1f8fd, transparent 70%);
  box-shadow: var(--shadow);
}
.hero-media figcaption.micro{
  text-align:center; color:var(--muted); font-size:12px; padding:8px 0 0;
}

/* =========================================================
   Generic sections
   ========================================================= */
.section{ padding: 26px 0 }
.section-head{ margin: 0 0 12px }
.kicker{ color:var(--muted); margin:.2rem 0 .6rem }
.two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start }
@media (max-width: 980px){ .two-col{ grid-template-columns:1fr } }

.img-frame{
  background:#fff; border:var(--hairline); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); padding:0;
}
.ph{ isolation:isolate } /* placeholder wrapper */

/* Problem */
.problem-grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:18px; align-items:start;
}
@media (max-width: 980px){ .problem-grid{ grid-template-columns:1fr } }
.issue-stack{ display:grid; gap:10px }
.issue{
  background:#fff; border:var(--hairline); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:12px; color:#0f172a;
}
.issue strong{ display:block }

/* Features grid (overview + right thumbnails) */
.features-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start;
}
@media (max-width: 980px){ .features-grid{ grid-template-columns:1fr } }
.features-left{ display:grid; gap:12px }
.features-right{ display:grid; gap:12px }
.feature-card{
  background:#fff; border:var(--hairline); border-radius:16px; box-shadow:var(--shadow-sm);
  padding:14px;
}
.frame-m, .feature-thumb, .frame-l{
  background:#fff; border:1px solid #e5eef5; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.frame-m, .feature-thumb{ aspect-ratio: 16 / 10 }
.frame-l{ aspect-ratio: 16 / 9 }

/* Overlay image + floating notes */
.overlay-field{ position:relative; isolation:isolate }
.overlay-media{ z-index:0 }
.overlay-notes{ position:absolute; inset:0; z-index:2; pointer-events:none }
.note{
  position:absolute; max-width:320px; pointer-events:auto;
  background: color-mix(in srgb, #ffffff 78%, transparent);
  backdrop-filter:saturate(1.3) blur(8px);
  border:1px solid #e3eef4; border-radius:12px; padding:10px 12px;
  box-shadow: var(--shadow-sm); font-size:14px;
}
.note h4{ margin:0 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#2a6e86 }
.note p{ margin:0; color:#334155 }
.note.tl{ top:6%; left:6% }
.note.tr{ top:6%; right:6% }
.note.bl{ bottom:6%; left:6% }
.note.br{ bottom:8%; right:6% }
.overlay-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width: 980px){ .overlay-row{ grid-template-columns:1fr } }

/* Impact */
.impact-list{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px; margin-top:12px;
}
@media (max-width: 980px){ .impact-list{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .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: var(--accent-weak);
  border-radius:12px; padding:10px 8px; border:1px solid #e7d7df;
}

/* Adoption / stories / bullets */
.bullets{ margin:.2rem 0 0; padding-left:18px }
.q{
  margin:10px 0; padding:10px 12px; font-style:italic; color:#334155;
  background:#fff; border:var(--hairline); border-radius:12px; box-shadow:var(--shadow-sm);
}
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
@media (max-width: 980px){ .grid-3{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .grid-3{ grid-template-columns:1fr } }
.card{
  background:#fff; border:var(--hairline); border-radius:16px; box-shadow:var(--shadow-sm);
  padding:14px;
}
.stories{ margin:.2rem 0 0; padding-left:20px }

/* =========================================================
   FINALE (warning card with CTA + marquee) — finalized
   ========================================================= */
.finale{ padding: 24px 0 40px; background:
  radial-gradient(1000px 360px at 50% 0%, color-mix(in srgb, var(--accent-weak) 40%, transparent), transparent 65%),
  var(--surface);
  border-top: var(--hairline);
}
.warn-card{
  background:#fff; border:var(--hairline); border-radius:18px; box-shadow:var(--shadow);
  padding:16px; max-width: 980px; margin:0 auto;
}
.warn-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.warn-ic{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background: var(--accent-weak); color: var(--accent);
}
.warn-sub{ color:#374151; margin:.2rem 0 .8rem }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid #e9eaee; background:#fff; color: var(--ink);
  padding:12px 16px; border-radius:14px; font-weight:800; text-decoration:none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow) }
.btn:active{ transform: translateY(0) }
.btn.primary{
  background: var(--accent); color:#fff; border-color: transparent;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn.primary:hover{
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 36%, transparent);
}
.btn.ghost{
  background:#fff; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, #e7e8ec 50%);
}

/* Marquee */
.warn-strip{ overflow:hidden; border-top:var(--hairline); border-bottom:var(--hairline); margin:14px -4px 0; }
.warn-track{
  display:flex; gap:28px; padding:10px 4px; white-space:nowrap; font-weight:900; letter-spacing:.12em;
  color:#1f2937; opacity:.75; animation: marquee 22s linear infinite;
}
.warn-track span{ display:inline-block; }
@keyframes marquee{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }

.rights{ text-align:center; color:#6b7280; font-size:13px; margin-top:12px }

/* =========================================================
   DIALOGS (Email / LinkedIn scripts)
   ========================================================= */
.script-dlg{
  border:0; padding:0; background:transparent; width:min(680px, 94vw);
}
.script-dlg::backdrop{ background: rgba(7, 12, 18, 0.55) }
.dlg-card{
  background:#fff; border:var(--hairline); border-radius:16px; box-shadow: var(--shadow);
  padding:12px; position:relative;
}
.dlg-close{
  position:absolute; right:10px; top:10px; appearance:none; border:0; background:#fff; border-radius:10px;
  width:34px; height:34px; display:grid; place-items:center; box-shadow:var(--shadow-sm); cursor:pointer;
}
.dlg-h{ padding:6px 4px 4px 4px }
.dlg-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  background: var(--accent-weak); color: var(--accent);
  font-weight:800; border-radius:999px; letter-spacing:.02em; font-size:12px;
}
.dlg-b{ margin-top:6px }
.script-block{
  margin:0; padding:12px; border-radius:12px; border:var(--hairline);
  background:#fafafa; color:#111827; overflow:auto; max-height:50vh;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.dlg-f{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px }

/* Success flash (copy) */
.flash{ animation: flash 650ms ease }
@keyframes flash{
  0%{ box-shadow:0 0 0 0 rgba(24,24,24,0); }
  30%{ box-shadow:0 0 0 4px rgba(24,24,24,.06); }
  100%{ box-shadow:0 0 0 0 rgba(24,24,24,0); }
}

/* Confetti bits (JS will inject .confetti inside dialog card) */
.confetti{
  position:absolute; width:8px; height:10px; background: var(--accent);
  border-radius:2px; opacity:0; pointer-events:none;
}

/* =========================================================
   TOAST (sound)
   ========================================================= */
.toast{
  position:fixed; left:16px; bottom:16px; background:#111; color:#fff;
  padding:10px 12px; border-radius:10px; box-shadow:var(--shadow); display:none; z-index:70;
}

/* =========================================================
   Cursor dot + Petals (micro-FX; optional)
   ========================================================= */
.cursor-dot{
  position:fixed; z-index: 9999; width:12px; height:12px; border-radius:999px;
  transform: translate(-50%, -50%); background: var(--accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity:.8; pointer-events:none;
}
@media (max-width: 860px){ .cursor-dot{ display:none } }

.petal{
  position:fixed; width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--accent) 70%, #fff 30%));
  pointer-events:none; z-index:9998;
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{ opacity:0; transform: translateY(16px) }
.reveal.in{ opacity:1; transform:none; transition: opacity .45s ease, transform .45s ease }

/* =========================================================
   Responsive polish
   ========================================================= */
@media (max-width: 980px){
  .meta-cards{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
  .meta-cards{ grid-template-columns:1fr }
  .btn{ width:100% }
}

/* Utility */
.micro{ font-size:12px; color:var(--muted) }

/* ==== Features: two-up paired layout ==== */
.features-pairs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items:start;
}

.feature-pair{
  display:grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

/* Uniform, balanced screen frames */
.feature-thumb{
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2f1f7;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14,23,42,.06);
}
.feature-thumb > img{ width:100%; height:100%; object-fit:cover; display:block }

/* Text card directly under each screen */
.feature-card{
  background:#fff;
  border:1px solid #eaeef3;
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(14,23,42,.06);
  padding: 12px 14px;
}
.feature-card h4{ margin:0 0 6px; font-weight:800; font-size:14px }
.feature-card p{ margin:0; color:#4b5563; font-size:13.5px; line-height:1.55 }

/* Compact on small screens */
@media (max-width: 980px){
  .features-pairs{ grid-template-columns:1fr; }
}

/* =================== WARNING CTA (FOOTER) — EXACT FROM ABOUT =================== */
/* If your page used a different wrapper class earlier (e.g., .finale),
   this :where() alias ensures BOTH selectors behave the same */
:where(.finale-warning, .finale){ background: linear-gradient(180deg,#fff,var(--footer-grad-a)); border-top:1px solid #ececf1; padding:56px 0 42px; }
:where(.finale-warning, .finale) .warn-card{ background:#fff; border:2px solid #ffd9ea; border-radius:16px; padding:18px 16px; position:relative; overflow:hidden; }
:where(.finale-warning, .finale) .warn-head{ display:flex; gap:10px; align-items:center; justify-content:center; text-align:center; }
:where(.finale-warning, .finale) .warn-ic{ color:#EC3B83; display:inline-grid; place-items:center; }
:where(.finale-warning, .finale) h2{ margin:0; font:700 clamp(18px,2.4vw,26px)/1.25 Poppins,Inter,sans-serif; }
:where(.finale-warning, .finale) .warn-sub{ margin:8px auto 0; text-align:center; color:#6B7280; font:600 14px/1.6 Inter; max-width:760px; }

/* footer CTA row — centered */
:where(.finale-warning, .finale) .cta-row{ display:flex; justify-content:center; align-items:center; gap:12px; margin:16px 0 10px; flex-wrap:wrap; }
:where(.finale-warning, .finale) .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;                          /* IMPORTANT: no persistent shadow */
}
:where(.finale-warning, .finale) .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(236,59,131,.12); }
:where(.finale-warning, .finale) .btn.primary{ background:#EC3B83; color:#fff; border-color:transparent; }
:where(.finale-warning, .finale) .btn.ghost{ background:transparent; color:#EC3B83; }

/* animated values strip */
:where(.finale-warning, .finale) .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;
}
:where(.finale-warning, .finale) .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%)} }

:where(.finale-warning, .finale) .rights{ text-align:center; color:#6B7280; font:600 13px/1.6 Inter; margin:12px 0 0; }
@media (max-width:560px){
  :where(.finale-warning, .finale) .warn-head{ align-items:flex-start }
  :where(.finale-warning, .finale) .warn-ic{ margin-top:2px }
}

/* DIALOG styles left intact, matching your index.css */
.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 cubic-bezier(.2,.8,.2,1);
}
@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-h h3{ margin:0 0 6px; font:700 clamp(18px,2.2vw,22px)/1.3 Poppins,Inter,sans-serif; color:#0D0F13; }
.dlg-h p{ margin:0; color:#6B7280; font:600 13px/1.6 Inter }

.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 ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.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 }

.btn.success{ background:var(--success) !important; border-color:transparent !important; color:#fff !important; }
.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);
}

: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}

.page-wipe{ pointer-events:none; position:fixed; inset:0; z-index:9999; opacity:0; transform:scale(.98); transition:opacity .35s ease, transform .35s ease; }
.page-wipe.in{ opacity:1; transform:none; }

/* =========================
   GLOBAL GUTTERS + WRAP
   ========================= */
:root{
  --wrap: 1200px;                         /* content max width */
  --gutter: clamp(16px, 5vw, 48px);       /* side padding that scales */
}

/* Apply consistent horizontal padding site-wide */
.wrap,
.section-inner,
.hero-wrap{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Optional: give each section some vertical rhythm */
section{ padding-block: clamp(28px, 6vw, 64px); }

/* =========================
   TITLES / LABELS
   ========================= */
.label{
  display:inline-block;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .05em;
  background: #f1f5f9;    /* subtle chip */
  color: #334155;
  border: 1px solid #e2e8f0;
}

/* Main section titles (works for any h2 inside .section-inner) */
.section-inner > h2,
h2.section-title{
  margin: 6px 0 14px;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: #0b0f14;
}

/* Optional: muted paragraph under a title */
.section-inner > p.muted{ margin: 6px 0 0; color: #4b5563 }

/* =========================
   FEATURES — ensure text shows
   (Publishing / Production / Pricing / Data feeds)
   ========================= */

/* If you adopted the new two-up layout (.features-pairs + .feature-pair),
   make sure cards grow to fit content and lists look right. */
.features-pairs{ margin-top: 8px; }

/* The visual card under each screen */
.feature-card{
  display:block;
  background:#fff;
  border:1px solid #eaeef3;
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(14,23,42,.06);
  padding: 12px 14px;
  min-height: auto;              /* allow natural height */
}

/* Title inside the card */
.feature-card h4{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 14px;
  color:#0b0f14;
}

/* Paragraphs + lists inside the card */
.feature-card p{
  margin: 0;
  color:#475569;
  font-size: 13.5px;
  line-height: 1.6;
}

.feature-card ul{
  margin: 6px 0 0 16px;          /* visible spacing + indent */
  padding: 0;
  color:#475569;
  font-size: 13.5px;
  line-height: 1.55;
}
.feature-card li{ margin: 3px 0; }

/* In case content was accidentally clipped anywhere */
.feature-card,
.feature-pair{ overflow: visible; }

/* Ensure screen placeholders remain consistent size */
.feature-thumb{
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2f1f7;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14,23,42,.06);
}
.feature-thumb > img{ width:100%; height:100%; object-fit:cover; display:block }



/* Keep pills/tags visually aligned when centered layouts are used */
.pill-row{ justify-content:center; }

/* If you center the hero copy, this keeps bullets centered too */
.hero-points{
  max-width: 72ch;     /* readable line length */
  margin-inline: auto; /* center the list block */
}
.hero-points li{ text-align: left; } /* keep bullet text readable */

/* =========================================================
   COMMON TOKENS (from About Me)
   ========================================================= */
:root{
  --paper:#FFFFFF; --ink:#0D0F13; --slate:#6B7280;
  --accent:#EC3B83; --ring:#8AB4FF;
}

/* =========================================================
   HEADER (exact from About Me)
   ========================================================= */
.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,system-ui,sans-serif }
.controls{ display:flex; align-items:center; gap:10px }

/* Icon buttons (speaker / hamburger) */
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:1px solid #E6E7EB; background:#fff; border-radius:10px;
  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 (never camouflages) */
#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 }



/* =========================================================
   QUICK NAV / DRAWER (exact from About Me)
   ========================================================= */
.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 cubic-bezier(.2,.8,.2,1);
  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);
}
/* stagger on open */
.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)} }

/* =========================================================
   FOOTER CTA / FINALE (exact from About Me)
   ========================================================= */
.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:var(--accent); 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:var(--slate);
  font:600 14px/1.6 Inter,system-ui,sans-serif; max-width:760px;
}

/* Centered CTA buttons — no persistent pink shadow */
.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:var(--ink);
  border-radius:12px; padding:12px 16px; font:700 14px/1 Inter,system-ui,sans-serif; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  vertical-align:middle; display:inline-flex; align-items:center; gap:8px;
  box-shadow:none; /* IMPORTANT: matches About — no always-on glow */
}
.finale-warning .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(236,59,131,.12) }
.finale-warning .btn.primary{ background:var(--accent); color:#fff; border-color:transparent }
.finale-warning .btn.ghost{ background:transparent; color:var(--accent) }

/* 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:var(--accent);
  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:var(--slate); font:600 13px/1.6 Inter,system-ui,sans-serif; margin:12px 0 0 }

/* ===== Copy buttons: success (exact behavior) ===== */
.dlg-f .btn{
  border:1px solid #ffd0e6; background:#fff; color:#0D0F13;
  border-radius:10px; padding:10px 14px;
  font:700 13px/1 Inter,system-ui,sans-serif; 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{ background:#fff; color:#EC3B83 }

/* The green state after copy */
.btn.success{
  background:#22c55e !important;   /* same green as About Me */
  border-color:transparent !important;
  color:#fff !important;
}

/* Script block “flash” ring on copy */
.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 bits used by copy success */
.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);
}



/* When drawer is open (aria-expanded="true"), morph to X */
.hamburger-btn[aria-expanded="true"] .hamburger{ transform:scaleX(0); opacity:0 }
.hamburger-btn[aria-expanded="true"] .hamburger::before{
  transform:translateY(5px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger::after{
  transform:translateY(-5px) rotate(-45deg);
}

/* ===== Speaker “off” state stays visible (no camouflage) ===== */
#speakerBtn .ic-off{ display:none }
#speakerBtn[data-state="off"]{
  color:#EC3B83; background:#fff0f6; border:1px solid #ffd0e6;
}
#speakerBtn[data-state="off"] .ic-on{ display:none }
#speakerBtn[data-state="off"] .ic-off{ display:inline }

.case-disclaimer {
  font-size: 0.85rem;
  color: var(--text-muted, #777);
  line-height: 1.5;
  margin: 2rem auto 0;
  max-width: 720px;
  text-align: center;
  font-style: normal;
  opacity: 0.85;
}

/* Hamburger (tight bars, morph to X) */
.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) }

/* ===== SOLUTION: two-up blocks with screen on top, copy under ===== */
.solution-grid-two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  align-items:start;
}

.sol-block{
  display:grid;
  grid-template-rows: auto auto; /* thumb then copy */
  gap: 10px;
}

.sol-block.hero .sol-title{
  letter-spacing:-0.012em;
}

.sol-thumb{
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5eef5;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14,23,42,.06);
}

.sol-copy{
  background:#fff;
  border:1px solid #eaeef3;
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(14,23,42,.06);
  padding: 12px 14px;
}

.sol-eyebrow{
  display:inline-block;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#334155;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:5px 8px;
  margin-bottom:6px;
}

.sol-title{
  margin:0 0 6px;
  font-weight:800;
  font-size: 16px;
  color:#0b0f14;
}

.sol-lede{
  margin:0 0 6px;
  color:#374151;
  font-size: 14px;
  line-height:1.55;
}

.sol-bullets{
  margin: 6px 0 8px 16px;
  padding:0;
  color:#475569;
  font-size:13.5px;
  line-height:1.55;
}
.sol-bullets li{ margin:2px 0 }

.sol-chips{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;
}
.sol-chips .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 8px;
  border-radius:999px;
  background: var(--accent-weak);
  color: color-mix(in srgb, var(--accent) 76%, #0b0f14 24%);
  font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing:.02em;
  border:1px solid color-mix(in srgb, var(--accent) 40%, #e7e8ec 60%);
}

.sol-related{ margin-top: 6px }
.sol-related .rel{
  font-weight:700; font-size:12.5px; color: var(--accent);
  text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
.sol-related .rel:hover{ text-decoration:none; border-bottom-color: currentColor }

/* Responsive */
@media (max-width: 980px){
  .solution-grid-two{ grid-template-columns: 1fr; }
}

/* ===== SOLUTION — dedicated subsections first (MIA, AI Search) ===== */
.solution-sub { margin: 14px 0 10px; }
.sub-head { margin: 0 0 8px; }
.sub-eyebrow{
  display:inline-block; padding:5px 8px; border-radius:999px;
  font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase;
  background:#f1f5f9; color:#334155; border:1px solid #e2e8f0;
  margin-bottom:6px;
}
.solution-sub h3{ margin:0; font-weight:800; font-size:18px; letter-spacing:-.012em; color:#0b0f14 }

.sub-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:start;
}
@media (max-width: 980px){ .sub-grid{ grid-template-columns:1fr } }

.sub-thumb{
  aspect-ratio: 16/10; border-radius:16px; overflow:hidden;
  border:1px solid #e5eef5; background:#fff; box-shadow:0 8px 22px rgba(14,23,42,.06);
}

.sub-copy{
  background:#fff; border:1px solid #eaeef3; border-radius:16px;
  box-shadow:0 8px 18px rgba(14,23,42,.06);
  padding:12px 14px; display:grid; gap:8px;
}

.sub-points{
  margin:0; padding-left:16px; color:#475569; font-size:13.5px; line-height:1.55;
}
.sub-points li{ margin:3px 0 }

.sub-kpis{ display:flex; flex-wrap:wrap; gap:6px }
.sub-kpis .chip{
  display:inline-flex; align-items:center; padding:6px 8px;
  border-radius:999px; background: var(--accent-weak);
  color: color-mix(in srgb, var(--accent) 76%, #0b0f14 24%);
  font: 800 11px/1 Inter; letter-spacing:.02em;
  border:1px solid color-mix(in srgb, var(--accent) 40%, #e7e8ec 60%);
}

.sub-link{
  font-weight:700; font-size:12.5px; color: var(--accent);
  text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
.sub-link:hover{ text-decoration:none; border-bottom-color: currentColor }

/* ===== Supporting pillars (kept from your two-up blocks) ===== */
.solution-grid-two{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; align-items:start;
}
@media (max-width: 980px){ .solution-grid-two{ grid-template-columns:1fr } }

.sol-block{ display:grid; grid-template-rows:auto auto; gap:10px }
.sol-thumb{
  aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  border:1px solid #e5eef5; background:#fff; box-shadow:0 8px 22px rgba(14,23,42,.06);
}
.sol-copy{
  background:#fff; border:1px solid #eaeef3; border-radius:16px;
  box-shadow:0 8px 18px rgba(14,23,42,.06);
  padding:12px 14px;
}
.sol-title{ margin:0 0 4px; font-weight:800; font-size:14px; color:#0b0f14 }
.sol-mini{ margin:0; padding-left:16px; color:#475569; font-size:13.5px; line-height:1.55 }
.sol-mini li{ margin:2px 0 }

/* Two-screen row + single explanation block */
.sub-duo{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
  margin-bottom: 10px;     /* ensures text sits clearly below */
}
@media (max-width: 980px){ .sub-duo{ grid-template-columns:1fr } }

.sub-thumb{
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5eef5;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14,23,42,.06);
}
.sub-thumb figcaption.micro{ padding:6px 2px 0; color:#6b7280; text-align:left }

.sub-explain{
  background:#fff;
  border:1px solid #eaeef3;
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(14,23,42,.06);
  padding: 12px 14px;
}

.sub-points{
  margin:0;
  padding-left:16px;
  color:#475569;
  font-size:13.5px;
  line-height:1.55;
}
.sub-points b{ color:#0b0f14 }
.fact{ font-weight:800; color:#0b0f14 }

.sub-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.sub-chips .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:999px;
  background: var(--accent-weak);
  color: color-mix(in srgb, var(--accent) 76%, #0b0f14 24%);
  font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing:.02em;
  border:1px solid color-mix(in srgb, var(--accent) 40%, #e7e8ec 60%);
}

/* ===== Big, legible screens (replaces tiny cards) ===== */
.screen-row{
  display:grid;
  grid-template-columns: 1fr 1fr;      /* two big screens per row */
  gap: 18px;
  align-items:start;
  margin-block: 12px;
}

/* One-up variant for hero pairs you want even bigger */
.screen-row.one-up{ grid-template-columns: 1fr; }

.screen{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e5eef5;
  background:#fff;
  /* Bigger, cinematic footprint */
  aspect-ratio: 16 / 9;
  box-shadow: 0 14px 32px rgba(14,23,42,.10);
}
.screen > img{ width:100%; height:100%; object-fit:cover; display:block }

/* Zoom affordance (subtle, no clutter) */
.screen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(15,19,26,.06) 40%, rgba(15,19,26,.10));
  opacity:0; transition:opacity .18s ease;
}
.screen:hover::after{ opacity:1 }

.zoom-hint{
  position:absolute; right:10px; bottom:10px;
  padding:6px 8px; border-radius:10px;
  background: rgba(255,255,255,.9);
  border:1px solid #eaeef3;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  color:#334155;
  box-shadow: 0 8px 18px rgba(14,23,42,.06);
  opacity:0; transform: translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.screen:hover .zoom-hint{ opacity:1; transform:none }

/* Compact, high-contrast caption block */
.screen-copy{
  margin-top: 8px;
  background:#fff;
  border:1px solid #eaeef3;
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(14,23,42,.06);
  padding:12px 14px;
}
.screen-copy h4{
  margin:0 0 6px; font-weight:800; font-size:14px; color:#0b0f14;
}
.screen-copy p{ margin:0; color:#475569; font-size:13.5px; line-height:1.55 }

/* Responsive: never let screens shrink to “thumbnail” */
@media (max-width: 1240px){
  .screen-row{ grid-template-columns: 1fr; } /* stack to keep each big */
}

/* ===== Lightbox (native <dialog>) ===== */
.lightbox{ border:0; padding:0; width:min(96vw, 1400px); background:transparent }
.lightbox::backdrop{
  background: rgba(7,12,18,.75);
  backdrop-filter: blur(6px) saturate(120%);
}
.lightbox-inner{
  position:relative; margin:auto; max-width:100%;
  border-radius:16px; overflow:hidden;
  background:#000;
}
.lightbox-inner img{ display:block; width:100%; height:auto }
.lb-close, .lb-prev, .lb-next{
  position:absolute; top:10px; appearance:none; border:0; cursor:pointer;
  width:38px; height:38px; border-radius:10px;
  background: rgba(255,255,255,.92); color:#0b0f14;
  display:grid; place-items:center; font-weight:800;
  border:1px solid #eaeef3;
}
.lb-close{ right:10px }
.lb-prev{ left:10px; top:50%; transform: translateY(-50%) }
.lb-next{ right:10px; top:50%; transform: translateY(-50%) }
.lb-prev[disabled], .lb-next[disabled]{ opacity:.35; pointer-events:none }

/* =========================================================
   CONSISTENCY PATCH — match "Publishing/Production/Pricing/Data Feeds"
   - UI frame on top, text card beneath (same look/spacing)
   - Less rounded corners, very light (or no) shadows
   - Consistent side gutters and alignment
   ========================================================= */

/* Global subtlety */
:root{
  --tile-radius: 10px;               /* less rounded */
  --tile-border: 1px solid #e7ebf0;  /* hairline border */
  --tile-shadow: none;               /* remove heavy shadows site-wide for tiles */
  --tile-pad: 12px;
  --tile-gap: 10px;                  /* gap within a tile */
  --pair-gap: 10px;                  /* gap between two tiles in a row */
}

/* =============== FEATURE TILES (reference style) =============== */
.feature-thumb{
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  overflow: hidden;
}
.feature-card{
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  padding: var(--tile-pad);
}

/* Keep page gutters consistent everywhere */
.wrap,
.section-inner,
.hero-wrap{ padding-inline: var(--gutter); }

/* =============== SOLUTION: make flagship pairs look like feature tiles =============== */
/* Treat each screen as a "tile": frame on top + caption beneath, just like Publishing/Production */
#solution .solution-sub .sub-duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pair-gap);            /* same inter-tile gap */
  align-items: start;
}

/* The frame itself → match feature-thumb */
#solution .solution-sub .sub-thumb{
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  background: #fff;
  overflow: hidden;
  aspect-ratio: 16/9;
}
#solution .solution-sub .sub-thumb > img,
#solution .solution-sub .sub-thumb > svg{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* If you use <figcaption> inside .sub-thumb, style it like feature-card (text under each UI) */
#solution .solution-sub .sub-thumb > figcaption,
#solution .solution-sub .sub-thumb figcaption.micro{
  margin: 8px 0 0;                 /* space from the frame */
  padding: var(--tile-pad);
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  background:#fff;
  color:#475569;
  font-size: 13.5px;
  line-height: 1.55;
}

/* If you prefer a single explanation under the two frames,
   keep .sub-explain light and aligned with the pair width */
#solution .solution-sub .sub-explain{
  grid-column: 1 / -1;             /* span both columns */
  margin-top: 8px;
  padding: var(--tile-pad);
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  background:#fff;
}

/* =============== SUPPORTING GRID (Pricing Matrix, RBAC, Schema, Feeds…) =============== */
#solution .solution-grid-two{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--pair-gap);             /* match pair gap */
  align-items: start;
  margin-top: 10px;
}

#solution .sol-block{
  display: grid;
  grid-template-rows: auto auto;    /* frame then text card */
  gap: var(--tile-gap);
}

/* Frame → match feature-thumb */
#solution .sol-thumb{
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  background:#fff;
  overflow:hidden;
  aspect-ratio: 16/9;
}
#solution .sol-thumb > img,
#solution .sol-thumb > svg{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Text card → match feature-card */
#solution .sol-copy{
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  background:#fff;
  padding: var(--tile-pad);
  width: 100%;                      /* never bleed wider than its frame */
  margin: 0;
}

/* Titles/lists inside tile cards */
#solution .sol-title{ margin:0 0 6px; font-weight:800; font-size:14px; color:#0b0f14 }
#solution .sol-mini{ margin:0; padding-left:16px; font-size:13.5px; line-height:1.55; color:#475569 }
#solution .sol-mini li{ margin:2px 0 }

/* =============== KEY DECISIONS (first two screens) — same treatment as tiles =============== */
#decisions .overlay-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pair-gap);
  align-items:start;
}

#decisions .frame-m{
  border-radius: var(--tile-radius);
  border: var(--tile-border);
  box-shadow: var(--tile-shadow);
  background:#fff;
  overflow:hidden;
  aspect-ratio: 16/9;
}
#decisions .frame-m > svg{ display:block; width:100%; height:100% }

/* Floating notes stay light */
#decisions .note{
  border: 1px solid #eaeef3;
  border-radius: 8px;     /* even subtler */
  box-shadow: none;
  background: color-mix(in srgb, #ffffff 90%, transparent);
}

/* =============== GLOBAL CLEANUP: remove heavy shadows on any text boxes site-wide =============== */
.feature-card,
.sol-copy,
.sub-explain,
.card,
.issue,
.q{
  box-shadow: var(--tile-shadow) !important;     /* remove heavy shadows */
  border-radius: var(--tile-radius) !important;  /* less rounded everywhere */
  border: var(--tile-border) !important;
}

/* Keep everything aligned to the same gutters; avoid unexpected overflow */
#solution *{ box-sizing: border-box; }
#solution img, #solution svg{ max-width:100%; height:auto; display:block }

/* Responsive: stack tiles before shrinking them too small */
@media (max-width: 1200px){
  #solution .solution-sub .sub-duo{ grid-template-columns: 1fr; }
  #decisions .overlay-row{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  #solution .solution-grid-two{ grid-template-columns: 1fr; }
}

/* =================== KEY DECISIONS & TRADE-OFFS =================== */

.decisions-section .section-head { margin-bottom: 12px; }

.decision-grid{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 14px);          /* tight, consistent with rest */
}

@media (max-width: 980px){
  .decision-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .decision-grid{ grid-template-columns: 1fr; }
}

.decision-card{
  background: #fff;
  border: 1px solid #eaeef3;
  border-radius: 12px;                     /* slightly less rounded per your request */
  padding: 12px 14px;
  /* ultra-light elevation; avoid heavy shadows */
  box-shadow: 0 1px 0 rgba(14,23,42,.02);
}

.decision-title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.35;
  color: #0b0f14;
  letter-spacing: -0.01em;
}

.decision-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed #eef3f7;
}
.decision-row:first-of-type{ border-top: 0; padding-top: 0; }

.d-label{
  display: inline-block;
  margin-top: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.decision-row p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569;
}

/* Align the features block that follows so spacing feels continuous */
#features .section-inner{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

#features .label{
  margin-top: clamp(18px, 4vw, 22px);     /* small breathing space from decisions grid */
}

/* Subtle hover polish for desktop without adding weight */
@media (hover:hover){
  .decision-card{ transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .decision-card:hover{
    transform: translateY(-1px);
    border-color: #e6ebf2;
    box-shadow: 0 4px 14px rgba(14,23,42,.06);
  }
}

/* ============================================
   1) Hard resets that cause alignment drift
   ============================================ */

/* Reset default margins on figure/figcaption so widths match exactly */
#solution figure,
#solution figcaption { margin: 0; }

/* All UI frames + their text cards should use the same box sizing */
#solution .screen,
#solution .screen-copy,
#solution .sol-thumb,
#solution .sol-copy {
  box-sizing: border-box;
}

/* ============================================
   2) Flagships: Metadata Insights & AI Search
   - Two screens side-by-side
   - Text block beneath them aligns edge-to-edge
   ============================================ */

#solution .solution-sub .screen-row{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* prevent intrinsic width overflow */
  gap: 10px; /* tight but readable */
  align-items: start;
  justify-items: stretch;   /* stretch columns so edges align */
  margin: 8px 0 8px;
}

/* Make each screen fill its grid column exactly */
#solution .solution-sub .screen{
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  border: 1px solid #e2f1f7;     /* same border as text below */
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,23,42,.02); /* no heavy shadows */
}
#solution .solution-sub .screen > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* The caption block under the pair spans perfectly edge to edge */
#solution .solution-sub .screen-copy{
  margin: 8px 0 0;
  border: 1px solid #e2f1f7;     /* match the screen border to avoid “1px wobble” */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(14,23,42,.02);
  padding: 12px 14px;
  width: 100%;
}

/* If you ever move .screen-copy into the same grid container,
   this makes it align exactly with the two screens: */
/*
#solution .solution-sub .screen-row + .screen-copy{
  grid-column: 1 / -1;
}
*/

@media (max-width: 1240px){
  #solution .solution-sub .screen-row{
    grid-template-columns: 1fr;       /* stack to keep screens large */
    gap: 8px;
  }
  /* The full-width caption remains aligned automatically */
}

/* ============================================
   3) Supporting pillars grid (Schema, RBAC, Pricing Matrix, Pricing)
   - Text sits exactly under its UI
   - Both have identical widths
   ============================================ */

#solution .solution-grid-two{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  align-items: start;
  justify-items: stretch; /* ensure each column fills evenly */
  margin-top: 10px;
}

@media (max-width: 980px){
  #solution .solution-grid-two{
    grid-template-columns: 1fr;
  }
}

/* Each block is a vertical stack; items must share the exact width */
#solution .solution-grid-two .sol-block{
  display: grid;
  grid-template-rows: auto auto; /* image then text */
  gap: 8px;
  align-items: start;
  justify-items: stretch; /* critical to keep text under UI perfectly aligned */
}

/* UI frame */
#solution .solution-grid-two .sol-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #e2f1f7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,23,42,.02);
}
#solution .solution-grid-two .sol-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text card (exact same width as the UI above it) */
#solution .solution-grid-two .sol-copy{
  width: 100%;
  border: 1px solid #e2f1f7;      /* match borders across frames & text */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(14,23,42,.02);
  padding: 12px 14px;
  margin: 0;                      /* prevent tiny browser defaults */
}

/* Typography inside the pillar cards */
#solution .solution-grid-two .sol-title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 14px;
  color: #0b0f14;
}
#solution .solution-grid-two .sol-mini{
  margin: 0;
  padding-left: 16px;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.55;
}
#solution .solution-grid-two .sol-mini li{ margin: 3px 0; }

/* ============================================
   4) Visual parity with “Design features mapped to screens”
   ============================================ */

/* Use identical radius/border/shadow so eyes see one system */
#features .feature-thumb,
#features .feature-card,
#solution .solution-sub .screen,
#solution .solution-sub .screen-copy,
#solution .solution-grid-two .sol-thumb,
#solution .solution-grid-two .sol-copy{
  border-radius: 12px;
  border-color: #e2f1f7;
  box-shadow: 0 1px 0 rgba(14,23,42,.02);
}

/* Tighten gaps slightly everywhere these “screen over text” pairs appear */
#features .feature-pair,
#solution .solution-grid-two .sol-block{
  row-gap: 8px;
}

/* ============================================
   5) Safety: Prevent container padding from causing misalign
   (These ensure content aligns to the same left/right edges.)
   ============================================ */


#solution .wrap,
#features .section-inner{
  /* No extra horizontal padding inside these grids */
  padding-inline: var(--gutter);
}

/* Kill any stray margins that could push edges off by a pixel */
#solution .solution-sub .sub-head,
#solution .section-head { margin-left: 0; margin-right: 0; }