/* ============================================================
   HUMOTIX — Reusable Components
   Buttons, the Bridge logo mark, chips, section heads, pills.
   ============================================================ */

/* — The Bridge mark (logo) — monochrome ink with a single brass node. Bars and
     bridge follow --ink so they read on either ground (the dark hero nav flips
     them to porcelain, see layout.css); the node is the one brass spark, tying
     the mark to the site's accent. The cool emerald it used to carry was the
     only cool colour on a warm site — it read as a different brand. Green now
     belongs to ASORA's orb alone (THE ONE RULE, tokens.css). — */
.mark{position:relative;width:27px;height:28px;flex:none}
.mark .u-l{position:absolute;left:0;top:3px;width:5px;height:22px;border-radius:2px;background:var(--ink)}
.mark .u-r{position:absolute;right:0;top:3px;width:5px;height:22px;border-radius:2px;
  background:linear-gradient(var(--ink-soft) 0 18%,transparent 18% 26%,var(--ink-soft) 26% 44%,transparent 44% 52%,var(--ink-soft) 52% 70%,transparent 70% 78%,var(--ink-soft) 78% 100%)}
.mark .br{position:absolute;left:5px;top:11px;width:17px;height:5px;border-radius:2px;background:var(--ink)}
.mark .nd{position:absolute;left:10px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--ember-soft);box-shadow:0 0 10px rgba(168,131,74,.5)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px;letter-spacing:-.02em}

/* — Buttons — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;padding:15px 28px;border-radius:var(--r-pill);
  cursor:pointer;border:1px solid transparent;transition:.32s var(--ease);
  font-family:inherit;line-height:1;
}
/* On the LIGHT page a filled ink button is the strongest, most neutral CTA
   available — no accent colour to clash with anything. */
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px);background:var(--ink);
  box-shadow:0 16px 38px -18px rgba(26,23,19,.55)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:transparent;border-color:var(--ink-soft)}

/* On the NIGHT bands the primary is a SOLID PORCELAIN pill — no accent colour
   (a gold fill read as a foreign object on the photograph), but not transparent
   either. Measured in-browser, an outlined primary and an outlined ghost
   differed only in border alpha (1.0 vs .38): same fill, same text colour, same
   border width. That is not hierarchy, and it was the site's most important
   CTA. Porcelain is achromatic, so it fights nothing in the photo, and it
   matches .btn-light on the CTA card and the sticky bar's primary. */
.theme-dark .btn-primary{background:#F2EFEA;color:#1A1611;border-color:#F2EFEA}
.theme-dark .btn-primary:hover{background:#fff;border-color:#fff;
  box-shadow:0 16px 38px -18px rgba(0,0,0,.6)}
.theme-dark .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(242,239,234,.38)}
.theme-dark .btn-ghost:hover{background:rgba(242,239,234,.07);border-color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:13.5px}

/* — Chips — */
.chip{
  font-size:12px;color:var(--ink-soft);border:1px solid var(--line-2);
  padding:8px 13px;border-radius:var(--r-pill);cursor:pointer;
  transition:var(--t-fast);background:rgba(20,20,20,.02);font-weight:500;
  font-family:inherit;
}
.chip:hover{border-color:var(--ember);color:var(--ink);background:rgba(143,111,62,.12)}

/* — Section heads — */
.sec{padding:var(--s-9) 0;position:relative;z-index:var(--z-base)}
/* A section that ends on a hand-off doesn't need its full bottom padding. The
   hand-off already carries 64px of clearance above it AND it points down at
   what comes next — stacking 96px under it plus 96px on the next section put
   ~190px of dead space between a question and its answer. */
.sec:has(.handoff){padding-bottom:var(--s-6)}
.sec-head{max-width:760px;margin-bottom:var(--s-8)}
.sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(32px,5vw,58px);font-weight:700;line-height:1.0;
  letter-spacing:-.04em;margin-top:20px}
.sec-head h2 .serif{font-weight:400}
.sec-head p{margin-top:20px;font-size:16.5px;color:var(--ink-soft);max-width:38em;line-height:1.6}
.sec-head.ctr p{margin-left:auto;margin-right:auto}

/* — Live status pill (ASORA never sleeps) — */
.status-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-soft);
  border:1px solid rgba(143,111,62,.32);padding:5px 11px;border-radius:var(--r-pill);font-weight:600;
}
.status-pill .led{width:7px;height:7px;border-radius:50%;background:var(--green-soft);
  box-shadow:0 0 0 0 rgba(143,111,62,.5);animation:ledPulse 2.4s var(--ease) infinite}

/* — Generic capability tick row — */
.tick{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--ink-soft);line-height:1.4}
.tick::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;
  background:var(--green-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.tick.cross::before{background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;}

/* — Live "right now" status — a soft breathing ember pulse + a phrase.
   Replaces hard figures with something calm and alive. Shared by the
   hero mini-board and the living dashboard. — */
.live-now{display:inline-flex;align-items:center;gap:10px;min-width:0}
.live-now .now-text{transition:opacity .4s var(--ease)}
.live-now.shift .now-text{animation:nowShift .5s var(--ease)}
.pulse-orb{position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--ember-soft);box-shadow:0 0 0 0 var(--glow);
  animation:emberPulse 2.6s var(--ease) infinite}
@keyframes nowShift{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* — Small icon tile — */
.ic-tile{width:42px;height:42px;border-radius:11px;background:var(--accent-fill);
  border:1px solid var(--accent-line);display:grid;place-items:center;transition:.4s var(--ease)}
.ic-tile svg{width:21px;height:21px;stroke:var(--ember-soft);fill:none;stroke-width:1.7}
.ic-tile.sm{width:34px;height:34px;border-radius:9px}
.ic-tile.sm svg{width:16px;height:16px}

/* — Section hand-off — every section closes on an open question the
     next section answers, keeping the visitor curious and moving. — */
.handoff{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:600px;
  margin:var(--s-8) auto 0;text-align:center;transition:.3s var(--ease)}
.handoff .handoff-q{font-family:var(--font-serif);font-size:clamp(20px,2.4vw,27px);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink)}
.handoff .handoff-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;
  transition:.3s var(--ease)}
.handoff:hover .handoff-go{color:var(--ember-soft)}
.handoff .handoff-go svg{width:15px;height:15px;stroke:var(--ember-soft);fill:none;stroke-width:1.9;
  animation:cueBob 2.2s var(--ease) infinite}

/* — Modal (privacy policy, etc.) — */
.modal{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;padding:24px;
  background:rgba(10,7,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:.3s var(--ease)}
.modal.open{opacity:1;visibility:visible}
.modal-card{position:relative;max-width:560px;width:100%;max-height:84vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-3);transform:translateY(10px);transition:transform .35s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line-2);background:none;color:var(--ink-soft);cursor:pointer;font-size:14px;
  line-height:1;transition:.25s}
.modal-close:hover{border-color:var(--ember);color:var(--ink)}
.modal-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.modal-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:6px}
.modal-body{margin-top:18px}
.modal-body h4{font-size:13px;font-weight:700;color:var(--ink);margin:16px 0 5px}
.modal-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.modal-body a{color:var(--ember-soft);border-bottom:1px solid var(--line-2)}
.foot-base a{color:var(--ink-soft);transition:var(--t-fast)}
.foot-base a:hover{color:var(--ember-soft)}

/* — Reveal-on-scroll — */
.reveal{opacity:0;transform:translateY(28px);transition:.9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ============================================================
   PRODUCT-CANVAS POLISH — grain + edge feather + floating content.
   Applied to every FULL-BLEED gradient band (the dashboard board, the
   Businesses cards, the founder band) so they read as a designed,
   expensive surface — not a flat CSS gradient. isolation (not
   overflow:hidden) gives a stacking context WITHOUT clipping the
   floating product's soft shadow at the band edge.

   NOT .hero-asora. That used to be a 100vw canvas band; in the
   photographic hero it's just the right-hand grid column, and the
   feather below was painting an opaque var(--bg) bar across the top and
   bottom 15% of that column — directly behind the widget's rounded
   corners. Against the night palette the bar and the card read as the
   same near-black, so the cut-out corners filled in and the card looked
   square. The hero has its own grain (.hero::after) and needs no
   feather, since it sits on a photograph rather than a flat page.
   ============================================================ */
.dash-band,.biz-band,.fdr-band{position:relative;isolation:isolate}
.dash-band::before,.biz-band::before,.fdr-band::before,
.dash-band::after,.biz-band::after,.fdr-band::after{
  content:"";position:absolute;inset:0;pointer-events:none}
/* (1) grain — a fine fractal-noise film that kills gradient banding and
   gives the surface real texture. Inline SVG data-URI, so it's CSP-safe. */
.dash-band::after,.biz-band::after,.fdr-band::after{
  z-index:1;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* (3) edge feather — melt the band's top & bottom into the ivory page, so it
   reads as light on a surface rather than a hard colour block. */
.dash-band::before,.biz-band::before,.fdr-band::before{
  z-index:2;background:linear-gradient(to bottom,var(--bg),transparent 15%,transparent 85%,var(--bg))}
/* content (board / cards) floats above the texture + feather */
.dash-band>*,.biz-band>*,.fdr-band>*{position:relative;z-index:3}


/* ============================================================
   NIGHT BANDS — components inside .theme-dark inherit the flipped
   tokens automatically; these few rules fix the handful of places
   that hardcoded a light-surface assumption.
   ============================================================ */
.theme-dark .chip{background:rgba(242,239,234,.05);border-color:var(--line-2)}
.theme-dark .chip:hover{background:rgba(200,156,96,.14);border-color:var(--ember)}
.theme-dark .btn-ghost:hover{background:rgba(242,239,234,.07)}
/* .ic-tile needs no override — it's on --accent-fill/--accent-line, which the
   night block above already re-points. */
.theme-dark .ic-tile svg{stroke:var(--ember)}
.theme-dark .status-pill{color:var(--ember);border-color:rgba(200,156,96,.30)}
.theme-dark .status-pill .led{background:var(--ember-soft);box-shadow:0 0 0 0 var(--glow)}
.theme-dark .tick::before{background:var(--ember)}
.theme-dark .modal-card{background:var(--panel);border-color:var(--line-2)}