:root {
--font-display: Amulya, ui-sans-serif, system-ui, sans-serif;
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
--color-primary-50: 240 249 255;
--color-primary-100: 224 242 254;
--color-primary-200: 186 230 253;
--color-primary-300: 125 211 252;
--color-primary-400: 56 189 248;
--color-primary-500: 14 165 233;
--color-primary-600: 2 132 199;
--color-primary-700: 3 105 161;
--color-primary-800: 7 89 133;
--color-primary-900: 12 74 110;
--color-primary-950: 8 47 73;
--color-primary-DEFAULT: var(--color-primary-500);
--color-gray-50: 250 250 250;
--color-gray-100: 245 245 245;
--color-gray-200: 229 229 229;
--color-gray-300: 212 212 212;
--color-gray-400: 163 163 163;
--color-gray-500: 115 115 115;
--color-gray-600: 82 82 82;
--color-gray-700: 64 64 64;
--color-gray-800: 38 38 38;
--color-gray-900: 23 23 23;
--color-gray-950: 10 10 10;
}
html.cgi-dark { --color-primary-DEFAULT: var(--color-primary-400); }


/* ── Placeholder block (used wherever final media will land) ─────────── */
.ph { background:#ffffff; border:1.5px dashed #cbd5e1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; color:#64748b; font-family:var(--font-display); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:1rem; border-radius:inherit; min-height:120px; width:100%; }
.ph__sub { font-family:var(--font-sans); font-size:.6875rem; font-weight:500; letter-spacing:.04em; text-transform:none; color:#94a3b8; }
html.cgi-dark .ph { background:#ffffff; color:#64748b; border-color:#cbd5e1; }
html.cgi-dark .ph__sub { color:#94a3b8; }

/* ── Image slot defaults ─────────────────────────────────────────── */
.hero-bleed__bg video, .hero-bleed__bg img { width:100%; height:100%; object-fit:cover; display:block; }
.output-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.amz-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.amz-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.workflow-figure img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-row__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.variants-card__stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; z-index:1; transition: opacity 0s linear .55s; }
.variants-card__stage img.is-active { opacity:1; z-index:2; transition: opacity .55s ease 0s; }

/* ── FAQ accordion ───────────────────────────────────────────────── */
.faq-item { border-bottom:1px solid rgb(var(--color-gray-200)); }
html.cgi-dark .faq-item { border-color:rgb(var(--color-gray-700)); }
.faq-q { display:flex; gap:.75rem; align-items:center; padding:1.5rem 0; cursor:pointer; width:100%; text-align:left; background:none; border:none; font-family:inherit; font-size:1rem; font-weight:700; color:rgb(var(--color-gray-900)); }
html.cgi-dark .faq-q { color:rgb(var(--color-gray-100)); }
.faq-q svg { width:20px; height:20px; flex-shrink:0; margin-left:auto; transition:transform .2s; }
.faq-item.open .faq-q svg { transform:rotate(90deg); }
.faq-a { display:none; padding-bottom:1.25rem; padding-right:2rem; font-size:.9375rem; color:rgb(var(--color-gray-500)); line-height:1.7; }
html.cgi-dark .faq-a { color:rgb(var(--color-gray-400)); }
.faq-item.open .faq-a { display:block; }

/* ── Process steps ───────────────────────────────────────────────── */
.process-step { display:flex; gap:1.5rem; align-items:flex-start; }
.process-num { flex-shrink:0; width:3rem; height:3rem; border-radius:50%; background:rgb(var(--color-primary-500)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.125rem; font-family:var(--font-display); }

/* ── Client logos strip ──────────────────────────────────────────── */
.logos-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:center; }
.logos-strip img { height:1.75rem; width:auto; max-width:100%; object-fit:contain; object-position:center; filter:grayscale(1); opacity:.5; transition:opacity .2s; margin:0 auto; display:block; }
.logos-strip img:hover { opacity:.9; }
html.cgi-dark .logos-strip img { filter:grayscale(1) invert(1) !important; }
@media (min-width:640px)  { .logos-strip { grid-template-columns:repeat(4,1fr); gap:1.5rem 2rem; } }
@media (min-width:1024px) { .logos-strip { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:1rem; } }
@media (min-width:1024px) { .logos-strip img { height:1.75rem; max-width:7rem; margin:0; } }

/* ── Testimonials scroll ─────────────────────────────────────────── */
.testimonials-scroll { display:flex; gap:1.5rem; overflow-x:auto; padding-bottom:1.5rem; scroll-snap-type:x mandatory; scrollbar-width:thin; align-items:stretch; }
.testimonial-card { flex-shrink:0; width:min(36rem, 90vw); min-height:22rem; background:rgb(var(--color-gray-100)); border-radius:1.5rem; padding:2.5rem; scroll-snap-align:start; display:flex; flex-direction:column; }
html.cgi-dark .testimonial-card { background:rgb(var(--color-gray-900)); }
.testimonial-card > p { flex:1; }
.testimonial-card > div:last-child { margin-top:auto; padding-top:1.5rem; }

/* ── Full-bleed hero ─────────────────────────────────────────────── */
.hero-bleed { position:relative; height:100vh; min-height:640px; max-height:1080px; width:100%; overflow:hidden; color:#fff; }
.hero-bleed__bg { position:absolute; inset:0; z-index:0; }
.hero-bleed__bg .ph { background:#0f172a; border:1.5px dashed rgba(255,255,255,.25); color:rgba(255,255,255,.55); height:100%; min-height:100%; font-size:1rem; letter-spacing:.18em; }
.hero-bleed__bg .ph__sub { color:rgba(255,255,255,.45); }
.hero-bleed__overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.1) 58%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); pointer-events:none; }
.hero-bleed__wrap { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding:6rem 1rem 2.5rem; max-width:90rem; margin:0 auto; }
@media (min-width:640px) { .hero-bleed__wrap { padding:6rem 1.5rem 3rem; } }
@media (min-width:1024px) { .hero-bleed__wrap { padding:6.5rem 2rem 2.75rem; } }
.hero-bleed__copy { max-width:48rem; padding-bottom:1.75rem; margin-top:auto; }
.hero-bleed__eyebrow { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#fff; padding:.5rem 1rem; border:1px solid rgba(255,255,255,.15); border-radius:9999px; background:rgba(14,165,233,.85); backdrop-filter:blur(8px); margin-bottom:1.125rem; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.hero-bleed__h1 { font-family:var(--font-display); font-size:clamp(2.25rem, 5vw, 4.25rem); font-weight:600; line-height:1.04; letter-spacing:-.02em; margin-bottom:1rem; text-shadow:0 2px 30px rgba(0,0,0,.4); }
.hero-bleed__h1 em { font-style:normal; color:rgb(var(--color-primary-400)); }
.hero-bleed__sub { font-size:clamp(1rem, 1.4vw, 1.25rem); line-height:1.55; color:rgba(255,255,255,.85); max-width:38rem; margin-bottom:1.5rem; }
.hero-bleed__ctas { display:flex; flex-wrap:wrap; gap:.875rem; }
.hero-bleed__cta-primary { display:inline-flex; align-items:center; gap:.5rem; padding:.875rem 1.75rem; border-radius:.75rem; background:rgb(var(--color-primary-500)); color:#fff; font-weight:600; font-size:1rem; box-shadow:0 6px 24px rgba(14,165,233,.4); transition:background .15s, transform .15s; }
.hero-bleed__cta-primary:hover { background:rgb(var(--color-primary-400)); transform:translateY(-1px); }
.hero-bleed__info { display:flex; flex-direction:column; gap:1.25rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.15); }
@media (min-width:768px) { .hero-bleed__info { flex-direction:row; align-items:center; justify-content:flex-start; gap:2.5rem; } }
.hero-bleed__stats { display:flex; flex-wrap:wrap; gap:1.5rem; }
@media (min-width:768px) { .hero-bleed__stats { gap:2.5rem; } }
.hero-bleed__stat { display:flex; flex-direction:column; }
.hero-bleed__stat-value { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:#fff; line-height:1.1; }
.hero-bleed__stat-label { font-size:.75rem; color:rgba(255,255,255,.85); text-transform:uppercase; letter-spacing:.08em; margin-top:.25rem; }
.hero-bleed__breadcrumb { font-size:.875rem; color:rgba(255,255,255,.75); margin-bottom:auto; padding-bottom:1.5rem; }
.hero-bleed__breadcrumb a { color:rgba(255,255,255,.75); text-decoration:none; }
.hero-bleed__breadcrumb a:hover { color:#fff; }
@media (max-width:767px) {
  .hero-bleed { height:auto; min-height:100svh; max-height:none; }
  .hero-bleed__wrap { padding:5rem 1rem 1.75rem; min-height:100svh; }
  .hero-bleed__breadcrumb { margin-bottom:1.25rem; padding-bottom:0; }
  .hero-bleed__copy { margin-top:0; padding-bottom:1.75rem; }
  .hero-bleed__h1 { margin-bottom:1rem; }
  .hero-bleed__sub { margin-bottom:1.5rem; }
  .hero-bleed__info { padding-top:1.25rem; gap:1rem; }
  .hero-bleed__stat-value { font-size:1.375rem; }
  .hero-bleed__stat-label { font-size:.6875rem; color:rgba(255,255,255,.9); }
}

/* ── Output matrix ───────────────────────────────────────────────── */
.output-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:640px) { .output-grid { grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
@media (min-width:1024px) { .output-grid { grid-template-columns:repeat(5,1fr); gap:1.25rem; } }
.output-card { display:flex; flex-direction:column; gap:.625rem; }
.output-card__media { position:relative; aspect-ratio:4/3; border-radius:.875rem; overflow:hidden; }
.output-card__media .ph { min-height:0; height:100%; border-radius:.875rem; }
.output-card__badge { position:absolute; top:.5rem; right:.5rem; z-index:2; width:2.25rem; height:2.25rem; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.output-card__badge svg { width:18px; height:18px; }
.output-card__label { font-size:.8125rem; font-weight:600; color:rgb(var(--color-gray-700)); text-align:center; line-height:1.35; }
html.cgi-dark .output-card__label { color:rgb(var(--color-gray-300)); }

/* ── Variants Showcase ───────────────────────────────────────────── */
.variants-block { display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:1024px) { .variants-block { grid-template-columns:1fr 1fr; gap:3rem; } }
.variants-card { background:rgb(var(--color-gray-50)); border-radius:1.25rem; padding:1.5rem; border:1px solid rgb(var(--color-gray-200)); }
html.cgi-dark .variants-card { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-800)); }
.variants-card__label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgb(var(--color-primary-500)); margin-bottom:.75rem; text-align:center; }
.variants-card__stage { position:relative; aspect-ratio:1/1; max-width:600px; margin:0 auto; border-radius:1rem; overflow:hidden; background:#fff; }
html.cgi-dark .variants-card__stage { background:rgb(var(--color-gray-800)); }
.variants-card__stage [data-variant] { position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:1; transition: opacity 0s linear .55s; }
.variants-card__stage [data-variant].is-active { opacity:1; z-index:2; transition: opacity .55s ease 0s; }
.variants-card__stage .ph { border-radius:0; min-height:100%; height:100%; }
.variants-card__swatches { display:flex; flex-wrap:wrap; gap:.625rem; justify-content:center; margin-top:1.25rem; }
.swatch { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .875rem; border-radius:9999px; border:1px solid rgb(var(--color-gray-300)); background:#fff; color:rgb(var(--color-gray-700)); font-size:.8125rem; font-weight:600; cursor:pointer; transition:all .15s; font-family:inherit; }
html.cgi-dark .swatch { background:rgb(var(--color-gray-800)); border-color:rgb(var(--color-gray-700)); color:rgb(var(--color-gray-300)); }
.swatch:hover { border-color:rgb(var(--color-primary-500)); }
.swatch.is-active { border-color:rgb(var(--color-primary-500)); background:rgb(var(--color-primary-50)); color:rgb(var(--color-primary-700)); box-shadow:0 0 0 2px rgba(14,165,233,.25); }
html.cgi-dark .swatch.is-active { background:rgba(14,165,233,.15); color:rgb(var(--color-primary-300)); }
.swatch__dot { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.1); flex-shrink:0; }

/* ── Browser frame / PDP mockup ──────────────────────────────────── */
.browser-frame { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; box-shadow:0 16px 60px rgba(0,0,0,.10); max-width:1100px; margin:0 auto; }
html.cgi-dark .browser-frame { background:#fff; border-color:#e5e7eb; box-shadow:0 16px 60px rgba(0,0,0,.5); }
.browser-frame__top { display:flex; align-items:center; gap:.375rem; padding:.625rem .875rem; background:#f3f4f6; border-bottom:1px solid #e5e7eb; }
.browser-frame__dot { width:11px; height:11px; border-radius:50%; }
.browser-frame__dot--r { background:#fc625d; }
.browser-frame__dot--y { background:#fdbc40; }
.browser-frame__dot--g { background:#34c84a; }
.browser-frame__url { flex:1; background:#fff; padding:.375rem .75rem; border-radius:.375rem; font-size:.75rem; color:#6b7280; margin-left:.5rem; border:1px solid #e5e7eb; }
.browser-frame__body { padding:1.5rem; background:#fff; }
@media (min-width:768px) { .browser-frame__body { padding:2rem; } }
.amz-layout { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px) { .amz-layout { grid-template-columns:6fr 5fr; gap:1.5rem; } }
.amz-hero { aspect-ratio:1/1; border-radius:.75rem; overflow:hidden; }
.amz-hero .ph { min-height:0; height:100%; border-radius:.75rem; font-size:.875rem; }
.amz-side { display:flex; flex-direction:column; gap:1rem; position:relative; }
.amz-side__eyebrow { font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--color-primary-600)); margin-bottom:.625rem; }
.amz-side__title { font-family:var(--font-display); font-size:clamp(1.125rem, 1.7vw, 1.5rem); font-weight:700; line-height:1.25; color:#111827; letter-spacing:-.01em; margin-bottom:.75rem; }
.amz-side__lead { font-size:.875rem; color:#475569; line-height:1.6; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid #e5e7eb; }
.amz-side__sub { font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6b7280; margin-bottom:.625rem; }
.amz-side__bullets { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.625rem; }
.amz-side__bullets li { font-size:.8125rem; color:#475569; line-height:1.55; padding-left:1.125rem; position:relative; }
.amz-side__bullets li::before { content:""; position:absolute; left:.25rem; top:.55rem; width:.375rem; height:.375rem; border-radius:50%; background:rgb(var(--color-primary-500)); }
.amz-side__bullets strong { color:#111827; font-weight:700; }
.amz-side__cta { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.75rem 1rem; margin:.5rem 0 .375rem; background:rgb(var(--color-primary-500)); color:#fff; border:none; border-radius:9999px; font-weight:700; font-size:.9375rem; font-family:inherit; cursor:pointer; text-decoration:none; transition:background .15s, transform .15s; }
.amz-side__cta:hover { background:rgb(var(--color-primary-600)); transform:translateY(-1px); }
.amz-side__cta svg { width:14px; height:14px; flex-shrink:0; }
.amz-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.amz-thumb { position:relative; aspect-ratio:1/1; border-radius:.5rem; overflow:hidden; border:1.5px solid #e5e7eb; cursor:pointer; transition:border-color .15s, transform .15s; background:none; padding:0; font-family:inherit; }
.amz-thumb:hover { border-color:rgb(var(--color-primary-400)); transform:translateY(-1px); }
.amz-thumb.is-active { border-color:rgb(var(--color-primary-500)); box-shadow:0 0 0 2px rgba(14,165,233,.25); }
.amz-thumb .ph { min-height:0; height:100%; border-radius:0; font-size:.625rem; padding:.35rem; letter-spacing:.06em; }
.amz-thumb .ph__sub { font-size:.5625rem; }
.amz-thumb__overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; pointer-events:none; }
.amz-thumb__overlay svg { width:18px; height:18px; }
.amz-thumb__overlay--ar { background: linear-gradient(135deg, rgba(14,165,233,.92), rgba(2,132,199,.92)); }
.amz-bullets { display:grid; grid-template-columns:1fr; gap:.5rem; margin-top:1.5rem; max-width:1100px; margin-left:auto; margin-right:auto; }
@media (min-width:640px) { .amz-bullets { grid-template-columns:repeat(3,1fr); } }
.amz-bullet { display:flex; gap:.625rem; align-items:flex-start; padding:.75rem 1rem; background:rgb(var(--color-gray-50)); border:1px solid rgb(var(--color-gray-200)); border-radius:.75rem; font-size:.875rem; color:rgb(var(--color-gray-700)); }
html.cgi-dark .amz-bullet { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-800)); color:rgb(var(--color-gray-300)); }
.amz-bullet svg { width:18px; height:18px; flex-shrink:0; color:rgb(var(--color-primary-500)); margin-top:.1rem; }

/* ── PDP tabs (One Item, Every Format) ───────────────────────────── */
.pdp-tabs { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem; }
.pdp-tab { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; border-radius:9999px; border:1px solid rgb(var(--color-gray-300)); background:#fff; color:rgb(var(--color-gray-700)); font-size:.9375rem; font-weight:700; cursor:pointer; transition:all .15s; font-family:inherit; }
html.cgi-dark .pdp-tab { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-700)); color:rgb(var(--color-gray-300)); }
.pdp-tab:hover { border-color:rgb(var(--color-primary-500)); }
.pdp-tab.is-active { border-color:rgb(var(--color-primary-500)); background:rgb(var(--color-primary-500)); color:#fff; box-shadow:0 4px 14px rgba(14,165,233,.35); }
.pdp-set { display:none; animation:pdpFade .35s ease; }
.pdp-set.is-active { display:block; }
@keyframes pdpFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── Sketch-to-Sellable (scroll-scrub / pinned) ──────────────────── */
.s2s-track { position:relative; }
.s2s-pin { position:sticky; top:0; height:auto; display:flex; align-items:flex-start; padding-top:7vh; }
.s2s-pin__inner { width:100%; display:grid; grid-template-columns:1fr; gap:1.5rem; }
.s2s-stage { position:relative; aspect-ratio:16/9; max-height:62vh; width:100%; border-radius:1.25rem; overflow:hidden; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.18); margin:0 auto; }
.s2s-layer { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.s2s-layer.is-active { opacity:1; }
.s2s-layer img { width:100%; height:100%; object-fit:contain; display:block; }
.s2s-layer .ph { height:100%; min-height:100%; border-radius:0; background:#0f172a; border:1.5px dashed rgba(255,255,255,.22); color:rgba(255,255,255,.6); font-size:1rem; letter-spacing:.16em; }
.s2s-layer .ph__sub { color:rgba(255,255,255,.4); }
.s2s-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:.5rem; padding:.5rem; background:#fff; opacity:0; transition:opacity .45s ease; }
.s2s-grid.is-active { opacity:1; }
.s2s-grid .ph { min-height:0; height:100%; border-radius:.5rem; font-size:.6875rem; }
.s2s-grid img { width:100%; height:100%; object-fit:contain; display:block; border-radius:.5rem; }
.s2s-cell { position:relative; overflow:hidden; border-radius:.5rem; }
.s2s-cell__tag { position:absolute; left:50%; bottom:.4rem; transform:translateX(-50%); z-index:2; font-size:.5625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:.15rem .4rem; border-radius:.25rem; backdrop-filter:blur(4px); white-space:nowrap; }
.s2s-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem .5rem; }
.s2s-step { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:9999px; border:1px solid rgb(var(--color-gray-300)); background:#fff; color:rgb(var(--color-gray-500)); font-size:.75rem; font-weight:700; letter-spacing:.04em; transition:all .25s; }
html.cgi-dark .s2s-step { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-700)); color:rgb(var(--color-gray-400)); }
.s2s-step__num { width:1.25rem; height:1.25rem; border-radius:50%; background:rgb(var(--color-gray-200)); color:rgb(var(--color-gray-600)); display:inline-flex; align-items:center; justify-content:center; font-size:.6875rem; transition:all .25s; }
html.cgi-dark .s2s-step__num { background:rgb(var(--color-gray-800)); color:rgb(var(--color-gray-400)); }
.s2s-step.is-active { border-color:rgb(var(--color-primary-500)); background:rgb(var(--color-primary-50)); color:rgb(var(--color-primary-700)); }
html.cgi-dark .s2s-step.is-active { background:rgba(14,165,233,.15); color:rgb(var(--color-primary-300)); }
.s2s-step.is-active .s2s-step__num { background:rgb(var(--color-primary-500)); color:#fff; }
.s2s-hint { text-align:center; font-size:.75rem; color:rgb(var(--color-gray-400)); letter-spacing:.04em; }
@media (max-width:767px) { .s2s-stage { max-height:none; aspect-ratio:4/5; } .s2s-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); } }

/* ── Material showcase (hover-zoom grid) ─────────────────────────── */
.mat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:768px) { .mat-grid { grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
.mat-tile { position:relative; display:flex; flex-direction:column; gap:.625rem; }
.mat-tile__media { position:relative; aspect-ratio:4/3; border-radius:1rem; overflow:hidden; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.08); cursor:zoom-in; transition:transform .2s, box-shadow .2s; }
.mat-tile:hover .mat-tile__media { transform:translateY(-2px); box-shadow:0 14px 44px rgba(0,0,0,.14); }
.mat-tile__media img { width:100%; height:100%; object-fit:cover; display:block; }
.mat-tile__media .ph { min-height:0; height:100%; border-radius:1rem; }
.mat-tile__loupe { position:absolute; inset:0; opacity:0; background-repeat:no-repeat; background-color:#fff; pointer-events:none; transition:opacity .15s; }
.mat-tile.is-zooming .mat-tile__loupe { opacity:1; }
.mat-tile__cap { font-size:.875rem; font-weight:700; color:rgb(var(--color-gray-800)); }
html.cgi-dark .mat-tile__cap { color:rgb(var(--color-gray-200)); }
.mat-tile__cap span { display:block; font-weight:500; font-size:.8125rem; color:rgb(var(--color-gray-500)); margin-top:.1rem; }
html.cgi-dark .mat-tile__cap span { color:rgb(var(--color-gray-400)); }
@media (hover:none) and (pointer:coarse) { .mat-tile__loupe { display:none !important; } }

/* ── Comparison table (3D vs Photo) ──────────────────────────────── */
.compare-wrap { max-width:64rem; margin:0 auto; overflow-x:auto; border-radius:1.25rem; border:1px solid rgb(var(--color-gray-200)); }
html.cgi-dark .compare-wrap { border-color:rgb(var(--color-gray-800)); }
.compare-table { width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
html.cgi-dark .compare-table { background:rgb(var(--color-gray-950)); }
.compare-table th, .compare-table td { padding:1rem 1.25rem; text-align:left; font-size:.9375rem; border-bottom:1px solid rgb(var(--color-gray-200)); }
html.cgi-dark .compare-table th, html.cgi-dark .compare-table td { border-color:rgb(var(--color-gray-800)); }
.compare-table thead th { font-family:var(--font-display); font-weight:700; font-size:1rem; color:rgb(var(--color-gray-900)); background:rgb(var(--color-gray-50)); }
html.cgi-dark .compare-table thead th { color:rgb(var(--color-gray-100)); background:rgb(var(--color-gray-900)); }
.compare-table thead th:nth-child(2) { color:rgb(var(--color-primary-600)); }
html.cgi-dark .compare-table thead th:nth-child(2) { color:rgb(var(--color-primary-400)); }
.compare-table td:first-child { font-weight:600; color:rgb(var(--color-gray-700)); }
html.cgi-dark .compare-table td:first-child { color:rgb(var(--color-gray-300)); }
.compare-table td:nth-child(2) { font-weight:600; color:rgb(var(--color-gray-900)); }
html.cgi-dark .compare-table td:nth-child(2) { color:rgb(var(--color-gray-100)); }
.compare-table td:nth-child(3) { color:rgb(var(--color-gray-500)); }
.compare-table tbody tr:last-child td { border-bottom:none; }
.compare-yes { color:rgb(22 163 74); font-weight:700; }
.compare-no { color:rgb(220 38 38); font-weight:600; }

/* ── Timeline ────────────────────────────────────────────────────── */
.timeline-banner { background:#fff; border:1px solid rgb(var(--color-gray-200)); border-radius:1.25rem; padding:2.75rem 1.5rem 2.5rem; position:relative; }
html.cgi-dark .timeline-banner { background:rgb(var(--color-gray-950)); border-color:rgb(var(--color-gray-800)); }
.timeline-stops { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px) { .timeline-stops { grid-template-columns:repeat(5,1fr); gap:1rem; position:relative; } .timeline-stops::before { content:""; position:absolute; top:1rem; left:10%; right:10%; height:2px; background:rgb(var(--color-gray-200)); z-index:0; } html.cgi-dark .timeline-stops::before { background:rgb(var(--color-gray-800)); } }
.timeline-stop { position:relative; display:flex; flex-direction:column; align-items:center; gap:.625rem; text-align:center; z-index:1; }
.timeline-stop__dot { width:2rem; height:2rem; border-radius:50%; background:rgb(var(--color-primary-500)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; font-family:var(--font-display); box-shadow:0 0 0 4px #fff; }
html.cgi-dark .timeline-stop__dot { box-shadow:0 0 0 4px rgb(var(--color-gray-950)); }
.timeline-stop__week { font-size:.75rem; font-weight:700; color:rgb(var(--color-primary-600)); text-transform:uppercase; letter-spacing:.08em; }
html.cgi-dark .timeline-stop__week { color:rgb(var(--color-primary-400)); }
.timeline-stop__label { font-size:.8125rem; color:rgb(var(--color-gray-500)); line-height:1.45; max-width:11rem; }
html.cgi-dark .timeline-stop__label { color:rgb(var(--color-gray-400)); }
.timeline-cards { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem; }
@media (min-width:768px) { .timeline-cards { grid-template-columns:repeat(3,1fr); } }
.timeline-card { padding:1.75rem; background:rgb(var(--color-gray-50)); border:1px solid rgb(var(--color-gray-200)); border-radius:1rem; }
html.cgi-dark .timeline-card { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-800)); }
.timeline-card h3 { font-family:var(--font-display); font-size:1.125rem; font-weight:700; color:rgb(var(--color-gray-900)); margin-bottom:.625rem; }
html.cgi-dark .timeline-card h3 { color:rgb(var(--color-gray-100)); }
.timeline-card p { font-size:.875rem; color:rgb(var(--color-gray-600)); line-height:1.6; }
html.cgi-dark .timeline-card p { color:rgb(var(--color-gray-400)); }

/* ── Categories ──────────────────────────────────────────────────── */
.cat-row { display:grid; grid-template-columns:1fr; gap:1.5rem; padding:2rem 1.25rem; border-radius:1.5rem; background:rgb(var(--color-gray-100)); margin-bottom:1.25rem; }
.cat-row:last-child { margin-bottom:0; }
html.cgi-dark .cat-row { background:rgb(var(--color-gray-800)); border:1px solid rgb(var(--color-gray-700)); }
@media (min-width:1024px) { .cat-row { grid-template-columns:4fr 6fr; gap:3.5rem; align-items:center; padding:2.75rem 2.5rem; margin-bottom:1.5rem; } .cat-row.reverse .cat-row__copy { order:2; } }
.cat-row__copy { display:flex; flex-direction:column; }
.cat-row__eyebrow { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgb(var(--color-primary-500)); margin-bottom:.5rem; }
.cat-row__copy h3 { font-family:var(--font-display); font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:700; line-height:1.2; color:rgb(var(--color-gray-900)); margin-bottom:.75rem; letter-spacing:-.01em; }
html.cgi-dark .cat-row__copy h3 { color:rgb(var(--color-gray-100)); }
.cat-row__copy p { color:rgb(var(--color-gray-600)); line-height:1.65; font-size:.9375rem; }
html.cgi-dark .cat-row__copy p { color:rgb(var(--color-gray-400)); }
.cat-row__stage { position:relative; aspect-ratio:4/3; border-radius:1.25rem; overflow:hidden; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.08); }
.cat-row__stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:translate3d(100%, 0, 0); transition:transform .55s cubic-bezier(.4,0,.2,1); box-sizing:border-box; will-change:transform; }
.cat-row__stage img.is-active { transform:translate3d(0, 0, 0); }
.cat-row__stage > .ph { position:absolute; inset:0; min-height:100%; height:100%; border-radius:0; opacity:0; z-index:1; transition:opacity .55s ease; }
.cat-row__stage > .ph.is-active { opacity:1; z-index:2; }
.cat-row__dots { position:absolute; bottom:.875rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; padding:.375rem .625rem; background:rgba(0,0,0,.4); backdrop-filter:blur(8px); border-radius:9999px; z-index:2; }
.cat-row__dot { width:.5rem; height:.5rem; border-radius:50%; background:rgba(255,255,255,.45); transition:background .2s, transform .2s; border:none; padding:0; cursor:pointer; font:inherit; }
.cat-row__dot:hover { background:rgba(255,255,255,.85); transform:scale(1.2); }
.cat-row__dot.is-active { background:#fff; }
.cat-row__dot:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* ── Capability cards ────────────────────────────────────────────── */
.cap-card { padding:1.5rem; border-radius:1rem; background:rgb(var(--color-gray-50)); border:1px solid rgb(var(--color-gray-200)); display:flex; gap:1rem; }
html.cgi-dark .cap-card { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-800)); }
.cap-card__icon { flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:.625rem; background:rgb(var(--color-primary-50)); display:flex; align-items:center; justify-content:center; }
html.cgi-dark .cap-card__icon { background:rgba(14,165,233,.15); }
.cap-card h3 { font-weight:700; font-size:1rem; color:rgb(var(--color-gray-900)); margin-bottom:.25rem; }
html.cgi-dark .cap-card h3 { color:rgb(var(--color-gray-100)); }
.cap-card p { font-size:.875rem; color:rgb(var(--color-gray-500)); line-height:1.6; }
html.cgi-dark .cap-card p { color:rgb(var(--color-gray-400)); }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.metric-chip { flex:1; min-width:9rem; padding:1.25rem 1.5rem; border-radius:1rem; background:rgb(var(--color-primary-50)); border:1px solid rgb(var(--color-primary-100)); }
html.cgi-dark .metric-chip { background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.25); }
.metric-chip__value { font-family:var(--font-display); font-size:1.875rem; font-weight:700; color:rgb(var(--color-primary-600)); line-height:1; }
html.cgi-dark .metric-chip__value { color:rgb(var(--color-primary-300)); }
.metric-chip__label { font-size:.8125rem; color:rgb(var(--color-gray-600)); margin-top:.375rem; }
html.cgi-dark .metric-chip__label { color:rgb(var(--color-gray-400)); }

/* ── Workflow image ──────────────────────────────────────────────── */
.workflow-figure { height:100%; }
.workflow-figure figure { display:flex; flex-direction:column; height:100%; margin:0; }
.workflow-figure__media { flex:1 1 auto; display:flex; min-height:18rem; }
.workflow-figure .ph { height:100%; min-height:18rem; aspect-ratio:auto; border-radius:1.25rem; }

/* ── Case study featured block ───────────────────────────────────── */
.case-feature { display:grid; grid-template-columns:1fr; gap:0; border-radius:1.5rem; overflow:hidden; background:rgb(var(--color-gray-900)); box-shadow:0 20px 60px rgba(0,0,0,.18); }
@media (min-width:1024px) { .case-feature { grid-template-columns:1.1fr 1fr; } }
.case-feature__media { position:relative; min-height:18rem; background:#0f172a; }
.case-feature__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.case-feature__body { padding:2.5rem; color:#fff; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:1024px) { .case-feature__body { padding:3rem 3.25rem; } }
.case-feature__eyebrow { font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--color-primary-400)); margin-bottom:1rem; }
.case-feature__title { font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,2.125rem); font-weight:700; line-height:1.2; margin-bottom:1rem; letter-spacing:-.01em; }
.case-feature__text { font-size:.9375rem; color:rgba(255,255,255,.72); line-height:1.7; margin-bottom:1.5rem; }
.case-feature__chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
.case-chip { font-size:.75rem; font-weight:600; padding:.4rem .85rem; border-radius:9999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.85); }
.case-feature__cta { display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; padding:.75rem 1.5rem; border-radius:.75rem; background:rgb(var(--color-primary-500)); color:#fff; font-weight:700; font-size:.9375rem; text-decoration:none; transition:background .15s, transform .15s; }
.case-feature__cta:hover { background:rgb(var(--color-primary-400)); transform:translateY(-1px); }
.case-feature__cta svg { width:16px; height:16px; }

/* ── Calendar scheduler ──────────────────────────────────────────── */
.step-dots { display:flex; gap:.5rem; align-items:center; }
.step-dot { width:.625rem; height:.625rem; border-radius:50%; background:#e5e7eb; transition:background .2s; }
.step-dot.active { background:rgb(var(--color-primary-500)); }
.sched-card { background:#fff; border-radius:1.5rem; padding:2rem; box-shadow:0 8px 48px rgba(0,0,0,.2); }
.sched-step { display:none; }
.sched-step.active { display:block; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-month-label { font-size:.9375rem; font-weight:700; color:#111; }
.cal-nav { width:2rem; height:2rem; border-radius:.5rem; border:1px solid #e5e7eb; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#555; transition:background .15s; flex-shrink:0; }
.cal-nav:hover { background:#f3f4f6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; }
.cal-dow { text-align:center; font-size:.625rem; font-weight:700; color:#9ca3af; text-transform:uppercase; padding:.25rem 0; letter-spacing:.04em; }
.cal-day { text-align:center; padding:.5rem .125rem; border-radius:.4375rem; font-size:.8125rem; cursor:pointer; transition:background .12s,color .12s; color:#111; background:transparent; border:none; font-family:inherit; width:100%; }
.cal-day:hover:not(:disabled) { background:rgb(var(--color-primary-50)); color:rgb(var(--color-primary-600)); }
.cal-day.selected { background:rgb(var(--color-primary-500)); color:#fff; font-weight:700; }
.cal-day.today:not(.selected):not(:disabled) { font-weight:700; box-shadow:inset 0 0 0 1.5px rgb(var(--color-primary-400)); color:rgb(var(--color-primary-600)); }
.cal-day:disabled { color:#d1d5db; cursor:not-allowed; background:transparent; }
.cal-day.cal-empty { cursor:default; pointer-events:none; }
.time-slots-wrap { margin-top:1.125rem; border-top:1px solid #f3f4f6; padding-top:1.125rem; }
.time-slots-label { font-size:.8125rem; font-weight:600; color:#374151; margin-bottom:.5rem; display:flex; align-items:baseline; gap:.375rem; flex-wrap:wrap; }
.time-slots-label span { font-weight:400; color:#9ca3af; font-size:.75rem; }
.time-slots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; }
.time-slot { padding:.5rem .125rem; border-radius:.4375rem; border:1px solid #e5e7eb; background:#fff; font-size:.75rem; text-align:center; cursor:pointer; transition:all .12s; color:#374151; font-family:inherit; line-height:1.3; }
.time-slot:hover { border-color:rgb(var(--color-primary-400)); color:rgb(var(--color-primary-600)); background:rgb(var(--color-primary-50)); }
.time-slot.selected { background:rgb(var(--color-primary-500)); border-color:rgb(var(--color-primary-500)); color:#fff; font-weight:600; }
.sched-summary { display:flex; align-items:flex-start; gap:.625rem; background:rgb(var(--color-primary-50)); border:1px solid rgb(var(--color-primary-100)); border-radius:.75rem; padding:.75rem 1rem; margin-bottom:1.25rem; font-size:.875rem; color:rgb(var(--color-primary-700)); line-height:1.5; }
.sched-field { display:flex; flex-direction:column; gap:.3rem; }
.sched-field label { font-size:.8125rem; font-weight:600; color:#374151; }
.sched-field input,.sched-field select,.sched-field textarea { width:100%; padding:.5625rem .8125rem; border-radius:.5625rem; border:1px solid #d1d5db; font-size:.9375rem; font-family:inherit; background:#fff; color:#111; transition:border-color .15s; outline:none; box-sizing:border-box; }
.sched-field input:focus,.sched-field select:focus,.sched-field textarea:focus { border-color:rgb(var(--color-primary-500)); box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.sched-field input::placeholder,.sched-field textarea::placeholder { color:#9ca3af; }
.sched-err { font-size:.8125rem; color:#ef4444; margin-top:.2rem; display:none; }
.sched-err.show { display:block; }
#sched-btn-next:disabled { opacity:.45; cursor:not-allowed; }

/* ── AR modal ────────────────────────────────────────────────────── */
.ar-modal { position:fixed; inset:0; z-index:10002; display:none; align-items:center; justify-content:center; padding:1rem; }
.ar-modal.is-open { display:flex; }
.ar-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); }
.ar-modal__dialog { position:relative; background:#0a0a0a; border-radius:1rem; width:min(96vw, 900px); height:min(92vh, 700px); overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.ar-modal__close { position:absolute; top:.625rem; right:.625rem; width:2.5rem; height:2.5rem; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; transition:background .15s; backdrop-filter:blur(8px); }
.ar-modal__close:hover { background:rgba(255,255,255,.3); }
.ar-modal__iframe { flex:1; width:100%; height:100%; border:none; display:block; background:#0a0a0a; }
.ar-modal__ph { flex:1; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-family:var(--font-display); font-size:.875rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:2rem; }
@media (max-width:640px) { .ar-modal { padding:.5rem; } .ar-modal__dialog { width:100%; height:100%; max-height:none; border-radius:.5rem; } }

/* ── Section vertical rhythm ─────────────────────────────────────── */
main > section.py-24 { padding-top: 4.5rem; padding-bottom: 2.75rem; }
@media (min-width: 1024px) { main > section.py-24.lg\:py-32 { padding-top: 6rem; padding-bottom: 3.75rem; } }

/* ── Margin utilities ─────────────────────────────────────────────── */
.mb-4 { margin-bottom:1rem; } .mb-6 { margin-bottom:1.5rem; } .mb-8 { margin-bottom:2rem; }
.mb-10 { margin-bottom:2.5rem; } .mb-12 { margin-bottom:3rem; } .mb-16 { margin-bottom:4rem; } .mb-20 { margin-bottom:5rem; }
.mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.75rem; } .mt-4 { margin-top:1rem; } .mt-6 { margin-top:1.5rem; }
.mt-8 { margin-top:2rem; } .mt-10 { margin-top:2.5rem; } .mt-12 { margin-top:3rem; }
.aspect-video { aspect-ratio:16/9; } .aspect-square { aspect-ratio:1/1; }

/* ── Dark mode helpers ───────────────────────────────────────────── */
html.cgi-dark .text-gray-900 { color: rgb(var(--color-gray-100)) !important; }
html.cgi-dark .text-gray-800 { color: rgb(var(--color-gray-200)) !important; }
@media (max-width: 1023px) {
  header.mobile-menu-open { background: rgba(255,255,255,.97) !important; backdrop-filter: blur(12px) !important; box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; }
  html.cgi-dark header.mobile-menu-open { background: rgba(10,10,10,.97) !important; }
  body:not(.hero-light) .header-base.mobile-menu-open nav a:not(.bg-primary-500):not(.bg-primary-600),
  body:not(.hero-light) .header-base.mobile-menu-open nav button:not(#theme-toggle),
  body:not(.hero-light) .header-base.mobile-menu-open #theme-toggle { color: rgb(var(--color-gray-700)) !important; }
  body:not(.hero-light) .header-base.mobile-menu-open nav a:not(.bg-primary-500):not(.bg-primary-600):hover,
  body:not(.hero-light) .header-base.mobile-menu-open nav button:not(#theme-toggle):hover,
  body:not(.hero-light) .header-base.mobile-menu-open #theme-toggle:hover { color: rgb(var(--color-gray-900)) !important; background-color: rgb(var(--color-gray-100)) !important; }
  html.cgi-dark body:not(.hero-light) .header-base.mobile-menu-open nav a:not(.bg-primary-500):not(.bg-primary-600),
  html.cgi-dark body:not(.hero-light) .header-base.mobile-menu-open nav button:not(#theme-toggle),
  html.cgi-dark body:not(.hero-light) .header-base.mobile-menu-open #theme-toggle { color: rgb(var(--color-gray-200)) !important; }
}

/* ---- fashion (page 13295) prod-parity: the captured prod page renders every light-section
   heading as Tailwind text-5xl font-bold gray-900 (48/700/#111827), not the design-system
   default (.cgi-sec-h md = 36/600 slate). Push the converted section-array to match prod. ---- */
.page-id-13295 .cgi-lp-h-md,.page-id-13295 .cgi-lp-h-lg{font-size:3rem!important;line-height:1.05!important;font-weight:700!important;color:rgb(17,24,39)!important}
html.cgi-dark .page-id-13295 :is(.cgi-lp-h-md,.cgi-lp-h-lg){color:rgb(243,244,246)!important}
/* remaining fashion heading colors → prod gray-900 (reviews-layout sections + FAQ) */
.page-id-13295 .cgi-rv-heading,.page-id-13295 .cgi-bl-faq-h{color:rgb(17,24,39)!important}
html.cgi-dark .page-id-13295 :is(.cgi-rv-heading,.cgi-bl-faq-h){color:rgb(243,244,246)!important}
/* Amazon-PDP comparison card subtitles: prod is gray-700, not gray-900 */
.page-id-13295 .amz-side__title{color:rgb(55,65,81)!important}

/* hero sub rhythm (match toys/healthcare; beats theme p-reset) */
.hero-bleed__sub{margin:1.25rem 0 2rem!important}

/* CTA sections: symmetric breathing room below the dark card (visual 160px like above) */
:is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-cta{padding-bottom:8rem}
.entry-content-wrap .cgi-iap + .cgi-csec.cgi-csec-cta, .entry-content .cgi-iap + .cgi-csec.cgi-csec-cta{padding-top:8rem}