/* ============================================================
   ClaimFast hero demo — shared by every page that shows it
   (EN landing, ES landing, the ES follow-up page).

   A scripted product demo made only of DOM: a fake cursor clicks the ClaimFast
   toolbar button, the popup opens, the cursor clicks Fill, the claim's service
   lines fill, and a click on the page closes the popup — which is exactly how a
   Chrome extension popup behaves. demo.js builds the markup into
   <div id="cf-demo" class="cf-demo"> and runs the sequence.

   Colours and fonts come from the host page's tokens, with fallbacks, so a page
   without the full landing-page token set still renders it correctly — and a
   page that redefines its tokens (dark mode) re-themes the demo for free.
   ============================================================ */
.cf-demo{
  --d-bg:var(--bg,#f6f8fc);
  --d-surface:var(--surface,#fff);
  --d-ink:var(--ink,#0a1f44);
  --d-text:var(--text,#3a4866);
  --d-muted:var(--muted,#6b7894);
  --d-primary:var(--primary,#0b5fff);
  --d-primary-600:var(--primary-600,#0a4fd6);
  --d-primary-solid:var(--primary-solid,var(--d-primary));  /* FILLED blue under white text: Trust Blue in dark mode too */
  --d-primary-soft:var(--primary-soft,#e8f0ff);
  --d-border:var(--border,#e3e9f4);
  --d-border-strong:var(--border-strong,#d2dbec);
  --d-shadow:var(--shadow-color,218 60% 30%);
  --d-mono:var(--font-mono,"IBM Plex Mono",ui-monospace,monospace);
  --d-display:var(--font-display,system-ui,sans-serif);
  --d-body:var(--font-body,system-ui,sans-serif);
  --d-pill:var(--radius-pill,999px);
  position:relative;
}
/* Everything that moves together — the window, the popup and the cursor — lives
   in one stage, so the hover lift can never pull the popup off its button. */
.cf-stage{position:relative;transition:transform .35s ease}
.cf-demo:hover .cf-stage{transform:translateY(-3px)}

/* ---- Browser window ---- */
.cf-demo .browser{
  background:var(--d-surface);border:1px solid var(--d-border);border-radius:16px;
  box-shadow:0 2px 6px hsl(var(--d-shadow)/.08),0 30px 60px -28px hsl(var(--d-shadow)/.4);
  overflow:hidden;transition:box-shadow .35s ease;
}
.cf-demo:hover .browser{box-shadow:0 4px 10px hsl(var(--d-shadow)/.1),0 40px 72px -30px hsl(var(--d-shadow)/.52)}
.cf-demo .browser-bar{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--d-border);background:color-mix(in oklab,var(--d-bg) 55%,var(--d-surface))
}
.cf-demo .dots{display:flex;gap:7px}
.cf-demo .dots i{width:11px;height:11px;border-radius:50%;background:var(--d-border-strong)}
.cf-demo .dots i:nth-child(1){background:#ff5f57}.cf-demo .dots i:nth-child(2){background:#febc2e}.cf-demo .dots i:nth-child(3){background:#28c840}
.cf-demo .url{
  flex:1;min-width:0;font-family:var(--d-mono);font-size:.72rem;color:var(--d-muted);
  background:var(--d-bg);border:1px solid var(--d-border);border-radius:8px;
  padding:7px 14px;display:flex;align-items:center;gap:9px;
}
.cf-demo .url svg{width:13px;height:13px;flex:none}
.cf-demo .url-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The toolbar button that opens the popup — a real button, so a visitor can
   open and close it too. */
.cf-demo .browser-ext{
  display:inline-flex;align-items:center;gap:6px;font:600 .8rem/1.2 var(--d-body);
  color:var(--d-primary);background:var(--d-primary-soft);padding:6px 12px 6px 9px;border-radius:8px;flex:none;
  border:0;cursor:pointer;transition:background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.cf-demo .browser-ext:hover,.cf-demo .browser-ext.is-hover{background:color-mix(in oklab,var(--d-primary-soft) 82%,var(--d-primary))}
.cf-demo .browser-ext.is-press{transform:scale(.95)}
.cf-demo .browser-ext[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--d-primary)}
/* The real extension icon, as Chrome's toolbar shows it — the same logo the
   popup opens with, so a first-time user knows what to look for in their own
   Chrome. It replaced a pulsing dot: the cursor is the "look here" now. */
.cf-demo .ext-logo{width:16px;height:16px;flex:none;object-fit:contain}

/* ---- The portal page: a claim form (evokes one, copies no real portal) ---- */
.cf-demo .shot-area{position:relative;background:var(--d-surface);padding:15px 16px 17px;overflow:hidden}
/* The portal's own top bar — generic on purpose (a grey mark, "Provider Portal"). */
.cf-demo .portal-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-15px -16px 13px;padding:9px 16px;
  border-bottom:1px solid var(--d-border);background:color-mix(in oklab,var(--d-bg) 70%,var(--d-surface));
  font-size:.66rem;color:var(--d-muted);white-space:nowrap;
}
.cf-demo .pn-brand{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--d-ink);font-size:.7rem}
.cf-demo .pn-brand i{width:14px;height:14px;border-radius:4px;background:var(--d-border-strong)}
.cf-demo .pn-links{display:inline-flex;gap:12px}
.cf-demo .pn-links .on{color:var(--d-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--d-muted);padding-bottom:2px}
@media(max-width:400px){.cf-demo .pn-extra{display:none}}
.cf-demo .portal{position:relative}
.cf-demo .portal-head{margin-bottom:5px}
.cf-demo .portal-crumb{font-family:var(--d-mono);font-size:.7rem;color:var(--d-muted)}
.cf-demo .claim-meta{font-size:.82rem;color:var(--d-ink);font-weight:600;margin-bottom:11px}
.cf-table{position:relative;border:1px solid var(--d-border);border-radius:12px;overflow:hidden}
.cf-thead,.cf-row{display:grid;grid-template-columns:48px 32px 1fr 36px 56px;gap:8px;align-items:center}
.cf-thead{padding:9px 12px;background:color-mix(in oklab,var(--d-bg) 55%,var(--d-surface));border-bottom:1px solid var(--d-border);font-family:var(--d-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--d-muted)}
.cf-thead span:nth-child(2){text-align:center}
.cf-thead span:nth-child(4),.cf-thead span:nth-child(5){text-align:right}
.cf-rows{padding:5px}
.cf-row{padding:0 7px;min-height:32px;font-family:var(--d-mono);font-size:.73rem;border-radius:7px;position:relative}
.cf-row.flash{animation:cfFlash .8s ease}
@keyframes cfFlash{0%{background:var(--d-primary-soft)}100%{background:transparent}}
.cf-row::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--d-primary);opacity:0;transition:opacity .2s ease}
.cf-row.filled:hover{background:var(--d-primary-soft)}
.cf-row.filled:hover::before{opacity:1}
.cf-row>span{position:relative}
.cf-row .c-date{color:var(--d-ink);font-weight:600}
.cf-row .c-pos{color:var(--d-muted);text-align:center}
.cf-row .c-proc{color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-row .c-un,.cf-row .c-amt{color:var(--d-muted);text-align:right}
/* Each cell is a real form input (2026-09-29 — the old grey pills read as
   "loading…", not as empty fields): an empty bordered box before the fill; after
   it the box stays, holds the value, and takes the faint blue Chrome gives fields
   it filled for you — which here is ClaimFast's blue. */
/* Each cell stretches to the full row, so its input box is a real 24px field (sized to
   the text, it came out ~9px tall — a pill again) and the value sits centred inside. */
.cf-row>span{align-self:stretch;display:flex;align-items:center;padding:0 5px}
.cf-row .c-pos{justify-content:center}
.cf-row .c-un,.cf-row .c-amt{justify-content:flex-end}
.cf-row .val{position:relative;z-index:1;opacity:0;transition:opacity .3s ease}
.cf-row.filled .val{opacity:1}
.cf-row .ph{
  position:absolute;top:4px;bottom:4px;left:0;right:0;border-radius:4px;pointer-events:none;
  border:1px solid var(--d-border-strong);background:var(--d-surface);
  box-shadow:inset 0 1px 2px hsl(var(--d-shadow)/.07);
  transition:background-color .35s ease,border-color .35s ease;
}
.cf-row.filled .ph{
  background:color-mix(in oklab,var(--d-primary-soft) 75%,var(--d-surface));
  border-color:color-mix(in oklab,var(--d-primary) 28%,var(--d-border-strong));
}
.cf-foot{padding:9px 12px;border-top:1px solid var(--d-border);font-family:var(--d-mono);font-size:.68rem;color:var(--d-muted)}
.cf-foot b{color:var(--d-ink);font-variant-numeric:tabular-nums}
/* The toast's BOTTOM edge sits on the column headers' bottom edge (demo.js
   measures it) and it grows upward over the title — never over a row, and never
   over the footer's "22 of 22 · $1,606.00", which is the payoff. A two-line
   Spanish toast on a phone takes title space, not claim space. */
.cf-toast{position:absolute;left:50%;top:64px;display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 12px);background:#0a6b2e;color:#fff;font-size:.74rem;font-weight:600;line-height:1.25;padding:7px 13px;border-radius:var(--d-pill);box-shadow:0 12px 26px -8px rgba(10,107,46,.75);opacity:0;transform:translate(-50%,calc(-100% + 6px));transition:opacity .45s ease,transform .45s ease;pointer-events:none;z-index:2}
.cf-toast svg{width:15px;height:15px;flex:none}
.cf-toast.show{opacity:1;transform:translate(-50%,-100%)}

/* ---- The ClaimFast popup — mirrors the real popup.html/.css ----
   It hangs from the toolbar button (demo.js pins it there), closed until
   clicked, on every screen size — so on a phone the click and the rows it
   fills are on screen together. */
.cf-popup{
  position:absolute;top:56px;right:10px;width:214px;max-width:calc(100% - 20px);
  background:var(--d-bg);border:1px solid var(--d-border);border-radius:14px;padding:13px;
  box-shadow:0 8px 22px -6px hsl(var(--d-shadow)/.4),0 34px 54px -22px hsl(var(--d-shadow)/.55);
  z-index:5;transform-origin:top right;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;
}
.cf-popup.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s}
.cf-pop-head{display:flex;align-items:center;gap:7px}
.cf-logo{width:28px;height:28px;flex:none;object-fit:contain}
.cf-word{font-family:var(--d-display);font-size:.95rem;font-weight:700;font-style:italic;color:var(--d-ink);letter-spacing:-.02em}
.cf-word b{font-weight:800;color:var(--d-primary)}
.cf-pop-tag{font-size:.62rem;color:var(--d-muted);margin:5px 0 11px}
.cf-lbl{display:block;font-size:.66rem;font-weight:700;color:var(--d-ink);margin-bottom:9px}
.cf-sel,.cf-inp{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px;padding:6px 9px;font-size:.72rem;font-weight:400;color:var(--d-text);background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:8px;white-space:nowrap}
.cf-sel svg{width:13px;height:13px;color:var(--d-muted);flex:none}
.cf-v{min-width:0;overflow:hidden;text-overflow:ellipsis}  /* "Twice a month" in a half-width field */
.cf-pair{display:flex;gap:6px}
.cf-pair>.cf-lbl{flex:1;min-width:0}
.cf-pair.stack{flex-direction:column;gap:0}  /* a period other than Monthly: "Twice a month" gets the full width */
.cf-chips{display:flex;gap:3px;margin-top:5px}
.cf-chip{flex:1;text-align:center;padding:5px 0;font-size:.6rem;font-weight:700;color:var(--d-muted);background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:6px}
.cf-chip.on{color:#fff;background:var(--d-primary-solid);border-color:var(--d-primary-solid)}
.cf-mini-row{display:flex;gap:6px;margin-bottom:11px}
.cf-mini-row>div{flex:1;min-width:0}
.cf-mini-lbl{display:block;font-size:.6rem;font-weight:700;color:var(--d-ink);margin-bottom:3px}
.cf-inp.sm{padding:5px 7px;justify-content:flex-start}
.cf-pop-btns{display:flex;gap:6px;align-items:center}
/* Preview stays one line at its natural width; Fill takes the rest, so
   "Completar Líneas de Servicio" wraps to two lines at most and Preview never
   balloons to match its height. */
.cf-pop-btns .ghost{flex:none;padding-inline:11px;white-space:nowrap}
.cf-pop-btns .primary{flex:1 1 0}
.cf-btn{flex:1;padding:8px 6px;font-family:var(--d-body);font-size:.7rem;font-weight:600;line-height:1.2;border:1px solid transparent;border-radius:var(--d-pill);cursor:pointer;transition:background .15s ease,transform .12s ease}
.cf-btn.ghost{background:var(--d-surface);color:var(--d-ink);border-color:var(--d-border-strong)}
.cf-btn.primary{background:var(--d-primary-solid);color:#fff;box-shadow:0 6px 14px -7px hsl(var(--d-shadow)/.7)}
.cf-btn.primary:hover,.cf-btn.primary.is-hover{background:var(--d-primary-600)}
.cf-btn.primary.is-press{transform:scale(.96)}
/* Button states copied from the real popup.css: filling keeps the blue and loses
   its glow; done turns green. */
.cf-btn.primary[data-state="filling"]{box-shadow:none;cursor:progress}
.cf-btn.primary[data-state="done"]{background:#178043;box-shadow:0 6px 16px -8px rgba(23,128,67,.7)}

/* ---- The cursor ----
   Two nested layers so X and Y can ease differently: the path bends into a
   gentle arc instead of a ruler-straight line. The tip of the arrow sits
   exactly on the layers' origin, so demo.js aims the tip, not the box. */
.cf-cur-x,.cf-cur-y{position:absolute;left:0;top:0;pointer-events:none}
.cf-cur-x{z-index:10;opacity:0;transition:opacity .35s ease}
.cf-cur-x.show{opacity:1}
.cf-cur{display:block;width:22px;height:22px;margin:-2px 0 0 -3px;filter:drop-shadow(0 2px 3px rgba(10,31,68,.35));transform-origin:3px 2px;transition:transform .12s ease}
.cf-cur-x.press .cf-cur{transform:scale(.82)}
.cf-cur-ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--d-primary);opacity:0;transform:scale(.3)}
.cf-cur-x.click .cf-cur-ring{animation:cfRing .5s ease-out}
@keyframes cfRing{0%{opacity:.6;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}

/* ---- Reduced motion: no cursor, no sequence — the finished claim, still ---- */
@media(prefers-reduced-motion:reduce){
  .cf-stage,.cf-demo .browser,.cf-popup,.cf-toast,.cf-row,.cf-row .val,.cf-row .ph{transition:none}
  .cf-demo:hover .cf-stage{transform:none}
  .cf-row.flash{animation:none}
  .cf-cur-x{display:none}
}