:root { color-scheme:light; --navy:#071b2b; --navy-2:#0d2b3f; --ink:#102433; --muted:#5f7180;
  --paper:#f4f7f6; --panel:#ffffff; --mint:#24c49c; --mint-dark:#087d65; --lime:#b8f36b;
  --amber:#f3a83b; --line:#dbe4e2; --soft:#eaf8f3; --shadow:0 24px 70px rgba(6,31,47,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.55; }
a { color:inherit; text-underline-offset:.2em; }
a:focus-visible { outline:3px solid var(--amber); outline-offset:4px; border-radius:4px; }
.skip { position:absolute; left:-999px; top:1rem; background:#fff; padding:.75rem 1rem; z-index:10; }
.skip:focus { left:1rem; }
.wrap { width:min(1180px,calc(100% - 2.4rem)); margin-inline:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.brand { display:flex; align-items:center; gap:.7rem; color:#fff; font-size:1.05rem; font-weight:850; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; color:var(--navy); background:var(--lime); font-weight:950; }
.top-links { display:flex; align-items:center; gap:1rem; color:#b8cbd5; font-size:.82rem; }
.top-links a { text-decoration:none; }
.top-links a:hover { color:#fff; }
header { color:#fff; background:radial-gradient(circle at 78% 12%,rgba(36,196,156,.27),transparent 34%),linear-gradient(145deg,var(--navy),var(--navy-2)); overflow:hidden; }
.hero { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr); gap:4rem; align-items:center; padding:5.4rem 0 5.7rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:#bff3e5; text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.74rem; }
.eyebrow::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(184,243,107,.12); }
h1 { margin:.8rem 0 1rem; max-width:760px; font-size:clamp(3rem,6.4vw,5.5rem); line-height:.94; letter-spacing:-.06em; }
.tagline { margin:0; max-width:680px; color:#d6e5ea; font-size:clamp(1.1rem,2vw,1.42rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem; padding:.7rem 1rem; border-radius:.7rem; font-weight:800; text-decoration:none; }
.button.primary { color:var(--navy); background:var(--lime); }
.button.secondary { color:#fff; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.05); }
.status-card { position:relative; padding:1.6rem; border:1px solid rgba(255,255,255,.17); border-radius:1.4rem; background:rgba(255,255,255,.07); backdrop-filter:blur(12px); box-shadow:0 26px 80px rgba(0,0,0,.22); }
.status-card::after { content:""; position:absolute; width:8rem; height:8rem; right:-2rem; bottom:-3rem; border-radius:50%; background:rgba(184,243,107,.09); }
.status-label { color:#a9c0cb; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
.status-title { margin:.35rem 0 1.1rem; font-size:1.45rem; line-height:1.2; }
.status-row { display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-top:1px solid rgba(255,255,255,.12); font-size:.9rem; }
.status-row strong { color:#fff; }
.status-row .attention { color:#ffd08a; }
.transformation { position:relative; padding:1.45rem; border:1px solid rgba(255,255,255,.17); border-radius:1.4rem; background:rgba(255,255,255,.07); backdrop-filter:blur(12px); box-shadow:0 26px 80px rgba(0,0,0,.22); }
.transformation-label { color:#a9c0cb; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:850; }
.transform-card { margin-top:.8rem; padding:1rem 1.05rem; border-radius:.9rem; background:rgba(2,16,27,.48); }
.transform-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.88rem; font-weight:800; }
.transform-head strong { font-size:1.25rem; }
.transform-head .loss { color:#ffd08a; }
.transform-head .complete { color:var(--lime); }
.record-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:.42rem; margin-top:.7rem; }
.record-bar span { height:.48rem; border-radius:99px; background:rgba(255,255,255,.14); }
.record-bar .seen { background:var(--amber); }
.record-bar .proven { background:var(--mint); }
.transform-arrow { display:flex; align-items:center; justify-content:center; gap:.65rem; padding:.75rem 0 0; color:#b8cbd5; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.transform-note { margin:.85rem 0 0; color:#c2d3da; font-size:.8rem; }
main { padding:4.4rem 0 5rem; }
.section { margin-top:5rem; }
.section:first-child { margin-top:0; }
.section-kicker { color:var(--mint-dark); font-size:.76rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
h2 { max-width:760px; margin:.35rem 0 1rem; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.04em; }
.lead { max-width:760px; color:var(--muted); font-size:1.08rem; }
.story-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:1rem; margin-top:2rem; }
.story-card { padding:1.6rem; border-radius:1.15rem; border:1px solid var(--line); background:var(--panel); }
.story-card.problem { color:#fff; background:var(--navy); border-color:var(--navy); }
.story-card .mini-label { font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.story-card h3 { margin:.4rem 0 .65rem; font-size:1.35rem; line-height:1.15; }
.story-card p { margin:0; color:var(--muted); }
.story-card.problem p { color:#c5d4dc; }
.product-path { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:1rem; }
.product-path span { padding:.7rem; border-radius:.65rem; color:var(--ink); background:var(--soft); font-size:.78rem; font-weight:850; text-align:center; }
.control-boundary { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:0; margin-top:2rem; overflow:hidden; border:1px solid var(--line); border-radius:1.15rem; background:var(--panel); box-shadow:0 10px 35px rgba(6,31,47,.05); }
.control-intro,.control-cell { padding:1.35rem; }
.control-intro { color:#fff; background:var(--navy); }
.control-intro h3,.control-cell h3 { margin:.3rem 0 .35rem; font-size:1rem; }
.control-intro p,.control-cell p { margin:0; font-size:.82rem; opacity:.76; }
.control-cell { border-left:1px solid var(--line); }
.control-cell .role-label { color:var(--mint-dark); opacity:1; }
.impact-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.metric-card { min-width:0; padding:1.35rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); box-shadow:0 10px 35px rgba(6,31,47,.05); }
.metric-value { display:block; color:var(--mint-dark); font-size:2rem; font-weight:950; letter-spacing:-.05em; }
.metric-label { display:block; margin-top:.2rem; font-weight:850; }
.metric-card p { margin:.45rem 0 0; color:var(--muted); font-size:.86rem; }
.audience { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.audience article { padding:1.15rem 1.3rem; border-radius:1rem; background:var(--soft); }
.audience article:last-child { background:#fff4df; }
.audience h3 { margin:0 0 .35rem; font-size:1rem; }
.audience p { margin:0; color:var(--muted); font-size:.9rem; }
.loop { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; margin-top:2rem; }
.loop::before { content:""; position:absolute; left:8%; right:8%; top:1.45rem; height:2px; background:linear-gradient(90deg,var(--mint),var(--lime)); }
.loop-step { position:relative; min-width:0; padding-top:3.5rem; }
.loop-number { position:absolute; top:0; left:0; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; color:#fff; background:var(--navy); border:5px solid var(--paper); font-size:.8rem; font-weight:900; z-index:1; }
.loop-step h3 { margin:0 0 .35rem; font-size:1rem; }
.loop-step p { margin:0; color:var(--muted); font-size:.88rem; }
.outcome { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.outcome-card { padding:1.6rem; border:1px solid var(--line); border-radius:1.15rem; background:var(--panel); box-shadow:0 10px 35px rgba(6,31,47,.05); }
.outcome-card.bad { border-top:5px solid var(--amber); }
.outcome-card.good { border-top:5px solid var(--mint); }
.outcome-card h3 { margin:0 0 .5rem; font-size:1.15rem; }
.outcome-card p { margin:0; color:var(--muted); }
.roles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.role { min-width:0; padding:1.35rem; border-radius:1rem; color:#fff; background:var(--navy); }
.role:nth-child(2) { background:#12374c; }
.role:nth-child(3) { color:var(--ink); background:var(--soft); }
.role:nth-child(4) { color:var(--ink); background:#fff4df; }
.role-label { font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.72; }
.role h3 { margin:.35rem 0 .45rem; font-size:1.12rem; }
.role p { margin:0; font-size:.9rem; opacity:.82; }
.receipt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.receipt { min-width:0; padding:1.35rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.receipt-label { color:var(--mint-dark); font-size:.7rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.receipt h3 { margin:.35rem 0 .45rem; font-size:1.05rem; }
.receipt p { margin:0 0 .75rem; color:var(--muted); font-size:.9rem; }
.receipt a { color:var(--mint-dark); font-size:.86rem; font-weight:850; }
.lifecycle { margin-top:2rem; border:1px solid var(--line); border-radius:1.4rem; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.stage { display:grid; grid-template-columns:4rem 8rem 10rem minmax(0,1fr) 8rem; gap:1rem; align-items:center; min-width:0; padding:1rem 1.2rem; border-top:1px solid var(--line); }
.stage:first-child { border-top:0; }
.stage:hover { background:#fbfdfc; }
.stage-number { color:#9aabae; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; }
.stage h3 { margin:0; font-size:1rem; }
.owner { color:var(--muted); font-size:.82rem; font-weight:750; }
.stage-detail { min-width:0; margin:0; color:var(--muted); font-size:.9rem; }
.pill { justify-self:start; border-radius:99px; padding:.24rem .58rem; color:#08634f; background:#dff7ef; font-size:.69rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.pill.attention { color:#8b4b00; background:#fff0d7; }
.stage-link { justify-self:end; font-size:.82rem; font-weight:800; }
.proof-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:1rem; margin-top:2rem; }
.proof-card { min-width:0; padding:1.55rem; border:1px solid var(--line); border-radius:1.1rem; background:var(--panel); }
.proof-card h3 { margin:0 0 .65rem; }
.requirements { margin:.8rem 0 0; padding-left:1.3rem; color:var(--muted); }
.requirements li+li { margin-top:.45rem; }
.notice { margin-top:1rem; padding:1rem 1.1rem; border-left:4px solid var(--amber); border-radius:.5rem; background:#fff8ed; color:#65400e; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; font-size:.78rem; color:var(--muted); }
.links { display:flex; flex-wrap:wrap; gap:.65rem 1rem; margin-top:1rem; }
.links a { color:var(--mint-dark); font-weight:800; }
footer { padding:1.7rem 0 2.6rem; color:#81929c; background:var(--navy); font-size:.85rem; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:2.2rem; } .roles,.impact-grid { grid-template-columns:1fr 1fr; }
  .stage { grid-template-columns:3rem 7rem 9rem 1fr; } .stage-link { grid-column:4; justify-self:start; } .control-boundary { grid-template-columns:1fr 1fr; } .control-cell:nth-child(2) { border-left:0; } }
@media (max-width:680px) { .wrap { width:min(100% - 1.35rem,1180px); } .top-links a:not(:last-child) { display:none; }
  .hero { padding:3.7rem 0 4rem; } h1 { font-size:clamp(2.7rem,13vw,3.55rem); } main { padding-top:3rem; }
  .section { margin-top:3.7rem; } .loop { display:block; } .loop::before { left:1.45rem; right:auto; top:1.5rem; bottom:1.5rem; width:2px; height:auto; }
  .loop-step { min-height:5.5rem; padding:.2rem 0 1.25rem 4rem; } .loop-number { left:0; }
  .outcome,.roles,.proof-grid,.impact-grid,.audience,.receipt-grid,.story-grid { grid-template-columns:1fr; }
  .product-path { grid-template-columns:1fr; } .control-boundary { grid-template-columns:1fr; } .control-cell { border-left:0; border-top:1px solid var(--line); }
  .stage { grid-template-columns:2.4rem minmax(0,1fr) auto; gap:.35rem .75rem; padding:1rem; }
  .stage h3 { grid-column:2; } .owner { grid-column:2; } .pill { grid-column:3; grid-row:1/3; }
  .stage-detail { grid-column:2/4; margin-top:.45rem; } .stage-link { grid-column:2/4; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }