/* ============================================================================
   FUND & WATCH — public page system (sales page + legal pages)
   ----------------------------------------------------------------------------
   Loads AFTER css/crm.css and builds on ITS tokens. crm.css owns the palette,
   the reset, the type scale, the elevation scale and the component recipes
   (.card .btn .tile .badge .tbl); this file adds only what a public page needs
   that a workspace does not: a marketing nav, section rhythm, a hero, prose
   for legal copy, and the chrome around the live product demos.

   Everything is namespaced `fw-` so nothing here can collide with the ~146
   page-specific components business.html still carries.

   Rules kept, in the spirit of the CRM pass:
     · ONE surface recipe. A demo panel is a .card, not a new box with its own
       border and its own shadow. No nested container edges.
     · Section padding is a single token (--fw-sec). Gaps are never eyeballed,
       so nothing ends up with a 90px hole under it.
     · Light is the default; dark is a full token swap, never a filter.
============================================================================ */

:root{
  --fw-max:1120px;              /* one content width, everywhere */
  --fw-sec:clamp(64px,7vw,104px);
  --fw-gap:clamp(18px,2.2vw,26px);
  --fw-nav-h:60px;
  /* the brand gradient reads on both grounds; the CRM's --brand-grad is tuned
     for small surfaces, this one for display type and large fills */
  --fw-grad:linear-gradient(112deg,#1E9BF0,#38C6F4 52%,#5AD1B4);
  --fw-blue:#1E9BF0;              /* the one accent, same as the homepage */
  --fw-hero-glow:radial-gradient(900px 460px at 14% -18%,rgba(30,155,240,.13),transparent 62%),
                 radial-gradient(680px 420px at 96% 6%,rgba(46,230,168,.08),transparent 66%);
}
html[data-theme="dark"]{
  --fw-hero-glow:radial-gradient(900px 460px at 14% -18%,rgba(30,155,240,.18),transparent 62%),
                 radial-gradient(680px 420px at 96% 6%,rgba(46,230,168,.09),transparent 66%);
}

/* A public page scrolls; the CRM shell does not. */
body.fw{min-height:100dvh;background:var(--bg);}
.fw-wrap{max-width:var(--fw-max);margin:0 auto;padding-inline:clamp(18px,4vw,28px);}

/* ============================== nav ============================== */
.fw-nav{
  position:sticky;top:0;z-index:80;height:var(--fw-nav-h);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.fw-nav-in{max-width:var(--fw-max);margin:0 auto;height:100%;display:flex;align-items:center;gap:14px;
  padding-inline:clamp(18px,4vw,28px);}
.fw-brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0;}
.fw-brand img{width:26px;height:29px;object-fit:contain;flex:0 0 auto;}
.fw-brand b{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.fw-nav-links{display:flex;align-items:center;gap:2px;margin-left:12px;min-width:0;overflow:hidden;}
.fw-nav-links a{padding:7px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:560;
  color:var(--ink-2);white-space:nowrap;transition:background .12s,color .12s;}
.fw-nav-links a:hover{background:var(--surface-sunken);color:var(--ink);}
.fw-nav .sp{flex:1 1 auto;}
.fw-nav-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto;}

/* theme switch — 24px, sits in the nav without shifting its baseline */
.fw-theme{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;}
.fw-theme:hover{background:var(--surface-sunken);color:var(--ink);}
.fw-theme svg{width:15px;height:15px;}
.fw-theme .moon{display:none;} html[data-theme="dark"] .fw-theme .moon{display:block;}
html[data-theme="dark"] .fw-theme .sun{display:none;}

/* ============================== sections ============================== */
.fw-sec{padding-block:var(--fw-sec);}
.fw-sec.tight{padding-block:calc(var(--fw-sec) * .62);}
.fw-sec + .fw-sec{padding-top:0;}          /* never stack two full paddings */
.fw-sec.ruled{border-top:1px solid var(--line);padding-top:var(--fw-sec);}

.fw-kicker{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);margin:0 0 12px;}
.fw-h2{font-size:clamp(24px,3.4vw,34px);font-weight:660;letter-spacing:-.032em;line-height:1.14;margin:0;}
.fw-h3{font-size:clamp(17px,1.7vw,19px);font-weight:650;letter-spacing:-.018em;margin:0;}
.fw-lede{font-size:clamp(14.5px,1.35vw,16px);line-height:1.62;color:var(--ink-2);
  margin:14px 0 0;max-width:64ch;}
.fw-head{margin-bottom:calc(var(--fw-gap) + 8px);}

/* ============================== hero ============================== */
.fw-hero{position:relative;padding-block:clamp(52px,7vw,92px) clamp(34px,4vw,52px);overflow:hidden;}
.fw-hero::before{content:"";position:absolute;inset:-40% 0 auto;height:150%;background:var(--fw-hero-glow);
  pointer-events:none;z-index:0;}
.fw-hero > *{position:relative;z-index:1;}
.fw-h1{font-size:clamp(32px,5.4vw,56px);font-weight:680;letter-spacing:-.042em;line-height:1.05;margin:0;
  max-width:17ch;}
.fw-h1 .g{background:var(--fw-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.fw-hero .fw-lede{font-size:clamp(15px,1.5vw,17.5px);margin-top:18px;max-width:56ch;}
.fw-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.fw-ctas .btn{text-decoration:none;}

/* the live pill: one dot, no box within a box */
.fw-live{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  padding:6px 13px 6px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--e1);
  font-size:12px;font-weight:600;color:var(--ink-2);}
.fw-dot{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 55%,transparent);animation:fwPulse 2s infinite;}
@keyframes fwPulse{70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
@media (prefers-reduced-motion:reduce){.fw-dot{animation:none;}}

/* ============================== grids ============================== */
.fw-grid{display:grid;gap:var(--fw-gap);}
.fw-g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.fw-g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.fw-g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));}
/* crm.css stacks sibling cards in a column; inside any of these grids that
   margin is what pushes the second card down by 28px. Kill it here too. */
.fw-grid > .card + .card{margin-top:0;}

/* a feature: icon, title, one paragraph. No border — the page ground carries
   it. Borders on twelve of these is what makes a page look like a form. */
.fw-feat{min-width:0;}
.fw-feat .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue);margin-bottom:13px;}
.fw-feat .ic svg{width:17px;height:17px;}
.fw-feat h3{font-size:14.5px;font-weight:650;letter-spacing:-.012em;margin:0 0 6px;}
.fw-feat p{font-size:13px;line-height:1.62;color:var(--ink-2);margin:0;}
.fw-feat.pos .ic{background:var(--pos-bg);color:var(--pos);}
.fw-feat.warn .ic{background:var(--warn-bg);color:var(--warn);}

/* ============================== demo chrome ==============================
   Every live demo sits in ONE card with a browser-style title bar. The bar
   belongs to the card (same border-radius, same border) so there is never a
   second rectangle floating inside the first. */
.fw-demo{padding:0;overflow:hidden;box-shadow:var(--e2);}
.fw-demo-bar{display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2);min-width:0;}
.fw-demo-bar .dots{display:flex;gap:5px;flex:0 0 auto;}
.fw-demo-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);}
.fw-demo-bar .url{flex:1 1 auto;min-width:0;text-align:center;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fw-demo-bar .tag{flex:0 0 auto;font-size:10px;font-weight:750;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);}
.fw-demo-body{padding:clamp(14px,2vw,20px);background:var(--bg);}

/* the demo's own inner rail — a miniature of the real CRM */
.fw-mini{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;min-width:0;}
.fw-mini-rail{display:flex;flex-direction:column;gap:1px;min-width:0;}
.fw-mini-rail .mi{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:560;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fw-mini-rail .mi.on{background:var(--blue-100);color:var(--blue);font-weight:650;}
.fw-mini-rail .mi b{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.55;}
.fw-mini-main{min-width:0;display:grid;gap:12px;}

/* tiles inside a demo are smaller than the CRM's — they are a picture of the
   CRM, not the CRM. One step down the same scale, never a new scale. */
.fw-demo .tile{padding:12px 13px;}
.fw-demo .t-label{font-size:10.5px;}
.fw-demo .t-value{font-size:19px;letter-spacing:-.028em;}
.fw-demo .t-sub{font-size:10.5px;margin-top:3px;}
.fw-demo .card-title{font-size:12.5px;margin-bottom:10px;}
/* .t-sub is a flex row. Once its text wraps — which it does in a 160px tile on
   a phone — align-items:center floats the delta to the middle and the first
   line of text sits above it. Top-align inside a demo tile. */
.fw-demo .t-sub{align-items:flex-start;flex-wrap:wrap;}
.fw-demo .t-delta{flex:0 0 auto;}

/* the chart measures this box, so it needs a real height at every width */
.fw-chart{height:clamp(128px,16vw,164px);min-width:0;}
.fw-demo .filters{margin-left:auto;}   /* reset below 860px — see the query */
.fw-demo .tiles{gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));}

.fw-cap{font-size:12px;color:var(--ink-3);margin:12px 0 0;text-align:center;}

/* ============================== stream demo ============================== */
.fw-stream{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(145deg,#16202E,#0B131D);min-width:0;}
.fw-stream .sk{position:absolute;inset:0;background:
  radial-gradient(60% 55% at 50% 42%,rgba(255,169,64,.22),transparent 70%),
  radial-gradient(40% 40% at 22% 78%,rgba(30,155,240,.16),transparent 70%);}
.fw-stream .glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;opacity:.9;}
.fw-stream .row{position:absolute;left:10px;right:10px;display:flex;gap:6px;align-items:center;}
.fw-stream .row.t{top:10px;}
/* gap only where a pill really has two boxes (the live dot). A pill whose
   content is "<span>86</span> viendo" would otherwise show a double space. */
.fw-stream .pill{display:inline-flex;align-items:center;gap:0;padding:4px 9px;border-radius:999px;
  background:rgba(6,12,20,.62);backdrop-filter:blur(8px);color:#EAF1F8;font-size:10.5px;font-weight:650;}
.fw-stream .pill.live{background:rgba(224,60,60,.9);color:#fff;}
/* the bottom overlay stack: tip toast + chat, in flow inside one container so
   two absolutely-positioned overlays can never land on top of each other */
.fw-stack{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:6px;}
.fw-tip{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:10px;
  background:rgba(14,138,95,.92);color:#fff;font-size:11px;font-weight:600;width:fit-content;
  max-width:100%;opacity:0;transform:translateY(6px);}
.fw-tip.show{animation:fwTip 4.4s ease both;}
.fw-tip b{font-weight:750;}
@keyframes fwTip{0%{opacity:0;transform:translateY(6px)}8%{opacity:1;transform:none}
  85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.fw-chat{display:grid;gap:4px;}
.fw-chat div{font-size:11px;line-height:1.4;color:#EAF1F8;background:rgba(6,12,20,.55);
  backdrop-filter:blur(6px);padding:5px 9px;border-radius:9px;width:fit-content;max-width:100%;
  animation:fwUp .4s ease both;}
.fw-chat div b{color:#7BD8FF;font-weight:700;}
@keyframes fwUp{from{opacity:0;transform:translateY(6px);}}

/* ============================== register / kiosk demo ============================== */
.fw-till{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;min-width:0;}
.fw-till-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0;}
.fw-key{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 9px;
  text-align:left;cursor:pointer;min-width:0;transition:border-color .12s,box-shadow .12s,transform .12s;}
.fw-key:hover{border-color:var(--blue);box-shadow:var(--e1);transform:translateY(-1px);}
.fw-key .e{font-size:17px;line-height:1;}
.fw-key .n{display:block;font-size:11.5px;font-weight:620;margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fw-key .p{display:block;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.fw-ticket{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:12px;display:flex;flex-direction:column;min-width:0;min-height:210px;}
.fw-ticket .lines{flex:1 1 auto;display:grid;gap:6px;align-content:start;
  max-height:150px;overflow:auto;margin-bottom:10px;}
.fw-ticket .ln{display:flex;gap:8px;font-size:11.5px;align-items:baseline;}
.fw-ticket .ln span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fw-ticket .ln span:last-child{font-variant-numeric:tabular-nums;font-weight:620;flex:0 0 auto;}
.fw-ticket .tot{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);padding-top:9px;margin-bottom:10px;}
.fw-ticket .tot b{font-size:19px;letter-spacing:-.028em;font-variant-numeric:tabular-nums;}
.fw-ticket .tot span{font-size:11.5px;color:var(--ink-3);}
.fw-empty-ticket{font-size:11.5px;color:var(--ink-3);padding:8px 0;}

/* ============================== assistant demo ============================== */
.fw-chatlog{display:grid;gap:10px;}
.fw-msg{display:flex;gap:9px;align-items:flex-start;min-width:0;}
.fw-msg .av{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;font-weight:750;}
.fw-msg.you .av{background:var(--surface-sunken);color:var(--ink-2);}
.fw-msg.ai .av{background:var(--blue-100);color:var(--blue);}
.fw-msg .bub{font-size:12.5px;line-height:1.6;color:var(--ink);min-width:0;}
.fw-msg.you .bub{color:var(--ink-2);}
.fw-msg .bub em{font-style:normal;color:var(--ink-3);}
.fw-tool{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:4px 9px;border-radius:999px;
  background:var(--pos-bg);color:var(--pos);font-size:10.5px;font-weight:700;}
.fw-ask{display:flex;gap:8px;align-items:center;margin-top:14px;padding:9px 11px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);min-width:0;}
.fw-ask input{flex:1 1 auto;border:0;background:none;outline:none;font-size:12.5px;min-width:0;
  color:var(--ink);}
.fw-ask input::placeholder{color:var(--ink-3);}
.fw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.fw-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;
  font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.12s;}
.fw-chip:hover{border-color:var(--blue);color:var(--blue);}
.fw-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ============================== stamps demo ============================== */
.fw-stamps{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;}
.fw-stamp{aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--line-strong);
  display:grid;place-items:center;font-size:13px;color:var(--ink-3);}
.fw-stamp.on{border-style:solid;border-color:transparent;background:var(--pos-bg);color:var(--pos);}
.fw-stamp.next{border-color:var(--blue);color:var(--blue);}

/* ============================== pricing / list ============================== */
.fw-list{display:grid;gap:9px;margin:0;padding:0;list-style:none;}
/* NOT display:flex. A flex container turns every child into a flex item,
   including an inline <b> inside the sentence — which then gets the row gap on
   both sides and renders as "entran a  tu  cuenta". Absolute icon, normal
   inline text. */
.fw-list li{position:relative;padding-left:24px;font-size:13px;line-height:1.55;color:var(--ink-2);}
.fw-list li svg{position:absolute;left:0;top:3px;width:15px;height:15px;color:var(--pos);}

/* ============================== FAQ ============================== */
.fw-faq{border-top:1px solid var(--line);}
.fw-faq details{border-bottom:1px solid var(--line);}
.fw-faq summary{list-style:none;cursor:pointer;padding:17px 40px 17px 0;position:relative;
  font-size:14px;font-weight:600;color:var(--ink);}
.fw-faq summary::-webkit-details-marker{display:none;}
.fw-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;
  border-right:1.7px solid var(--ink-3);border-bottom:1.7px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;}
.fw-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.fw-faq p{font-size:13px;line-height:1.68;color:var(--ink-2);margin:0 0 17px;max-width:74ch;}

/* ============================== CTA band ============================== */
.fw-band{border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,4vw,46px);
  background:var(--surface);box-shadow:var(--e1);position:relative;overflow:hidden;}
.fw-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 88% -30%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 68%);}
.fw-band > *{position:relative;}

/* ============================== footer ============================== */
.fw-foot{border-top:1px solid var(--line);padding-block:34px 40px;margin-top:var(--fw-sec);}
.fw-foot-in{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;}
.fw-foot .fw-brand{margin-bottom:8px;}
.fw-foot .fine{font-size:11.5px;line-height:1.6;color:var(--ink-3);max-width:52ch;}
.fw-foot nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;}
.fw-foot nav a{font-size:12.5px;color:var(--ink-2);}
.fw-foot nav a:hover{color:var(--blue);}

/* ============================== legal prose ==============================
   A legal page is read, not scanned: one column, 68ch, generous leading, and
   headings that are findable from the sticky index beside them. */
.fw-legal{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(24px,4vw,54px);
  align-items:start;padding-block:clamp(28px,4vw,44px) 0;}
.fw-toc{position:sticky;top:calc(var(--fw-nav-h) + 20px);display:grid;gap:1px;min-width:0;}
.fw-toc a{font-size:12px;font-weight:560;color:var(--ink-3);padding:6px 9px;border-radius:var(--r-sm);
  line-height:1.4;}
.fw-toc a:hover{background:var(--surface-sunken);color:var(--ink);}
.fw-toc a.on{background:var(--blue-100);color:var(--blue);font-weight:650;}
.fw-toc .tt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:0 9px 8px;}

.fw-doc{min-width:0;max-width:72ch;}
.fw-doc h2{font-size:19px;font-weight:660;letter-spacing:-.022em;margin:38px 0 12px;
  scroll-margin-top:calc(var(--fw-nav-h) + 22px);}
.fw-doc h2:first-of-type{margin-top:6px;}
.fw-doc h3{font-size:14.5px;font-weight:650;margin:22px 0 8px;}
.fw-doc p{font-size:14px;line-height:1.72;color:var(--ink-2);margin:0 0 13px;}
.fw-doc ul,.fw-doc ol{margin:0 0 14px;padding-left:20px;}
.fw-doc li{font-size:14px;line-height:1.72;color:var(--ink-2);margin-bottom:7px;}
.fw-doc strong,.fw-doc b{color:var(--ink);font-weight:640;}
.fw-doc a{color:var(--blue);font-weight:600;}
.fw-doc a:hover{text-decoration:underline;}
.fw-doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13px;}
.fw-doc th{text-align:left;font-weight:650;color:var(--ink);padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line-strong);font-size:12px;}
.fw-doc td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:top;line-height:1.6;}
.fw-note{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);
  padding:14px 16px;margin:0 0 22px;}
.fw-note p{margin:0;font-size:13px;}
.fw-note p + p{margin-top:8px;}

.fw-legal-head{padding-block:clamp(30px,4vw,44px) 0;}
.fw-legal-head h1{font-size:clamp(27px,4vw,38px);font-weight:680;letter-spacing:-.035em;margin:0 0 10px;}
.fw-legal-head .meta{font-size:12.5px;color:var(--ink-3);}
.fw-lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);margin-top:16px;}
.fw-lang button{border:0;background:none;padding:5px 13px;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:650;color:var(--ink-3);}
.fw-lang button[aria-pressed="true"]{background:var(--ink);color:var(--surface);}

/* ============================== responsive ============================== */
@media (max-width:1000px){
  .fw-legal{grid-template-columns:1fr;gap:0;}
  .fw-toc{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:14px;
    margin-bottom:20px;border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .fw-toc::-webkit-scrollbar{display:none;}
  .fw-toc a{white-space:nowrap;background:var(--surface-2);}
  .fw-toc .tt{display:none;}
}
@media (max-width:860px){
  .fw-nav-links{display:none;}
  .fw-till{grid-template-columns:1fr;}
  .fw-mini{grid-template-columns:1fr;}
  /* The miniature rail is dropped, not stacked. Turned into a scrolling row it
     sat directly above the tab row and repeated its first three labels, so the
     panel showed the same control twice. The tabs are the real control; the
     rail only exists to say "this is a workspace", which the phone layout of
     the real CRM does not say either. */
  .fw-mini-rail{display:none;}
  .fw-demo .filters{margin-left:0;}
  .fw-stamps{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:560px){
  .fw-hero .fw-ctas .btn{width:100%;justify-content:center;}
  .fw-nav-cta .btn-soft{display:none;}      /* keep one CTA, not three, at 375px */
  .fw-till-pad{grid-template-columns:repeat(2,1fr);}
  .fw-foot nav{margin-left:0;gap:12px;}
}
/* The nav is what pushes the document wider than the viewport at the very
   bottom of the range. 375px still fits the wordmark comfortably — 340 is
   where it stops — so the cut is there and not at 400, which would strip the
   brand name off the most common phone width for nothing. Below it the mark
   alone identifies the site and the CTA is what has to survive. */
@media (max-width:340px){
  .fw-nav-in{gap:8px;}
  .fw-nav .fw-brand b{display:none;}
  .fw-nav-cta .btn{padding:5px 10px;}
}

@media (prefers-reduced-motion:reduce){
  .fw-chat div,.fw-tip.show{animation:none;}
  .fw-tip{opacity:1;transform:none;}
  .fw-key:hover{transform:none;}
}

/* ==========================================================================
   THE SALES PAGE, ROUND TWO
   Brief, verbatim: "Animate everything. Load-in reveals, hover, press. Make it
   insanely nice and interactive. Glass treatment throughout." Plus: the inline
   demos had drifted — they still mirrored the OLD boxed CRM while the real one
   went flat. Each .fw-demo-body now carries `.app`, so it inherits the real
   workspace rules from crm.css instead of a second copy that can drift again.
   Only the two shell-only declarations are neutralised here.
   ========================================================================== */

/* ---------------------------------- the demos ARE the dashboard now */
.fw-demo .app{
  display:block;min-height:0;
  /* the workspace gutter, scaled to a panel a third of the width */
  --gut:14px;--gut-y:12px;
}
.fw-demo .app .tile{padding:var(--gut-y) var(--gut)!important;}
.fw-demo .app .tiles > .tile:first-child{padding-left:0!important;}
.fw-demo .app .tiles > .tile:last-child{padding-right:0!important;}
.fw-demo .app .tile[data-tile]::after{content:none;}
.fw-demo .app .card{padding:0!important;}
.fw-demo .app .tbl th{padding:0 12px 8px 0!important;}
.fw-demo .app .tbl td{padding:9px 12px 9px 0!important;}
.fw-demo .app .card-title{margin:0 0 10px!important;}
/* two demo columns are divided by a rule, exactly like the real grid-2 */
.fw-demo .app .fw-grid.fw-g2{gap:clamp(16px,2vw,26px);}
@media (min-width:900px){
  .fw-demo .app .fw-grid.fw-g2 > * + *{
    border-left:1px solid var(--line);padding-left:clamp(16px,2vw,26px);
  }
}

/* the mini rail loses its filled pill for the same reason the real one did */
.fw-mini-rail .mi{transition:color .16s,background .16s;}
.fw-mini-rail .mi.on{
  background:transparent!important;color:var(--blue)!important;font-weight:650;
  position:relative;
}
.fw-mini-rail .mi.on::before{
  content:"";position:absolute;left:-8px;top:4px;bottom:4px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--blue);
}
.fw-mini-rail .mi:hover:not(.on){color:var(--ink);}

/* ------------------------------------------------- the live video */
.fw-stream .fw-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* it fades in over the gradient rather than snapping black → frame */
  opacity:0;transition:opacity .6s ease;
}
.fw-stream .fw-vid.ready{opacity:1;}
.fw-stream .sk{pointer-events:none;}
/* an unfilled toast is a green rectangle with nothing in it */
.fw-tip:empty{display:none;}
/* one soft scrim so the white overlay pills stay readable over any frame */
.fw-stream::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,9,16,.42) 0%,transparent 26%,
                                     transparent 52%,rgba(4,9,16,.55) 100%);
}
.fw-stream .row,.fw-stack{z-index:2;}

/* ------------------------------------------- the two onboarded businesses */
.fw-onboarded{align-items:stretch;}
.fw-biz{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(18px,2vw,24px)!important;
  border:1px solid var(--line)!important;border-radius:var(--r)!important;
  background:var(--surface)!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),
             box-shadow .28s cubic-bezier(.2,.8,.2,1),
             border-color .28s;
}
.fw-biz:hover{
  transform:translateY(-4px);box-shadow:var(--e2);border-color:var(--line-strong)!important;
}
.fw-biz-head{display:flex;align-items:center;gap:13px;}
.fw-biz-logo{
  width:56px;height:56px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  background:var(--surface-sunken);
}
.fw-biz-logo.contain{object-fit:contain;border-radius:12px;}
.fw-biz-id{min-width:0;flex:1 1 auto;}
.fw-biz-id .fw-h3{margin:0;}
.fw-biz-city{margin:3px 0 0;font-size:12px;color:var(--ink-3);}
.fw-biz-note{margin:0;font-size:13px;line-height:1.62;color:var(--ink-2);}
.fw-biz-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;}
.fw-biz-tags li{
  font-size:11px;font-weight:620;color:var(--ink-3);
  background:var(--surface-sunken);border-radius:999px;padding:3px 10px;
}
.fw-biz .btn{margin-top:auto;align-self:flex-start;}

/* ======================================================================
   MOTION — reveal on scroll, hover, press
   One observer, one transition, and a hard off switch for anybody who has
   asked their OS to stop animations.
   ====================================================================== */
/* Gated on html.fw-motion, which only exists when the script that reveals
   them is running. Without that gate a failed JS load leaves half the page
   permanently invisible — and a crawler sees opacity:0 content. */
html.fw-motion [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.2,.8,.2,1),
             transform .62s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--rd,0ms);will-change:opacity,transform;
}
html.fw-motion [data-reveal].in{opacity:1;transform:none;will-change:auto;}

/* the hero writes itself in on load rather than waiting for a scroll */
.fw-hero .fw-live,.fw-hero .fw-h1,.fw-hero .fw-lede,.fw-hero .fw-ctas{
  animation:fwHeroIn .78s cubic-bezier(.2,.8,.2,1) both;
}
.fw-hero .fw-h1{animation-delay:.06s;}
.fw-hero .fw-lede{animation-delay:.13s;}
.fw-hero .fw-ctas{animation-delay:.2s;}
@keyframes fwHeroIn{from{opacity:0;transform:translateY(18px);}}

/* press: everything clickable acknowledges the finger */
.fw .btn,.fw .fw-chip,.fw .filter-btn,.fw .fw-till-pad button,
.fw .fw-nav-cta .btn,.fw-biz .btn{
  transition:transform .14s cubic-bezier(.2,.8,.2,1),background .16s,
             border-color .16s,box-shadow .16s,color .16s;
}
.fw .btn:hover,.fw .fw-chip:hover{transform:translateY(-1.5px);}
.fw .btn:active,.fw .fw-chip:active,.fw .filter-btn:active{transform:translateY(0) scale(.975);}

/* the demo panels lift a little when you are working inside them */
.fw-demo{transition:box-shadow .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);}
.fw-demo:hover{box-shadow:var(--e3,var(--e2));}

/* glass: the nav, and any pill that sits over moving video */
.fw-nav{
  background:color-mix(in srgb,var(--bg) 72%,transparent)!important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.fw-nav.stuck{
  background:color-mix(in srgb,var(--bg) 88%,transparent)!important;
  box-shadow:0 1px 0 var(--line),0 8px 24px rgba(8,14,22,.06);
}
html[data-theme="dark"] .fw-nav.stuck{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(0,0,0,.4);}
.fw-nav-links a{position:relative;transition:color .16s;}
.fw-nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.fw-nav-links a:hover::after{transform:scaleX(1);}

/* the FAQ opens instead of jumping */
.fw-faq details{transition:border-color .2s;}
.fw-faq details[open] > summary ~ *{animation:fwFaq .32s cubic-bezier(.2,.8,.2,1) both;}
@keyframes fwFaq{from{opacity:0;transform:translateY(-6px);}}
.fw-faq summary{transition:color .16s;}

/* the tiles in the proof band count up under a rule, not inside four boxes */
.fw-proof .tile{background:transparent!important;border:0!important;box-shadow:none!important;}

@media (prefers-reduced-motion:reduce){
  html.fw-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  .fw-hero .fw-live,.fw-hero .fw-h1,.fw-hero .fw-lede,.fw-hero .fw-ctas{animation:none!important;}
  .fw .btn:hover,.fw .fw-chip:hover,.fw-biz:hover{transform:none!important;}
  .fw-faq details[open] > summary ~ *{animation:none!important;}
  .fw-stream .fw-vid{transition:none;}
}

/* ============================================================================
   THE SALES PAGE, ROUND THREE
   Brief, verbatim: the title gradient is horrendous — use the homepage's, same
   size; put a dashboard and a livestream in the empty space to the right with
   comments popping from behind; the window buttons should be coloured like
   OpenClaw's; and MINIMIZE THE DAMN WORDS.
   ========================================================================== */

/* ---------------------------------------------------- 1. the title */
/* One flat accent, the homepage's size and weight. A gradient across a 56px
   headline banded on every screen we looked at. */
.fw-h1{
  font-size:clamp(38px,6.4vw,70px)!important;
  font-weight:800!important;letter-spacing:-.035em!important;line-height:1.04!important;
}
.fw-h1 .g{
  background:none!important;-webkit-background-clip:initial!important;
  background-clip:initial!important;color:var(--fw-blue,#1E9BF0)!important;
}
html[data-theme="dark"] .fw-h1 .g{color:#7BD8FF!important;}
/* press it and it acknowledges you, the way the OpenClaw headline does */
.fw-hero .fw-h1{cursor:default;transition:transform .5s cubic-bezier(.2,.9,.3,1);}
.fw-hero .fw-h1 span.g{display:inline-block;transition:transform .5s cubic-bezier(.2,.9,.3,1);}
.fw-hero .fw-h1.pop span.g{animation:h1Pop .62s cubic-bezier(.2,1.4,.35,1);}
@keyframes h1Pop{0%{transform:none}32%{transform:translateY(-8px) scale(1.035)}100%{transform:none}}

.fw-hero-grid{
  display:grid;gap:clamp(28px,4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1000px){
  /* the headline needs two lines, not three — give the copy the wider half */
  .fw-hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);}
}
@media (min-width:1000px){
  /* the homepage headline gets the full page width; here it gets half of it,
     so it is scaled to the column and still lands on two lines */
  .fw-hero .fw-h1{font-size:clamp(34px,3.9vw,56px)!important;}
}
.fw-hero{padding-block:clamp(34px,5vw,64px) clamp(28px,4vw,52px);}
.fw-hero-copy{min-width:0;}
.fw-sub{margin:14px 0 0;font-size:12.5px;color:var(--ink-3);}
.fw-hero .fw-lede{max-width:26ch;font-size:clamp(15px,1.5vw,18px);}
.fw-hero .fw-ctas{margin-top:26px;}

/* --------------------------------------------- 2. the product window */
.fw-win{
  position:relative;border-radius:16px;overflow:hidden;min-width:0;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(6,14,26,.16);
  animation:winIn .9s cubic-bezier(.2,.85,.25,1) both;animation-delay:.18s;
}
html[data-theme="dark"] .fw-win{box-shadow:0 30px 70px rgba(0,0,0,.55);}
@keyframes winIn{from{opacity:0;transform:translateY(26px) scale(.975);}}
.fw-win-bar{
  display:flex;align-items:center;gap:10px;padding:10px 13px;
  border-bottom:1px solid var(--line);background:var(--surface-sunken);
}
/* the OpenClaw traffic lights, on every window on this page */
.tl,.fw-demo-bar .dots{display:flex;gap:6px;flex:0 0 auto;}
.tl i,.fw-demo-bar .dots i{width:10px;height:10px;border-radius:50%;display:block;}
.tl i.r,.fw-demo-bar .dots i:nth-child(1){background:#FF5F57;}
.tl i.y,.fw-demo-bar .dots i:nth-child(2){background:#FEBC2E;}
.tl i.g,.fw-demo-bar .dots i:nth-child(3){background:#28C840;}
.fw-win-bar .url{
  flex:1 1 auto;min-width:0;text-align:center;font-size:11.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fw-win-bar .dot-live{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--neg,#E03C3C);
}
.fw-win-bar .dot-live i{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}

.fw-win-body{position:relative;height:clamp(300px,38vw,410px);overflow:hidden;}
.hw-scene{
  position:absolute;inset:0;padding:clamp(14px,1.7vw,20px);
  opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
.hw-scene.on{opacity:1;transform:none;pointer-events:auto;}

/* scene 1 — the dashboard */
.hw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);}
.hw-kpis > div{padding:11px 14px;border-right:1px solid var(--line);display:grid;gap:3px;min-width:0;}
.hw-kpis > div:first-child{padding-left:0;}
.hw-kpis > div:last-child{border-right:0;padding-right:0;}
.hw-kpis span{font-size:10.5px;color:var(--ink-3);}
.hw-kpis b{font-size:clamp(15px,1.7vw,20px);font-weight:680;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.hw-bars{display:flex;align-items:flex-end;gap:7px;height:96px;flex:0 0 auto;}
.hw-bars i{
  flex:1 1 0;display:block;border-radius:4px 4px 0 0;background:rgba(30,155,240,.6);
  transform-origin:bottom;animation:barGrow .8s cubic-bezier(.2,.9,.3,1) both;
}
.hw-bars i:last-child{background:rgba(30,155,240,.95);}
@keyframes barGrow{from{transform:scaleY(.04);}}
.hw-rows{display:grid;gap:0;}
.hw-rows > div{
  display:flex;justify-content:space-between;gap:12px;font-size:11.5px;
  padding:8px 0;border-top:1px solid var(--line);color:var(--ink-2);
}
.hw-rows b{font-variant-numeric:tabular-nums;}

/* scene 2 — the stream, with the chat flying out from behind the frame */
.hw-scene[data-scene="1"]{padding:0;}
.hw-live{position:absolute;inset:0;overflow:hidden;background:#0A1017;}
.hw-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease;}
.hw-vid.ready{opacity:1;}
.hw-live::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,9,16,.44),transparent 28%,transparent 56%,rgba(4,9,16,.6));
}
.hw-pill{
  position:absolute;top:12px;left:12px;z-index:2;padding:4px 9px;border-radius:99px;
  font-size:10px;font-weight:700;color:#EAF1F8;background:rgba(6,12,20,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hw-pill.live{background:rgba(224,60,60,.9);color:#fff;}
.hw-pill.right{left:auto;right:12px;}
.hw-tip{
  position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 11px;border-radius:10px;
  background:rgba(14,138,95,.94);color:#fff;font-size:11px;font-weight:600;
  animation:tipCycle 7s ease-in-out infinite;
}
@keyframes tipCycle{0%,58%{opacity:0;transform:translateY(8px)}66%,92%{opacity:1;transform:none}100%{opacity:0}}
/* the comments come from BEHIND the window and settle on top of it */
.hw-chat{position:absolute;right:0;top:0;bottom:0;width:min(64%,270px);z-index:3;
  pointer-events:none;overflow:hidden;}
.hw-chat b{
  position:absolute;right:12px;display:block;max-width:100%;
  padding:6px 10px;border-radius:11px;font-size:11px;font-weight:500;line-height:1.35;
  color:#EAF1F8;background:rgba(6,12,20,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  animation:chatFly 5.4s cubic-bezier(.2,.85,.25,1) both;
}
.hw-chat b i{font-style:normal;color:#7BD8FF;font-weight:700;}
@keyframes chatFly{
  0%{opacity:0;transform:translate3d(46px,26px,0) scale(.82);}
  14%{opacity:1;transform:none;}
  76%{opacity:1;transform:translateY(-6px);}
  100%{opacity:0;transform:translateY(-22px);}
}

/* scene 3 — the till */
.hw-scene[data-scene="2"]{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;}
.hw-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-content:start;}
.hw-pad button{
  display:grid;gap:2px;text-align:left;padding:11px;border-radius:11px;cursor:default;
  border:1px solid var(--line);background:var(--surface);font:inherit;
  transition:transform .18s,border-color .18s;
}
.hw-pad button:nth-child(1){animation:padTap 6s ease-in-out infinite;}
.hw-pad button:nth-child(3){animation:padTap 6s ease-in-out infinite;animation-delay:1.2s;}
@keyframes padTap{0%,86%,100%{transform:none;border-color:var(--line)}
  90%{transform:scale(.965);border-color:var(--fw-blue,#1E9BF0)}}
.hw-pad span{font-size:11px;font-weight:620;color:var(--ink);}
.hw-pad b{font-size:10.5px;font-weight:600;color:var(--ink-3);}
.hw-ticket{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);padding-left:14px;}
.hw-tk-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:7px 0;
  border-bottom:1px solid var(--line);color:var(--ink-2);}
.hw-tk-tot{display:flex;justify-content:space-between;gap:10px;padding:11px 0;font-size:13px;font-weight:700;}
.hw-tk-pay{
  margin-top:auto;text-align:center;border-radius:9px;padding:10px;
  background:var(--fw-blue,#1E9BF0);color:#fff;font-size:12px;font-weight:700;
}

.fw-win-dots{display:flex;gap:7px;justify-content:center;padding:11px;
  border-top:1px solid var(--line);}
.fw-win-dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--line-strong);transition:width .3s,background .3s;
}
.fw-win-dots button.on{width:22px;background:var(--fw-blue,#1E9BF0);}

@media (prefers-reduced-motion:reduce){
  .fw-win,.hw-bars i,.hw-chat b,.hw-tip,.hw-pad button{animation:none!important;}
  .hw-chat b{opacity:1;}
}
@media (max-width:999px){
  .fw-hero .fw-lede{max-width:none;}
  .fw-win-body{height:clamp(260px,58vw,340px);}
}


/* --------------------------------- mobile web must not zoom on focus */
/* iOS Safari zooms the viewport whenever a focused field is under 16px. */
@media (max-width:820px){
  .fw input,.fw select,.fw textarea,
  input,select,textarea{font-size:16px!important;}
  /* and the buttons match each other instead of sizing to their label */
  .fw-ctas{display:grid;gap:10px;width:100%;max-width:380px;}
  .fw-ctas .btn{width:100%;justify-content:center;min-height:50px;padding:0 20px;
    font-size:15px;border-radius:14px;}
  .fw-hero{text-align:left;}
}

/* ============================================================================
   GLASS ON EVERY DEMO
   The workspace mocks got a frosted frame and that is the look the owner
   wants — so every demo window on this page gets the same recipe: a glass
   panel, one hairline, a soft drop, and a frosted title bar.
============================================================================ */
.fw-demo,.fw-win{
  background:color-mix(in srgb,var(--surface) 62%,transparent)!important;
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--line)!important;
  box-shadow:0 26px 64px rgba(6,14,26,.16)!important;
}
html[data-theme="dark"] .fw-demo,
html[data-theme="dark"] .fw-win{
  background:color-mix(in srgb,var(--surface) 52%,transparent)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.55)!important;
}
.fw-demo-bar,.fw-win-bar{
  background:color-mix(in srgb,var(--surface-sunken) 55%,transparent)!important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.fw-demo-body,.fw-win-body{background:transparent!important;}
.fw-win-dots{background:transparent!important;}
/* the panels inside a demo stay transparent so the frost reads through */
.fw-demo .app .card,.fw-demo .app,
html[data-theme="dark"] .fw-demo .app .card{background:transparent!important;}
/* the till keys and the stamps pick it up too */
.fw-till-pad button,.fw-stamp,.hw-pad button,.fw-chip,
html[data-theme="dark"] .fw-till-pad button,
html[data-theme="dark"] .hw-pad button{
  background:color-mix(in srgb,var(--surface) 55%,transparent)!important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line)!important;
}
/* the two business cards are demos of a sort — same frame */
.fw-biz{
  background:color-mix(in srgb,var(--surface) 62%,transparent)!important;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
html[data-theme="dark"] .fw-biz{
  background:color-mix(in srgb,var(--surface) 52%,transparent)!important;
}

/* ==========================================================================
   OZZY, BESIDE THE TITLE
   The way OpenClaw sits its crab next to the headline: inline with the text,
   sized off the type so it scales with the heading rather than being a fixed
   px block, and given a slow idle so the page has one thing breathing in it.
   He is a mascot, never the logo — the logo is still the mark in the nav.
   ========================================================================== */
.fw-pet{
  position:relative;display:inline-block;padding:0;border:0;background:none;
  cursor:pointer;line-height:0;
  height:1.05em;width:auto;margin-left:0.22em;vertical-align:-0.18em;
  -webkit-tap-highlight-color:transparent;
}
/* The bear and its flash live in one transformed wrapper. Animate the <img>
   alone and the overlay stays behind while the bear moves — the flash slides
   off the eye the moment it bounces. */
.pet-in{position:relative;display:block;height:100%;transform-origin:50% 92%;
  animation:petIn .8s cubic-bezier(.2,1.3,.35,1) both .35s,
            petIdle 4.6s ease-in-out infinite 1.2s;}
.fw-pet img{height:100%;width:auto;display:block;}
.fw-pet:focus-visible{outline:2px solid var(--fw-blue,#1E9BF0);outline-offset:4px;border-radius:6px;}
@keyframes petIn{0%{opacity:0;transform:translateY(14%) scale(.6) rotate(-14deg);}
  100%{opacity:1;transform:none;}}
@keyframes petIdle{0%,100%{transform:translateY(0) rotate(-2.5deg);}
  50%{transform:translateY(-7%) rotate(2.5deg);}}

/* THE TAP. The eye is inside the PNG, so the flash is an overlay pinned to the
   iris in percentages — measured off the trimmed artwork, so it stays locked to
   the eye at every size the mascot is used at. */
.pet-flash,.pet-ring{
  position:absolute;left:70.8%;top:35.2%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;opacity:0;
}
.pet-flash{
  width:7%;aspect-ratio:1;
  background:radial-gradient(circle,#fff 0%,#CFF2FF 26%,#4FC0FF 48%,rgba(30,155,240,.55) 66%,rgba(30,155,240,0) 74%);
}
.pet-ring{width:7%;aspect-ratio:1;border:0.5vw solid #6FD0FF;box-sizing:border-box;}
.fw-pet.zap .pet-flash{animation:petEye .95s cubic-bezier(.2,.85,.25,1);}
.fw-pet.zap .pet-ring{animation:petRing .95s cubic-bezier(.15,.9,.3,1);}
.fw-pet.zap .pet-in{animation:petZap .66s cubic-bezier(.2,1.35,.3,1);}
@keyframes petEye{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}
  10%{opacity:1;transform:translate(-50%,-50%) scale(3.4);}
  24%{opacity:.55;transform:translate(-50%,-50%) scale(1.6);}
  40%{opacity:1;transform:translate(-50%,-50%) scale(2.9);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(4.6);}
}
@keyframes petRing{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.6);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(6);}
}
@keyframes petZap{
  0%{transform:none;}
  20%{transform:translateY(-11%) scale(1.09) rotate(-7deg);}
  52%{transform:translateY(3%) scale(.96) rotate(5deg);}
  100%{transform:none;}
}
.fw-h2 .fw-pet,.sec-title .fw-pet{height:0.9em;margin-left:0.16em;}
@media (max-width:640px){
  .fw-pet{height:0.92em;margin-left:0.16em;vertical-align:-0.14em;}
}
@media (prefers-reduced-motion:reduce){
  .pet-in,.fw-pet.zap .pet-in,.pet-flash,.pet-ring{animation:none!important;}
}
}