/* ============================================================
   OUTMATE HOME — section styles
   (loads AFTER outmate.css + home.css)
   ============================================================ */

.home main{ padding:var(--pad); padding-top:calc(40px + 72px + var(--pad)); }
.h-sec{ margin-top:var(--pad); }

/* hero + sandbox joined into one continuous unit */
.hero.hhome{ border-radius:var(--radius) var(--radius) 0 0; border-bottom:0; }
.sandbox.joined{ margin-top:0; border-radius:0 0 var(--radius) var(--radius); border-top:0; padding-top:clamp(20px,2.6vw,34px); }
.sandbox.joined::before{ content:""; display:block; height:1px; background:var(--line); margin:0 0 clamp(20px,2.6vw,34px); }
.hero.hhome .hero-trust{ margin-top:4px; }
.hero.hhome .hero-headline .acc-dot{ color:var(--accent); font-size:1em; vertical-align:baseline; padding:0; }

/* centered hero content — 2-col layout */
.hero-centered{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(24px,4vw,64px);
}
.hc-left{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px); }
.hc-right{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,18px); border-left:1px solid var(--line); padding-left:clamp(24px,4vw,64px); }
.hero-centered .hero-eyebrow{ align-self:flex-start; }
.hc-title{
  font-size:clamp(34px,4.4vw,66px) !important;
  text-align:left !important; max-width:16ch;
  margin:0 !important; letter-spacing:-.03em !important; line-height:.96 !important;
}
.hc-sub{ max-width:44ch; color:var(--muted) !important; font-size:clamp(15px,1.4vw,18px) !important; line-height:1.55 !important; margin:0 !important; text-align:left !important; }
.hc-cta{ justify-content:flex-start; }
.hc-cta .btn{ height:50px; padding:0 28px; font-size:13px; }
.hero-centered .micro{ color:var(--muted); text-align:left; }

/* V2 hero — no wordmark, more breathing room for headline */
.hero-centered.hero-v2{
  padding:clamp(40px,6vw,84px) clamp(24px,4vw,64px) clamp(40px,5.5vw,76px);
  border-top:0;
}
.hero-v2 .hc-title{ font-size:clamp(38px,5vw,76px) !important; max-width:15ch; }

/* bold trial points */
.howit-title{ white-space:nowrap; font-size:clamp(22px,3.2vw,46px) !important; }
@media (max-width:560px){ .howit-title{ white-space:normal; } }
.hero-points{ display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:clamp(16px,2vw,24px); border-top:1px solid var(--line); }
.hpt{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.4vw,17px); letter-spacing:-.01em; color:var(--ink); }
.hpt-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto; box-shadow:0 0 0 4px rgba(80,70,230,.14); }
@media (max-width:760px){ .hero-centered{ grid-template-columns:1fr; } .hc-right{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:clamp(18px,2vw,26px); } .hc-title{ font-size:clamp(30px,7vw,48px) !important; } }

/* shared centered section header */
.h-head{ text-align:center; max-width:60ch; margin:0 auto clamp(30px,4vw,56px); display:flex; flex-direction:column; align-items:center; gap:18px; }

/* two-column section header — fills the empty right side */
.h-head-split{ display:grid !important; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,72px); max-width:none; align-items:end; }
.hhs-left{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.hhs-right{ display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px); padding-bottom:6px; }
.hhs-right .h-sub{ margin:0; max-width:44ch; }
.hhs-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.hhs-stat{ background:var(--paper-2); padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px); display:flex; flex-direction:column; gap:6px; }
.hhs-n{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; font-size:clamp(24px,2.8vw,38px); color:var(--accent); line-height:.9; }
.hhs-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
@media (max-width:760px){ .h-head-split{ grid-template-columns:1fr; align-items:start; } .hhs-right{ padding-bottom:0; } }
.h-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:30px; padding:7px 15px; background:var(--paper); }
.h-eyebrow.on-dark{ color:var(--accent); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
.h-title{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:.96; font-size:clamp(32px,5vw,76px); text-wrap:balance; }
.h-title .acc{ color:var(--accent); }
.h-title .dim{ color:var(--muted); }
.h-sub{ margin:0; font-family:var(--body); font-size:clamp(15px,1.4vw,19px); line-height:1.5; color:var(--muted); max-width:58ch; text-wrap:pretty; }

/* ===================== HERO ===================== */
.hhero{ position:relative; background:var(--dark); color:#fff; border-radius:var(--radius); overflow:hidden; min-height:clamp(560px,82vh,880px); display:flex; flex-direction:column; }
.hhero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hhero .hh-inner{ position:relative; z-index:2; margin:auto; text-align:center; padding:clamp(40px,8vw,120px) clamp(20px,4vw,48px); display:flex; flex-direction:column; align-items:center; gap:clamp(20px,2.6vw,32px); width:100%; }
.hh-eyebrow{ font-family:var(--mono); font-size:clamp(10px,1vw,12px); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.hh-title{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.045em; line-height:.86; font-size:clamp(44px,9vw,148px); text-wrap:balance; }
.hh-title .dim{ color:#6e6e78; }
.hh-sub{ margin:0; font-family:var(--body); font-size:clamp(15px,1.5vw,21px); line-height:1.5; color:#b7b7be; max-width:60ch; }
.hh-cta{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.hh-trust-line{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#7e7e86; }
.hh-badges{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#9c9ca3; }
.hh-badges span{ display:inline-flex; align-items:center; gap:7px; }
.hh-badges .bd{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.btn.white{ background:#fff; color:var(--ink); }
.btn.white:hover{ background:var(--accent); color:#fff; }
.btn.ghost-d{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn.ghost-d:hover{ background:#fff; color:var(--ink); }

/* ===================== IDENTITY RESOLUTION ===================== */
.identity{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.identity .id-grid{ display:grid; grid-template-columns:1.1fr 1fr; }
.id-left{ padding:clamp(30px,4vw,72px); display:flex; flex-direction:column; gap:24px; }
.id-left h2{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:1.0; font-size:clamp(30px,3.6vw,56px); }
.id-left h2 .acc{ color:var(--accent); }
.id-left p{ margin:0; font-family:var(--body); font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:var(--muted); max-width:42ch; }
.id-stats{ display:flex; gap:0; border-top:1px solid var(--line); }
.id-stat{ flex:1; padding:22px 0; border-right:1px solid var(--line); }
.id-stat:last-child{ border-right:0; }
.id-stat .n{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; font-size:clamp(26px,3vw,40px); }
.id-stat .n .acc{ color:var(--accent); }
.id-stat .l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--muted); margin-top:8px; text-transform:uppercase; line-height:1.3; }
.id-cta{ display:flex; gap:12px; margin-top:6px; }
.id-visual{ position:relative; background:var(--dark); overflow:hidden; min-height:clamp(320px,32vw,460px); display:grid; place-items:center; padding:clamp(20px,2.6vw,36px); }

/* product UI resolution card */
.id-ui{ width:min(100%,420px); background:#0f0f13; border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; box-shadow:0 30px 70px -28px rgba(0,0,0,.7); font-family:var(--mono); }
.idui-bar{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.idui-title{ font-size:11px; color:#cfcfcf; letter-spacing:.04em; }
.idui-live{ display:inline-flex; align-items:center; gap:7px; font-size:10px; color:#9c9ca3; letter-spacing:.06em; }
.idui-live .d{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite; }
.idui-resolve{ display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid rgba(255,255,255,.06); }
.idui-anon{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:9px; color:#6e6e78; letter-spacing:.04em; text-align:center; flex:0 0 auto; }
.idui-anon-ico{ width:34px; height:34px; border-radius:9px; border:1px dashed rgba(255,255,255,.2); display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:16px; color:#4a4a52; }
.idui-arrow{ color:var(--accent); font-size:14px; }
.idui-company{ display:flex; align-items:center; gap:10px; flex:1; }
.idui-logo{ width:36px; height:36px; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:15px; flex:0 0 auto; }
.idui-co{ display:flex; flex-direction:column; gap:3px; }
.idui-co b{ font-family:var(--sans); font-weight:700; font-size:13px; color:#fff; letter-spacing:-.01em; }
.idui-co span{ font-size:9.5px; color:#7e7e86; }
.idui-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.idui-m{ background:#0f0f13; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.idui-mk{ font-size:9px; color:#7e7e86; letter-spacing:.05em; text-transform:uppercase; }
.idui-mv{ font-family:var(--sans); font-weight:700; font-size:20px; color:#fff; letter-spacing:-.02em; }
.idui-mv.acc{ color:var(--accent); }
.idui-enrich{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.idui-er{ display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:10px; padding:7px 14px; font-size:10.5px; }
.idui-el{ color:#6e6e78; letter-spacing:.04em; }
.idui-ev{ color:#d4d4d9; }
.idui-ev.acc{ color:#a9a2ff; }
.idui-ck{ color:var(--accent); }
.idui-trigger{ display:flex; align-items:center; gap:10px; padding:13px 14px; background:rgba(80,70,230,.1); }
.idui-tg-ico{ color:var(--accent); font-size:14px; }
.idui-tg-txt{ flex:1; font-size:10.5px; color:#d4d4d9; }
.idui-tg-txt b{ color:#fff; font-family:var(--sans); }
.idui-tg-state{ font-size:9px; color:var(--accent); border:1px solid rgba(80,70,230,.4); border-radius:20px; padding:3px 9px; letter-spacing:.06em; }
@media (max-width:860px){
  .identity .id-grid{ grid-template-columns:1fr; }
  .id-visual{ min-height:0; }
}

/* ===================== HOW IT WORKS ===================== */
.howit{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.howit .hw-tabs{ display:flex; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow-x:auto; }
.hw-tab{ flex:1; min-width:120px; background:none; border:0; border-right:1px solid var(--line); cursor:pointer; padding:18px 16px; text-align:left; transition:background .2s; font-family:inherit; }
.hw-tab:last-child{ border-right:0; }
.hw-tab:hover{ background:var(--paper-2); }
.hw-tab[aria-selected="true"]{ background:var(--ink); }
.hw-tab .hw-n{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--muted); }
.hw-tab[aria-selected="true"] .hw-n{ color:var(--accent); }
.hw-tab .hw-l{ font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.3vw,18px); letter-spacing:-.01em; margin-top:7px; color:var(--ink); }
.hw-tab[aria-selected="true"] .hw-l{ color:#fff; }
.hw-body{ display:grid; grid-template-columns:1fr 1.15fr; min-height:clamp(320px,30vw,420px); }
.hw-info{ padding:clamp(28px,3.4vw,56px); display:flex; flex-direction:column; gap:18px; border-right:1px solid var(--line); }
.hw-info h3{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; line-height:1.02; font-size:clamp(24px,2.6vw,38px); }
.hw-info > p{ margin:0; font-family:var(--body); font-size:clamp(14px,1.3vw,17px); line-height:1.55; color:var(--muted); max-width:42ch; }
.hw-bullets{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.hw-bullets li{ display:flex; gap:11px; align-items:flex-start; font-family:var(--body); font-size:14.5px; color:var(--ink); }
.hw-bullets .mk{ color:var(--accent); font-family:var(--mono); margin-top:2px; }
.hw-visual{ position:relative; background:var(--dark); overflow:hidden; display:grid; place-items:center; padding:clamp(24px,3vw,44px); }
.hw-pane{ display:none; width:100%; }
.hw-pane.on{ display:block; }

/* generic dark mini-mock used in how-it-works visuals */
.mmock{ background:#0f0f13; border:1px solid var(--line-dark); border-radius:11px; overflow:hidden; font-family:var(--mono); width:min(440px,100%); margin:0 auto; box-shadow:0 24px 50px -20px rgba(0,0,0,.6); }
.mmock .mm-bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line-dark); color:#cfcfcf; font-size:10.5px; letter-spacing:.04em; }
.mmock .mm-bar .live{ display:inline-flex; gap:7px; align-items:center; }
.mmock .mm-bar .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite; }
.mmock .mm-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); }
.mmock .mm-row:last-child{ border-bottom:0; }
.mmock .mm-co{ color:#f1f1f4; font-size:12px; }
.mmock .mm-meta{ color:#7e7e86; font-size:10px; margin-top:3px; }
.mmock .mm-score{ display:flex; align-items:center; gap:7px; color:#9c9ca3; font-size:11px; }
.mmock .mm-score b{ color:var(--accent); font-size:12px; }
.mmock .mm-score .bar{ width:38px; height:5px; border-radius:3px; background:#26262c; overflow:hidden; }
.mmock .mm-score .bar i{ display:block; height:100%; background:var(--accent); }
@media (max-width:860px){
  .hw-body{ grid-template-columns:1fr; }
  .hw-info{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ===================== INTEGRATIONS ===================== */
.integ{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; padding:clamp(24px,3vw,44px) 0 clamp(16px,2vw,28px); }
.integ .h-head{ padding:0 clamp(20px,4vw,48px); margin-bottom:clamp(20px,2.4vw,32px); }
.integ-title{ white-space:nowrap; font-size:clamp(24px,3.4vw,52px) !important; }
@media (max-width:560px){ .integ-title{ white-space:normal; } }
.istrip{ overflow:hidden; white-space:nowrap; margin-top:10px; }
.istrip .itrack{ display:inline-flex; align-items:center; gap:0; width:max-content; }
.istrip .itrack.l{ animation:scrollx 40s linear infinite; }
.istrip .itrack.r{ animation:scrollx-r 40s linear infinite; }
@keyframes scrollx-r{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.ilogo{ display:inline-flex; align-items:center; gap:9px; padding:0 clamp(16px,2vw,28px); height:52px; font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.3vw,18px); letter-spacing:-.01em; color:var(--ink); border-right:1px solid var(--line); opacity:.82; }
.ilogo .gl{ color:var(--accent); font-family:var(--mono); font-size:.85em; }
@media (prefers-reduced-motion:reduce){ .istrip .itrack{ animation-duration:120s; } }

/* ===================== FEATURE SHOWCASE (bento) ===================== */
.fshow{ background:#F6F6F4; border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; padding:clamp(30px,4vw,64px) clamp(20px,4vw,48px); }
.fshow .h-head{ text-align:left; align-items:flex-start; margin-left:0; }
.fbento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(180px,auto); gap:16px; margin-top:clamp(24px,3vw,40px); }
.fb{ border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--paper); display:flex; flex-direction:column; overflow:hidden; position:relative; }
.fb .fb-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fb h3{ margin:10px 0 0; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; font-size:clamp(18px,1.7vw,24px); line-height:1.05; }
.fb p{ margin:8px 0 0; font-family:var(--body); font-size:13.5px; color:var(--muted); line-height:1.45; }
.fb.dashcard{ grid-column:1; grid-row:1 / span 2; background:var(--dark); color:#fff; }
.fb.dashcard .fb-tag{ color:#7e7e86; }
.fb.quote{ grid-column:span 1; background:var(--ink); color:#fff; justify-content:space-between; }
.fb.quote .q{ font-family:var(--sans); font-weight:600; font-size:clamp(15px,1.5vw,19px); line-height:1.35; letter-spacing:-.01em; }
.fb.quote .who{ font-family:var(--mono); font-size:11px; color:#9c9ca3; margin-top:14px; }
.fb .big-metric{ margin-top:auto; font-family:var(--sans); font-weight:700; letter-spacing:-.03em; font-size:clamp(34px,4vw,60px); line-height:.9; }
.fb .big-metric .acc{ color:var(--accent); }
.fb .metric-sub{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:8px; }
/* mini dashboard inside .fb.dashcard */
.fb-dashboard{ margin-top:16px; display:grid; gap:10px; }
.fb-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
@media (max-width:620px){ .fb-metrics{ grid-template-columns:1fr 1fr; } }
.fb-metrics .m{ background:#15151b; border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:11px; }
.fb-metrics .m .mv{ font-family:var(--sans); font-weight:700; font-size:clamp(15px,1.5vw,20px); }
.fb-metrics .m .ml{ font-family:var(--mono); font-size:9px; color:#7e7e86; margin-top:4px; text-transform:uppercase; }
.fb-metrics .m .mc{ color:var(--accent); font-size:9px; }
.fb-feed{ background:#0f0f13; border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:6px 0; font-family:var(--mono); }
.fb-feed .r{ display:flex; justify-content:space-between; padding:8px 13px; font-size:11px; color:#c7c7cd; border-bottom:1px solid rgba(255,255,255,.05); }
.fb-feed .r:last-child{ border-bottom:0; }
.fb-feed .r b{ color:var(--accent); }
/* identity mini (fb) */
.fb-identity{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.fb-identity .ar{ font-family:var(--mono); color:var(--accent); }
.fb-identity .blk{ flex:1; border:1px dashed var(--line); border-radius:9px; padding:10px; font-family:var(--mono); font-size:10px; color:var(--muted); text-align:center; }
.fb-identity .blk.id{ border-style:solid; border-color:var(--accent); color:var(--ink); }
.fb-bars{ margin-top:auto; display:flex; align-items:flex-end; gap:6px; height:70px; }
.fb-bars i{ flex:1; background:#d7d7d4; border-radius:4px 4px 0 0; }
.fb-bars i.acc{ background:var(--accent); }

@media (max-width:980px){ .fbento{ grid-template-columns:repeat(2,1fr); } .fb.dashcard{ grid-column:span 2; } }
@media (max-width:620px){ .fbento{ grid-template-columns:1fr; } .fb.dashcard,.fb.quote{ grid-column:span 1; } }

/* ===================== TRUST METRICS (dark + lamp) ===================== */
.tmetrics{ background:var(--dark); color:#fff; border-radius:var(--radius); overflow:hidden; padding:clamp(50px,7vw,120px) clamp(20px,4vw,48px); position:relative; text-align:center; }
.tmetrics .lamp{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:280px; background:radial-gradient(ellipse at top, rgba(80,70,230,.4), transparent 70%); filter:blur(20px); pointer-events:none; }
.tmetrics .h-title{ position:relative; }
.tm-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(36px,5vw,72px); border-top:1px solid rgba(255,255,255,.12); }
.tm{ padding:clamp(28px,3vw,48px) 20px; border-right:1px solid rgba(255,255,255,.12); }
.tm:last-child{ border-right:0; }
.tm .n{ font-family:var(--sans); font-weight:700; letter-spacing:-.04em; font-size:clamp(48px,7vw,104px); line-height:.85; color:var(--accent); }
.tm .t{ font-family:var(--sans); font-weight:700; font-size:clamp(15px,1.5vw,20px); margin-top:14px; }
.tm .d{ font-family:var(--body); font-size:13.5px; color:#9c9ca3; margin-top:8px; line-height:1.4; }
@media (max-width:760px){ .tm-grid{ grid-template-columns:1fr; } .tm{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); } .tm:last-child{ border-bottom:0; } }

/* ===================== PLATFORM CAPABILITIES — redesigned tabbed ===================== */
.caps{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; padding:clamp(30px,4vw,64px) clamp(20px,4vw,48px); }
.caps-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:clamp(28px,3vw,44px) 0 16px; }
.caps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cap-card{ position:relative; border:1px solid var(--line); border-radius:14px; padding:24px; background:#EFEFEC; overflow:hidden; display:flex; flex-direction:column; min-height:170px; transition:transform .25s, box-shadow .25s; }
.cap-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -16px rgba(0,0,0,.18); }
.cap-card .stripe{ position:absolute; top:-30px; right:-30px; width:90px; height:90px; background:repeating-linear-gradient(45deg, rgba(80,70,230,.18) 0 6px, transparent 6px 12px); }
.cap-card .ci{ width:40px; height:40px; border-radius:10px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:16px; }
.cap-card:hover .ci{ background:var(--accent); }
.cap-card h4{ margin:18px 0 0; font-family:var(--sans); font-weight:700; letter-spacing:-.01em; font-size:clamp(16px,1.6vw,21px); line-height:1.1; }
.cap-card p{ margin:8px 0 0; font-family:var(--body); font-size:13.5px; color:var(--muted); line-height:1.45; }
.cap-card .more{ margin-top:auto; padding-top:16px; font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.03em; }
@media (max-width:900px){ .caps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .caps-grid{ grid-template-columns:1fr; } }

/* new tabbed caps */
.caps-toggle{ display:flex; gap:6px; margin-bottom:clamp(28px,3.4vw,48px); }
.caps-tb{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:1px solid var(--line); border-radius:40px;
  padding:12px 22px; cursor:pointer; font-family:inherit;
  transition:background .2s, color .2s, border-color .2s;
}
.caps-tb .ct{ font-family:var(--sans); font-weight:700; font-size:clamp(16px,1.6vw,22px); letter-spacing:-.01em; }
.caps-tb .cn{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }
.caps-tb:hover{ background:var(--paper-2); }
.caps-tb[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.caps-tb[aria-selected="true"] .cn{ color:rgba(255,255,255,.55); }

.caps-panel{ display:none; }
.caps-panel.on{ display:block; animation:capsIn .35s cubic-bezier(.22,1,.36,1); }
@keyframes capsIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* new editorial card grid */
.caps-editorial{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ec{
  background:var(--paper); padding:clamp(22px,2.6vw,38px);
  display:flex; flex-direction:column; gap:18px;
  cursor:pointer; transition:background .22s, color .22s;
  text-decoration:none; color:var(--ink);
}
.ec:hover{ background:var(--ink); color:#fff; }
.ec .ei{ display:flex; align-items:center; justify-content:space-between; }
.ec .en{ font-family:var(--mono); font-size:clamp(28px,3.2vw,48px); font-weight:700; color:var(--accent); line-height:.9; letter-spacing:-.02em; }
.ec:hover .en{ color:rgba(255,255,255,.6); }
.ec .eico{ width:38px; height:38px; border-radius:10px; background:var(--paper-2); display:grid; place-items:center; font-family:var(--mono); font-size:16px; flex:0 0 auto; transition:background .22s; }
.ec:hover .eico{ background:rgba(255,255,255,.12); }
.ec h4{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.015em; font-size:clamp(17px,1.7vw,23px); line-height:1.08; }
.ec p{ margin:0; font-family:var(--body); font-size:13.5px; line-height:1.45; color:var(--muted); }
.ec:hover p{ color:rgba(255,255,255,.7); }
.ec .ea{ font-family:var(--mono); font-size:12px; color:var(--accent); margin-top:auto; padding-top:14px; }
.ec:hover .ea{ color:#fff; }

/* use cases — 5-card layout: 2 wide on top row, 3 below */
.caps-uc{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.caps-uc .ec:nth-child(1),.caps-uc .ec:nth-child(2){ grid-column:span 1; }
/* wrap last 3 in row 2 automatically via grid */

@media (max-width:900px){ .caps-editorial,.caps-uc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .caps-editorial,.caps-uc{ grid-template-columns:1fr; } }

/* ===================== CUSTOMER PROOF — 2×2 card grid ===================== */
.proof{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; padding:clamp(30px,4vw,56px) clamp(20px,4vw,48px); }
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(24px,3vw,40px); }
.proof-card{ border:1px solid var(--line); border-radius:16px; padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:18px; background:var(--paper-2); }
.proof-card.pc-dark{ background:var(--ink); color:#fff; }
.proof-card.pc-accent{ background:var(--accent); color:#fff; }
/* header: avatar + name/role/company */
.pc-head{ display:flex; align-items:center; gap:13px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.pc-dark .pc-head{ border-bottom-color:rgba(255,255,255,.14); }
.pc-accent .pc-head{ border-bottom-color:rgba(255,255,255,.25); }
.pc-av{ width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:15px; flex:0 0 auto; box-shadow:0 0 0 3px rgba(80,70,230,.15); }
.pc-dark .pc-av{ background:rgba(255,255,255,.16); box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.pc-accent .pc-av{ background:rgba(255,255,255,.28); box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.pc-id{ display:flex; flex-direction:column; gap:2px; }
.pc-nm{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.pc-rl{ font-family:var(--body); font-size:12px; color:var(--muted); }
.pc-dark .pc-rl,.pc-accent .pc-rl{ color:rgba(255,255,255,.65); }
.pc-co{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.pc-dark .pc-co{ color:#a9a2ff; }
.pc-accent .pc-co{ color:#fff; }
.pc-quote{ font-family:var(--body); font-size:clamp(14px,1.4vw,17px); line-height:1.55; margin:0; color:inherit; flex:1; }
.pc-dark .pc-quote{ color:#d4d4d9; }
.pc-accent .pc-quote{ color:rgba(255,255,255,.92); }
/* outcome band */
.pc-outcome{ display:flex; align-items:center; gap:10px; margin-top:auto; padding:12px 14px; border-radius:11px; background:rgba(80,70,230,.08); border:1px solid rgba(80,70,230,.18); }
.pc-dark .pc-outcome{ background:rgba(80,70,230,.18); border-color:rgba(80,70,230,.32); }
.pc-accent .pc-outcome{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); }
.pc-ok{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); flex:0 0 auto; }
.pc-dark .pc-ok{ color:rgba(255,255,255,.5); }
.pc-accent .pc-ok{ color:rgba(255,255,255,.7); }
.pc-ov{ font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:-.01em; color:var(--accent); margin-left:auto; text-align:right; }
.pc-dark .pc-ov{ color:#a9a2ff; }
.pc-accent .pc-ov{ color:#fff; }
@media (max-width:680px){ .proof-grid{ grid-template-columns:1fr; } }

/* ===================== USE CASES (tabbed personas) ===================== */
.usecases{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.uc-body{ display:grid; grid-template-columns:0.9fr 1.4fr; border-top:1px solid var(--line); }
.uc-tabs{ display:flex; flex-direction:column; border-right:1px solid var(--line); }
.uc-tab{ background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,34px); text-align:left; font-family:inherit; transition:background .2s; display:flex; align-items:center; gap:14px; }
.uc-tab:last-child{ border-bottom:0; }
.uc-tab:hover{ background:var(--paper-2); }
.uc-tab[aria-selected="true"]{ background:var(--paper-2); }
.uc-tab .uc-i{ width:34px; height:34px; border-radius:9px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:14px; flex:0 0 auto; }
.uc-tab[aria-selected="true"] .uc-i{ background:var(--accent); }
.uc-tab .uc-n{ font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.4vw,18px); letter-spacing:-.01em; }
.uc-tab .uc-ar{ margin-left:auto; font-family:var(--mono); color:var(--accent); opacity:0; transition:.2s; }
.uc-tab[aria-selected="true"] .uc-ar{ opacity:1; }
.uc-stage{ position:relative; padding:clamp(28px,3.4vw,56px); min-height:clamp(320px,30vw,420px); }
.uc-pane{ display:none; flex-direction:column; gap:20px; height:100%; }
.uc-pane.on{ display:flex; }
.uc-pane h3{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; line-height:1.0; font-size:clamp(24px,2.8vw,42px); }
.uc-pane h3 .acc{ color:var(--accent); }
.uc-pane p{ margin:0; font-family:var(--body); font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:var(--muted); max-width:46ch; }
.uc-pane .uc-cta{ margin-top:auto; }
.uc-sim{ margin-top:auto; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:18px; font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:10px; }
.uc-sim .sr{ display:flex; justify-content:space-between; align-items:center; }
.uc-sim .sr b{ color:var(--ink); }
.uc-sim .sr .acc{ color:var(--accent); }
@media (max-width:860px){ .uc-body{ grid-template-columns:1fr; } .uc-tabs{ border-right:0; flex-direction:row; overflow-x:auto; } .uc-tab{ border-bottom:0; border-right:1px solid var(--line); white-space:nowrap; } .uc-tab .uc-ar{ display:none; } }

/* ===================== SIGNAL INTELLIGENCE — static compact grid ===================== */
.trustpos{ background:var(--dark); color:#fff; border-radius:var(--radius); overflow:hidden; padding:clamp(40px,5vw,72px) clamp(20px,4vw,48px); }
.tp-header{ text-align:center; margin-bottom:clamp(32px,4vw,56px); }
.tp-header .h-eyebrow{ color:var(--accent); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
.tp-header .h-title{ color:#fff; margin-top:16px; }
.tp-stat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid rgba(255,255,255,.12); }
.tp-stat{ padding:clamp(24px,3vw,44px) clamp(14px,1.8vw,24px); border-right:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:10px; }
.tp-stat:last-child{ border-right:0; }
.tps-n{ font-family:var(--sans); font-weight:700; letter-spacing:-.04em; font-size:clamp(36px,4.5vw,72px); line-height:.85; color:var(--accent); }
.tps-t{ font-family:var(--sans); font-weight:700; font-size:clamp(12px,1.1vw,15px); line-height:1.2; color:#fff; margin-top:4px; }
.tps-d{ font-family:var(--body); font-size:12px; color:#9c9ca3; line-height:1.4; }
@media (max-width:900px){ .tp-stat-grid{ grid-template-columns:repeat(3,1fr); } .tp-stat{ border-bottom:1px solid rgba(255,255,255,.12); } }
@media (max-width:560px){ .tp-stat-grid{ grid-template-columns:1fr 1fr; } }

/* ===================== ANALYTICS — new split design ===================== */
.analytics{ background:var(--dark); color:#fff; border-radius:var(--radius); overflow:hidden; padding:clamp(36px,5vw,72px) clamp(20px,4vw,48px); }
.an-top{ display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:end; margin-bottom:clamp(30px,4vw,54px); }
.an-top h2{ margin:18px 0 0; font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:1.0; font-size:clamp(28px,3.4vw,52px); }
.an-top p{ margin:0; font-family:var(--body); font-size:clamp(14px,1.3vw,17px); line-height:1.5; color:#9c9ca3; }
.an-split{ display:grid; grid-template-columns:1fr 1.2fr; gap:0; border-top:1px solid rgba(255,255,255,.12); }
.an-metrics{ display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.12); padding-right:clamp(24px,3vw,48px); padding-top:clamp(24px,3vw,40px); padding-bottom:clamp(24px,3vw,40px); }
.an-m{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:clamp(12px,1.6vw,20px) 0; border-bottom:1px solid rgba(255,255,255,.08); }
.an-m:last-of-type{ border-bottom:0; }
.an-mv{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; font-size:clamp(22px,2.4vw,34px); color:#fff; }
.an-ml{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:#9c9ca3; text-transform:uppercase; margin-top:4px; }
.an-mc{ font-family:var(--mono); font-size:11px; color:var(--accent); white-space:nowrap; }
.an-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; color:#7e7e86; border:1px solid rgba(255,255,255,.1); border-radius:30px; padding:8px 14px; margin-top:20px; align-self:flex-start; }
.an-badge .d{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite; }
.an-metrics .btn{ margin-top:16px; align-self:flex-start; }
.an-flow{ display:flex; flex-direction:column; padding-left:clamp(24px,3vw,48px); padding-top:clamp(24px,3vw,40px); }
.an-step{ display:flex; gap:16px; align-items:flex-start; }
.as-n{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.06em; background:rgba(80,70,230,.18); border:1px solid rgba(80,70,230,.35); border-radius:20px; padding:4px 10px; flex:0 0 auto; margin-top:2px; }
.as-body{ display:flex; flex-direction:column; gap:5px; padding-bottom:clamp(14px,1.8vw,22px); }
.as-t{ font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.4vw,17px); color:#fff; }
.as-d{ font-family:var(--body); font-size:13px; color:#9c9ca3; line-height:1.4; max-width:38ch; }
.an-connector{ width:1px; height:clamp(10px,1.2vw,16px); background:rgba(255,255,255,.15); margin-left:28px; }
.an-step.as-accent .as-n{ background:var(--accent); color:#fff; border-color:var(--accent); }
.an-step.as-accent .as-t{ color:var(--accent); }
@media (max-width:860px){ .an-top{ grid-template-columns:1fr; } .an-split{ grid-template-columns:1fr; } .an-metrics{ border-right:0; padding-right:0; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:clamp(24px,3vw,40px); } .an-flow{ padding-left:0; } }

/* ===================== SIGNAL ENGINE CTA ===================== */
.signalcta{ background:var(--accent); color:#fff; border-radius:var(--radius); overflow:hidden; padding:clamp(50px,9vw,150px) clamp(20px,4vw,48px); text-align:center; position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(20px,2.6vw,32px); }
.signalcta .ast{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--sans); font-weight:700; font-size:clamp(280px,50vw,640px); color:rgba(255,255,255,.1); line-height:1; pointer-events:none; }
.signalcta h2{ position:relative; margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.9; font-size:clamp(40px,8vw,128px); text-wrap:balance; }
.signalcta p{ position:relative; margin:0; font-family:var(--body); font-size:clamp(15px,1.6vw,22px); color:rgba(255,255,255,.9); }
.signalcta .sc-cta{ position:relative; display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.signalcta .disc{ position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.8); }
/* orb logo watermark behind the CTA */
.signalcta::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(72%,560px); aspect-ratio:1;
  background:url("logos/outmate-mark.png") center/contain no-repeat;
  opacity:.18; pointer-events:none; z-index:0;
  /* clip the square corners away so only the round orb shows */
  -webkit-mask:radial-gradient(circle, #000 68%, transparent 76%);
          mask:radial-gradient(circle, #000 68%, transparent 76%);
}
.signalcta > *{ position:relative; z-index:1; }

/* integration logo imgs */
.ilogo img{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }

/* ===================== FEATURE SHOWCASE — 2-col header ===================== */
.fshow-header{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(24px,4vw,64px); align-items:start; padding:clamp(28px,3.4vw,52px) clamp(20px,4vw,48px) clamp(28px,3.4vw,52px); border-bottom:1px solid var(--line); margin-bottom:0; }
.fshow-left{ display:flex; flex-direction:column; gap:18px; }
.fshow-title{ font-size:clamp(32px,4vw,58px) !important; text-align:left !important; line-height:.92 !important; margin:0 !important; }
.fshow-right{ display:flex; flex-direction:column; gap:24px; padding-top:6px; }
.fshow-sub{ font-family:var(--body); font-size:clamp(15px,1.4vw,18px); color:var(--muted); line-height:1.55; margin:0; }
.fshow-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fst{ background:var(--paper-2); padding:clamp(16px,1.8vw,24px); display:flex; flex-direction:column; gap:6px; }
.fst-n{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; font-size:clamp(24px,2.8vw,40px); color:var(--accent); line-height:.9; }
.fst-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .fshow-header{ grid-template-columns:1fr; } .fshow-stats{ grid-template-columns:repeat(2,1fr); } }

/* fix fbento overlap — fshow has no padding itself, children own it */
.fshow{ padding:0 !important; }
.fbento{ display:grid; grid-template-columns:2fr 1fr; grid-auto-rows:minmax(170px,auto); gap:16px; padding:0 clamp(20px,4vw,48px) clamp(24px,3vw,40px); align-items:stretch; }
.fb.dashcard{ grid-column:1; grid-row:1 / span 2; background:var(--dark); color:#fff; }
/* stack cleanly on tablet/mobile — reset the row span so nothing overlaps */
@media (max-width:860px){ .fbento{ grid-template-columns:1fr; } .fb.dashcard,.fb.quote{ grid-column:1; grid-row:auto; } }
.fshow .h-head{ display:none; }
/* 5-product grid — last card fills the row */
.caps-editorial .ec:last-child:nth-child(3n-1){ grid-column: span 2; }
/* animated step flow in analytics */
.an-step{ animation:none; }
.an-step.as-active .as-n{ background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.1); }
.an-step.as-active .as-t{ color:var(--accent); }
.an-step .as-n{ transition: background .4s, color .4s, transform .4s; }
.an-step .as-t{ transition: color .4s; }

/* ===================== PRODUCT CARD HOVER PREVIEW ===================== */
.ec{ position:relative; }
.ec-preview{ display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .3s ease, padding-top .3s ease; padding-bottom:0; }
.ec:hover .ec-preview{ max-height:180px; opacity:1; }
.ec-preview span{ font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.02em; }
.ec:hover .ec-preview span{ color:rgba(255,255,255,.65); }
.ec:hover .ec-preview{ border-top-color:rgba(255,255,255,.12); }

/* ===================== AI TOOLS IN FOOTER ===================== */
.ai-tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ai-tool{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px; transition:background .2s, border-color .2s; text-decoration:none; }
.ai-tool:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }
.ai-tool img{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }
.ai-tool span{ font-family:var(--sans); font-weight:600; font-size:13px; color:#fff; }