/* ============================================================
   home.css — Boundee sales-presentation home page
   Loads AFTER styles.css. Reuses all design tokens.
   ============================================================ */

/* ---- hero: video (2026-09-30) — replaces the single-stat panel below (.bigstat rules kept, currently unused) ---- */
.home5 .hero__video { width: 100%; aspect-ratio: 16 / 9; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--purple) 80%, transparent); }
.home5 .hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---- hero: bold single-stat panel ---- */
.home5 .bigstat {
  width: 100%; max-width: 460px; margin-inline: auto;
  background: radial-gradient(120% 120% at 30% 15%, var(--purple-soft) 0%, var(--purple) 45%, var(--purple-deep) 100%);
  color:#fff; border-radius: var(--radius-lg); padding: 56px 48px; text-align:center;
  box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--purple) 80%, transparent);
  position: relative; overflow: hidden;
}
.home5 .bigstat::after { content:""; position:absolute; inset:0; background: radial-gradient(60% 50% at 80% 100%, rgba(255,255,255,.12), transparent 70%); pointer-events:none; }
.home5 .bigstat__label { font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.7); margin-bottom: 26px; }
.home5 .bigstat__label b { color:#fff; font-weight: 600; }
.home5 .bigstat__before { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: rgba(255,255,255,.72); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(255,255,255,.5); margin-bottom: 6px; }
.home5 .bigstat__arrow { display:flex; align-items:center; justify-content:center; gap: 8px; margin: 24px 0 20px; font-family: var(--mono); font-size: 12px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.85); }
.home5 .bigstat__arrow b { color:#fff; font-weight: 700; }
.home5 .bigstat__arrow svg { display:block; color: rgba(255,255,255,.9); }
.home5 .bigstat__after { font-size: clamp(46px, 6.4vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: .95; color:#fff; }
.home5 .bigstat__cap { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.5; }

/* ---- cause → effect (current state / operational impact) ---- */
.home5 .cause { margin-top: 60px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.home5 .cause__panel { padding: 36px; border-radius: var(--radius-lg); }
.home5 .cause__panel--state { background:#fff; border:1px solid var(--line); }
.home5 .cause__panel--impact { background: var(--ink); color:#fff; }
.home5 .cause__panel h3 { font-family: var(--mono); font-size: 12px; letter-spacing:.16em; text-transform: uppercase; font-weight:500; color: var(--ink-3); margin-bottom: 24px; }
.home5 .cause__panel--impact h3 { color: rgba(255,255,255,.55); }
.home5 .cause__list { display:flex; flex-direction:column; gap: 16px; }
.home5 .cause__li { display:flex; gap: 13px; align-items:flex-start; font-size: 16px; line-height:1.5; color: var(--ink-2); }
.home5 .cause__panel--impact .cause__li { color: rgba(255,255,255,.84); }
.home5 .cause__li .mk { flex:none; width: 22px; height: 22px; border-radius: 7px; display:grid; place-items:center; margin-top:1px; }
.home5 .cause__panel--state .cause__li .mk { background: var(--purple-50); color: var(--accent); }
.home5 .cause__panel--impact .cause__li .mk { background: var(--coral-50); color: var(--coral); }
.home5 .cause__arrow { display:grid; place-items:center; padding-inline: 18px; color: var(--purple-soft); }
@media (max-width: 880px){
  .home5 .cause { grid-template-columns: 1fr; gap: 14px; }
  .home5 .cause__arrow { transform: rotate(90deg); padding: 4px; }
}

/* ---- hiring stage table ---- */
.home5 .stages { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background:#fff; }
.home5 .stages__row { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--line-soft); }
.home5 .stages__row:last-child { border-bottom: none; }
.home5 .stages__row.is-head { background: var(--tint); padding-block: 14px; }
.home5 .stages__row.is-head span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.home5 .stages__row.is-bottleneck { background: var(--purple-50); }
.home5 .stages__stage { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.home5 .stages__tech { font-size: 15px; color: var(--ink-2); }
.home5 .stages__row.is-bottleneck .stages__tech { color: var(--accent); font-weight: 500; }
.home5 .stages__status { justify-self: start; }
.home5 .status-pill { display:inline-flex; align-items:center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.home5 .status-pill--ok { background: var(--mint-50); color: var(--mint); }
.home5 .status-pill--bottleneck { background: var(--purple); color:#fff; }
.home5 .stages__foot { margin-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); line-height: 1.6; max-width: 80ch; }
@media (max-width: 760px){
  .home5 .stages__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .home5 .stages__row.is-head { display: none; }
}

/* ---- business value cards ---- */
.home5 .values { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home5 .value { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.home5 .value:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(46,22,131,.35); border-color: var(--purple-200); }
.home5 .value.is-lead { background: var(--purple); color:#fff; border-color: var(--purple); }
.home5 .value__ic { width: 46px; height: 46px; border-radius: 13px; background: var(--purple-50); color: var(--accent); display:grid; place-items:center; margin-bottom: 22px; }
.home5 .value.is-lead .value__ic { background: rgba(255,255,255,.16); color:#fff; }
.home5 .value__verb { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.home5 .value.is-lead .value__verb { color: var(--purple-200); }
.home5 .value h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 10px; }
.home5 .value.is-lead h3 { color:#fff; }
.home5 .value p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.home5 .value.is-lead p { color: rgba(255,255,255,.82); }
.home5 .section--lilac-deep .value { box-shadow: 0 1px 0 rgba(0,0,0,.02); }
@media (max-width: 920px){ .home5 .values { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .home5 .values { grid-template-columns: 1fr; } }

/* financial impact tags */
.home5 .valuetags { margin-top: 22px; display:flex; flex-wrap: wrap; gap: 10px; justify-content:center; }
.home5 .valuetag { display:inline-flex; align-items:center; gap: 8px; background:#fff; border:1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.home5 .valuetag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

/* ---- how it works: 3 role columns ---- */
.home5 .rolecols { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.home5 .rolecol { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.home5 .rolecol__h { display:flex; align-items:center; gap: 12px; margin-bottom: 22px; }
.home5 .rolecol__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--purple-50); color: var(--accent); display:grid; place-items:center; flex:none; }
.home5 .rolecol__h h3 { font-size: 19px; letter-spacing: -.02em; }
.home5 .rolecol ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 14px; }
.home5 .rolecol li { display:flex; gap: 11px; align-items:flex-start; font-size: 15.5px; line-height:1.45; color: var(--ink-2); }
.home5 .rolecol li svg { flex:none; margin-top: 2px; color: var(--accent); }
@media (max-width: 880px){ .home5 .rolecols { grid-template-columns: 1fr; } }

/* ---- expected impact: central variable + metric grid ---- */
.home5 .impactvar { margin-top: 56px; display:flex; flex-direction:column; align-items:center; }
.home5 .impactvar__core { background: var(--purple); color:#fff; border-radius: 999px; padding: 16px 30px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; box-shadow: 0 24px 50px -22px var(--purple); display:flex; align-items:center; gap: 12px; }
.home5 .impactvar__core .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-200); }
.home5 .impactvar__stem { width: 2px; height: 34px; background: linear-gradient(var(--purple), var(--purple-200)); }
.home5 .metrics { margin-top: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; width: 100%; }
.home5 .metric { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.home5 .metric__top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.home5 .metric__name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.home5 .metric__down { display:inline-flex; align-items:center; gap: 5px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--mint); background: var(--mint-50); padding: 4px 10px; border-radius: 999px; }
.home5 .metric p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 920px){ .home5 .metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .home5 .metrics { grid-template-columns: 1fr; } }

/* ---- pilot success metrics chips (extends .pilot) ---- */
.home5 .pilot__metrics { margin-top: 26px; text-align:center; }
.home5 .pilot__metrics .lbl { font-family: var(--mono); font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-3); margin-bottom: 16px; }
.home5 .pilot__metrics .chips { display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; }
.home5 .pilot__metrics .chips span { background: var(--purple-50); color: var(--accent); border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 600; }

/* range value in plan rows */
.home5 .plan__row .v small { font-family: var(--mono); font-weight: 500; color: inherit; opacity: .7; }

/* ---- product teaser (go to product page) ---- */
.home5 .product-teaser { background: var(--ink); color:#fff; border-radius: var(--radius-lg); padding: 56px; display:grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items:center; overflow:hidden; }
.home5 .product-teaser .eyebrow { color: var(--purple-soft); }
.home5 .product-teaser h2 { color:#fff; font-size: clamp(28px,3.4vw,40px); letter-spacing:-.03em; line-height:1.1; margin-bottom: 18px; }
.home5 .product-teaser p { color: rgba(255,255,255,.78); font-size: 17px; line-height:1.6; max-width: 46ch; margin-bottom: 30px; }
.home5 .product-teaser__viz { display:flex; gap: 14px; justify-content:center; }
.home5 .product-teaser__viz .tphone { width: 132px; border-radius: 22px; padding: 7px; background:#000; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }
.home5 .product-teaser__viz .tphone img { width:100%; border-radius: 16px; display:block; }
.home5 .product-teaser__viz .tphone:nth-child(2){ margin-top: 28px; }
@media (max-width: 880px){
  .home5 .product-teaser { grid-template-columns: 1fr; padding: 40px 32px; gap: 32px; text-align:center; }
  .home5 .product-teaser p { margin-inline:auto; }
  .home5 .product-teaser__cta { justify-content:center; display:flex; }
}

/* nav active state */

/* ---- WHY: three pillars ---- */
.home5 .pillars{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.home5 .pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.home5 .pillar__ic{width:48px;height:48px;border-radius:14px;background:var(--purple-50);color:var(--accent);display:grid;place-items:center}
.home5 .pillar__k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.home5 .pillar h3{font-size:21px;letter-spacing:-.02em;line-height:1.2}
.home5 .pillar p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.home5 .pillar.is-lead{background:var(--purple);border-color:var(--purple)}
.home5 .pillar.is-lead .pillar__ic{background:rgba(255,255,255,.16);color:#fff}
.home5 .pillar.is-lead .pillar__k{color:var(--purple-200)}
.home5 .pillar.is-lead h3{color:#fff}
.home5 .pillar.is-lead p{color:rgba(255,255,255,.84)}
.home5 .why-lead{margin:44px auto 0;text-align:center;max-width:62ch;font-size:18px;line-height:1.65;color:var(--ink-2)}
@media (max-width:880px){.home5 .pillars{grid-template-columns:1fr}}

/* ---- SOLUTION: today vs with Boundee ---- */
.home5 .sol-sub{margin-top:56px;text-align:center}
.home5 .sol-sub h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.home5 .sol-sub p{margin-top:10px;color:var(--ink-2);font-size:17px}
.home5 .compare{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home5 .cmp{border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:22px}
.home5 .cmp--today{background:#fff;border:1px solid var(--line)}
.home5 .cmp--with{background:var(--ink);color:#fff}
.home5 .cmp__h{display:flex;align-items:center;gap:10px}
.home5 .cmp__tag{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.home5 .cmp--today .cmp__tag{background:var(--coral-50);color:var(--coral)}
.home5 .cmp--with .cmp__tag{background:var(--purple);color:#fff}
.home5 .cmp p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.home5 .cmp--with p{color:rgba(255,255,255,.84)}
.home5 .cmp__flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:18px;border-radius:14px}
.home5 .cmp--today .cmp__flow{background:var(--tint);border:1px dashed var(--line)}
.home5 .cmp--with .cmp__flow{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.home5 .fnode{font-size:13px;font-weight:600;padding:8px 12px;border-radius:10px;white-space:nowrap}
.home5 .cmp--today .fnode{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.home5 .cmp--today .fnode.is-bad{background:var(--coral-50);border-color:transparent;color:var(--coral)}
.home5 .cmp--with .fnode{background:rgba(255,255,255,.1);color:#fff}
.home5 .cmp--with .fnode.is-core{background:var(--purple);color:#fff}
.home5 .fsep{font-size:13px;color:var(--ink-3)}
.home5 .cmp--with .fsep{color:var(--purple-soft)}
.home5 .fsep.is-broken{color:var(--coral);letter-spacing:.1em}
@media (max-width:880px){.home5 .compare{grid-template-columns:1fr}}

/* ---- INTEGRATION: layer diagram ---- */
.home5 .integ{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.home5 .integ__copy .lead{margin-top:20px}
.home5 .integ__note{margin-top:22px;font-weight:600;color:var(--ink);font-size:16.5px}
.home5 .integ__cta{margin-top:30px}
.home5 .layers{display:flex;flex-direction:column;gap:12px}
.home5 .layer{border-radius:16px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.home5 .layer--boundee{background:var(--purple);color:#fff;box-shadow:0 26px 50px -26px color-mix(in oklab,var(--purple) 75%,transparent)}
.home5 .layer--boundee .t{font-weight:700;font-size:18px;letter-spacing:-.02em}
.home5 .layer--boundee .s{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-200)}
.home5 .layer--sys{background:#fff;border:1px solid var(--line)}
.home5 .layer--sys .t{font-weight:700;font-size:16px}
.home5 .layer--sys .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.home5 .layer--sys .chips span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);background:var(--tint);border-radius:999px;padding:4px 10px}
.home5 .layer__link{display:flex;justify-content:center;gap:40px}
.home5 .layer__link span{width:2px;height:18px;background:linear-gradient(var(--purple),var(--purple-200))}
.home5 .layer--keep{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);background:var(--mint-50);padding:4px 10px;border-radius:999px;white-space:nowrap}
@media (max-width:880px){.home5 .integ{grid-template-columns:1fr;gap:36px}}

/* outcome cards: 5 in a row variant */
.home5 .values--five{grid-template-columns:repeat(5,1fr);gap:14px}
.home5 .values--five .value{padding:26px 22px}
.home5 .values--five .value h3{font-size:18px}
.home5 .values--five .value p{font-size:14px}
@media (max-width:1040px){.home5 .values--five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.home5 .values--five{grid-template-columns:1fr}}

/* Today vs. with Boundee — step lists (2026-09-30 copy revision) */
.home5 .cmp__steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.home5 .cmp__steps li{counter-increment:s;position:relative;padding-left:34px;font-size:15.5px;line-height:1.55}
.home5 .cmp__steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600}
.home5 .cmp--today .cmp__steps li{color:var(--ink-2)}
.home5 .cmp--today .cmp__steps li::before{background:var(--coral-50);color:var(--coral)}
.home5 .cmp--with .cmp__steps li{color:rgba(255,255,255,.9)}
.home5 .cmp--with .cmp__steps li::before{background:var(--purple);color:#fff}
.home5 .cmp__steptag{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:var(--purple-soft);white-space:nowrap}