/* FluxSales site skin: gives existing pages the homepage's look without touching their
   markup, copy, or scripts. Each page keeps its own stylesheet and loads this one last.
   It works by re-pointing the design variables each page family already uses, then
   fixing the few places where a colour or font was written out by hand.
   Families: (A) landing/styles.css — pricing, casos, about · (B) planes/_shared.css and
   the /que-hacemos inline styles — plan pages, gracias, explainer · (D) /demo. */
:root {
  --fx-ink:#171717; --fx-black:#090909; --fx-stage:#0b0b0b; --fx-paper:#fff; --fx-wash:#f4f4f4;
  --fx-line:#dedede; --fx-muted:#636363; --fx-soft:#bdbdbd;
  --fx-font:"DM Sans","Inter",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* A */
  --green:var(--fx-soft); --green-ink:var(--fx-ink); --green-deep:var(--fx-ink); --green-wash:#ececec; --green-100:var(--fx-wash);
  --tomato:var(--fx-ink); --tomato-ink:var(--fx-ink);
  --cream:var(--fx-paper); --cream-2:var(--fx-wash); --cream-3:#ececec;
  --ink:var(--fx-ink); --ink-soft:#1f1f1f; --ink-muted:var(--fx-muted); --rule:var(--fx-line);
  --serif:var(--fx-font); --sans:var(--fx-font); --mono:var(--fx-font);
  --radius:4px; --radius-lg:6px;
  /* B */
  --navy:var(--fx-stage); --blue:var(--fx-ink); --blue-soft:var(--fx-soft); --green-deep:var(--fx-ink);
  --bg:var(--fx-paper); --card:var(--fx-paper); --border:var(--fx-line); --muted:var(--fx-muted);
  --shadow:none;
  /* D */
  --diag-navy:var(--fx-ink); --diag-blue:var(--fx-ink); --diag-blue-hover:#000; --diag-bg:var(--fx-paper);
  --diag-card:var(--fx-paper); --diag-border:var(--fx-line); --diag-muted:var(--fx-muted); --diag-subtle:var(--fx-muted); --diag-rule:#ececec;
}
body { font-family:var(--fx-font); color:var(--fx-ink); }
h1, h2, h3, h4, .display { font-family:var(--fx-font); font-weight:500; letter-spacing:-.04em; }
h1, h2, h3, h4, blockquote, button, input, select, textarea { font-family:var(--fx-font) !important; }
h1, h2, h3, h4 { font-weight:500 !important; }

/* ---- A · landing/styles.css pages: pricing, casos, about ------------------------------ */
header.nav { background:var(--fx-black); border-bottom:1px solid #ffffff20; }
header.nav .logo, header.nav .logo-mark { color:#fff; }
header.nav .nav-links a { color:#fff; opacity:1; }
header.nav .nav-links a:hover { color:#fff; opacity:.72; }
header.nav .lang-toggle { background:transparent; border-color:#ffffff45; }
header.nav .lang-toggle button { color:#cfcfcf; }
header.nav .lang-toggle button.on { background:#fff; color:#111; }
header.nav .btn-primary { background:transparent; color:#fff; border:1px solid #ffffff60; }
header.nav .btn-primary:hover { background:#fff; color:#111; }
.btn { border-radius:3px; font-weight:500; }
.btn-primary:hover, .btn-green:hover, .btn-secondary:hover { transform:none; }
.btn-primary:hover { background:#000; }
.display { letter-spacing:-.045em; line-height:1.06; }
.display .accent { font-style:normal; color:#8a8a8a; }
.eyebrow { font-weight:500; letter-spacing:.15em; color:var(--fx-muted); }
.plan .plan-pop-badge { background:#fff; color:#111; border:1px solid #111; border-radius:2px; }
.plan.pop .plan-name { color:#cfcfcf; }
.plan.pop .btn-primary, .plan.pop .btn-green { background:#fff; color:#111; }
.plan-price { letter-spacing:-.05em; }
footer:not([style]) { background:var(--fx-black); color:#eee; border-top:1px solid #333; }
footer .logo, footer .logo-mark, .foot-col h4 { color:#fff; }
.foot-col li, .foot-col a, .foot-brand p, .foot-legal, .foot-legal a { color:#aaa; }
.foot-col li:hover { color:#fff; }
.foot-legal { border-color:#333; }
.caso-card { border-radius:4px; border-color:var(--fx-line); }
.caso-card .tag, .caso-card .read, .cs-snapshot .k { font-family:var(--fx-font); color:var(--fx-muted); letter-spacing:.12em; }
.caso-card .read { color:var(--fx-ink); letter-spacing:0; }
.cs-metric { border-radius:4px; background:var(--fx-wash); border-color:var(--fx-line); }
.cs-metric .big { font-family:var(--fx-font); color:var(--fx-ink); letter-spacing:-.04em; }
.cs-quote { border-radius:4px; background:var(--fx-stage); color:#fff; }
.cs-video video { border-radius:6px; }
.ab-value { border-radius:4px; background:var(--fx-wash); border-color:var(--fx-line); }

/* ---- B · plan pages, gracias, and the /que-hacemos explainer -------------------------- */
.hero-eyebrow, .plan-eyebrow, .section-kicker { font-weight:500; letter-spacing:.15em; }
.section-kicker { color:var(--fx-muted); }
.btn--primary:hover { background:#000; }
.hero .btn--primary, .close-band .btn--primary { background:#fff; color:#111; }
.hero .btn--primary:hover, .close-band .btn--primary:hover { background:#e6e6e6; }
.nav-cta { background:transparent; border:1px solid #ffffff60; border-radius:3px; font-weight:500; }
.nav-cta:hover { background:#fff; color:#111 !important; }
.buy-card { border-radius:6px; box-shadow:0 24px 60px #00000012; }
.price { font-weight:500; letter-spacing:-.05em; }
.feat, .fit, .prob, .layer, .plat, .feature-quote, .vtesti, .review, .testi, .step, .steps, .fm { border-radius:4px; }
.feat .ic, .plat .ic { background:var(--fx-wash); border-radius:3px; }
.feat strong, .bucket-name, .layer-punch, .review-name { font-weight:500; }
.prob { border-left-color:var(--fx-ink); }
.layer--two li::before, .fm .num { color:#fff; }
.fit li::before { color:var(--fx-ink); }
.testi-metric { color:var(--fx-ink); background:var(--fx-wash); border-color:var(--fx-line); border-radius:2px; }
.review mark { background:#e9e9e9; }
.faq-item a, .stars-line a { color:var(--fx-ink); text-decoration:underline; text-underline-offset:3px; }
.faq-item p, .layer--one p, .layer--one li, .fit li, .vtesti-caption, .steps li { color:#444; }
.vsl-frame { border-radius:8px; }
.vtesti video, .vtesti-yt { border-radius:3px; }
.footer { background:var(--fx-black); }
.ok-badge { background:var(--fx-wash); color:var(--fx-ink); }

/* ---- D · /demo -------------------------------------------------------------------------- */
.dx-nav { background:var(--fx-black); border-bottom-color:#ffffff20; }
.dx-logo { color:#fff; font-weight:500; }
.dx-hero-badge { color:var(--fx-ink); background:var(--fx-wash); border-color:var(--fx-line); border-radius:2px; letter-spacing:.04em; }
.dx-card { border-radius:6px; box-shadow:0 24px 60px #00000010; }
.dx-btn { border-radius:3px; font-weight:500; }
.dx-testi, .dx-ac-input, .dx-field select, .dx-field input { border-radius:4px; }
.dx-testi-metric { color:var(--fx-ink); background:var(--fx-wash); border-color:var(--fx-line); border-radius:2px; }
.dx-bk-date, .dx-bk-slot { border-radius:3px; }
.dx-bk-date.on { box-shadow:none; }

/* ---- A · leftovers written by hand in landing/styles.css ----------------------------- */
.endcta { background:var(--fx-black); color:#fff; }
.endcta h2 { color:#fff; }
.endcta p { color:#cfcfcf; }
.endcta .eyebrow { color:#bdbdbd; }
.endcta .btn-primary { background:#fff; color:#111; }
.endcta .btn-primary:hover { background:#e6e6e6; }
.endcta .btn-secondary { border-color:#ffffff70; color:#fff; }
.endcta .btn-secondary:hover { background:#fff; color:#111; }
.ii-check { background:var(--fx-ink); color:#fff; }
.t-card blockquote::before, .t-card blockquote::after { color:var(--fx-muted); }
/* small-screen bug that predates the skin: testimonial cards were wider than the phone */
.testi, .vtesti, .review { min-width:0; }
.pricing-value-anchor, .assurance-text { color:var(--fx-ink); }
.assurance-guarantee { border-radius:4px; background:#fff; border-color:var(--fx-ink); }
.assurance-badge { color:var(--fx-ink); }
@media (max-width:480px) {
  /* DM Sans runs wider than the old serif: keep the header on one line. */
  header.nav .logo { font-size:18px; }
  header.nav .nav-right { gap:8px; }
  header.nav .btn { padding:9px 12px; font-size:13px; }
}

/* ======================================================================================
   Motion and bolder layouts (skin.js adds the fx-* classes; without it nothing is hidden)
   ====================================================================================== */
.fx-motion .fx-reveal { opacity:0; transform:translateY(34px); transition:opacity .7s ease var(--fx-delay,0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--fx-delay,0ms); }
.fx-motion .fx-reveal.fx-in { opacity:1; transform:none; }
.fx-progress { position:fixed; left:0; top:0; z-index:200; width:100%; height:2px; background:#fff; mix-blend-mode:difference; transform:scaleX(0); transform-origin:left; pointer-events:none; }
header.nav { transition:background .3s ease, box-shadow .3s ease; }
.fx-scrolled header.nav { background:#090909f2; box-shadow:0 10px 30px #00000040; }
html { overflow-x:clip; }

/* ---- Pricing: a dark stage, oversized headline, plan panels (reference: shopify.com/mx/precios) */
.pricing { background:var(--fx-stage); color:#fff; padding-top:110px; }
.pricing .eyebrow { color:#bdbdbd; }
.pricing-head h2, .pricing-head h1 { color:#fff; font-size:clamp(44px,6.2vw,92px); max-width:none; line-height:1.02; }
.pricing-head .lead { color:#cfcfcf; }
.pricing-value-anchor { color:#bdbdbd; opacity:1; }
.plans { gap:14px; }
.plan, .plan.pop { background:#141414; border:1px solid #2c2c2c; color:#fff; border-radius:8px; transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s; }
.plan:hover { transform:translateY(-6px); border-color:#5a5a5a; background:#181818; }
.plan.pop { border-color:#fff; }
.plan-name, .plan.pop .plan-name { color:#fff; font-size:22px; letter-spacing:-.03em; text-transform:none; font-weight:500; }
.plan-tag, .plan.pop .plan-tag { color:#b4b4b4; }
.plan-price { color:#fff; }
.plan-price small, .plan-fee, .plan-taxes { color:#9a9a9a; }
.plan-feats, .plan-feats li { border-color:#2c2c2c; }
.plan-feats li { color:#e6e6e6; }
.plan-feats li::before { background:#8a8a8a; }
.plan .btn, .plan.pop .btn-green { background:transparent; color:#fff; border:1px solid #ffffff80; }
.plan .btn:hover { background:#fff; color:#111; }
.plan.pop .btn, .plan.pop .btn-primary { background:#fff; color:#111; border-color:#fff; }
.plan.pop .btn:hover { background:#dcdcdc; }
.addons-title, .plans-multi-note, .assurance-scarcity { color:#9a9a9a; }
.addon { background:#141414; border:1px solid #2c2c2c; border-radius:8px; transition:border-color .3s, transform .45s cubic-bezier(.16,1,.3,1); }
.addon:hover { border-color:#5a5a5a; transform:translateY(-4px); }
.addon-name { color:#fff; }
.addon-price { color:#fff; }
.addon-desc, .addon-price small { color:#b4b4b4; }
.assurance-guarantee { background:transparent; border-color:#ffffff70; }
.assurance-badge, .assurance-text { color:#fff; }
.included { border-top-color:#2c2c2c; }
.included-title { color:#fff; font-size:clamp(28px,3vw,44px); letter-spacing:-.04em; }
.included-grid { grid-template-columns:repeat(3,1fr); gap:12px; max-width:none; }
.included-item { padding:22px; background:#141414; border:1px solid #2c2c2c; border-radius:8px; transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .3s; }
.included-item:hover { transform:translateY(-4px); border-color:#5a5a5a; }
.ii-check { background:#fff; color:#111; }
.ii-t { color:#fff; font-weight:500; font-size:16px; }
.ii-d { color:#b4b4b4; }
.faq { background:#fff; }
.endcta { padding:140px 0; }
.endcta h2 { font-size:clamp(44px,6vw,88px); }

/* ---- Case studies index: large story cards with the owner's photo (reference: owner.com/case-studies) */
.casos-wrap { max-width:1180px; }
.casos-hero { padding:96px 0 40px; }
.casos-hero h1 { font-size:clamp(46px,6.4vw,96px); line-height:1.02; }
.casos-grid { grid-template-columns:1fr; gap:22px; padding-bottom:110px; }
.caso-card { display:grid; grid-template-columns:minmax(240px,34%) 1fr; grid-template-rows:auto auto 1fr auto; column-gap:0; row-gap:14px; padding:0; min-height:430px; overflow:hidden; background:var(--fx-wash); border:0; border-radius:10px; }
.caso-card::before { content:""; grid-column:1; grid-row:1 / -1; background:#111 center 22% / cover no-repeat; transition:background-size .9s cubic-bezier(.16,1,.3,1), filter .5s; background-size:102%; }
.caso-card[href$="brooklyn-burgers"]::before { background-image:url(/casos/media/brooklyn-axel-poster.jpg); }
.caso-card[href$="codigo-burger"]::before { background-image:url(/casos/media/codigo-marco-poster.jpg); }
.caso-card:hover { transform:none; box-shadow:0 30px 70px #00000014; }
.caso-card:hover::before { background-size:110%; }
.caso-card > * { grid-column:2; margin-inline:44px; }
.caso-card .tag { margin-top:44px; font-size:11px; }
.caso-card h3 { font-size:clamp(28px,3vw,42px); line-height:1.1; letter-spacing:-.04em; max-width:18ch; }
.caso-card p { font-size:16.5px; line-height:1.6; max-width:52ch; opacity:1; color:#444; }
.caso-card .read { margin-bottom:34px; padding-top:22px; border-top:1px solid #d0d0d0; font-weight:500; display:flex; justify-content:space-between; }
.caso-card .read::after { content:"↗"; transition:transform .3s; }
.caso-card:hover .read::after { transform:translate(3px,-3px); }

/* ---- Case study page: a dark full-width opening, figures as a plain row, the story below */
.cs-hero { position:relative; padding:110px 0 54px; color:#fff; }
.cs-hero::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--fx-stage); }
.cs-hero .eyebrow { color:#bdbdbd; }
.cs-hero h1 { color:#fff; font-size:clamp(44px,5.6vw,80px); line-height:1.03; }
.cs-hero .lead { color:#cfcfcf; font-size:19px; }
.cs-snapshot { border-color:#333; margin-top:40px; }
.cs-snapshot .k { color:#9a9a9a; }
.cs-results { gap:0; margin:26px 0; border-top:1px solid var(--fx-line); border-bottom:1px solid var(--fx-line); }
.cs-metric { background:none; border:0; border-left:1px solid var(--fx-line); border-radius:0; text-align:left; padding:30px 28px; }
.cs-metric:first-child { border-left:0; padding-left:0; }
.cs-metric .big { font-size:clamp(40px,4.6vw,64px); letter-spacing:-.05em; }
.cs-metric .lbl { opacity:1; color:var(--fx-muted); margin-top:12px; }
.cs-section { padding:44px 0; }
.cs-section h2 { font-size:clamp(28px,3vw,40px); letter-spacing:-.04em; }
.cs-quote { padding:52px 48px; }
.cs-quote blockquote { font-size:clamp(24px,2.6vw,34px); line-height:1.28; letter-spacing:-.03em; }
.cs-video video { max-width:420px; box-shadow:0 40px 80px #00000030; }
.cs-cta { padding:70px 0 120px; }
.cs-cta h2 { font-size:clamp(38px,4.6vw,64px); }

/* ---- About: the same wide opening */
.ab-hero h1, .ab-wrap h1 { font-size:clamp(46px,6vw,92px); line-height:1.03; }
.ab-value { transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .3s; }
.ab-value:hover { transform:translateY(-4px); border-color:#b5b5b5; }

/* ---- Plan pages and the explainer: a taller opening and cards that lift */
.hero h1 { font-size:clamp(40px,5.6vw,76px); line-height:1.05; letter-spacing:-.045em; }
.hero-inner { padding-top:76px; padding-bottom:70px; }
.hero-sub { font-size:19px; }
.buy-card { position:relative; margin-top:-96px; }
.section-title { font-size:clamp(28px,3.2vw,44px); letter-spacing:-.04em; }
.feat, .fit, .prob, .plat, .vtesti, .review, .testi, .step { transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .45s; }
.feat:hover, .fit:hover, .prob:hover, .plat:hover, .vtesti:hover, .review:hover, .testi:hover, .step:hover { transform:translateY(-4px); border-color:#b5b5b5; box-shadow:0 22px 50px #0000000f; }
.close-band { padding:110px 24px 120px; }
.close-band h2 { font-size:clamp(34px,4.4vw,60px); }
.feature-quote { padding:60px 56px; }
.feature-quote blockquote { font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; }

@media (max-width:900px) {
  .included-grid { grid-template-columns:1fr 1fr; }
  .caso-card { grid-template-columns:1fr; grid-template-rows:260px auto auto 1fr auto; min-height:0; }
  .caso-card::before { grid-row:1; }
  .caso-card > * { grid-column:1; margin-inline:24px; }
  .caso-card .tag { margin-top:10px; }
  .caso-card .read { margin-bottom:26px; }
  .cs-results { border:0; }
  .cs-metric, .cs-metric:first-child { border-left:0; border-top:1px solid var(--fx-line); padding:22px 0; }
  .cs-hero { padding:70px 0 40px; }
  .cs-quote { padding:34px 26px; }
  .buy-card { margin-top:-56px; }
  .hero-inner { padding-bottom:60px; }
  .feature-quote { padding:36px 26px; }
}
@media (max-width:560px) {
  .included-grid { grid-template-columns:1fr; }
  .pricing { padding-top:70px; }
  .endcta { padding:90px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .plan, .addon, .included-item, .caso-card::before, .feat, .fit, .prob, .plat, .vtesti, .review, .testi, .step, .ab-value { transition:none; }
  .plan:hover, .addon:hover, .included-item:hover, .feat:hover, .fit:hover, .prob:hover, .plat:hover, .vtesti:hover, .review:hover, .testi:hover, .step:hover, .ab-value:hover { transform:none; }
}

/* fixes after review */
main:has(> .pricing) { padding-top:0 !important; margin-top:0 !important; }
.caso-card { grid-template-columns:300px 1fr; }
.caso-card::before { background-size:cover; background-position:center 18%; }
.caso-card:hover::before { background-size:cover; filter:brightness(1.06); }
.caso-card > .tag, .caso-card > h3, .caso-card > p, .caso-card > .read { margin-left:48px; margin-right:48px; }
.caso-card > .tag { margin-top:48px; }
.caso-card > .read { margin-bottom:36px; }
.cs-metric .big { font-size:clamp(34px,3.6vw,52px); white-space:nowrap; }
@media (max-width:900px) {
  .caso-card { grid-template-columns:1fr; }
  .caso-card::before { background-position:center 24%; }
  .caso-card > .tag, .caso-card > h3, .caso-card > p, .caso-card > .read { margin-left:24px; margin-right:24px; }
  .caso-card > .tag { margin-top:10px; }
  .caso-card > .read { margin-bottom:26px; }
}
.endcta .eyebrow { color:#bdbdbd !important; }
.endcta [style*="color"], .endcta small, .endcta .note { color:#cfcfcf !important; }
@media print { .fx-motion .fx-reveal { opacity:1; transform:none; } .fx-progress { height:0; } }

/* ---- wave-1 finish (second review, Nov 10) ------------------------------------------- */
/* Case cards: the posters are video frames with a caption and a call badge burned in.
   Show only the 8%–77% band of the frame so neither appears. One arrow, not two. */
.caso-card::before, .caso-card:hover::before { background-size:auto 145%; background-position:center 26%; }
.caso-card .read::after { content:none; }
@media (max-width:900px) {
  .caso-card { grid-template-columns:clamp(190px,34%,300px) 1fr; grid-template-rows:auto auto 1fr auto; min-height:400px; }
  .caso-card::before { grid-column:1; grid-row:1 / -1; }
  .caso-card > * { grid-column:2; }
  .caso-card > .tag { margin-top:32px; }
}
@media (max-width:560px) {
  .caso-card { grid-template-columns:1fr; grid-template-rows:auto auto auto 1fr auto; min-height:0; }
  .caso-card::before, .caso-card:hover::before { grid-column:1; grid-row:1; aspect-ratio:300 / 368; background-size:cover; }
  .caso-card > * { grid-column:1; }
  .caso-card > .tag { margin-top:10px; }
}
/* Pricing: ten included features sit as two full rows of five, not three rows and a stray. */
@media (min-width:1100px) {
  .included-grid { grid-template-columns:repeat(5,1fr); }
  .included-item { flex-direction:column; gap:18px; }
}
@media (min-width:901px) and (max-width:1099px) { .included-grid { grid-template-columns:1fr 1fr; } }
/* Explainer: its headline is long and shares the row with the video, so it runs smaller
   than the plan-page headlines and the buttons stay on the first screen. */
.hero-grid h1 { font-size:clamp(32px,3.9vw,56px); line-height:1.08; }
/* Emoji icons in feature cards follow the black-and-white palette. */
.feat .ic, .plat .ic { filter:grayscale(1); }
/* Short pages (thank-you): the footer sits at the bottom of the screen, no white strip under it. */
body:has(> .ok-wrap) { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body:has(> .ok-wrap) > .ok-wrap { flex:1 0 auto; width:100%; }
/* Footers that only carry the legal line (casos, about) do not need the tall column padding. */
footer:not(:has(.foot-col)) { padding-top:0; }
footer:not(:has(.foot-col)) .foot-legal { margin-top:0 !important; border-top:0 !important; }
@media (max-width:480px) {
  /* Pricing header on a phone: logo, language switch and button need air between them. */
  header.nav .nav-right { gap:6px; }
  header.nav .lang-toggle button { padding:4px 6px; }
  header.nav .btn { padding:9px 10px; }
}

/* ======================================================================================
   Art layer (third review, Nov 10). The pages read as abstract in black and gray, so
   skin.js adds real material the homepage already uses: client logos, photos of their
   restaurants, screens of their live ordering channels, and their own words. Colour comes
   back through the brand greens. The page's own markup and copy stay untouched.
   ====================================================================================== */
:root { --fx-green:#57b990; --fx-forest:#2d8659; --fx-nopal:#1f5142; --fx-mint:#ecf6f0; --fx-mint-2:#d5ebe0; }
.fx-wrap { max-width:1240px; margin:0 auto; padding:0 24px; }
.fx-kicker { margin:0; font:500 11px/1.4 var(--fx-font); letter-spacing:.16em; text-transform:uppercase; color:var(--fx-muted); }
.fx-art h2 { font-family:var(--fx-font); font-weight:500; white-space:pre-line; }

/* Client logos on the dark stage */
.fx-logos { margin:46px auto 0; text-align:center; }
.fx-logos .fx-kicker { color:#9a9a9a; }
.fx-logos ul { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.fx-logos li { height:68px; min-width:112px; padding:10px 18px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.fx-logos img { height:46px; width:auto; max-width:128px; object-fit:contain; display:block; }

/* Green band: phones showing each client's live channel */
.fx-band { position:relative; overflow:hidden; padding:112px 0 120px; color:#fff; background:radial-gradient(110% 80% at 88% 0%, #86e0b4 0%, #86e0b400 58%), linear-gradient(158deg, var(--fx-nopal) 0%, var(--fx-forest) 46%, var(--fx-green) 100%); }
.fx-band::before { content:""; position:absolute; right:-18vw; top:-46vw; width:92vw; aspect-ratio:1; border-radius:50%; border:1px solid #ffffff30; box-shadow:0 0 0 7vw #ffffff0b, 0 0 0 14vw #ffffff09, 0 0 0 21vw #ffffff07; pointer-events:none; }
.fx-band .fx-wrap { position:relative; }
.fx-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.fx-band .fx-kicker { color:var(--fx-mint-2); }
.fx-band h2 { margin:16px 0 0; color:#fff; font-size:clamp(38px,5vw,74px); line-height:1.03; letter-spacing:-.045em; }
.fx-lead { margin:0; max-width:38ch; color:#eaf7f0; font-size:17px; line-height:1.55; }
.fx-phones { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:64px; align-items:start; }
.fx-phone { margin:0; width:100%; max-width:252px; justify-self:center; }
.fx-phone:nth-child(even) { margin-top:60px; }
.fx-screen { aspect-ratio:780 / 1688; border:8px solid #0b0b0b; border-radius:38px; overflow:hidden; background:#000; box-shadow:0 44px 90px #00000050; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.fx-phone:hover .fx-screen { transform:translateY(-8px); }
.fx-screen img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.fx-phone figcaption { margin-top:18px; text-align:center; }
.fx-phone strong { display:block; font-weight:500; font-size:17px; letter-spacing:-.02em; }
.fx-phone span { font-size:13px; color:var(--fx-mint-2); }
.fx-note { margin:46px 0 0; font-size:13px; color:var(--fx-mint-2); }

/* Photo cards of client restaurants */
.fx-owners { padding:104px 0 44px; background:#fff; color:var(--fx-ink); }
.fx-owners h2 { margin:14px 0 0; font-size:clamp(34px,4.2vw,60px); line-height:1.05; letter-spacing:-.045em; }
.fx-rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:36px max(24px, calc((100vw - 1192px) / 2)) 28px; scrollbar-width:none; }
.fx-rail::-webkit-scrollbar { height:0; }
.fx-card { position:relative; flex:0 0 clamp(224px,21vw,288px); aspect-ratio:4 / 5; border-radius:18px; overflow:hidden; scroll-snap-align:start; background:#111; color:#fff; text-decoration:none; }
.fx-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.16,1,.3,1); }
.fx-card:hover img { transform:scale(1.05); }
.fx-card div { position:absolute; left:0; right:0; bottom:0; padding:70px 18px 16px; background:linear-gradient(#0000,#000000d0); }
.fx-card strong { display:block; font-weight:500; font-size:18px; letter-spacing:-.02em; }
.fx-card span { font-size:12.5px; color:#dedede; }

/* A client's own words, with their photo */
.fx-quote { padding:92px 0; background:var(--fx-mint); color:var(--fx-ink); }
.fx-quote .fx-wrap { display:grid; grid-template-columns:270px 1fr; gap:60px; align-items:center; }
.fx-quote img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:18px; display:block; }
.fx-quote .fx-kicker { color:var(--fx-forest); }
.fx-quote blockquote { margin:16px 0 0; font-size:clamp(28px,3.4vw,50px); line-height:1.13; letter-spacing:-.04em; font-weight:500; }
.fx-by { margin:22px 0 0; font-size:14px; color:#474747; }
.fx-quote a { display:inline-block; margin-top:24px; color:var(--fx-ink); font-weight:500; text-decoration:underline; text-underline-offset:4px; }

/* Brand green returns as the accent on pricing */
.plan.pop { border-color:var(--fx-green); }
.plan .plan-pop-badge { background:var(--fx-green); border-color:var(--fx-green); color:#0b0b0b; }
.plan.pop .btn, .plan.pop .btn-primary, .plan.pop .btn-green { background:var(--fx-green); border-color:var(--fx-green); color:#0b0b0b; }
.plan.pop .btn:hover { background:#86e0b4; border-color:#86e0b4; }
.plan-feats li::before, .ii-check { background:var(--fx-green); }
.ii-check { color:#0b0b0b; }
.assurance-guarantee { border-color:var(--fx-green); }
.assurance-badge { color:var(--fx-green); }
.fx-progress { background:var(--fx-green); mix-blend-mode:normal; }

@media (max-width:900px) {
  .fx-band { padding:78px 0 84px; }
  .fx-phones { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; margin:44px -24px 0; padding:0 24px 10px; scrollbar-width:none; }
  .fx-phones::-webkit-scrollbar { height:0; }
  .fx-phone { flex:0 0 62vw; max-width:250px; scroll-snap-align:center; }
  .fx-phone:nth-child(even) { margin-top:0; }
  .fx-owners { padding:72px 0 28px; }
  .fx-card { flex-basis:64vw; max-width:280px; }
  .fx-quote { padding:64px 0; }
  .fx-quote .fx-wrap { grid-template-columns:1fr; gap:28px; }
  .fx-quote img { max-width:190px; }
  .fx-logos li { height:56px; min-width:92px; padding:8px 12px; }
  .fx-logos img { height:38px; max-width:104px; }
}
@media (prefers-reduced-motion:reduce) { .fx-screen, .fx-card img { transition:none; } .fx-phone:hover .fx-screen, .fx-card:hover img { transform:none; } }
/* Logos drawn for dark backgrounds get a dark tile; the photo row starts at the page margin. */
.fx-logos li.fx-on-dark { background:#161616; box-shadow:inset 0 0 0 1px #3a3a3a; }
.fx-rail { scroll-padding-inline:max(24px, calc((100vw - 1192px) / 2)); }

/* ---- Art layer, the other nine pages (Nov 10) ----------------------------------------- */
/* Logos on a light page */
.fx-logos--light .fx-kicker { color:var(--fx-muted); }
.fx-logos--light li { box-shadow:inset 0 0 0 1px #e2e2e2; }
.wrap > .fx-logos--light { margin:40px auto 8px; }
.casos-hero .fx-logos { margin-top:40px; }
.hero .fx-logos { margin:44px 0 0; padding-bottom:56px; text-align:left; }
.hero .fx-logos ul { justify-content:flex-start; }
.dx-hero .fx-logos, .dx-testimonials + .fx-logos { margin-top:28px; text-align:left; }
.dx-testimonials + .fx-logos ul { justify-content:flex-start; gap:8px; }
.dx-testimonials + .fx-logos li { height:52px; min-width:84px; padding:8px 12px; }
.dx-testimonials + .fx-logos img { height:34px; max-width:96px; }

/* One client on a computer and a phone */
.fx-stage { position:relative; margin-top:60px; padding-right:8%; }
.fx-browser { border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 50px 100px #00000055; }
.fx-bar { display:flex; align-items:center; gap:6px; height:38px; padding:0 14px; background:#f4f4f4; border-bottom:1px solid #e2e2e2; }
.fx-bar i { width:9px; height:9px; border-radius:50%; background:#cfcfcf; }
.fx-bar span { margin:0 auto; padding-right:39px; font-size:12px; color:#666; }
.fx-browser img { width:100%; height:auto; display:block; }
.fx-stage .fx-screen { position:absolute; right:0; bottom:-40px; width:21%; min-width:150px; aspect-ratio:390 / 844; }
.fx-show { padding-bottom:104px; }
.fx-show .fx-note { margin-top:66px; }

/* Blocks placed inside a narrow page column still span the whole screen */
.ab-wrap > section.fx-art, .cs-wrap > section.fx-art { width:100vw; margin-left:calc(50% - 50vw); }
.cs-wrap > .fx-owners, .ab-wrap > .fx-owners { padding-top:70px; }

/* Case pages: the restaurant's photo beside the opening */
.fx-hero-photo { position:relative; width:min(100%,300px); aspect-ratio:4 / 5; margin:36px 0 0; border-radius:18px; overflow:hidden; background:#111; box-shadow:0 30px 70px #00000060; }
.fx-hero-photo > img { width:100%; height:100%; object-fit:cover; object-position:center 24%; display:block; }
.fx-chip { position:absolute; left:12px; bottom:12px; width:58px; height:58px; padding:6px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; }
.fx-chip img { width:100%; height:100%; object-fit:contain; display:block; }
@media (min-width:1440px) { .fx-hero-photo { position:absolute; left:calc(100% + 40px); top:112px; width:250px; margin:0; } }

/* Plan pages: the quoted client's photo sits beside their words */
.fx-quote-photo { float:left; width:96px; height:96px; margin:2px 22px 6px 0; border-radius:12px; object-fit:cover; }

/* Colour returns to the plan pages, explainer, case pages, about, demo and thank-you */
.feat .ic, .plat .ic { filter:none; background:var(--fx-mint); }
.section-kicker, .eyebrow { color:var(--fx-forest); }
.hero-eyebrow, .plan-eyebrow { color:#86e0b4; }
.fit li::before { color:var(--fx-forest); }
.prob { border-left-color:var(--fx-green); }
.section blockquote[style] { border-left-color:var(--fx-green) !important; }
.cs-quote { background:linear-gradient(158deg, var(--fx-nopal) 0%, var(--fx-forest) 100%); }
.cs-metric .big { color:var(--fx-forest); }
.testi-metric, .dx-testi-metric, .dx-hero-badge { color:var(--fx-nopal); background:var(--fx-mint); border-color:var(--fx-mint-2); }
.ok-badge { background:var(--fx-mint); color:var(--fx-forest); }
.ab-value { background:var(--fx-mint); border-color:var(--fx-mint-2); }
/* About closes on the same dark band as the other pages */
.ab-cta { width:100vw; margin-left:calc(50% - 50vw); padding:110px 24px 120px; background:var(--fx-black); color:#fff; }
.ab-cta h2 { color:#fff; font-size:clamp(38px,5vw,72px); letter-spacing:-.045em; }
.ab-cta .btn-primary { background:#fff; color:#111; }
.ab-cta .btn-primary:hover { background:#e6e6e6; }
/* Thank-you: the photo row sits between the message and the footer */
body:has(> .ok-wrap) > .fx-owners { padding:64px 0 8px; }
body:has(> .ok-wrap) > .ok-wrap { flex:0 0 auto; }
body:has(> .ok-wrap) > .footer { margin-top:auto !important; }

@media (max-width:900px) {
  .fx-stage { padding-right:0; margin-top:44px; }
  .fx-stage .fx-screen { width:34%; min-width:112px; right:14px; bottom:-56px; border-width:5px; border-radius:22px; }
  .fx-show { padding-bottom:128px; }
  .fx-show .fx-note { margin-top:80px; }
  .hero .fx-logos { padding-bottom:40px; }
  .fx-quote-photo { width:72px; height:72px; margin-right:16px; }
  .ab-cta { padding:84px 24px 90px; }
}
/* fixes after looking at the nine pages */
.section + .fx-band { margin-top:72px; }
.wrap--narrow > .fx-logos--light ul, .dx-testimonials + .fx-logos ul { gap:8px; flex-wrap:nowrap; }
.wrap--narrow > .fx-logos--light li { height:56px; min-width:0; padding:8px 12px; }
.wrap--narrow > .fx-logos--light img { height:36px; max-width:100px; }
.dx-testimonials + .fx-logos li { height:46px; min-width:0; padding:6px 10px; }
.dx-testimonials + .fx-logos img { height:30px; max-width:78px; }
@media (max-width:640px) { .wrap--narrow > .fx-logos--light ul, .dx-testimonials + .fx-logos ul { flex-wrap:wrap; } }
.dx-testimonials + .fx-logos { margin-left:0; margin-right:0; align-self:flex-start; }

/* ---- Explainer: the homepage's platform video replaces the missing founder video.
   It is wide (16:9), so the opening gives it the larger column. */
.vsl-frame { max-width:none; border-radius:14px; }
.vsl-frame video { aspect-ratio:16 / 9; height:auto; }
.vsl-col { align-items:stretch; }
.vsl-label { text-align:left; }
@media (min-width:900px) {
  .hero > .wrap:has(.vsl-frame) { max-width:1240px; }
  .hero-grid:has(.vsl-frame) { grid-template-columns:1fr 1.14fr; gap:56px; }
  .hero-grid:has(.vsl-frame) h1 { font-size:clamp(30px,3.5vw,50px); }
}

/* ---- Wave 2: guides, blog, loyalty, digital menu, reviews (Nov 10) --------------------- */
/* Art blocks span the screen wherever they are placed, even inside a narrow text column. */
section.fx-art { width:100vw; margin-left:calc(50% - 50vw); }
.prose > section.fx-art, .prose + section.fx-art { margin-top:56px; }
/* Logos inside the gray opening of an article or product page */
.guide-hero .fx-logos, .pg-hero .fx-logos, .product-hero .fx-logos { margin:40px 0 0; text-align:left; }
.guide-hero .fx-logos ul, .pg-hero .fx-logos ul, .product-hero .fx-logos ul { justify-content:flex-start; }
.gx-hero .fx-logos, .blog-hero .fx-logos { margin-top:36px; }
/* A client photo beside the guide's opening */
.guide-hero .wrap { position:relative; }
.fx-credit { position:absolute; left:0; right:0; bottom:0; padding:44px 14px 12px; background:linear-gradient(#0000,#000000c4); color:#fff; font-size:12px; letter-spacing:.02em; }
/* Colour in the articles */
.prose blockquote { border-left-color:var(--fx-green); }
.prose a { color:var(--fx-forest); }
.gx-card .tag, .blog-card .tag { color:var(--fx-forest); }
/* Long buttons wrap on a phone instead of running off the screen (loyalty, digital menu). */
@media (max-width:640px) {
  .guide-hero .btn, .product-hero .btn, .pg-hero .btn, .mobile-cta .btn, .mobile-cta-bar .btn, .pg-sticky-cta .btn, .endcta .btn { white-space:normal; max-width:100%; }
}
/* The logo row fits on one line inside the narrower article openings. */
.guide-hero .fx-logos ul, .pg-hero .fx-logos ul, .product-hero .fx-logos ul { gap:8px; flex-wrap:nowrap; }
.guide-hero .fx-logos li, .pg-hero .fx-logos li, .product-hero .fx-logos li { height:58px; min-width:0; padding:8px 12px; }
.guide-hero .fx-logos img, .pg-hero .fx-logos img, .product-hero .fx-logos img { height:38px; max-width:104px; }
@media (max-width:760px) { .guide-hero .fx-logos ul, .pg-hero .fx-logos ul, .product-hero .fx-logos ul { flex-wrap:wrap; } }

/* ---- The platform's own dashboard, on a dark stage ------------------------------------ */
.fx-dash { padding:112px 0 104px; background:var(--fx-stage); color:#fff; }
.fx-dash .fx-kicker { color:#86e0b4; }
.fx-dash h2 { margin:16px 0 0; color:#fff; font-size:clamp(38px,5vw,74px); line-height:1.03; letter-spacing:-.045em; }
.fx-dash .fx-lead { color:#cfcfcf; }
.fx-dash .fx-note { color:#9a9a9a; }
.fx-shot { margin-top:60px; border-radius:14px; overflow:hidden; border:1px solid #2c2c2c; box-shadow:0 60px 120px #000000a0; background:#fff; }
.fx-shot img { width:100%; height:auto; display:block; }
.section + .fx-dash { margin-top:72px; }
@media (max-width:900px) {
  .fx-dash { padding:78px 0 72px; }
  /* On a phone the screen is shown from its left edge at a readable size and can be swiped. */
  .fx-shot { margin-top:40px; overflow-x:auto; border-radius:10px; }
  .fx-shot img { width:860px; max-width:none; }
}
/* Testimonial cards: the result chip drops to its own line instead of being cut off. */
.testi-footer, .dx-testi-footer { flex-wrap:wrap; row-gap:10px; }
.testi-who { flex:1 1 120px; }
.testi-metric { margin-left:0; }

/* ---- Product pages, after comparing with the reference product pages (Nov 11) ---------- */
/* A customer on video in the opening */
.guide-hero .wrap, .product-hero .wrap, .pg-hero .wrap { position:relative; }
.fx-hero-video { width:min(100%,250px); margin:34px 0 0; }
.fx-hero-video video { display:block; width:100%; aspect-ratio:9 / 16; border-radius:18px; background:#111; box-shadow:0 30px 70px #00000038; object-fit:cover; }
.fx-hero-video figcaption { margin-top:12px; font-size:13px; line-height:1.35; color:var(--fx-muted); }
.fx-hero-video strong { display:block; font-weight:500; font-size:14px; color:var(--fx-ink); }
@media (min-width:1440px) { .fx-hero-video { position:absolute; left:calc(100% + 40px); top:0; margin:0; } .guide-hero:has(.fx-hero-video), .product-hero:has(.fx-hero-video), .pg-hero:has(.fx-hero-video) { min-height:640px; } }
/* What is included, as cards to scan instead of a bulleted sentence */
#que-incluye ul { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#que-incluye li { position:relative; margin:0; padding:18px 18px 18px 54px; border:1px solid var(--fx-line); border-radius:12px; background:#fff; font-size:16px; line-height:1.45; }
#que-incluye li::first-letter { text-transform:uppercase; }
#que-incluye li::before { content:"✓"; position:absolute; left:16px; top:17px; width:24px; height:24px; margin:0; border-radius:50%; background:var(--fx-mint); color:var(--fx-forest); display:grid; place-items:center; font-size:13px; font-weight:700; line-height:1; }
@media (max-width:640px) { #que-incluye ul { grid-template-columns:1fr; } }
/* Owners in their own words, with the figure each case documents */
.fx-quotes { padding:104px 0 96px; background:var(--fx-wash); color:var(--fx-ink); }
.fx-quotes h2 { margin:14px 0 0; font-size:clamp(34px,4.2vw,60px); line-height:1.05; letter-spacing:-.045em; }
.fx-quotes .fx-rail { padding-top:40px; padding-bottom:26px; gap:18px; }
.fx-story { flex:0 0 min(900px,86vw); display:grid; grid-template-columns:1fr 300px; min-height:380px; overflow:hidden; border-radius:18px; background:#fff; scroll-snap-align:start; }
.fx-story-body { display:flex; flex-direction:column; padding:40px 40px 34px; }
.fx-story blockquote { margin:0; padding:0; border:0; font-size:clamp(21px,2.1vw,29px); line-height:1.24; letter-spacing:-.03em; font-weight:500; color:var(--fx-ink); }
.fx-story-by { margin:20px 0 0; font-size:14px; line-height:1.4; color:var(--fx-muted); }
.fx-story-by strong { display:block; font-weight:500; font-size:15px; color:var(--fx-ink); }
.fx-story-link { margin-top:16px; align-self:flex-start; color:var(--fx-forest); font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:4px; }
.fx-story-stats { display:flex; gap:34px; margin:auto 0 0; padding-top:28px; }
.fx-story-stats div { max-width:210px; }
.fx-story-stats dt { font-size:clamp(24px,2.4vw,34px); font-weight:500; letter-spacing:-.04em; color:var(--fx-forest); }
.fx-story-stats dd { margin:4px 0 0; font-size:12.5px; line-height:1.4; color:var(--fx-muted); }
.fx-story > img { width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
.fx-quotes .fx-note { margin:0; max-width:78ch; font-size:12px; line-height:1.5; color:var(--fx-muted); }
@media (max-width:760px) {
  .fx-quotes { padding:72px 0 64px; }
  .fx-story { grid-template-columns:1fr; min-height:0; }
  .fx-story > img { order:-1; height:200px; }
  .fx-story-body { padding:26px 22px 24px; }
  .fx-story-stats { gap:22px; flex-wrap:wrap; }
}
/* The photo fills the card's height without setting it: the text decides how tall a story is. */
.fx-story { min-height:340px; }
.fx-story > img { height:0; min-height:100%; }
@media (max-width:760px) { .fx-story > img { height:200px; min-height:0; } }

/* ---- Wave 3 · form funnels (Nov 12) ----------------------------------------------------
   /diagnostico, /oferta and /repartidores use exactly the classes /demo uses, so section D
   already covers them. What follows is what the other five add. Status colours that carry
   meaning (good / warn / bad on the grader, the score rings) are left alone. */
/* D+ · blocks /demo does not have (/canal-propio, /diagnostico-google) and leftover blue */
.dx-opt:hover { border-color:var(--fx-ink); }
.dx-opt.on, .dx-bk-slot:hover, .dx-how-num { background:var(--fx-mint); }
.dx-opt, .dx-plan-box, .dx-proof-card, .dx-estimate, .dx-stack-item, .dx-how-step { border-radius:6px; }
.dx-gate-lock { box-shadow:none; }
/* E · /calificador has its own variables. Scoped to that page: the homepage and the shared
   menu use --line, --panel and --accent for other things. */
:root:has(.cx-logo) { --line:var(--fx-line); --panel:var(--fx-paper); --brand:var(--fx-ink); --brand-d:var(--fx-black); }
.cx-logo { font-weight:500; }
.cx-btn { border-radius:3px; font-weight:500; }
.cx-input, .cx-login { border-radius:4px; }
.cx-card { border-radius:6px; }
.cx-cta { background:var(--fx-black); border-radius:6px; }
/* B+ · the two offer pages (/canal-propio-oferta, /canal-propio-cadenas): pale blue panels
   become the brand's mint */
.nav-tag { border-color:#ffffff40; }
.price-block, .tools-vs, .big--hi, .retell, .calc-alert--gate { background:var(--fx-mint); border-color:var(--fx-mint-2); }
.tier--star { background:#fff; }
.chip.on, .ladder tr.top td { background:var(--fx-mint); }
.field input:focus { box-shadow:0 0 0 3px var(--fx-mint-2); }
/* a phone-width bug that predates the skin: the price ladder was wider than the screen */
.ladder-wrap { overflow-x:auto; }
/* the grader's top bar matches the other funnels: a dark band edge to edge */
.cx-nav { background:var(--fx-black); box-shadow:0 0 0 100vmax var(--fx-black); clip-path:inset(0 -100vmax); }
.cx-logo, .cx-logo span { color:#fff; }
.cx-login { color:#fff; border-color:#ffffff50; }
/* On a phone the offer pages keep their first screen: headline, sentence and the three figures.
   The plan pages' larger headline pushed the figures below the fold here. */
@media (max-width:600px) { body:has(.nav-tag) .hero h1 { font-size:clamp(28px,7.6vw,40px); } }
/* Phones: page buttons are pills, the same family as the homepage's (precision.css). The
   radius is half a one-line button, so a button that wraps to two lines stays a soft box. */
@media (max-width:760px) {
  .btn, .dx-btn, .cx-btn, .nav-cta { border-radius:28px; }
  .btn { padding-left:24px; padding-right:24px; }
}
/* The comparison table on /pedidos-con-ia-whatsapp-restaurantes. Product pages carry no table
   styles of their own (the guides do), so these are scoped to that section. */
#comparacion .guide-tablewrap { overflow-x:auto; margin:24px 0; border:1px solid var(--fx-line, #dedede); border-radius:8px; }
#comparacion .guide-table { border-collapse:collapse; width:100%; min-width:560px; font-size:15px; }
#comparacion .guide-table th, #comparacion .guide-table td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--fx-line, #dedede); vertical-align:top; }
#comparacion .guide-table thead th { background:var(--fx-wash, #f4f4f4); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
#comparacion .guide-table tbody tr:last-child td { border-bottom:none; }
#comparacion .guide-table td:first-child { font-weight:600; }
#comparacion .guide-table td:last-child { background:var(--fx-wash, #f4f4f4); font-weight:600; }
/* "Respuesta rápida" boxes added to the older guides (Nov 12). Two calculator pages carry no
   callout styles of their own, so the box is fully styled here. Its headline is a phrase, not
   a figure, so it is set smaller than a number callout. */
.guide-callout--answer { background:var(--card, #fff); border:1px solid var(--rule, #dedede); border-left:4px solid var(--fx-ink, #171717); border-radius:0 8px 8px 0; padding:24px 26px; margin:0 0 34px; }
.guide-callout--answer .kpi { font-size:clamp(24px,3.2vw,36px); line-height:1.12; letter-spacing:-.03em; font-weight:500; }
.guide-callout--answer .kpi-note { font-size:15px; color:var(--ink-muted, #636363); margin-top:10px; }