/* ============================================================
   Synolia — Platform demo landers · LIGHT / brand variant
   White canvas, Synolia deep navy ink, Synolia magenta accent.
   Poppins for voice, JetBrains Mono for labels/credentials.
   Self-contained per page: each campaign folder carries its own copy.
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --paper-2: #F5F7FB;        /* cool light section fill */
  --paper-3: #EEF2F8;        /* subtle fills */
  --navy: #0A1430;           /* Synolia deep navy — headings/ink */
  --navy-2: #212c4e;         /* secondary heading tone */
  --ink: #414b63;            /* body text */
  --ink-soft: #5c6580;       /* muted body */
  --ink-dim: #8b93a6;        /* captions */

  --magenta: #B92C8A;        /* Synolia accent */
  --magenta-deep: #9c2073;   /* hover */
  --magenta-bright: #d1409f;
  --magenta-soft: #fbeef6;
  --magenta-line: rgba(185, 44, 138, 0.18);

  --border: #E5E9F1;
  --border-strong: #D3DAE7;

  --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --max-width: 1160px;
  --max-width-narrow: 760px;
  --gutter: 24px;
  --radius-card: 16px;
  --radius-btn: 10px;

  --shadow-sm: 0 1px 2px rgba(10, 20, 48, 0.05), 0 4px 14px -8px rgba(10, 20, 48, 0.10);
  --shadow-md: 0 10px 30px -14px rgba(10, 20, 48, 0.18);
  --shadow-lg: 0 30px 70px -30px rgba(10, 20, 48, 0.28);
  --shadow-magenta: 0 12px 28px -12px rgba(185, 44, 138, 0.42);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--navy); font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; }
h1 { font-size: 52px; letter-spacing: -0.034em; }
h2 { font-size: 34px; letter-spacing: -0.025em; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
a { text-decoration: none; transition: color .18s ease, opacity .18s ease; color: var(--navy); }
em { font-style: normal; color: var(--magenta); font-weight: 500; }

/* Utilities */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.text-center { text-align: center; }
.section { padding: 88px 0; }
.section.tight { padding-top: 0; }
.bg-soft { background: var(--paper-2); }
.lead { font-size: 19px; color: var(--ink-soft); line-height: 1.7; }
.mt-14 { margin-top: 14px; }

/* Mono eyebrow with a magenta lead rule */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--magenta); display: inline-block; }
.eyebrow.center { justify-content: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-btn);
  font-family: var(--font-base); font-weight: 600; font-size: 16px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--magenta); color: #fff; box-shadow: var(--shadow-magenta); }
.btn-primary:hover { background: var(--magenta-deep); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(185, 44, 138, 0.5); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--magenta); color: var(--magenta); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--magenta); color: var(--magenta); }
.btn-lg { padding: 16px 32px; font-size: 17px; }
.btn-block { width: 100%; }

/* Header */
header { position: sticky; top: 0; z-index: 1000; padding: 14px 0; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand-row { display: flex; align-items: center; gap: 16px; }
.logo img { height: 26px; display: block; }
.plat-badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 5px 10px; background: var(--paper-2);
}
.header-cta { display: inline-flex; }

/* Hero */
.hero { padding: 44px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 54px; align-items: center; }
.hero h1 { font-size: 48px; margin-bottom: 18px; }
.hero h1 .hl { color: var(--magenta); }
.hero-sub { font-size: 18px; color: var(--ink-soft); margin-bottom: 20px; max-width: 520px; line-height: 1.6; }
.hero-cta-row { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

/* Trust chips */
.trust-chips { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.trust-chips .chip { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ink); }
.trust-chips .chip .mk { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: var(--magenta-soft); border: 1px solid var(--magenta-line); display: flex; align-items: center; justify-content: center; color: var(--magenta); margin-top: 1px; }
.trust-chips .chip .mk svg { width: 12px; height: 12px; }
.trust-chips .chip strong { color: var(--navy); font-weight: 600; }

/* ---- Inline credentials strip (under the hero CTA) ---- */
.cred-strip {
  position: relative; max-width: 520px;
  background: var(--paper-2); border: 1px solid var(--border);
  border-left: 3px solid var(--magenta); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px;
}
.cred-strip .cs-lead { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.cred-strip .cs-rows { display: flex; gap: 9px; flex-wrap: wrap; }
.cred-strip .cs-field {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 7px 6px 11px;
}
.cred-strip .cs-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.cred-strip .cs-v { font-family: var(--font-mono); font-size: 13px; color: var(--navy); }
.cred-strip .cs-copy { padding: 5px 7px; }
.cred-strip .cs-note { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 11px; line-height: 1.5; }

/* ---- Credentials "demo pass" card ---- */
.pass {
  position: relative; background: #fff; border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 20px 20px 18px; box-shadow: var(--shadow-md);
  margin-bottom: 22px; overflow: hidden;
}
.pass::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--magenta); }
.pass-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-left: 8px; }
.pass-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.pass-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--navy); letter-spacing: 0.05em; }
.pass-live .pulse { width: 8px; height: 8px; border-radius: 50%; background: #17a866; box-shadow: 0 0 0 0 rgba(23,168,102,.5); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(23,168,102,.5);} 70% { box-shadow: 0 0 0 7px rgba(23,168,102,0);} 100% { box-shadow: 0 0 0 0 rgba(23,168,102,0);} }
.pass-url { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 14px; color: var(--navy); background: var(--paper-2); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; margin: 0 0 14px 8px; word-break: break-all; }
.cred-grid { padding-left: 8px; }
.cred-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; background: var(--paper-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; }
.cred-row .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-dim); }
.cred-row .v { font-family: var(--font-mono); font-size: 13.5px; color: var(--navy); word-break: break-all; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--magenta); background: #fff; border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 9px; transition: all .16s ease; white-space: nowrap; }
.copy-btn:hover { border-color: var(--magenta); background: var(--magenta-soft); }
.copy-btn.copied { color: #17a866; border-color: #17a866; background: #eafaf2; }
.copy-btn svg { width: 13px; height: 13px; }
.pass-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; padding-left: 8px; line-height: 1.55; }
.pass-note strong { color: var(--navy); font-weight: 600; }

/* Browser frame (real screenshots) */
.browser { border-radius: 13px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; background: var(--paper-2); border-bottom: 1px solid var(--border); }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d3d9e6; }
.browser-url { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 4px 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser .shot-img { width: 100%; display: block; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; background: #fff; }

/* Section heads */
.sec-head { max-width: 640px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head p { margin-top: 13px; }

/* Capability cards */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.cap-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cap-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cap-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); display: inline-block; margin-bottom: 13px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.cap-card h4 { margin-bottom: 8px; }
.cap-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* Screenshot showcase row */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 42px; }
.shot-cap { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin-top: 10px; letter-spacing: 0.03em; }

/* Platform explainer */
.explainer { background: var(--navy); border-radius: 20px; padding: 44px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.explainer::before { content: ""; position: absolute; top: -40%; right: -10%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(185,44,138,.28), transparent 68%); pointer-events: none; }
.explainer .lede { position: relative; }
.explainer .lede .eyebrow { color: var(--magenta-bright); }
.explainer .lede h3 { color: #fff; margin-bottom: 12px; }
.explainer .lede p { color: #b9c0d4; }
.explainer ul { display: grid; gap: 14px; position: relative; }
.explainer li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: #c7cde0; }
.explainer li .tk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: rgba(185,44,138,.2); border: 1px solid rgba(185,44,138,.42); display: flex; align-items: center; justify-content: center; color: var(--magenta-bright); margin-top: 2px; }
.explainer li .tk svg { width: 12px; height: 12px; }
.explainer li strong { color: #fff; font-weight: 600; }

/* Personalized offer cards */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.offer-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 30px 26px 28px; box-shadow: var(--shadow-sm); }
.offer-card .num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--magenta); width: 38px; height: 38px; border-radius: 10px; background: var(--magenta-soft); border: 1px solid var(--magenta-line); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.offer-card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--magenta); margin-bottom: 8px; }
.offer-card h4 { font-size: 19px; margin-bottom: 9px; }
.offer-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.no-strings { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--navy); background: var(--magenta-soft); border: 1px solid var(--magenta-line); border-radius: 999px; padding: 10px 20px; }
.no-strings .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); }

/* ---- Two-step wizard form ---- */
.wizard { max-width: 660px; margin: 40px auto 0; background: #fff; border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.wiz-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--border); background: var(--paper-2); }
.wiz-steps { display: flex; align-items: center; gap: 10px; }
.wiz-dot { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-dim); }
.wiz-dot .b { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-dim); background: #fff; }
.wiz-dot.active { color: var(--navy); }
.wiz-dot.active .b { border-color: var(--magenta); color: var(--magenta); }
.wiz-dot.done .b { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.wiz-dot.done { color: var(--navy); }
.wiz-sep { width: 26px; height: 1.5px; background: var(--border-strong); }
.wiz-save { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.wiz-body { padding: 28px; }
.wiz-body h3 { margin-bottom: 6px; }
.wiz-body .wiz-hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
.wiz-step { display: none; }
.wiz-step.active { display: block; }

.field { margin-bottom: 15px; }
.field.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 15px; }
.field.row-2 .field { margin-bottom: 0; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--navy); margin-bottom: 7px; }
.field label .req { color: var(--magenta); }
.field label .opt { color: var(--ink-dim); font-weight: 400; font-size: 12px; }
.field input, .field textarea {
  width: 100%; font-family: var(--font-base); font-size: 15px; color: var(--navy);
  background: #fff; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 12px 14px; transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--magenta-soft); }
.field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.field.invalid input, .field.invalid textarea { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,.12); }
.field .err { display: none; color: #c0392b; font-size: 12.5px; margin-top: 6px; }
.field.invalid .err { display: block; }

/* upload */
.uploader { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 20px; text-align: center; background: var(--paper-2); cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.uploader:hover, .uploader.drag { border-color: var(--magenta); background: var(--magenta-soft); }
.uploader .up-ico { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--magenta); }
.uploader .up-ico svg { width: 34px; height: 34px; }
.uploader .up-big { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.uploader .up-small { font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; }
.filelist { margin-top: 12px; display: grid; gap: 8px; }
.fileitem { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.fileitem .fi-ico { flex-shrink: 0; color: var(--magenta); width: 16px; height: 16px; }
.fileitem .fi-name { flex: 1; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem .fi-size { color: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; }
.fileitem .fi-state { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.fileitem .fi-state.ok { color: #17a866; }
.fileitem .fi-state.err { color: #c0392b; }
.fileitem .fi-rm { cursor: pointer; color: var(--ink-dim); background: none; border: none; padding: 2px; display: flex; }
.fileitem .fi-rm:hover { color: #c0392b; }
.fileitem .fi-rm svg { width: 14px; height: 14px; }
.up-block { margin-bottom: 15px; }
.up-block .up-cap { font-size: 13px; font-weight: 500; color: var(--navy); margin-bottom: 8px; }

.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.wiz-skip { font-family: var(--font-base); font-size: 13.5px; color: var(--ink-soft); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wiz-skip:hover { color: var(--magenta); }
.form-legal { font-size: 12px; color: var(--ink-dim); margin-top: 14px; text-align: center; line-height: 1.55; }
.form-error { display: none; color: #c0392b; font-size: 13.5px; background: #fdecea; border: 1px solid #f5c6c0; border-radius: 9px; padding: 11px 14px; margin-top: 14px; }
.form-error.show { display: block; }

/* Success */
.wiz-success { display: none; text-align: center; padding: 14px 8px 6px; }
.wiz-success.show { display: block; }
.wiz-success .big-check { width: 62px; height: 62px; border-radius: 50%; background: var(--magenta-soft); border: 1px solid var(--magenta-line); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--magenta); }
.wiz-success .big-check svg { width: 30px; height: 30px; }
.wiz-success h3 { margin-bottom: 10px; }
.wiz-success p { color: var(--ink-soft); font-size: 15px; max-width: 460px; margin: 0 auto; }

/* Credibility */
.cred-band { text-align: center; }
.cred-band .q { font-size: 22px; line-height: 1.6; color: var(--navy); max-width: 760px; margin: 0 auto; font-weight: 400; }
.cred-band .q strong { color: var(--magenta); font-weight: 600; }
.cred-band .partner { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin-top: 20px; }
.smallprint { font-size: 12.5px; color: var(--ink-dim); text-align: center; max-width: 620px; margin: 28px auto 0; line-height: 1.6; }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 40px 0 34px; margin-top: 8px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer .logo img { height: 24px; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--magenta); }
.footer-right { font-size: 13px; text-align: right; color: var(--ink-dim); }

/* Responsive */
@media (max-width: 900px) {
  h1 { font-size: 38px; } h2 { font-size: 27px; }
  .hero h1 { font-size: 36px; }
  .hero-grid, .explainer { grid-template-columns: 1fr; }
  .hero-grid { gap: 34px; }
  .hero { padding: 40px 0 56px; }
  .explainer { padding: 30px; gap: 24px; }
  .cap-grid, .offer-grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .header-cta { display: none; }
}
@media (max-width: 560px) {
  h1 { font-size: 31px; }
  .hero h1 { font-size: 30px; }
  .field.row-2 { grid-template-columns: 1fr; }
  .cred-row { grid-template-columns: 58px 1fr; }
  .cred-row .copy-btn { grid-column: 2; justify-self: start; }
  .wiz-body, .wiz-top { padding-left: 18px; padding-right: 18px; }
  .wiz-dot .lbl-txt { display: none; }
  .hero-cta-row .btn { width: 100%; }
  .cred-strip .cs-rows { flex-direction: column; }
  .cred-strip .cs-field { width: 100%; }
  .cred-strip .cs-v { flex: 1; word-break: break-all; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
a:focus-visible, .btn:focus-visible, .copy-btn:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--magenta); outline-offset: 2px;
}

.cap-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: 3px 10px; margin: 2px 0 8px; }
.cap-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cap-badge.live { color: #1e7d46; background: #e8f5ee; }
.cap-badge.pers { color: var(--magenta); background: var(--magenta-soft); border: 1px solid var(--magenta-line); }

/* failed upload row is tappable to retry */
.fileitem.retry { cursor: pointer; }
.fileitem.retry:hover { border-color: var(--magenta); }
.fileitem.retry .fi-state.err { text-decoration: underline; }

/* GEO / definition callout + FAQ + compare cross-link (SEO/GEO enhancements) */
.geo-callout { max-width: 840px; margin: 0 auto; background: var(--paper-2); border: 1px solid var(--border); border-left: 3px solid var(--magenta); border-radius: 12px; padding: 18px 22px; }
.geo-callout p { font-size: 15.5px; color: var(--ink); line-height: 1.62; margin: 0; }
.geo-callout strong { color: var(--navy); font-weight: 600; }
.faq { max-width: 820px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 2px; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
.faq-a { font-size: 15px; color: var(--ink-soft); line-height: 1.66; margin: 0; }
.faq-a a { color: var(--magenta); font-weight: 500; }
.compare-cta { max-width: 840px; margin: 34px auto 0; text-align: center; }
.compare-cta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--magenta); border: 1px solid var(--magenta-line); background: var(--magenta-soft); border-radius: 999px; padding: 11px 22px; }
.compare-cta a:hover { border-color: var(--magenta); }

/* ============================================================
   ORO × Synolia — LATAM partner campaign additions
   Layered on top of the shared demo-lander system. Same tokens,
   same voice: mono eyebrows, navy ink, magenta accent.
   ============================================================ */

/* ---- Language switch in the header ---- */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.lang-switch a { padding: 6px 10px; color: var(--ink-soft); background: #fff; }
.lang-switch a + a { border-left: 1px solid var(--border-strong); }
.lang-switch a.on { background: var(--navy); color: #fff; }
.lang-switch a:hover:not(.on) { color: var(--magenta); background: var(--magenta-soft); }

/* ---- Hero proof strip ---- */
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 34px; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.proof-strip .ps { padding: 18px 20px; border-right: 1px solid var(--border); }
.proof-strip .ps:last-child { border-right: none; }
.proof-strip .ps-n { font-family: var(--font-mono); font-size: 21px; font-weight: 600; color: var(--magenta); line-height: 1.1; letter-spacing: -.02em; }
.proof-strip .ps-l { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }

/* ---- Numbered process steps ---- */
.steps { display: grid; gap: 0; margin-top: 42px; border-top: 1px solid var(--border); }
.steps .step { display: grid; grid-template-columns: 74px 1fr; gap: 24px; padding: 26px 4px; border-bottom: 1px solid var(--border); align-items: start; }
.steps .step .sn { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--magenta); padding-top: 4px; }
.steps .step h4 { margin-bottom: 7px; }
.steps .step p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
.steps .step .sdur { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--border-strong); border-radius: 5px; padding: 3px 8px; margin-top: 10px; }

/* ---- Country coverage chips ---- */
.country-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; justify-content: center; }
.country-grid .cc { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 17px; font-size: 14px; color: var(--navy); font-weight: 500; }
.country-grid .cc .fl { font-size: 16px; line-height: 1; }
.country-grid .cc.soft { color: var(--ink-soft); font-weight: 400; border-style: dashed; }

/* ---- "Questions to ask" checklist ---- */
.ask-list { max-width: 820px; margin: 40px auto 0; display: grid; gap: 14px; }
.ask-item { display: grid; grid-template-columns: 42px 1fr; gap: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.ask-item .qn { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--magenta); width: 34px; height: 34px; border-radius: 9px; background: var(--magenta-soft); border: 1px solid var(--magenta-line); display: flex; align-items: center; justify-content: center; }
.ask-item h4 { margin-bottom: 7px; font-size: 17px; }
.ask-item p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
.ask-item .ours { display: block; margin-top: 10px; font-size: 14px; color: var(--navy); border-left: 2px solid var(--magenta); padding-left: 12px; }
.ask-item .ours b { color: var(--magenta); font-weight: 600; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* ---- Integration surface grid ---- */
.int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
.int-col { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 20px; box-shadow: var(--shadow-sm); }
.int-col .ic-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.int-col ul { list-style: none; display: grid; gap: 7px; }
.int-col li { font-size: 14px; color: var(--ink-soft); }
.int-col li::before { content: "// "; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }

/* ---- Live demo band (navy) ---- */
.demo-band { background: var(--navy); border-radius: 20px; padding: 40px 44px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.demo-band::before { content: ""; position: absolute; bottom: -50%; left: -8%; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(185,44,138,.26), transparent 68%); pointer-events: none; }
.demo-band .db-in { position: relative; }
.demo-band .eyebrow { color: var(--magenta-bright); }
.demo-band h3 { color: #fff; margin-bottom: 11px; font-size: 25px; }
.demo-band p { color: #b9c0d4; font-size: 15px; line-height: 1.65; }
.demo-band .db-creds { position: relative; display: grid; gap: 9px; }
.demo-band .db-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 9px 12px; }
.demo-band .db-row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8d96b0; }
.demo-band .db-row .v { font-family: var(--font-mono); font-size: 13px; color: #fff; word-break: break-all; }
.demo-band .copy-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--magenta-bright); }
.demo-band .copy-btn:hover { background: rgba(185,44,138,.22); border-color: var(--magenta-bright); }
.demo-band .copy-btn.copied { color: #63e3a4; border-color: #63e3a4; background: rgba(99,227,164,.14); }
.demo-band .db-cta { margin-top: 18px; }
.demo-band .db-note { font-family: var(--font-mono); font-size: 11px; color: #8d96b0; margin-top: 13px; letter-spacing: .03em; }
.btn-on-dark { background: #fff; color: var(--navy); }
.btn-on-dark:hover { background: var(--magenta); color: #fff; transform: translateY(-2px); }

/* ---- Single-step lead panel ---- */
.lead-panel { max-width: 680px; margin: 42px auto 0; background: #fff; border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.lead-panel .lp-top { padding: 20px 30px; border-bottom: 1px solid var(--border); background: var(--paper-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lead-panel .lp-top .lp-t { font-weight: 600; color: var(--navy); font-size: 15px; }
.lead-panel .lp-top .lp-sla { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--navy); }
.lead-panel .lp-top .lp-sla .pulse { width: 8px; height: 8px; border-radius: 50%; background: #17a866; box-shadow: 0 0 0 0 rgba(23,168,102,.5); animation: pulse 2.2s infinite; }
.lead-panel .lp-body { padding: 28px 30px 30px; }
.field select {
  width: 100%; font-family: var(--font-base); font-size: 15px; color: var(--navy);
  background: #fff; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 12px 14px; transition: border-color .16s ease, box-shadow .16s ease;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; padding-right: 40px;
}
.field select:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--magenta-soft); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; background: var(--paper-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 4px; }
.check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--magenta); cursor: pointer; }
.check label { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; cursor: pointer; }
.check label strong { color: var(--navy); font-weight: 600; }

/* ---- Takeover / rescue callout ---- */
.rescue { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.rescue-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 26px; background: #fff; box-shadow: var(--shadow-sm); }
.rescue-card.bad { background: var(--paper-2); box-shadow: none; }
.rescue-card .rc-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.rescue-card.bad .rc-h { color: var(--ink-dim); }
.rescue-card.good .rc-h { color: var(--magenta); }
.rescue-card ul { list-style: none; display: grid; gap: 12px; }
.rescue-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.rescue-card li .mk { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.rescue-card li .mk svg { width: 12px; height: 12px; }
.rescue-card.bad li { color: var(--ink-soft); }
.rescue-card.bad li .mk { background: #f0f2f7; border: 1px solid var(--border-strong); color: var(--ink-dim); }
.rescue-card.good li { color: var(--ink); }
.rescue-card.good li .mk { background: var(--magenta-soft); border: 1px solid var(--magenta-line); color: var(--magenta); }
.rescue-card.good li strong { color: var(--navy); font-weight: 600; }

/* ---- Inline anchor CTA row ---- */
.anchor-cta { text-align: center; margin-top: 40px; }

/* ---- Responsive additions ---- */
@media (max-width: 900px) {
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-strip .ps:nth-child(2) { border-right: none; }
  .proof-strip .ps:nth-child(1), .proof-strip .ps:nth-child(2) { border-bottom: 1px solid var(--border); }
  .int-grid { grid-template-columns: 1fr 1fr; }
  .demo-band, .rescue { grid-template-columns: 1fr; }
  .demo-band { padding: 30px; gap: 26px; }
}
@media (max-width: 560px) {
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip .ps { border-right: none; border-bottom: 1px solid var(--border); }
  .proof-strip .ps:last-child { border-bottom: none; }
  .int-grid { grid-template-columns: 1fr; }
  .steps .step { grid-template-columns: 1fr; gap: 8px; }
  .ask-item { grid-template-columns: 1fr; gap: 12px; }
  .lead-panel .lp-body, .lead-panel .lp-top { padding-left: 18px; padding-right: 18px; }
  .demo-band .db-row { grid-template-columns: 54px 1fr; }
  .demo-band .db-row .copy-btn { grid-column: 2; justify-self: start; }
}

/* ---- Mobile overflow guard ----------------------------------------------
   The mono eyebrows on these pages are longer than on the demo landers
   ("OroCommerce implementation & integration"). As an inline-flex box the
   eyebrow sized to max-content, which became the min-content contribution of
   its grid column and pushed the whole hero ~46px past the viewport.
   Let the eyebrow wrap, and stop every grid child from blowing out its track. */
.eyebrow { max-width: 100%; flex-wrap: wrap; }
.hero-grid > *, .cap-grid > *, .int-grid > *, .offer-grid > *,
.demo-band > *, .rescue > *, .steps .step > *, .ask-item > * { min-width: 0; }
.browser-url, .db-row .v, .cred-row .v { min-width: 0; }

/* Proof-strip figures never wrap: the cells are ~140px in the hero column, so
   a long figure like "ES · EN · FR" needs the small variant to stay on one line. */
.proof-strip .ps-n { white-space: nowrap; }
.proof-strip .ps-n.ps-sm { font-size: 15px; letter-spacing: 0.01em; padding-top: 4px; }

/* ============================================================
   Category funnel additions (/ecommerce-b2b/)
   Platform-neutral page: no vendor badge, two-platform demo band,
   platform-fit cards, and the qualification block in the form.
   ============================================================ */

/* Neutral header badge (no platform lockup) */
.neutral-badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 5px 10px; background: var(--paper-2);
}

/* Platform-fit cards */
.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 42px; }
.fit-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.fit-card .fc-name { font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; }
.fit-card .fc-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--magenta); margin-top: 6px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.fit-card .fc-line { display: grid; grid-template-columns: 78px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.6; margin-bottom: 11px; }
.fit-card .fc-line:last-child { margin-bottom: 0; }
.fit-card .fc-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); padding-top: 4px; }
.fit-card .fc-v { color: var(--ink-soft); }
.fit-card .fc-v strong { color: var(--navy); font-weight: 600; }
.fit-card.none { background: var(--paper-2); box-shadow: none; }
.fit-card.none .fc-kind { color: var(--ink-dim); }

/* Neutrality statement */
.neutral-note { max-width: 820px; margin: 34px auto 0; text-align: center; font-size: 16px; color: var(--ink); line-height: 1.7; border-left: 3px solid var(--magenta); background: var(--paper-2); border-radius: 12px; padding: 20px 26px; text-align: left; }
.neutral-note strong { color: var(--navy); font-weight: 600; }

/* Two-platform demo band */
.dual-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; position: relative; }
.dual-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 20px; }
.dual-card .dc-name { color: #fff; font-weight: 600; font-size: 16px; }
.dual-card .dc-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta-bright); margin-top: 5px; margin-bottom: 12px; }
.dual-card p { color: #b9c0d4; font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.dual-card .btn { width: 100%; }

/* Qualification block inside the lead form */
.qual-block { border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px 6px; background: var(--paper-2); margin: 4px 0 15px; }
.qual-block .qb-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--magenta); margin-bottom: 6px; }
.qual-block .qb-why { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; }

@media (max-width: 900px) {
  .fit-grid, .dual-demo { grid-template-columns: 1fr; }
}

/* ============================================================
   "Esto es lo que nos dicen" — a room of objections
   The doubts are things people literally say out loud, so they are
   speech bubbles: scattered at different depths, drifting, each one
   pointing down at the answer it opens. Clicking one brings it forward
   and swaps the panel below. This is the page's one bold move; the
   surrounding sections stay deliberately quiet.
   ============================================================ */
.container-wide { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.ob-hint {
  display: inline-block; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; color: var(--magenta); white-space: nowrap;
}

/* ---- stage ---- */
.ob-stage { position: relative; height: 430px; margin: 46px 0 8px; }

/* Ambient drift behind the bubbles. Two soft blobs, no canvas needed. */
.ob-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.ob-blob.b1 { width: 420px; height: 420px; left: 6%; top: -6%; background: rgba(185,44,138,.11); animation: obBlob1 19s ease-in-out infinite; }
.ob-blob.b2 { width: 360px; height: 360px; right: 4%; bottom: -10%; background: rgba(10,20,48,.09); animation: obBlob2 23s ease-in-out infinite; }
@keyframes obBlob1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.12); } }
@keyframes obBlob2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-46px,-26px) scale(1.08); } }

/* ---- bubble ---- */
.ob-bubble {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(200px, 21vw, 268px);
  display: block; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 20px 20px 20px 6px;
  padding: 17px 19px 18px; z-index: 2;
  font-family: var(--font-base);
  box-shadow: 0 10px 28px -14px rgba(10,20,48,.30), 0 2px 6px -2px rgba(10,20,48,.10);
  transform: scale(var(--s)) rotate(var(--rot));
  transition: box-shadow .24s ease, border-color .2s ease, background .24s ease, color .24s ease;
  animation-delay: var(--d);
}
/* The tail: a small square rotated into a point at the bottom-left. */
.ob-bubble::after {
  content: ""; position: absolute; left: 20px; bottom: -7px; width: 15px; height: 15px;
  background: inherit; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  transform: rotate(45deg); border-bottom-right-radius: 3px;
  transition: border-color .2s ease;
}
.ob-tag {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; transition: color .2s ease;
}
.ob-quote {
  display: block; font-size: 16.5px; font-weight: 600; color: var(--navy);
  line-height: 1.32; letter-spacing: -.018em; transition: color .2s ease;
}

/* float: three variants so no two bubbles move in step */
.ob-bubble.f0 { animation-name: obFloat0; animation-duration: 9s; }
.ob-bubble.f1 { animation-name: obFloat1; animation-duration: 11.5s; }
.ob-bubble.f2 { animation-name: obFloat2; animation-duration: 13s; }
.ob-bubble { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes obFloat0 {
  0%,100% { transform: scale(var(--s)) rotate(var(--rot)) translate(0,0); }
  50%     { transform: scale(var(--s)) rotate(var(--rot)) translate(6px,-14px); }
}
@keyframes obFloat1 {
  0%,100% { transform: scale(var(--s)) rotate(var(--rot)) translate(0,0); }
  50%     { transform: scale(var(--s)) rotate(var(--rot)) translate(-8px,-11px); }
}
@keyframes obFloat2 {
  0%,100% { transform: scale(var(--s)) rotate(var(--rot)) translate(0,0); }
  50%     { transform: scale(var(--s)) rotate(var(--rot)) translate(5px,12px); }
}

/* hover: it stops drifting, comes forward, and says "click me" */
.ob-bubble:hover, .ob-bubble:focus-visible {
  animation-play-state: paused; z-index: 5;
  border-color: var(--magenta); background: var(--magenta-soft);
  box-shadow: 0 22px 44px -18px rgba(185,44,138,.45), 0 3px 10px -3px rgba(10,20,48,.12);
}
.ob-bubble:hover::after, .ob-bubble:focus-visible::after { border-color: var(--magenta); }
.ob-bubble:hover .ob-tag, .ob-bubble:focus-visible .ob-tag { color: var(--magenta); }

/* active: solid magenta, sitting on top of everything */
.ob-bubble.is-on {
  animation-play-state: paused; z-index: 6;
  background: var(--magenta); border-color: var(--magenta); color: #fff;
  box-shadow: 0 26px 50px -18px rgba(185,44,138,.55);
}
.ob-bubble.is-on::after { border-color: var(--magenta); }
.ob-bubble.is-on .ob-tag { color: rgba(255,255,255,.72); }
.ob-bubble.is-on .ob-quote { color: #fff; }
/* everything else steps back while one is selected */
.ob-stage.has-active .ob-bubble:not(.is-on) { opacity: .78; }
.ob-stage.has-active .ob-bubble:not(.is-on):hover { opacity: 1; }

/* ---- answer panel ---- */
.ob-answers { position: relative; max-width: 760px; margin: 0 auto; }
.ob-answer {
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  border-top: 3px solid var(--magenta);
  padding: 28px 30px 30px; box-shadow: var(--shadow-lg);
}
.ob-answer + .ob-answer { margin-top: 14px; }
.ob-a-tag {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: 10px;
}
.ob-a-title { font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: -.022em; margin-bottom: 12px; line-height: 1.28; }
.ob-answer p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.68; }
.ob-a-call {
  display: block; margin-top: 16px; font-size: 15.5px; color: var(--ink); line-height: 1.68;
  border-left: 2px solid var(--magenta); padding-left: 16px;
}
.ob-a-call b {
  display: block; margin-bottom: 4px; color: var(--magenta); font-weight: 600;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.ob-a-call a { color: var(--magenta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* JS on: one panel at a time, swapped with a short rise */
.ob-answers.js .ob-answer { display: none; margin-top: 0; }
.ob-answers.js .ob-answer.is-on { display: block; animation: obRise .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes obRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- narrow screens: the scatter becomes a readable row ---- */
@media (max-width: 860px) {
  .ob-stage {
    height: auto; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin: 34px 0 26px;
  }
  .ob-blob { display: none; }
  .ob-bubble {
    position: static; width: auto; max-width: 100%; flex: 0 1 auto;
    transform: none; animation: none; padding: 12px 15px;
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 6px 16px -10px rgba(10,20,48,.3);
  }
  .ob-bubble::after { display: none; }
  .ob-quote { font-size: 14.5px; }
  .ob-tag { margin-bottom: 5px; }
  .ob-answer { padding: 22px 20px 24px; }
  .ob-a-title { font-size: 19px; }
  .ob-hint { display: block; margin-top: 6px; }
}

/* ============================================================
   Booking
   A card we control, then HubSpot's scheduler on demand underneath it.
   The embed is a fixed-height iframe with a large empty panel we cannot
   restyle across origins, so it is not the first thing anyone sees, and
   wrapping it in our own bordered card only produced a frame inside a
   frame. Revealed on click it reads as a step, not as a stuck widget.
   ============================================================ */
.book-card {
  max-width: 560px; margin: 40px auto 0; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 30px 32px 28px; text-align: center;
}
.bc-person { display: flex; align-items: center; gap: 15px; justify-content: center; margin-bottom: 22px; }
.bc-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--magenta-line); }
.bc-person > div { text-align: left; }
.bc-name { font-size: 17px; font-weight: 600; color: var(--navy); letter-spacing: -.02em; }
.bc-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--magenta); margin-top: 4px; }

.bc-facts { list-style: none; display: grid; gap: 0; margin: 0 0 24px; text-align: left;
  border-top: 1px solid var(--border); }
.bc-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 2px; border-bottom: 1px solid var(--border); }
.bc-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-dim); }
.bc-v { font-size: 14.5px; color: var(--navy); font-weight: 500; }
.bc-cta { width: 100%; }
.bc-note { font-size: 12.5px; color: var(--ink-dim); margin-top: 12px; }

/* HubSpot's own card carries its border and shadow; adding ours made a
   frame inside a frame, so this wrapper is deliberately bare. */
.book-slot { max-width: 760px; margin: 22px auto 0; }
.book-slot[hidden] { display: none; }
.meetings-iframe-container { width: 100%; }
.meetings-iframe-container iframe { width: 100% !important; border: 0; display: block; }

.book-alt { text-align: center; margin: 26px auto 0; }
.book-alt .ba-lead { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 8px; }
.ba-toggle {
  font-family: var(--font-base); font-size: 14.5px; font-weight: 500; color: var(--magenta);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; padding: 4px 6px;
}
.ba-toggle:hover { color: var(--magenta-deep); }
.ba-toggle:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 6px; }

.lead-panel.alt-hidden { display: none; }
.lead-panel { margin-top: 22px; }

@media (max-width: 560px) {
  .book-card { padding: 24px 20px 22px; }
  .bc-person { flex-direction: column; gap: 12px; }
  .bc-person > div { text-align: center; }
  .bc-facts li { flex-direction: column; gap: 3px; align-items: flex-start; }
}

/* ---- Booking skeleton -----------------------------------------------------
   HubSpot's embed takes a couple of seconds to paint. Revealing an empty box
   in the meantime reads as broken, so the slot holds a placeholder of roughly
   the right height until the iframe exists. */
.book-skeleton {
  min-height: 560px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
}
.bs-bar {
  width: 190px; height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--border); position: relative;
}
.bs-bar::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: 999px;
  background: var(--magenta); animation: bsSlide 1.15s ease-in-out infinite;
}
@keyframes bsSlide { 0% { transform: translateX(-110%) } 100% { transform: translateX(260%) } }
.bs-msg { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-dim); }
.bs-alt { font-size: 13px; color: var(--ink-dim); }
.bs-alt a { color: var(--magenta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }