/* ============================================================
   NFCRx ))) — NFC in Print · Powered by TapIt2TrackIt
   Brand: navy #1B2A6B · red #E23A26 · white, gold foil accent
   ============================================================ */

:root {
  --navy: #1b2a6b;
  --navy-deep: #101c4d;
  --navy-ink: #0b1438;
  --red: #e23a26;
  --red-dark: #c22e1c;
  /* white on the brand red is 4.31:1 and AA text needs 4.5:1. This is the
     nearest red that clears it, at 4.61:1. Used for any surface carrying WHITE
     TEXT on red. The brand --red is unchanged everywhere else, so the identity
     does not move. */
  --red-btn: #dc3421;
  /* the brand red as text fails WCAG AA on both dark surfaces: 4.15:1 on
     --navy-ink and 3.76:1 on --navy-deep. This is the nearest red that clears
     4.5:1 on both. Use it for red TEXT on dark, not for fills. */
  --red-on-dark: #ef5b45;
  --gold: #c9a24a;
  --paper: #ffffff;
  --mist: #f4f6fb;
  --line: #dde3f0;
  --text: #1c2340;
  --muted: #5a6280;
  --ok: #1d8a4a;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16, 28, 77, 0.10);
  --shadow-lg: 0 24px 60px rgba(16, 28, 77, 0.18);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto is load bearing. The width/height attributes we set on every img
   for layout stability become CSS presentational hints, so any rule that sets
   width alone would leave an absolute height hint in place and squash the
   picture. Rules that genuinely want a fixed height out-specify this. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
.container { width: min(1180px, 92%); margin: 0 auto; }
.section { padding: 88px 0; }
.section.alt { background: var(--mist); }
.section-dark { background: var(--navy-deep); color: #eaeefc; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--navy); }
.section-dark h2 { color: #fff; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); margin-bottom: 14px;
}
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--red); border-radius: 2px; }
.section-dark .kicker { color: var(--red-on-dark); }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 640px; }
.section-dark .lead { color: #b9c2e6; }
.center { text-align: center; }
.center .lead { margin: 0 auto; }

/* ---------- wordmark ---------- */
.wordmark { display: inline-flex; align-items: baseline; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark .t1 { color: var(--navy); }
.wordmark .t2 { color: var(--red); }
.wordmark .waves { color: var(--navy); font-weight: 800; letter-spacing: -0.12em; margin-left: 1px; }
.section-dark .wordmark .t1, .section-dark .wordmark .waves { color: #fff; }
.wordmark sup { font-size: 0.4em; font-weight: 700; margin-left: 3px; color: var(--muted); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(16,28,77,0.07); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.logo { text-decoration: none; font-size: 1.5rem; display: inline-flex; align-items: baseline; }
/* Andy, 2026-08-19: header lockup up 10% (1.5rem -> 1.65rem). Scoped to
   .site-header so the footer (1.4rem) and portal login card are untouched. */
/* Rich's real lockup replaced the CSS wordmark in the header, 2026-08-23.
   height fixed + width auto is the pair that stops <picture> squashing the
   image: the two sources have different intrinsic widths, so a fixed width
   attribute would stretch one of them. */
.site-header .logo img { display: block; height: 52px; width: auto; }
@media (max-width: 860px) { .site-header .logo img { height: 38px; } }
@media (max-width: 380px) { .site-header .logo img { height: 32px; } }
.logo .tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin-left: 10px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 18px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 0.89rem; color: var(--text); }
.nav a:hover { color: var(--red); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.phone-link { text-decoration: none; font-weight: 700; font-size: 0.92rem; color: var(--navy); white-space: nowrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font); font-weight: 800; font-size: 0.98rem;
  text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--red-btn); color: #fff; box-shadow: 0 8px 22px rgba(226, 58, 38, 0.32); }
.btn-primary:hover { background: var(--red-dark); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); }
.btn-sm { padding: 9px 18px; font-size: 0.86rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: 0.2s; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(226,58,38,0.14), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(27,42,107,0.10), transparent 60%),
    linear-gradient(180deg, #fdfdff 0%, #f2f5fc 100%);
  padding: 158px 0 96px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 0.82rem; font-weight: 700; color: var(--navy);
  box-shadow: var(--shadow); margin-bottom: 22px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(29,138,74,0.4); } 50% { box-shadow: 0 0 0 6px rgba(29,138,74,0); } }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 900; color: var(--navy); margin-bottom: 20px; }
.hero h1 .accent { color: var(--red); position: relative; }
.hero p.lead { margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.rtc { display: flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: 0.1em; font-size: 0.9rem; color: var(--navy); margin-bottom: 26px; }
.rtc .sep { color: var(--red); }
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stat .num { font-size: 1.5rem; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.hero-stat .num em { color: var(--red); font-style: normal; }
.hero-stat .lbl { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

/* hero tap demo */
.tap-demo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
/* The booklet is a cutout carrying its own shadow, so no card frame around it.
   A box-shadow here would trace the rectangle, not the booklet silhouette. */
.demo-card {
  position: relative; width: 190px;
  transform: rotate(-7deg) translateX(-96px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.demo-card img { display: block; width: 100%; height: auto; }
.demo-card:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 6px; }
/* On tap the booklet travels TOWARD the phone and straightens, so its edge
   tucks behind the phone. Rich asked for this on 2026-08-04. It stays under
   the phone's z-index on purpose: sliding it OVER the phone would cover the
   very menu the tap is supposed to reveal. */
.tap-demo.tapped .demo-card { transform: rotate(-2deg) translateX(58px) translateY(-14px); }
/* the ripple starts where the two actually meet, not mid-air */
.tap-demo.tapped .demo-waves { transform: translate(-32%, -50%); }
.demo-waves {
  position: absolute; left: 50%; top: 50%; transform: translate(-64%, -50%);
  width: 120px; height: 120px; pointer-events: none; opacity: 0; z-index: 3;
}
.tap-demo.tapped .demo-waves { opacity: 1; }
.demo-waves span {
  position: absolute; inset: 0; border: 3px solid var(--red); border-radius: 50%;
  opacity: 0; transform: scale(0.3);
}
.tap-demo.tapped .demo-waves span { animation: wave 1.4s ease-out infinite; }
.tap-demo.tapped .demo-waves span:nth-child(2) { animation-delay: 0.35s; }
.tap-demo.tapped .demo-waves span:nth-child(3) { animation-delay: 0.7s; }
@keyframes wave { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.15); } }
.demo-phone {
  position: relative; z-index: 2; width: 250px; border-radius: 34px;
  background: #10131c; padding: 12px; box-shadow: var(--shadow-lg);
  transform: rotate(4deg) translateX(78px);
}
.demo-screen { border-radius: 24px; overflow: hidden; background: #fff; height: 470px; position: relative; }
.screen-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 18px; text-align: center; transition: opacity 0.4s; }
.screen-lock { background: linear-gradient(180deg, #1a2350, #0e1638); color: #fff; }
.screen-lock .time { font-size: 2.4rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.screen-lock .hint { font-size: 0.78rem; color: #aab4dd; }
.screen-content { background: #fff; opacity: 0; pointer-events: none; justify-content: flex-start; padding-top: 26px; }
.tap-demo.tapped .screen-lock { opacity: 0; }
.tap-demo.tapped .screen-content { opacity: 1; pointer-events: auto; }
.screen-content .sc-brand { font-weight: 900; color: var(--navy); letter-spacing: 0.05em; font-size: 1.1rem; }
.screen-content .sc-generic { font-size: 0.62rem; color: var(--muted); margin-top: -8px; }
.screen-content .sc-menu { width: 100%; display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.sc-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 13px;
  font-size: 0.8rem; font-weight: 700; color: var(--navy); text-align: left;
  background: #fff; opacity: 0; transform: translateY(8px);
}
.tap-demo.tapped .sc-item { animation: sc-in 0.45s forwards; }
.tap-demo.tapped .sc-item:nth-child(1) { animation-delay: 0.25s; }
.tap-demo.tapped .sc-item:nth-child(2) { animation-delay: 0.4s; }
.tap-demo.tapped .sc-item:nth-child(3) { animation-delay: 0.55s; }
.tap-demo.tapped .sc-item:nth-child(4) { animation-delay: 0.7s; }
@keyframes sc-in { to { opacity: 1; transform: translateY(0); } }
.sc-item .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--mist); display: grid; place-items: center; font-size: 0.9rem; }
.sc-cta { margin-top: 12px; background: var(--navy); color: #fff; border-radius: 999px; padding: 10px 26px; font-size: 0.82rem; font-weight: 800; opacity: 0; }
.tap-demo.tapped .sc-cta { animation: sc-in 0.45s 0.85s forwards; }
.tap-hint {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  z-index: 5;
}
.tap-hint .btn { box-shadow: 0 10px 26px rgba(226,58,38,0.4); }
.tap-demo.tapped .tap-hint .btn-primary { background: var(--navy); box-shadow: 0 10px 26px rgba(27,42,107,0.35); }
.live-chip {
  position: absolute; top: 6px; right: -4px; z-index: 6;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 12px 16px; min-width: 168px;
  opacity: 0; transform: translateY(-8px); transition: 0.4s 0.5s;
}
.tap-demo.tapped .live-chip { opacity: 1; transform: translateY(0); }
.live-chip .lc-head { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.live-chip .lc-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: pulse-dot 1.6s infinite; }
.live-chip .lc-num { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.live-chip .lc-sub { font-size: 0.7rem; color: var(--muted); }

/* ---------- ribbon strip ---------- */
.strip { background: var(--navy); color: #fff; padding: 16px 0; }
.strip-in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; font-weight: 700; font-size: 0.95rem; }
.strip a { color: #ffd9d3; font-weight: 800; }

/* ---------- how it works / explainer ---------- */
.how-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; margin-top: 48px; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  display: flex; gap: 18px; padding: 20px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.step.active { border-color: var(--red); box-shadow: var(--shadow); }
.step-num {
  flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mist); color: var(--navy); font-weight: 900; font-size: 1.05rem;
  transition: 0.2s;
}
.step.active .step-num { background: var(--red-btn); color: #fff; }
.step h3 { font-size: 1.06rem; color: var(--navy); margin-bottom: 4px; }
.step p { font-size: 0.92rem; color: var(--muted); }

/* explainer player. The produced 25 second explainer replaced the CSS scene
   deck on 2026-08-10. The video is 16:9 and silent: it carries no audio track
   at all, so there is nothing to caption, and the transcript below it is the
   text alternative for video-only content. */
.player {
  border-radius: 18px; overflow: hidden; background: var(--navy-ink);
  box-shadow: var(--shadow-lg); position: relative; aspect-ratio: 16 / 9;
  margin: 0;
}
@keyframes scene-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
/* the width and height attributes on the video are presentational hints, same
   trap as img. These override both, so the frame cannot squash. */
.player-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--navy-ink); }
/* pre-play overlay only. It is aria-hidden and not focusable on purpose: the
   video's own native controls are the real, keyboard reachable control, and a
   second button in the a11y tree doing the same job is noise. */
/* icon only, and a light scrim rather than a heavy one: the poster frame
   already carries the headline, so a label here would sit on top of it and a
   dark wash would mute the copy the client wrote. */
.player-cta {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; cursor: pointer; color: #fff; font: inherit;
  background: rgba(11,20,56,0.18);
  transition: opacity 0.3s, background 0.25s;
}
.player-cta:hover { background: rgba(11,20,56,0.28); }
.player-cta-ico {
  width: 66px; height: 66px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; font-size: 1.35rem; padding-left: 4px;
  box-shadow: 0 10px 30px rgba(11,20,56,0.45);
  transition: transform 0.25s;
}
.player-cta:hover .player-cta-ico { transform: scale(1.08); }
.player.playing .player-cta { opacity: 0; pointer-events: none; }
/* the chapter click has to wait for the buffer to reach the target, because
   the host does not serve byte ranges. Say so rather than looking frozen. */
.player.loading .player-cta-ico { opacity: 0.55; }
.player.loading .player-cta::after {
  content: "Loading"; position: absolute; left: 0; right: 0; bottom: 34%;
  text-align: center; font-size: 0.85rem; font-weight: 700; color: #fff;
}
.player-note { margin-top: 14px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.player-tx { margin-top: 10px; font-size: 0.88rem; color: var(--muted); }
.player-tx summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.player-tx summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.player-tx ol { margin: 12px 0 0 20px; display: grid; gap: 10px; }
.player-tx b { color: var(--navy); }
/* the steps are the video's chapter list, so they need to be reachable the way
   any control is. Same fix the hero booklet needed. */
.step:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .player-cta, .player-cta-ico { transition: none; }
  .player-cta:hover .player-cta-ico { transform: none; }
}
/* Henry's assets are three different kinds of thing and each needs its own
   treatment. Cutouts get a soft panel and no frame, self-framed graphics get no
   outer card at all, and opaque photos ARE the card. Wrapping all three in a
   white bordered box is what made them read as floating. */
/* cutout: sits on a tinted panel, bottom aligned, no shadow or radius on the
   image itself. The subjects are cropped at the waist in the source, so meeting
   the panel edge makes that crop look deliberate. */
/* the photo sits inside the player column rather than in its own centred row,
   so it fills the column instead of floating in side whitespace */
.how-photo { margin-top: 26px; text-align: center; }
.how-photo-panel { background: linear-gradient(180deg, #f7f9ff, #e9eefb); border-radius: 20px;
  padding: 26px 20px 0; overflow: hidden; }
.how-photo img { width: 100%; max-width: 420px; margin: 0 auto; }
.how-photo-cap { margin-top: 14px; font-size: 0.85rem; color: var(--muted); }

/* ---------- products ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.prod-card {
  border-radius: var(--radius); border: 1.5px solid var(--line); background: #fff;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* Henry's product photography replaced the CSS mocks 2026-08-23 (Rich: "use
   Henry's images please", row B, the lifestyle set). The shots are square and
   carry their own white ground and partner logo bar, so the visual is sized BY
   the image rather than to a fixed 210px box: width 100% + height auto. Do not
   reintroduce a fixed height here, it letterboxes a 1:1 photo against the old
   gradient. */
.prod-visual { display: block; position: relative; overflow: hidden; }
.prod-visual img { display: block; width: 100%; height: auto; }
.prod-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prod-body h3 { color: var(--navy); font-size: 1.15rem; }
.prod-body p { font-size: 0.93rem; color: var(--muted); flex: 1; }
.prod-spec { display: flex; gap: 8px; flex-wrap: wrap; }
.spec-chip { font-size: 0.72rem; font-weight: 700; background: var(--mist); color: var(--navy); border-radius: 999px; padding: 5px 12px; }
/* Rich's example title treatment: NFC PASSPORT to Understanding <condition>,
   brand at the foot. Keeps the demo brand consistent with the hero booklet. */
.pv-custom { background: linear-gradient(160deg, #fdeeec, #f7dcd7); }
.custom-shapes { position: relative; width: 170px; height: 140px; }
.custom-shapes .shape { position: absolute; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(16,28,77,0.16); display: grid; place-items: center; font-size: 0.6rem; font-weight: 800; color: var(--navy); text-align: center; }
.custom-shapes .s1 { width: 96px; height: 60px; top: 6px; left: 0; transform: rotate(-6deg); }
.custom-shapes .s2 { width: 76px; height: 100px; top: 20px; right: 0; transform: rotate(5deg); }
.custom-shapes .s3 { width: 90px; height: 46px; bottom: 0; left: 24px; transform: rotate(-2deg); border: 1.5px dashed var(--red); background: #fff8f7; color: var(--red); }

/* Pharma Card: CSS mock standing in until Rich's PHARMA CARD artwork is on disk.
   Landscape wallet card, so it reads as a different object from the portrait
   passport sitting beside it. Swap the whole .pharmacard div for an <img> when
   the real render arrives. */
.pharmacard .pc-rows span { height: 4px; border-radius: 2px; background: var(--mist); }
.pharmacard .pc-rows span:nth-child(2) { width: 78%; }
.pharmacard .pc-rows span:nth-child(3) { width: 54%; }

/* Custom-printer band. Rich wants the three formats read as a starting set and
   the custom capability read as the real offer, so it gets its own row rather
   than a fourth card competing inside the grid. */
.custom-band {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center;
  margin-top: 28px; padding: 30px; background: #fff;
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.custom-band .cb-visual { display: grid; place-items: center; height: 190px; border-radius: 14px; background: linear-gradient(160deg, #fdeeec, #f7dcd7); }
.custom-band .cb-body h3 { color: var(--navy); font-size: 1.35rem; margin: 10px 0 10px; }
.custom-band .cb-body p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; }
.custom-band .cb-body .prod-spec { margin-bottom: 18px; }
.prod-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
/* cutouts again: same tint as .pv-booklet above so the band reads as a set
   with the format cards. One uniform box height keeps three very different
   aspect ratios from looking randomly scaled. */
.prod-photo { background: linear-gradient(160deg, #eef1fa, #dde3f4); border: 0; border-radius: var(--radius); padding: 24px 20px 18px; text-align: center; }
.prod-photo img { width: 100%; height: 200px; object-fit: contain; margin-bottom: 16px; }
.prod-photo figcaption { font-size: 0.85rem; font-weight: 700; color: var(--navy); }

/* ---------- tapit2trackit dashboard ---------- */
.t2t-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: end; margin-bottom: 46px; }
.t2t-logo { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.t2t-logo .t1, .t2t-logo .waves { color: #fff; }
.t2t-badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.t2t-badge {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px; padding: 12px 18px; text-align: center;
}
.t2t-badge .b-num { font-weight: 900; font-size: 1.3rem; color: #ff8d7e; }
.t2t-badge .b-lbl { font-size: 0.7rem; color: #b9c2e6; font-weight: 600; }

.dash {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
  overflow: hidden; color: var(--text);
}
.dash-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.dash-title { display: flex; align-items: center; gap: 12px; }
.dash-title .camp { font-weight: 800; color: var(--navy); font-size: 0.98rem; }
.dash-title .env { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; background: #fdeeec; color: var(--red); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.dash-live { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--ok); }
.dash-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse-dot 2s infinite; }
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid var(--line); }
.metric { padding: 20px 22px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric .m-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.metric .m-num { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.metric .m-delta { font-size: 0.74rem; font-weight: 700; color: var(--ok); }
.dash-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; }
.dash-panel { padding: 22px; }
.dash-panel + .dash-panel { border-left: 1px solid var(--line); }
.dash-panel h2, .dash-panel h3 { font-size: 0.86rem; color: var(--navy); margin-bottom: 14px; letter-spacing: 0.02em; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bars .bar { flex: 1; background: linear-gradient(180deg, #3a53b4, var(--navy)); border-radius: 6px 6px 0 0; min-height: 6px; height: 0; transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1); position: relative; }
.bars .bar.hot { background: linear-gradient(180deg, #ff7a68, var(--red)); }
.bars-x { display: flex; gap: 8px; margin-top: 8px; }
.bars-x span { flex: 1; text-align: center; font-size: 0.62rem; color: var(--muted); font-weight: 600; }
.rank { display: flex; flex-direction: column; gap: 12px; }
.rank-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 0.82rem; }
.rank-row .r-lbl { font-weight: 700; color: var(--text); }
.rank-row .r-val { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.rank-row .r-track { grid-column: 1 / -1; height: 7px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.rank-row .r-fill { height: 100%; width: 0; background: var(--red); border-radius: 4px; transition: width 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.rank-row:nth-child(even) .r-fill { background: var(--navy); }
.dash-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); }
/* opaque photo on a dark section. It used to sit in a full width white card,
   which left a 420px image stranded in an 1180px white box. The image carries
   its own radius and shadow instead, so there is no empty box. */
/* photo and the metric chips share one row, so neither is a lone centred block
   with dead space either side */
.t2t-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 44px; align-items: center; margin-top: 34px; }
/* Interim while the analytics photo is pulled: one centred column, capped so
   the eight chips do not stretch into a single thin line on a wide screen.
   Delete this rule and the modifier class when the new photo goes back in. */
.t2t-split--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.t2t-split--solo .metric-cloud { justify-content: center; }
.t2t-split-h { font-size: 1.3rem; color: #fff; margin-bottom: 18px; }
.dash-photo { text-align: center; }
.dash-photo img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-lg); }
.metric-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-top: 0; }
.mc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  color: #dfe5fa; border-radius: 999px; padding: 9px 18px; font-size: 0.85rem; font-weight: 700;
}
.mc-chip::before { content: "✓"; color: #ff8d7e; font-weight: 900; }
.t2t-cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- benefits tabs ---------- */
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 40px 0 34px; }
.tab-btn {
  border: 1.5px solid var(--line); background: #fff; color: var(--navy);
  border-radius: 999px; padding: 12px 26px; font-family: var(--font);
  font-weight: 800; font-size: 0.95rem; cursor: pointer; transition: 0.2s;
}
.tab-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab-pane { display: none; }
.tab-pane.on { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; animation: scene-in 0.4s; }
.ben-item {
  display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.ben-item .check { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #e9f7ef; color: var(--ok); display: grid; place-items: center; font-weight: 900; font-size: 0.8rem; }
.ben-item p { font-size: 0.94rem; font-weight: 600; color: var(--text); }
.ben-item p small { display: block; font-weight: 500; color: var(--muted); }

/* ---------- features band ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.feat {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; transition: transform 0.2s, box-shadow 0.2s;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feat .f-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--mist); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 14px; }
.feat h3 { font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.feat p { font-size: 0.88rem; color: var(--muted); }
/* self framed: the graphic already draws its own blue rule, so an outer card
   was a box inside a box. */
/* the four feature cards and the Perfect For graphic share a row, so the
   graphic is not stranded under the grid */
.ben-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.ben-split .feat-grid { grid-template-columns: repeat(2, 1fr); margin-top: 44px; }
.ben-photo { margin-top: 44px; text-align: center; }
.ben-photo img { width: 100%; height: auto; }

/* ---------- industries ---------- */
#industries { background: var(--navy-ink); }
#industries .wordmark .t1, #industries .wordmark .waves { color: #fff; }
/* the ™ inherits --muted from .wordmark sup, which is unreadable on navy */
.section-dark .wordmark sup { color: #b9c2e6; }
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.ind-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding: 26px 22px; transition: transform 0.2s, box-shadow 0.2s;
}
.ind-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ind-num { font-family: var(--mono); font-weight: 900; font-size: 1.1rem; color: var(--red-on-dark); margin-bottom: 12px; }
.ind-card h3 { font-size: 1rem; color: #fff; margin-bottom: 6px; }
.ind-card p { font-size: 0.88rem; color: #b9c2e6; }
.ind-cta { text-align: center; margin-top: 44px; }
.ind-cta p { color: #b9c2e6; max-width: 560px; margin: 0 auto 20px; }

/* ---------- pricing ---------- */
.price-row { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-top: 46px; }
/* Investment band. Replaced the priced .price-band on 2026-08-20 at Rich's
   request: the section no longer publishes a number, it opens a conversation.
   The old .price-num rules went with it rather than being left to rot. */
.invest-band {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  background: #fff; border-radius: 20px; border: 2px solid var(--red);
  box-shadow: var(--shadow-lg); padding: 38px 44px;
}
.invest-copy h3 { color: var(--navy); font-size: 1.35rem; margin-bottom: 10px; }
.invest-copy p { color: var(--muted); font-size: 0.95rem; max-width: 62ch; }
.invest-copy .btn { margin-top: 20px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.84rem; }
.invest-fine { font-size: 0.78rem; color: var(--muted); margin-top: 12px; }

/* Divider is a border on the aside, not a pseudo element, so it disappears
   with the column when the band stacks at 900px. */
.invest-aside { border-left: 1px solid var(--line); padding-left: 40px; max-width: 300px; }
.invest-ico {
  width: 54px; height: 54px; border-radius: 50%; background: #fdf1ef;
  display: grid; place-items: center; margin-bottom: 14px;
}
.invest-ico svg { width: 31px; height: 31px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* fill via CSS, not a presentation attribute: an attribute loses to any rule
   above and the dot would render hollow. */
.invest-ico svg .dot { fill: var(--red); stroke: none; }
.invest-ico svg .flt { stroke-width: 2.4; }
.invest-aside-lbl {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
  white-space: nowrap;
}
.invest-list { list-style: none; padding: 0; margin: 0; }
.invest-list li { color: var(--muted); font-size: 0.92rem; line-height: 1.9; }

@media (max-width: 900px) {
  .invest-band { grid-template-columns: 1fr; gap: 28px; padding: 30px 26px; }
  .invest-aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; max-width: none; }
  .invest-aside-lbl { white-space: normal; }
  .invest-copy p { max-width: none; }
}

/* ---------- addon ----------
   Rich asked for "sizzle and pizzazz" here on 2026-08-04. The band was a flat
   card. Motion is decorative only: two drifting colour orbs behind the copy and
   a slow pulse on the CTA, both switched off under prefers-reduced-motion. */
.addon {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  background: linear-gradient(120deg, #101c4d, #26205c 60%, #4a1e4e);
  border-radius: 20px; padding: 44px 48px; color: #fff; box-shadow: var(--shadow-lg);
}
.addon .kicker { color: #ff8d7e; }
.addon h3 { font-size: 1.6rem; margin-bottom: 10px; }
.addon p { color: #c9cfee; max-width: 560px; }
.addon-copy { position: relative; z-index: 1; }
.addon .btn { position: relative; z-index: 1; }
.addon-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.addon-glow span {
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  filter: blur(70px); opacity: 0.5;
}
.addon-glow span:nth-child(1) { background: #e23a26; top: -180px; left: 8%; animation: orb-a 14s ease-in-out infinite; }
.addon-glow span:nth-child(2) { background: #4a6bff; bottom: -220px; right: 6%; animation: orb-b 18s ease-in-out infinite; }
@keyframes orb-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px, 40px) scale(1.15); } }
@keyframes orb-b { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-60px,-40px) scale(0.95); } }
.addon-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.addon-chip {
  font-size: 0.78rem; font-weight: 700; color: #f0f3ff;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 8px 16px; backdrop-filter: blur(4px);
}
.btn-pulse { animation: cta-pulse 2.8s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(226,58,38,0.32); }
  50% { box-shadow: 0 8px 22px rgba(226,58,38,0.32), 0 0 0 12px rgba(226,58,38,0.11); }
}
/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.about-copy p { color: var(--text); font-size: 1.02rem; line-height: 1.75; }
.about-copy p + p { margin-top: 16px; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.about-stats strong { display: block; color: var(--navy); font-weight: 900; font-size: 1.05rem; line-height: 1.25; }
.about-stats span { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .addon-glow span, .btn-pulse { animation: none; }
}

/* ---------- compliance ---------- */
.comp-band { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; }
.comp-badge {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px 28px;
}
.comp-badge .cb-ico { font-size: 1.7rem; }
.comp-badge .cb-name { font-weight: 900; color: var(--navy); font-size: 1.1rem; line-height: 1.2; }
.comp-badge .cb-sub { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.comp-badge-photo img { height: 40px; width: auto; }
/* Rich asked for the compliance badge BIGGER once PPAI/SAGE left this row.
   It is the only badge here now, so it can carry the width. */
.comp-badge-lg { gap: 22px; padding: 26px 40px; border-width: 2px; }
.comp-badge-lg img { height: 68px; }
.comp-badge-lg .cb-name { font-size: 1.45rem; }
.comp-badge-lg .cb-sub { font-size: 0.88rem; }

/* ---------- faq ---------- */
.faq-list { max-width: 780px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 800;
  color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--red); font-weight: 700; transition: transform 0.2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 24px 20px; color: var(--muted); font-size: 0.95rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; margin-top: 48px; }
.contact-info h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 14px; }
.contact-info p { color: var(--muted); margin-bottom: 24px; }
.c-lines { display: flex; flex-direction: column; gap: 16px; }
.c-line { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.c-line .ci { width: 46px; height: 46px; border-radius: 13px; background: var(--mist); display: grid; place-items: center; font-size: 1.15rem; }
.c-line .cl-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.c-line .cl-val { font-weight: 800; color: var(--navy); }
.form-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 36px; }
.form-card h3 { color: var(--navy); margin-bottom: 4px; }
.form-card .form-sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.8rem; font-weight: 800; color: var(--navy); }
.field input, .field select, .field textarea {
  font-family: var(--font); font-size: 0.95rem; color: var(--text);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: #fbfcfe; outline: none; transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); background: #fff; }
.form-note { font-size: 0.78rem; color: var(--muted); margin-top: 12px; text-align: center; }
/* honeypot. Off screen rather than display:none, because some bots skip
   hidden inputs but happily fill a positioned one. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 0.88rem; margin-top: 12px; text-align: center; min-height: 1.2em; color: var(--muted); }
.form-status.is-ok { color: #17714a; font-weight: 700; }
.form-status.is-err { color: var(--red-dark); font-weight: 700; }

/* ---------- NFCRx Insider dropdown panel ---------- */
/* Nav item that opens the panel. Styled to sit level with the <a> siblings:
   a <button> does not inherit the nav's font or colour. */
.nav-drop {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 0.89rem; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop:hover, .nav-drop[aria-expanded="true"] { color: var(--red); }
.nav-caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform 0.2s;
}
.nav-drop[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.insider-scrim {
  position: fixed; inset: 0; background: rgba(11, 20, 56, 0.55);
  z-index: 190; opacity: 0; transition: opacity 0.25s;
}
.insider-scrim.is-open { opacity: 1; }

.insider-panel {
  position: fixed; top: 84px; right: max(20px, calc((100vw - 1180px) / 2));
  width: min(720px, calc(100vw - 40px));
  max-height: min(78vh, 820px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(11, 20, 56, 0.35);
  z-index: 200; opacity: 0; transform: translateY(-10px); transition: opacity 0.22s, transform 0.22s;
}
.insider-panel.is-open { opacity: 1; transform: translateY(0); }

.insider-panel-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 26px; background: var(--navy-deep); color: #fff;
  border-radius: 18px 18px 0 0;
}
.insider-panel-head h2 { color: #fff; font-size: 1.35rem; margin: 0; }
.insider-panel-eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red-on-dark); margin-bottom: 2px;
}
.insider-close {
  background: none; border: 0; color: #fff; font-size: 1.9rem; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.insider-close:hover { color: var(--red-on-dark); }
.insider-panel-body { padding: 22px 26px 26px; }
/* inside the panel the card is the panel, so drop the card chrome */
.insider-panel .insider-card {
  box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none;
}

.insider-cta-wrap { margin-top: 26px; }

@media (max-width: 760px) {
  .insider-panel {
    top: 72px; right: 10px; left: 10px; width: auto;
    max-height: calc(100vh - 88px); border-radius: 14px;
  }
  .insider-panel-head { padding: 16px 18px; border-radius: 14px 14px 0 0; }
  .insider-panel-body { padding: 18px 18px 22px; }
}
/* The nav collapses into a fixed drawer at 1200. A panel opened from inside
   that drawer must sit ABOVE it, not inside its stacking context. */
@media (max-width: 1200px) {
  .nav-drop { font-size: 1rem; }
}

/* ---------- NFCRx Insider signup (Rich, 2026-08-20) ---------- */
/* White plate behind the Insider lockup. The supplied PNG is red + blue on a
   transparent background and this band is --navy-deep, so the blue half of the
   logo all but vanishes without it. */
.insider-mark {
  display: inline-block; background: #fff; border-radius: 14px;
  padding: 18px 26px; margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.insider-mark img { display: block; width: clamp(210px, 32vw, 320px); height: auto; }
@media (max-width: 560px) {
  .insider-mark { padding: 14px 18px; border-radius: 12px; }
}

.insider-card { max-width: 860px; margin: 34px auto 0; }
.insider-card .form-row { margin-bottom: 0; }

/* form-row is 1fr 1fr site wide. The shipping tail wants three across, and it
   collapses with the rest at 760px. */
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.fset { border: 0; padding: 0; margin: 0 0 22px; }
.fset-lg {
  display: block; width: 100%; padding: 0 0 12px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
  border-bottom: 1.5px solid var(--line); margin-bottom: 16px;
}
.req { color: var(--red); }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9rem; line-height: 1.4; color: var(--text); cursor: pointer;
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fbfcfe; transition: border-color 0.2s, background 0.2s;
}
.check:hover { border-color: var(--navy); background: #fff; }
.check input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--navy); }
.check:focus-within { border-color: var(--navy); background: #fff; }
/* full width, and it reads as the decision it is rather than one of a pair */
.check-lead { grid-column: 1 / -1; font-weight: 700; }

.insider-foot {
  margin-top: 14px; text-align: center; font-size: 0.84rem;
  font-weight: 700; color: var(--navy);
}

@media (max-width: 760px) {
  .check-grid { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }
  .insider-card { padding: 26px 20px; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--navy-ink); color: #aab4dd; padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
.footer-grid h2 { color: #fff; font-size: 0.9rem; margin-bottom: 14px; letter-spacing: 0.04em; }
.footer-grid a { color: #aab4dd; text-decoration: none; display: block; margin-bottom: 9px; font-size: 0.9rem; }
.footer-grid a:hover { color: #fff; }
.footer-brand .logo { font-size: 1.4rem; margin-bottom: 12px; }
.footer-brand p { font-size: 0.85rem; line-height: 1.7; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px; font-size: 0.75rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer-bottom .tm { max-width: 640px; line-height: 1.7; }

/* ---------- legal and utility pages ---------- */
/* privacy, accessibility and 404 share one shell. Narrower measure than the
   marketing sections: this is reading copy, not a landing page. */
.legal { padding-top: 150px; }
.legal-in { max-width: 760px; margin-inline: auto; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: var(--navy); margin-bottom: 10px; }
.legal h2 { font-size: 1.25rem; margin: 38px 0 12px; }
.legal p, .legal li { color: var(--text); margin-bottom: 14px; }
.legal .lead { margin-bottom: 26px; }
.legal ul { margin: 0 0 14px 22px; }
.legal li { margin-bottom: 10px; }
.legal-date { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 26px; }

/* The bespoke consent banner and a11y panel were removed 2026-08-10 and
   replaced by the canonical hosted krispy-widget, which brings its own
   styles and inherits brand colour, font and radius from this sheet. */

/* ---------- reveal ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s, transform 0.7s; }
html.js .reveal.in { opacity: 1; transform: translateY(0); }
html.js .reveal.d1 { transition-delay: 0.08s; }
html.js .reveal.d2 { transition-delay: 0.16s; }
html.js .reveal.d3 { transition-delay: 0.24s; }

/* ---------- portal ---------- */
.portal-body { background: var(--mist); min-height: 100vh; display: flex; flex-direction: column; }
.portal-header { background: #fff; border-bottom: 1px solid var(--line); }
.portal-header .header-in { height: 68px; }
.login-wrap { flex: 1; display: grid; place-items: center; padding: 60px 4%; }
.login-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 44px; width: min(430px, 100%); }
.login-card .logo { font-size: 1.5rem; margin-bottom: 8px; }
.login-card h1 { font-size: 1.3rem; color: var(--navy); margin-bottom: 4px; }
.login-card .sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 24px; }
.demo-creds {
  background: var(--mist); border: 1.5px dashed var(--navy); border-radius: 12px;
  padding: 14px 16px; font-size: 0.82rem; margin-bottom: 20px; color: var(--text);
}
.demo-creds code { font-family: var(--mono); font-weight: 700; color: var(--navy); }
.login-err { display: none; color: var(--red); font-size: 0.84rem; font-weight: 700; margin-bottom: 12px; }
.login-err.show { display: block; }
.portal-main { flex: 1; padding: 34px 4% 60px; display: none; }
.portal-main.on { display: block; }
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.portal-top h1 { font-size: 1.4rem; color: var(--navy); }
.portal-top .meta { font-size: 0.82rem; color: var(--muted); }
.demo-ribbon {
  background: #fff4e8; border: 1px solid #f2ce9e; color: #8a5a16;
  border-radius: 12px; padding: 12px 18px; font-size: 0.85rem; font-weight: 600;
  margin-bottom: 24px;
}
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.pcard { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; }
.pcard .m-lbl { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pcard .m-num { font-family: var(--mono); font-size: 1.8rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.pcard .m-delta { font-size: 0.75rem; font-weight: 700; color: var(--ok); }
.pcard .m-delta.neg { color: var(--red); }
.pwide { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 24px; }
.pcard h4 { font-size: 0.88rem; color: var(--navy); margin-bottom: 16px; }
.geo-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--mist); font-size: 0.86rem; }
.geo-row:last-child { border-bottom: 0; }
.geo-row .g-name { font-weight: 700; }
.geo-row .g-val { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(var(--navy) 0 62%, var(--red) 62% 91%, var(--gold) 91% 100%); display: grid; place-items: center; }
.donut::after { content: ""; width: 78px; height: 78px; border-radius: 50%; background: #fff; }
.legend { display: flex; flex-direction: column; gap: 9px; font-size: 0.84rem; }
.legend .l-row { display: flex; align-items: center; gap: 9px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  /* minmax(0,1fr) not 1fr: a 1fr track refuses to shrink below the item's
     min-content, so the hero blew out to 440px inside a 345px container and
     overflow-x:hidden silently clipped the copy. */
  .hero-grid, .how-grid, .t2t-head, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .prod-grid { grid-template-columns: 1fr; }
  .custom-band { grid-template-columns: 1fr; }
  .custom-band .cb-visual { height: 170px; }
  .prod-photos { grid-template-columns: 1fr; }
  .feat-grid, .dash-grid, .pgrid, .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { border-bottom: 1px solid var(--line); }
  .dash-body, .pwide { grid-template-columns: 1fr; }
  .dash-panel + .dash-panel { border-left: 0; border-top: 1px solid var(--line); }
  .tab-pane.on { grid-template-columns: 1fr; }
  .t2t-split, .ben-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ben-split .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-cloud { justify-content: center; }
  .t2t-split-h { text-align: center; }
  .dash-photo img { max-width: 560px; }
  .ben-photo { max-width: 680px; margin-left: auto; margin-right: auto; }
  .addon { grid-template-columns: 1fr; text-align: center; }
  .addon-chips { justify-content: center; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .t2t-badges { justify-content: flex-start; }
  .tap-demo { transform: scale(0.86); min-height: 430px; }
}
@media (max-width: 1200px) {
  .nav {
    position: fixed; top: 76px; left: 0; right: 0; background: #fff;
    flex-direction: column; padding: 24px 6%; gap: 18px; align-items: flex-start;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateY(-130%); transition: transform 0.3s; z-index: 150;
  }
  .nav.open { transform: translateY(0); }
  .nav-toggle { display: block; }
  .phone-link { display: none; }
}
@media (max-width: 760px) {
  /* logo + two buttons + hamburger do not fit a phone. Client Login stays
     reachable from the nav dropdown and the footer. */
  .header-cta .btn-outline { display: none; }
  .hero { padding-top: 128px; }
  .hero-stats { gap: 20px; }
  .section { padding: 64px 0; }
  .form-row { grid-template-columns: 1fr; }
  .tap-demo { transform: scale(0.72); min-height: 380px; margin: -30px 0; }
  .demo-card { transform: rotate(-7deg) translateX(-72px); }
  .tap-demo.tapped .demo-card { transform: rotate(-2deg) translateX(34px) translateY(-10px); }
  .about-stats { grid-template-columns: 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; }
}