/* ============================================================
   tapestry - homepage redesign
   Grounded in colors_and_type.css from the design system,
   re-scaled for a marketing page (larger type, more whitespace,
   product-native warmth).
   ============================================================ */

/* ---------- Circular XX ---------- */
@font-face { font-family: "Circular XX"; src: url("fonts/CircularXX-Book.otf")    format("opentype"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Circular XX"; src: url("fonts/CircularXX-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Circular XX"; src: url("fonts/CircularXX-Medium.otf")  format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Circular XX"; src: url("fonts/CircularXX-Bold.otf")    format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Circular XX"; src: url("fonts/CircularXX-Black.otf")   format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Brand - verbatim from design system */
  --tap-orange: #F27A2E;
  --tap-orange-deep: #E8601A;
  --tap-orange-light: #FEF4ED;
  --tap-orange-subtle: #FFF9F5;
  --tap-orange-bubble: #FEF6F0;

  --tap-blue: #0E73BB;        /* Supply+ */
  --tap-pink: #C33C8E;        /* Collections */
  --tap-green: #059669;       /* Shoppers / success */
  --tap-cyan: #23B0E7;        /* mentions */
  --tap-purple: #44337A;      /* deprecated - use --tap-teal */
  --tap-teal: #0D8E8E;        /* POS partners */
  --tap-teal-deep: #086464;
  --tap-magenta: #C026D3;
  --tap-olive: #A1AA1E;

  --tap-warning: #D97706;
  --tap-danger: #DC2626;
  --tap-user-blue: #4A90D9;

  --tap-bg: #FAFAF8;
  --tap-bg-warm: #F5F2EC;
  --tap-card: #FFFFFF;
  --tap-ink: #1A1A1A;
  --tap-ink-2: #6B6B6B;
  --tap-ink-3: #9E9E9E;
  --tap-ink-on-orange: #2C2417;

  --tap-line: rgba(0,0,0,0.06);
  --tap-line-strong: rgba(0,0,0,0.10);
  --tap-line-dark: rgba(255,255,255,0.10);

  --tap-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --tap-shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --tap-shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --tap-shadow-flyout: 0 24px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
  --tap-shadow-orange: 0 2px 8px rgba(242,122,46,0.30);

  --tap-grad-hank: linear-gradient(135deg, #F27A2E, #E8601A);
  --tap-grad-user: linear-gradient(135deg, #4A90D9, #3B7DD8);

  /* Marketing scale - larger than product chrome */
  --type-display: 92px;
  --type-h1: 72px;
  --type-h2: 52px;
  --type-h3: 32px;
  --type-h4: 22px;
  --type-eyebrow: 11px;
  --type-meta: 13px;
  --type-body: 17px;
  --type-body-sm: 15px;
  --type-quote: 36px;
  --type-mega: 156px; /* statistic */

  --maxw: 1280px;
  --pad-x: 80px;
  /* Vertical section padding — the standard rhythm between content
     sections on every page. Reduce here to tighten the whole site.
     Use --pad-y for full-band sections, --pad-y-tight for compact
     intro / press / CTA strips. */
  --pad-y: 56px;
  --pad-y-tight: 40px;

  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Circular XX", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--tap-bg);
  color: var(--tap-ink);
  font-size: var(--type-body);
  font-weight: 350;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }

.num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
}
.eyebrow.on-orange { color: rgba(255,255,255,0.85); }
.eyebrow.on-dark { color: rgba(255,255,255,0.55); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,248,0.85);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--tap-line);
}
.nav-inner {
  display: flex; align-items: center; gap: 40px;
  height: 64px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand .mark { width: 26px; height: 26px; }
.nav-brand .word { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.nav-brand .lockup { height: 26px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--tap-ink-2);
  transition: color 150ms ease;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.nav-link:hover { color: var(--tap-ink); }
.nav-link svg { width: 12px; height: 12px; opacity: 0.5; }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: 8px;
  transition: all 150ms var(--ease);
  font-family: inherit; cursor: pointer; border: none;
  white-space: nowrap;
}
.btn-ghost { color: var(--tap-ink-2); }
.btn-ghost:hover { color: var(--tap-ink); background: var(--tap-bg-warm); }
.btn-secondary { color: var(--tap-ink); border: 1px solid var(--tap-line-strong); background: var(--tap-card); }
.btn-secondary:hover { background: var(--tap-bg-warm); }
.btn-primary {
  color: #fff;
  background: var(--tap-grad-hank);
  box-shadow: var(--tap-shadow-orange);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(242,122,46,0.36); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-on-dark { background: #fff; color: var(--tap-ink); }
.btn-on-dark:hover { background: var(--tap-orange-light); }
.btn-dark {
  background: var(--tap-ink);
  color: #fff;
}
.btn-dark:hover { background: #000; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 72px var(--pad-x) 36px;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Anchor the left column so audience switches don't shift the
   layout downward. The retailer headline is the tallest of the
   four personas; min-height holds the column at that size so
   shorter personas (POS provider, wholesaler) leave whitespace
   below rather than collapsing upward. */
.hero-copy { min-height: 540px; }
.hero h1 {
  font-size: var(--type-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 24px 0 24px;
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--tap-orange);
  font-style: italic;
  font-weight: 700;
}
/* Full stops in the hero headline render at half size so the
   sentence rhythm reads as breath, not as a hard stop. The dot
   is wrapped in a span by conversion.js (applyPersona). */
.hero h1 .dot {
  font-size: 0.5em;
  font-weight: inherit;
  vertical-align: baseline;
  line-height: 0;
  display: inline-block;
}
.hero-sub {
  font-size: 21px;
  font-weight: 350;
  color: var(--tap-ink-2);
  line-height: 1.45;
  max-width: 480px;
  margin: 0 0 36px;
}
.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-meta {
  margin-top: 40px;
  display: flex; gap: 36px; align-items: center;
  border-top: 1px solid var(--tap-line);
  padding-top: 28px;
}
.hero-meta-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.hero-meta-num .unit { color: var(--tap-orange); }
.hero-meta-label { font-size: 12px; color: var(--tap-ink-3); margin-top: 2px; letter-spacing: 0.04em; }

/* The "live product preview" card */
.preview {
  position: relative;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  box-shadow: var(--tap-shadow-flyout);
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 540px;
}
.preview::before {
  content: "";
  position: absolute; inset: -2px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(242,122,46,0.18), transparent 40%);
  z-index: -1; filter: blur(20px);
}
.preview-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--tap-line);
}
.hank-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tap-grad-hank);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px;
  letter-spacing: -0.04em;
  box-shadow: var(--tap-shadow-orange);
  flex: none;
}
.hank-avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.preview-head-text { display: flex; flex-direction: column; }
.preview-head-name { font-size: 13.5px; font-weight: 700; }
.preview-head-meta { font-size: 11px; color: var(--tap-ink-3); display: flex; align-items: center; gap: 6px; }
.preview-head-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tap-green); }
.preview-head-actions { margin-left: auto; display: flex; gap: 4px; color: var(--tap-ink-3); }
.icon-btn { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; transition: background 120ms; }
.icon-btn:hover { background: var(--tap-bg); color: var(--tap-ink); }
.icon-btn svg { width: 14px; height: 14px; }

.msg-stream { display: flex; flex-direction: column; gap: 14px; flex: 1; overflow: hidden; }

.msg { display: flex; gap: 10px; }
.msg.user { flex-direction: row-reverse; }
.bubble {
  max-width: 88%;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 350;
}
.bubble.assistant {
  background: var(--tap-orange-bubble);
  border-radius: 4px 18px 18px 18px;
  border: 1px solid rgba(242,122,46,0.10);
  color: var(--tap-ink-on-orange);
  box-shadow: 0 1px 3px rgba(242,122,46,0.06);
}
.bubble.user {
  background: var(--tap-grad-user);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 2px 8px rgba(74,144,217,0.25);
}
.bubble strong { font-weight: 700; }

/* Inline table card inside chat */
.chat-card {
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  font-size: 12px;
  overflow: hidden;
  box-shadow: var(--tap-shadow-sm);
  align-self: stretch;
  max-width: 88%;
}
.chat-card-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--tap-line);
  display: flex; align-items: center; justify-content: space-between;
}
.chat-card-title { font-size: 12.5px; font-weight: 700; }
.chat-card-meta { font-size: 10.5px; color: var(--tap-ink-3); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.chat-table { width: 100%; border-collapse: collapse; }
.chat-table th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tap-ink-3); padding: 8px 12px; text-align: left; background: rgba(0,0,0,0.015);
  border-bottom: 1px solid var(--tap-line);
}
.chat-table th.r, .chat-table td.r { text-align: right; }
.chat-table td {
  padding: 9px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--tap-line);
  font-variant-numeric: tabular-nums;
}
.chat-table tr:last-child td { border-bottom: none; }
.chat-table .sku { font-weight: 700; letter-spacing: 0.02em; }
.chat-table .delta-up { color: var(--tap-green); font-weight: 500; }
.chat-table .delta-down { color: var(--tap-danger); font-weight: 500; }
.chat-table .red-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tap-danger); margin-right: 6px; vertical-align: middle; animation: pulse 2s var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.sug-pill {
  font-size: 12px; font-weight: 500;
  padding: 7px 13px; border-radius: 20px;
  background: var(--tap-orange-light);
  color: var(--tap-orange-deep);
  border: 1px solid rgba(242,122,46,0.16);
  transition: background 120ms;
}
.sug-pill:hover { background: #FCEADD; }

.confidence-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tap-ink-3);
  margin-top: 4px;
}
.confidence-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--tap-green);
}

/* Preview composer */
.composer {
  display: flex; align-items: center; gap: 10px;
  background: var(--tap-bg);
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  padding: 8px 8px 8px 14px;
}
.composer-input { flex: 1; font-size: 13px; color: var(--tap-ink-3); }
.composer-send {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--tap-grad-hank); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--tap-shadow-orange);
}
.composer-send svg { width: 12px; height: 12px; }

/* ============================================================
   PRESS STRIP
   ============================================================ */
.press {
  padding: 24px var(--pad-x) 56px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.press-row {
  display: flex; align-items: center; gap: 56px;
  flex-wrap: wrap;
}
.press-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tap-ink-3);
  white-space: nowrap;
}
.press-logos { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; opacity: 0.6; }
.press-logo {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--tap-ink-2);
  font-style: italic;
}
.press-logo.serif { font-family: Georgia, "Times New Roman", serif; font-style: normal; letter-spacing: -0.005em; }
.press-logo.sm { font-size: 13px; letter-spacing: 0.02em; font-style: normal; text-transform: uppercase; font-weight: 700; }

/* ============================================================
   SUITE - product cards
   ============================================================ */
.section {
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Product suite sits on a warm cream band so it feels distinct from the
   hero (which is on the default page background). The white .suite-card
   cards pop more against the cream too. Full-bleed via a max-width reset
   plus re-centered inner blocks. */
#products {
  max-width: none;
  padding: var(--pad-y) 0;
  background: var(--tap-bg-warm);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
  position: relative;
}
#products > .section-head,
#products > .suite-grid {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.section-head { margin-bottom: 56px; max-width: 720px; }
.section-head h2 {
  font-size: var(--type-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 14px 0 0;
  text-wrap: balance;
}
.section-head p {
  font-size: 19px; color: var(--tap-ink-2);
  margin: 18px 0 0;
  max-width: 560px;
  line-height: 1.5;
}

.suite-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.suite-card {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transition: all 200ms var(--ease);
  position: relative;
}
.suite-logo {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.suite-logo img {
  height: 100%;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  display: block;
}
/* Per-product optical sizing - source PNGs have different
   internal padding so equal heights look unequal. Scale each
   to match the optical weight of Retail+. transform-origin
   anchors the scale to the left so the wordmark stays flush
   with the card's left edge. */
.suite-card[href*="supply-plus"] .suite-logo img {
  transform: scale(1.18);
  transform-origin: left center;
}
.suite-card[href*="collectives"] .suite-logo img {
  transform: scale(1.05);
  transform-origin: left center;
}
.suite-card.pos-card .suite-logo img,
.suite-card[href="Partners.html"] .suite-logo img {
  transform: scale(1.10);
  transform-origin: left center;
}
.suite-card:hover {
  border-color: var(--tap-line-strong);
  box-shadow: var(--tap-shadow-md);
  transform: translateY(-2px);
}
.suite-badge {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px;
  letter-spacing: -0.03em;
  flex: none;
}
.suite-badge.retail { background: linear-gradient(135deg, #F27A2E, #E8601A); }
.suite-badge.supply { background: linear-gradient(135deg, #2A8FD8, #0E73BB); }
.suite-badge.coll   { background: linear-gradient(135deg, #DA5BA6, #C33C8E); }
.suite-badge.pos    { background: linear-gradient(135deg, #5D4B9B, #44337A); }
.suite-badge.shop   { background: linear-gradient(135deg, #14B279, #059669); }
.suite-badge .glyph { display: inline-flex; align-items: baseline; }
.suite-badge .it { font-style: italic; }
.suite-for {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
}

/* Per-card audience accent on the "For …" label, matching each
   product's brand colour so the label cues the audience without
   needing a separate marker. */
.suite-card[href*="retail-plus"] .suite-for { color: var(--tap-orange-deep); }
.suite-card[href*="supply-plus"] .suite-for { color: var(--tap-blue); }
.suite-card[href*="collectives"] .suite-for { color: var(--tap-pink); }
.suite-card.pos-card .suite-for,
.suite-card[href="Partners.html"] .suite-for { color: var(--tap-teal); }

/* Hover treatment also picks up the product accent so the affordance
   is themed to the audience. */
.suite-card[href*="retail-plus"]:hover { border-color: var(--tap-orange); }
.suite-card[href*="supply-plus"]:hover { border-color: var(--tap-blue); }
.suite-card[href*="collectives"]:hover { border-color: var(--tap-pink); }
.suite-card.pos-card:hover,
.suite-card[href="Partners.html"]:hover { border-color: var(--tap-teal); }
.suite-name { font-size: 18px; font-weight: 700; letter-spacing: -0.012em; }
.suite-name .for {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tap-ink-3); margin-bottom: 4px;
}
.suite-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.suite-desc p { margin: 0; }
.suite-lede {
  font-size: 15px;
  font-weight: 600;
  color: var(--tap-ink);
  line-height: 1.4;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.suite-sub {
  font-size: 13.5px;
  color: var(--tap-ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.suite-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.suite-cta { font-size: 12.5px; font-weight: 700; color: var(--tap-ink); display: inline-flex; align-items: center; gap: 4px; }
.suite-cta svg { width: 12px; height: 12px; transition: transform 150ms var(--ease); }
.suite-card:hover .suite-cta svg { transform: translateX(3px); }
.suite-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tap-ink-3);
  padding: 3px 8px;
  border: 1px solid var(--tap-line);
  border-radius: 20px;
}
.suite-tag.active { color: var(--tap-green); border-color: rgba(5,150,105,0.25); background: var(--tap-orange-subtle); }
.suite-tag.active { background: rgba(5,150,105,0.06); }
.suite-tag.soon { color: var(--tap-warning); border-color: rgba(217,119,6,0.25); background: rgba(217,119,6,0.06); }

/* ============================================================
   RETAIL+ deep dive
   ============================================================ */
.retail-deep {
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.retail-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.retail-deep h2 {
  font-size: 48px; font-weight: 800;
  line-height: 1.02; letter-spacing: -0.028em;
  margin: 14px 0 24px;
}
.retail-deep p {
  font-size: 18px; color: var(--tap-ink-2); line-height: 1.55; margin: 0 0 36px;
}
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 32px;
}
.kpi {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 12px;
  padding: 18px 18px;
}
.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tap-ink-3); }
.kpi-num {
  font-size: 36px; font-weight: 800; letter-spacing: -0.025em;
  margin: 6px 0 2px;
}
.kpi-num .unit { font-size: 18px; color: var(--tap-ink-3); font-weight: 500; margin-left: 2px; }
.kpi-sub { font-size: 13px; color: var(--tap-ink-2); }
.kpi.orange .kpi-num { color: var(--tap-orange-deep); }
.kpi.green .kpi-num { color: var(--tap-green); }

/* Retail+ "product screenshot" mock */
.app-shot {
  position: relative;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 16px;
  box-shadow: var(--tap-shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px 1fr 320px;
  min-height: 460px;
}
/* Image variant - the entire mock is replaced by a single screenshot.
   No dark chrome behind it; let the image bleed to the corners. */
.app-shot.app-shot-img {
  display: block;
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: 16px;
  line-height: 0;
  /* Pull the image out wider than the column it sits in, so it
     reads as a hero asset rather than a constrained card. */
  width: calc(100% + var(--pad-x, 80px));
  max-width: none;
}
.app-shot.app-shot-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
/* Sidebar */
.app-sb {
  background: #fff;
  border-right: 1px solid var(--tap-line);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 10px;
}
.app-sb-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--tap-grad-hank);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: var(--tap-shadow-orange);
}
.app-sb-divider { width: 24px; height: 1px; background: var(--tap-line); margin: 4px 0; }
.app-sb-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; color: var(--tap-ink-3);
  transition: all 120ms;
}
.app-sb-icon:hover { background: var(--tap-bg); color: var(--tap-ink); }
.app-sb-icon.active { background: var(--tap-orange-light); color: var(--tap-orange-deep); }
.app-sb-icon svg { width: 16px; height: 16px; }

/* Canvas */
.app-canvas { padding: 18px 22px; background: var(--tap-bg); display: flex; flex-direction: column; gap: 14px; }
.app-canvas-head { display: flex; align-items: center; justify-content: space-between; }
.app-canvas-title { font-size: 14px; font-weight: 700; }
.app-canvas-meta { font-size: 11px; color: var(--tap-ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.app-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-stat {
  background: #fff; border: 1px solid var(--tap-line); border-radius: 8px;
  padding: 10px 12px;
}
.app-stat-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tap-ink-3); }
.app-stat-num { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.app-stat-trend { font-size: 10px; font-weight: 500; color: var(--tap-green); }
.app-stat-trend.down { color: var(--tap-danger); }
.app-chart {
  flex: 1;
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 180px;
}
.app-chart-head { display: flex; align-items: center; justify-content: space-between; }
.app-chart-title { font-size: 12px; font-weight: 700; }
.app-chart-legend { display: flex; gap: 10px; }
.legend-item { font-size: 10px; color: var(--tap-ink-2); display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }

/* Chat rail in app shot */
.app-chat {
  background: #fff;
  border-left: 1px solid var(--tap-line);
  display: flex; flex-direction: column;
  padding: 14px 12px;
  gap: 10px;
}
.app-chat-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--tap-line);
}
.app-chat-name { font-size: 13px; font-weight: 700; }
.app-chat-meta { font-size: 10.5px; color: var(--tap-ink-3); display: flex; align-items: center; gap: 4px; }
.app-chat-stream { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow: hidden; }
.mini-bubble {
  font-size: 11.5px; line-height: 1.45;
  padding: 8px 10px;
  max-width: 88%;
}
.mini-bubble.assistant {
  background: var(--tap-orange-bubble);
  border-radius: 4px 12px 12px 12px;
  color: var(--tap-ink-on-orange);
  align-self: flex-start;
  border: 1px solid rgba(242,122,46,0.08);
}
.mini-bubble.user {
  background: var(--tap-grad-user); color: #fff;
  border-radius: 12px 12px 4px 12px;
  align-self: flex-end;
}

/* ============================================================
   QUOTE BAND
   ============================================================ */
.quote-band {
  background: var(--tap-grad-hank);
  color: #fff;
}
.quote-band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: end;
}
.quote-text {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}
.quote-text::before { content: "\201C"; font-size: 1em; line-height: 0; vertical-align: -0.1em; opacity: 0.55; margin-right: 4px; }
.quote-text::after { content: "\201D"; font-size: 1em; line-height: 0; vertical-align: -0.1em; opacity: 0.55; margin-left: 2px; }
.quote-attrib { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.quote-attrib-name { font-size: 18px; font-weight: 700; }
.quote-attrib-role { font-size: 14px; opacity: 0.85; }
.quote-attrib-source { font-size: 11px; opacity: 0.6; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; font-weight: 700; }

/* ============================================================
   HANK section - dark
   ============================================================ */
.hank-section {
  background: #14130F;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hank-section::before {
  content: ""; position: absolute;
  top: -200px; right: -200px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(242,122,46,0.35), transparent 60%);
  pointer-events: none;
}
.hank-section::after {
  content: ""; position: absolute;
  bottom: -200px; left: -200px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(74,144,217,0.18), transparent 60%);
  pointer-events: none;
}
.hank-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-areas:
    "head  demo"
    "feats feats";
  column-gap: 56px;
  row-gap: 56px;
  align-items: start;
}
.hank-head  { grid-area: head; align-self: center; }
.hank-demo  { grid-area: demo; align-self: start; }
.hank-features { grid-area: feats; }
.hank-inner h2 {
  font-size: 64px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.98;
  margin: 18px 0 24px;
}
.hank-inner h2 .ia {
  background: linear-gradient(135deg, #F27A2E, #FFC59E);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
  /* Italics overhang their inline box, and -webkit-background-clip
     clips painting to that box - the tail of "done." gets shaved
     unless we extend the box. Pad-right + matching negative margin
     gives the gradient room to render without shifting layout. */
  display: inline-block;
  padding-right: 0.18em;
  margin-right: -0.18em;
}
.hank-inner p { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.7); margin: 0 0 0; max-width: 480px; }

/* Hank section CTA row - sits beneath the headline + sub, routes
   to the AI deep-dive page. */
.hank-head-ctas {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hank-head-ctas .btn svg {
  width: 12px; height: 12px;
  margin-left: 6px;
  transition: transform 150ms var(--ease);
}
.hank-head-ctas .btn:hover svg { transform: translateX(3px); }

/* Horizontal scrolling feature card rail.
   Constrained to the parent .hank-inner container width - cards that
   exceed that width overflow horizontally and can be scrolled into view.
   The right edge fades out so users see "more cards exist". */
.hank-features {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 14px;
  scrollbar-width: none;
  /* Soft right-edge fade telegraphing scrollable content. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%);
}
.hank-features::-webkit-scrollbar { display: none; }
.hank-feat {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  gap: 12px;
  padding: 22px 22px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  scroll-snap-align: start;
  position: relative;
  min-height: 200px;
}
.hank-feat:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-3px);
}
.hank-feat-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(242,122,46,0.15); color: #FFB689;
  align-self: flex-start;
}
.hank-feat-tag.soon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }
.hank-feat-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.25;
  color: #fff;
}
.hank-feat-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  flex: 1;
}
.hank-feat-arrow {
  color: rgba(255,255,255,0.4);
  font-size: 18px;
  align-self: flex-end;
  transition: transform 150ms ease, color 150ms ease;
}
.hank-feat:hover .hank-feat-arrow {
  color: var(--tap-orange);
  transform: translateX(3px);
}

/* Hank chat demo on the right */
.hank-demo {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  position: relative;
}
/* Image variant - bigger, side-by-side with the headline.
   Visually breaks out to the right so it reads as the hero asset of the section. */
.hank-demo.hank-demo-img {
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
  line-height: 0;
  /* Bleed wider than the column so it asserts itself as the section's hero. */
  margin-right: calc(var(--pad-x, 80px) * -1);
}
.hank-demo.hank-demo-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px 0 0 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 12px 32px rgba(0,0,0,0.30);
}
.hank-demo-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}
.hank-demo-name { font-size: 13.5px; font-weight: 700; }
.hank-demo-meta { font-size: 11px; color: rgba(255,255,255,0.5); }
.hank-stream { display: flex; flex-direction: column; gap: 12px; }
.hank-stream .bubble.assistant {
  background: #FEF6F0;
  color: #2C2417;
}
.hank-stream .chat-card { background: #fff; }
.hank-stream .suggestions .sug-pill { background: rgba(242,122,46,0.16); color: #FFC59E; border-color: rgba(242,122,46,0.25); }

/* ============================================================
   NETWORK / Fortune 500 strip
   ============================================================ */
.network {
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.network-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
.network-side h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.02; margin: 14px 0 24px; }
.network-side p { font-size: 17px; color: var(--tap-ink-2); margin: 0; }

/* Full-width network metrics row - runs along the bottom of the section,
   spanning the entire page width. Numbers scale fluidly so they read
   as a confident editorial statement on any viewport. */
.network-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--tap-line);
}
.network-stat {
  position: relative;
  padding: 0 28px;
}
.network-stat + .network-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--tap-line);
}
.network-stat:first-child { padding-left: 0; }
.network-stat:last-child  { padding-right: 0; }
.network-stat-num {
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--tap-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.network-stat-num.orange { color: var(--tap-orange-deep); }
.network-stat-num .net-stat-unit {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tap-orange-deep);
  margin-left: 2px;
}
.network-stat-label {
  font-size: 14px;
  color: var(--tap-ink-2);
  margin-top: 14px;
  letter-spacing: -0.005em;
}

@media (max-width: 760px) {
  .network-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 0;
    margin-top: 48px;
    padding-top: 36px;
  }
  .network-stat { padding: 0 18px; }
  .network-stat:nth-child(odd)  { padding-left: 0; }
  .network-stat:nth-child(even) { padding-right: 0; }
  /* Reset the inherited "first/last" rule and add a divider only between
     the two columns (i.e. before every even item). */
  .network-stat + .network-stat::before { display: none; }
  .network-stat:nth-child(even)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%; bottom: 8%;
    width: 1px;
    background: var(--tap-line);
  }
}

/* ============================================================
   BRAND WALL - three-row marquee. Auto-scrolls in opposing directions
   to convey breadth and motion. Pauses on hover. Edges fade out.
   Inherently responsive - collapses cleanly to any viewport width.
   ============================================================ */
.brand-wall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  /* Soft fade at both edges to suggest infinite scroll. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.brand-wall-fade { display: none; } /* legacy hooks; mask handles it */

.brand-row {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
}
.brand-row-ltr { animation: brand-scroll-ltr 38s linear infinite; }
.brand-row-rtl { animation: brand-scroll-rtl 44s linear infinite; }
.brand-row-slow { animation-duration: 56s; }

/* Pause when the user hovers - respects intent to read. */
.brand-wall:hover .brand-row { animation-play-state: paused; }

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .brand-row { animation: none; transform: none; }
  .brand-wall {
    /* Allow horizontal scroll when motion is off. */
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

.brand-track {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 12px; /* same as gap, so the duplicate seam is invisible */
}

.brand-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 26px;
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 999px;
  font-family: "Circular XX", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--tap-ink-2);
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.brand-name:hover {
  color: var(--tap-ink);
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-2px);
}
.brand-name.brand-name-more {
  background: var(--tap-ink);
  color: #fff;
  border-color: var(--tap-ink);
  font-weight: 700;
}
.brand-name.brand-name-more:hover {
  background: var(--tap-orange);
  border-color: var(--tap-orange);
  color: #fff;
}

@keyframes brand-scroll-ltr {
  /* The track contains two identical halves; translate exactly 50%
     so the second half lands where the first started - seamless loop. */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes brand-scroll-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Responsive - smaller pills, faster scroll on mobile so motion stays lively. */
@media (max-width: 760px) {
  .brand-wall {
    gap: 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
  .brand-row { gap: 8px; }
  .brand-track { gap: 8px; padding-right: 8px; }
  .brand-name {
    height: 44px;
    padding: 0 18px;
    font-size: 13.5px;
  }
  .brand-row-ltr { animation-duration: 28s; }
  .brand-row-rtl { animation-duration: 32s; }
  .brand-row-slow { animation-duration: 40s; }
}

/* ============================================================
   POS PARTNER NETWORK
   World-class partner strip - uniform card treatment, status dots,
   "more" CTA tile, responsive grid → horizontal scroll on mobile.
   ============================================================ */
.pos {
  background: var(--tap-bg-warm);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
}
.pos-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

.pos-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.pos-head h2 {
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 14px 0 0;
}
.pos-head-deck {
  font-size: 17px;
  line-height: 1.5;
  color: var(--tap-ink-2);
  margin: 20px 0 0;
  max-width: 480px;
}

.pos-head-mega {
  text-align: right;
}
.pos-mega {
  font-size: clamp(72px, 8vw, 116px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tap-ink);
}
.pos-mega .unit { color: var(--tap-orange-deep); }
.pos-mega-label {
  font-size: 14px;
  color: var(--tap-ink-2);
  margin-top: 12px;
  max-width: 320px;
  margin-left: auto;
  line-height: 1.5;
}

.pos-partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
.pos-partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 132px;
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.pos-partner:hover {
  border-color: rgba(0,0,0,0.16);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.pos-partner-name {
  font-family: "Circular XX", -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--tap-ink);
  line-height: 1.1;
}
/* Logo lockup - wraps an <img> of a partner mark.
   The source assets are white-on-transparent; recolour them via
   filter so they render in ink against the white card. Each logo
   has its own optical height tuning so all marks read at the same
   visual weight across the row. */
.pos-partner-logo {
  display: flex;
  align-items: center;
  height: 32px;
}
.pos-partner-logo img {
  max-width: 130px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) opacity(0.82);
  transition: filter 150ms ease;
}
.pos-partner:hover .pos-partner-logo img { filter: brightness(0) opacity(1); }

/* Per-logo optical sizing - each mark has different intrinsic weight,
   so we tune heights so the row reads as one cohesive line. */
.pos-partner-logo img[alt="Surefire"]      { max-height: 22px; }
.pos-partner-logo img[alt="GPK"]           { max-height: 28px; }
.pos-partner-logo img[alt="SAFE Software"] { max-height: 18px; }
.pos-partner-logo img[alt="GAP"]           { max-height: 24px; }
.pos-partner-logo img[alt="Canary"]        { max-height: 20px; }
.pos-partner-logo img[alt="Toshiba"]       { max-height: 18px; }
.pos-partner-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tap-ink-3);
  letter-spacing: -0.005em;
}
.pos-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tap-ink-3);
}
.pos-status-live {
  background: #14B279;
  box-shadow: 0 0 0 3px rgba(20, 178, 121, 0.15);
}
.pos-status-onboarding {
  background: #F0B459;
  box-shadow: 0 0 0 3px rgba(240, 180, 89, 0.18);
}

/* "+ 24 more" CTA tile - dark, sits as the row's punctuation */
.pos-partner-more {
  background: var(--tap-ink);
  border-color: var(--tap-ink);
  color: #fff;
}
.pos-partner-more:hover {
  background: var(--tap-orange);
  border-color: var(--tap-orange);
  transform: translateY(-2px);
}
.pos-partner-more .pos-partner-name { color: #fff; }
.pos-partner-more .pos-partner-meta { color: rgba(255, 255, 255, 0.65); }

.pos-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .pos-head {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pos-head-mega { text-align: left; }
  .pos-mega-label { margin-left: 0; }
  .pos-partners { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .pos-partners { grid-template-columns: repeat(2, 1fr); }
  .pos-partner {
    min-height: 116px;
    padding: 18px 18px 16px;
    gap: 22px;
  }
  .pos-partner-name { font-size: 19px; }
}
@media (max-width: 420px) {
  .pos-partners {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-left: calc(var(--pad-x) * -1);
    margin-right: calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x) 14px;
    scrollbar-width: none;
    gap: 10px;
  }
  .pos-partners::-webkit-scrollbar { display: none; }
  .pos-partner {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   THESIS / Intelligent Commerce
   ============================================================ */
.thesis {
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
.thesis-mark {
  display: grid; place-items: center;
  aspect-ratio: 1;
  position: relative;
}
.thesis-mark img { width: 100%; max-width: 360px; height: auto; }
.thesis-body h2 {
  font-size: 80px; font-weight: 800;
  letter-spacing: -0.032em; line-height: 0.98;
  margin: 18px 0 16px;
  text-wrap: balance;
}
.thesis-body h2 .it { font-style: italic; font-weight: 700; color: var(--tap-orange); }
.thesis-body h3 {
  font-size: 24px; font-weight: 500;
  color: var(--tap-ink-2); margin: 0 0 32px;
  letter-spacing: -0.008em;
}
.thesis-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--tap-ink);
  border-bottom: 2px solid var(--tap-orange);
  padding-bottom: 4px;
}
.thesis-link svg { width: 14px; height: 14px; }

/* ============================================================
   NEWS
   ============================================================ */
.news {
  border-top: 1px solid var(--tap-line);
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.news-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }
.news-head h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.02; margin: 14px 0 0; }
.news-link { font-size: 14px; font-weight: 700; color: var(--tap-ink); border-bottom: 2px solid var(--tap-orange); padding-bottom: 4px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  transition: all 200ms var(--ease);
  min-height: 280px;
}
.news-card:hover {
  border-color: var(--tap-line-strong);
  box-shadow: var(--tap-shadow-md);
  transform: translateY(-2px);
}
.news-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tap-orange-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.news-kind::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tap-orange);
}
.news-date { font-size: 11.5px; color: var(--tap-ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.news-card h3 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.2;
  margin: 0; flex: 1;
}
.news-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.news-foot-cta {
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.news-foot-cta svg { width: 12px; height: 12px; transition: transform 150ms var(--ease); }
.news-card:hover .news-foot-cta svg { transform: translateX(3px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #14130F;
  color: rgba(255,255,255,0.62);
}

/* Newsletter strip — light warm surface sitting above the dark footer
   so the bottom doesn't read as one big dark block. */
.footer-newsletter {
  background: var(--tap-bg-warm, #FBF6EE);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: var(--tap-ink);
}
.footer-newsletter-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.footer-newsletter h3 {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--tap-ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.footer-newsletter > div > p,
.footer-newsletter-inner > div > p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tap-ink-2);
  margin: 0;
  max-width: 44ch;
}
.footer-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.footer-form input {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--tap-ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.footer-form input::placeholder { color: var(--tap-ink-3); }
.footer-form input:focus {
  outline: none;
  border-color: var(--tap-orange);
  box-shadow: 0 0 0 3px rgba(242,122,46,0.15);
}
.footer-form .btn { flex: none; white-space: nowrap; }

@media (max-width: 900px) {
  .footer-newsletter-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px var(--pad-x);
  }
}

.footer-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px var(--pad-x) 48px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
}
.footer-brand-block {
  display: flex;
  flex-direction: column;
  max-width: 340px;
}
.footer-logo { display: inline-block; margin-bottom: 20px; }
.footer-logo img { height: 28px; width: auto; display: block; }
.footer-brand-block p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 24px;
  color: rgba(255,255,255,0.62);
}
.footer-socials { display: flex; gap: 8px; margin-top: auto; }
.social {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  display: grid;
  place-items: center;
  transition: background 150ms, color 150ms;
}
.social:hover { background: var(--tap-orange); color: #fff; }
.social svg { width: 14px; height: 14px; }

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 6px 0 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  transition: color 120ms;
}
.footer-col a:hover { color: #fff; }
.footer-col .tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
  padding: 2px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle;
}

.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad-x) 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.42);
}
.footer-bottom-l { color: rgba(255,255,255,0.55); }
.footer-bottom-links { display: flex; gap: 22px; }
.footer-bottom-links a { color: rgba(255,255,255,0.55); transition: color 120ms; }
.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 980px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 56px var(--pad-x) 32px;
  }
  .footer-brand-block { grid-column: 1 / -1; max-width: none; }
  .footer-brand-block p { max-width: 480px; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.footer-bottom-links { display: flex; gap: 24px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  :root { --pad-x: 32px; --type-h1: 56px; --type-h2: 40px; }
  .hero-grid, .retail-deep-grid, .quote-band-inner, .network-grid, .thesis { grid-template-columns: 1fr; gap: 48px; }
  .hank-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "demo" "feats";
    gap: 32px;
  }
  .hank-demo.hank-demo-img { margin-right: 0; }
  .hank-demo.hank-demo-img img { border-radius: 18px; }
  .hank-features { padding-left: 0; padding-right: 0; }
  .suite-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; }
  .thesis-body h2 { font-size: 56px; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .suite-grid { grid-template-columns: 1fr; }
  .quote-text { font-size: 28px; }
}


/* ============================================================
   ASK HANK - hero preview (mobile-style empty/suggested state)
   ============================================================ */
.preview.ask-hank {
  padding: 0;
  gap: 0;
  overflow: hidden;
  min-height: 620px;
}

/* Header */
.ask-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--tap-line);
  background: linear-gradient(180deg, #FFF7F0 0%, #FFFFFF 100%);
}
.ask-head-avatar {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--tap-grad-hank);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px;
  letter-spacing: -0.02em;
  flex: none;
  box-shadow: 0 1px 3px rgba(242,122,46,0.30);
}
.ask-head-avatar .ask-h { transform: translateY(-1px); }
.ask-head-avatar .ask-presence {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #29B36A;
  border: 2px solid #fff;
}
.ask-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ask-head-title { display: flex; align-items: center; gap: 8px; }
.ask-name { font-size: 14.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--tap-ink); }
.ai-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--tap-orange-light); color: var(--tap-orange-deep);
  text-transform: uppercase;
}
.ask-head-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--tap-ink-2);
  min-width: 0;
}
.ask-head-meta .pin { width: 12px; height: 12px; color: var(--tap-orange); flex: none; }
.ask-head-meta .caret { width: 10px; height: 10px; color: var(--tap-ink-3); flex: none; }
.ask-scope { font-weight: 700; color: var(--tap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-dot { color: var(--tap-ink-3); margin: 0 2px; }
.ask-period { color: var(--tap-ink-2); white-space: nowrap; }
.ask-head-actions { display: flex; gap: 6px; margin-left: auto; flex: none; }
.ask-icon-btn {
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  border: 1px solid var(--tap-line-strong);
  background: #fff;
  color: var(--tap-ink-2);
  transition: background 120ms, color 120ms;
}
.ask-icon-btn:hover { background: var(--tap-bg); color: var(--tap-ink); }
.ask-icon-btn svg { width: 13px; height: 13px; }

/* Body */
.ask-body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 24px 16px 12px;
  gap: 18px;
  overflow: hidden;
}
.ask-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ask-hero-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--tap-grad-hank);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  box-shadow: 0 4px 14px rgba(242,122,46,0.30);
}
.ask-hero-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--tap-ink);
  margin-top: 4px;
}
.ask-hero-sub { font-size: 13px; color: var(--tap-ink-2); margin-top: -4px; }

.ask-suggested-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tap-ink-3);
  padding: 0 4px;
}

.ask-suggest-list { display: flex; flex-direction: column; gap: 8px; }
.ask-suggest {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.ask-suggest:hover {
  border-color: var(--tap-line-strong);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.ask-suggest-ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  flex: none;
}
.ask-suggest-ic svg { width: 16px; height: 16px; }
.ask-suggest-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ask-suggest-title {
  font-size: 13px; font-weight: 600; color: var(--tap-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ask-suggest-cat {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
}
.ask-suggest-chev { width: 12px; height: 12px; color: var(--tap-ink-3); flex: none; }

/* Category color pairs (bg tint + text/icon color) */
.ic-analytics    { background: #FDECDC; color: #E8601A; }
.cat-analytics   { color: #E8601A; }
.ic-departments  { background: #E9F2D9; color: #6B8E1F; }
.cat-departments { color: #6B8E1F; }
.ic-products     { background: #EFE3F4; color: #8B4FB3; }
.cat-products    { color: #8B4FB3; }
.ic-inventory    { background: #DFEDF8; color: #2D7BB8; }
.cat-inventory   { color: #2D7BB8; }
.ic-performance  { background: #ECE6F7; color: #6E4FB8; }
.cat-performance { color: #6E4FB8; }
.ic-alerts       { background: #D9EEEE; color: #1F8C8F; }
.cat-alerts      { color: #1F8C8F; }

/* Footer composer */
.ask-foot {
  padding: 10px 14px 16px;
  border-top: 1px solid var(--tap-line);
  background: #fff;
}
.ask-composer {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--tap-line-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.ask-composer-input {
  flex: 1; font-size: 13px; color: var(--tap-ink-3);
}
.ask-mention {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--tap-ink-2);
  transition: background 120ms, color 120ms;
}
.ask-mention:hover { background: var(--tap-bg); color: var(--tap-ink); }
.ask-mention svg { width: 14px; height: 14px; }
.ask-send {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tap-orange-light);
  color: var(--tap-orange-deep);
  transition: background 120ms;
}
.ask-send:hover { background: #FCDCBF; }
.ask-send svg { width: 14px; height: 14px; }
.ask-disclaimer {
  text-align: center; font-size: 11px; color: var(--tap-ink-3);
  margin-top: 10px;
}