@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-latin-800-normal.woff2) format('woff2')}

:root{
  --navy:#001236; --navy-2:#0B1F4B; --navy-3:#12285C;
  --violet:#6A2FA8; --violet-2:#7B4CB8; --plum:#4F2270;
  --lilac:#DEB0FE; --lilac-2:#C9B8F0; --mist:#F4F2FA; --white:#FFFFFF;
  /* surface tokens for "paper" sections */
  --paper:#F4F2FA; --paper-ink:#0B1F4B; --paper-soft:#4A5577; --paper-line:#DCD6EE; --paper-card:#FFFFFF;
  --ink:#FFFFFF; --ink-soft:#B9C1DA; --line:rgba(201,184,240,.18); --card:rgba(18,40,92,.55);
  --font:'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0A1A40; --paper-ink:#F4F2FA; --paper-soft:#B9C1DA; --paper-line:rgba(201,184,240,.2); --paper-card:#12285C; }
}
:root[data-theme="dark"]{ --paper:#0A1A40; --paper-ink:#F4F2FA; --paper-soft:#B9C1DA; --paper-line:rgba(201,184,240,.2); --paper-card:#12285C; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--navy); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--lilac)}
:focus-visible{outline:2px solid var(--lilac); outline-offset:3px; border-radius:4px}
.wrap{width:min(1180px, 100% - 48px); margin-inline:auto}
h1,h2,h3,h4{font-weight:500; line-height:1.15; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem, 5.6vw, 4.4rem); font-weight:500}
h2{font-size:clamp(1.8rem, 3.4vw, 2.7rem)}
h3{font-size:1.2rem; font-weight:600}
h4{font-size:1rem; font-weight:600}
p{margin:0}
.lede{font-size:1.15rem; color:var(--ink-soft); max-width:62ch; font-weight:300}
.kicker{font-size:.9rem; color:var(--lilac); font-weight:500; margin-bottom:14px; display:block}
.muted{color:var(--ink-soft)}
.paper .muted,.paper .lede{color:var(--paper-soft)}
.paper .kicker{color:var(--violet)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .paper .kicker{color:var(--lilac)} }
:root[data-theme="dark"] .paper .kicker{color:var(--lilac)}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(0,18,54,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:24px; height:72px}
.brand img{height:30px; width:auto; display:block}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav a{color:var(--ink); text-decoration:none; font-size:.88rem; padding:8px 10px; border-radius:6px; white-space:nowrap}
.nav a:hover{background:rgba(222,176,254,.1)}
.nav a[aria-current="page"]{color:var(--lilac)}
.btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:.92rem; font-weight:500; padding:11px 20px; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none; line-height:1.2}
.btn-primary{background:var(--violet); color:#fff}
.btn-primary:hover{background:var(--violet-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--lilac-2)}
.btn-ghost:hover{background:rgba(222,176,254,.1)}
.paper .btn-ghost{color:var(--paper-ink); border-color:var(--violet-2)}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 12px; font:inherit; cursor:pointer}
@media (max-width: 1080px){
  .menu-btn{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:72px; background:var(--navy); flex-direction:column; align-items:stretch; padding:12px 24px 20px; border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:12px 8px; font-size:1rem}
  .top .cta-top{display:none}
}

/* sections */
section{padding:96px 0; position:relative}
.paper{background:var(--paper); color:var(--paper-ink)}
.deep{background:var(--navy-2)}
.sec-head{max-width:760px; margin-bottom:48px}
.sec-head h2{margin-bottom:16px}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 620px){ .g2,.g3,.g4{grid-template-columns:1fr} section{padding:64px 0} }
.tile{padding:24px; border-top:2px solid var(--violet-2); background:var(--card)}
.tile h3{margin-bottom:8px}
.tile p{color:var(--ink-soft); font-size:.95rem}
.paper .tile{background:var(--paper-card); border-top-color:var(--violet)}
.paper .tile p{color:var(--paper-soft)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tags span{font-size:.78rem; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft)}
.paper .tags span{border-color:var(--paper-line); color:var(--paper-soft)}

/* hero */
.hero{padding:88px 0 96px; overflow:hidden; background:radial-gradient(80% 90% at 85% 10%, rgba(106,47,168,.35), transparent 60%), var(--navy)}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:32px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width: 900px){ .hero .wrap{grid-template-columns:1fr} }
.stack{display:flex; flex-direction:column; gap:6px}
.stack .layer{display:grid; grid-template-columns:76px 1fr; align-items:center; gap:14px; padding:14px 18px; background:rgba(18,40,92,.7); border-left:3px solid var(--violet-2); cursor:pointer; text-align:left; font:inherit; color:inherit; border-top:0;border-right:0;border-bottom:0}
.stack .layer:hover,.stack .layer[aria-expanded="true"]{background:rgba(106,47,168,.35); border-left-color:var(--lilac)}
.stack .n{font-size:.8rem; color:var(--lilac); font-weight:600}
.stack .t{font-weight:600; font-size:.95rem}
.stack .d{grid-column:2; font-size:.85rem; color:var(--ink-soft); display:none}
.stack .layer[aria-expanded="true"] .d{display:block}
.stack .rail{font-size:.78rem; color:var(--lilac-2); padding:8px 18px 0}

/* signs (the one bold moment) */
.signs{background:var(--navy-2)}
.signs .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px}
@media (max-width: 900px){ .signs .wrap{grid-template-columns:1fr} }
.counter{font-size:clamp(4rem, 10vw, 7.5rem); font-weight:300; line-height:1; color:var(--lilac); margin:28px 0 8px}
.counter small{font-size:.28em; color:var(--ink-soft); font-weight:400; margin-left:8px}
.verdict{color:var(--ink-soft); min-height:3.2em; max-width:42ch}
.sign{display:grid; grid-template-columns:28px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer}
.sign input{appearance:none; width:22px; height:22px; border:1.5px solid var(--lilac-2); border-radius:4px; margin:3px 0 0; cursor:pointer; display:grid; place-content:center}
.sign input:checked{background:var(--violet); border-color:var(--lilac)}
.sign input:checked::after{content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
.sign b{font-weight:600; display:block}
.sign span{color:var(--ink-soft); font-size:.92rem}

/* comparison table */
.cmp{width:100%; border-collapse:collapse; font-size:.95rem}
.tbl-wrap{overflow-x:auto}
.cmp th,.cmp td{padding:16px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--paper-line)}
.cmp thead th{font-weight:600; color:var(--paper-soft)}
.cmp td:last-child{color:var(--paper-ink); font-weight:500}
.cmp td:nth-child(2){color:var(--paper-soft)}
.dark-tbl .cmp th,.dark-tbl .cmp td{border-bottom-color:var(--line)}
.dark-tbl .cmp thead th,.dark-tbl .cmp td:nth-child(2){color:var(--ink-soft)}
.dark-tbl .cmp td:last-child{color:var(--ink)}

/* journeys */
.journeys{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:var(--line)}
@media (max-width: 900px){ .journeys{grid-template-columns:1fr} }
.journey{background:var(--navy); padding:32px 28px}
.journey .verb{font-size:2rem; font-weight:300; color:var(--lilac); margin-bottom:6px}
.journey h3{margin-bottom:12px}
.journey p{color:var(--ink-soft); font-size:.95rem}
.journey .opt{margin-top:18px; font-size:.85rem; color:var(--lilac-2)}

/* shifts stepper */
.shift-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px}
.shift-tabs button{font:inherit; font-size:.88rem; padding:10px 16px; border-radius:8px; border:1px solid var(--paper-line); background:transparent; color:var(--paper-ink); cursor:pointer}
.shift-tabs button[aria-selected="true"]{background:var(--violet); border-color:var(--violet); color:#fff}
.shift-panel{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
@media (max-width: 800px){ .shift-panel{grid-template-columns:1fr} }
.shift-panel h3{font-size:1.6rem; font-weight:500; margin-bottom:14px}
.diagram{display:flex; flex-direction:column; gap:6px}
.diagram div{padding:12px 16px; font-size:.88rem; border:1px dashed var(--paper-line); color:var(--paper-soft); transition:all .25s}
.diagram div.on{border:1px solid var(--violet); background:var(--violet); color:#fff; border-style:solid}
.diagram div.core{border-style:solid; color:var(--paper-ink)}

/* layers list (platform) */
.layers-list{display:flex; flex-direction:column; gap:2px}
.layers-list > div{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:22px 24px; background:var(--card)}
@media (max-width: 760px){ .layers-list > div{grid-template-columns:1fr; gap:6px} }
.layers-list h3{color:var(--lilac)}
.layers-list p{color:var(--ink-soft)}

/* components */
.comp-nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px}
.comp-nav button{font:inherit; font-size:.88rem; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.comp-nav button[aria-selected="true"]{background:var(--lilac); color:var(--navy); border-color:var(--lilac)}
.comp{display:none}
.comp.on{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px}
@media (max-width: 800px){ .comp.on{grid-template-columns:1fr; gap:20px} }
.comp h3{font-size:1.7rem; font-weight:500; margin-bottom:12px}
.comp dl{margin:0; display:grid; gap:18px}
.comp dt{font-weight:600}
.comp dd{margin:4px 0 0; color:var(--ink-soft); font-size:.95rem}

/* options matrix */
.opts{border-collapse:collapse; width:100%; min-width:760px; font-size:.9rem}
.opts th,.opts td{padding:12px 10px; border-bottom:1px solid var(--paper-line); text-align:center}
.opts th:first-child,.opts td:first-child{text-align:left; color:var(--paper-ink)}
.opts thead th{vertical-align:bottom}
.opts thead b{display:block; font-size:1rem; color:var(--paper-ink)}
.opts thead span{display:block; font-weight:400; font-size:.8rem; color:var(--paper-soft)}
.dot{display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--violet)}
.dot.opt{background:transparent; border:2px solid var(--violet)}
.dot.yours{background:transparent; border:2px dashed var(--paper-soft)}
.legend{display:flex; gap:20px; margin-top:16px; font-size:.85rem; color:var(--paper-soft); flex-wrap:wrap}
.legend span{display:flex; gap:8px; align-items:center}

/* seven reasons */
.reasons{counter-reset:r}
.reason{display:grid; grid-template-columns:72px 1fr 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line)}
.reason .num{font-size:2.6rem; font-weight:300; color:var(--lilac); line-height:1}
.reason p{color:var(--ink-soft)}
@media (max-width: 800px){ .reason{grid-template-columns:48px 1fr} .reason p{grid-column:2} }

/* waves */
.waves{display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:24px}
.waves div{padding:16px 12px; background:var(--paper-card); font-size:.88rem; border-top:3px solid var(--violet)}
.waves div b{display:block}
@media (max-width: 700px){ .waves{grid-template-columns:1fr 1fr} }

/* hubs */
.hubs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width: 700px){ .hubs{grid-template-columns:1fr} }
.hub{padding:28px; border:1px solid var(--line)}
.hub .city{font-size:1.5rem; font-weight:500}
.hub p{color:var(--ink-soft); font-size:.92rem; margin-top:6px}

/* form */
.form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.form .full{grid-column:1/-1}
@media (max-width: 620px){ .form{grid-template-columns:1fr} }
label{font-size:.85rem; font-weight:500; display:block; margin-bottom:6px}
input[type=text],input[type=email],select,textarea{width:100%; font:inherit; font-size:.95rem; padding:12px 14px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink)}
select option{color:#000}
textarea{min-height:130px; resize:vertical}
.note{font-size:.82rem; color:var(--ink-soft)}
.ok{display:none; padding:16px; border-left:3px solid var(--lilac); background:rgba(106,47,168,.2); margin-top:16px}

/* closing CTA */
.closer{background:radial-gradient(60% 120% at 10% 100%, rgba(106,47,168,.35), transparent 60%), var(--navy)}
.closer h2{font-size:clamp(2rem, 4.4vw, 3.4rem); max-width:18ch; margin-bottom:18px}
.closer .lede{margin-bottom:28px}

/* footer */
footer{background:var(--navy); border-top:1px solid var(--line); padding:48px 0 32px; font-size:.88rem; color:var(--ink-soft)}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
@media (max-width: 800px){ footer .cols{grid-template-columns:1fr 1fr} }
footer h4{color:var(--ink); margin-bottom:12px; font-size:.9rem}
footer a{color:var(--ink-soft); text-decoration:none; display:block; padding:3px 0}
footer a:hover{color:var(--lilac)}
footer .legal{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* pages */
.page{display:none}
.page.on{display:block}
.page-hero{padding:80px 0 72px; background:radial-gradient(70% 100% at 90% 0%, rgba(106,47,168,.3), transparent 60%), var(--navy)}
.page-hero h1{font-size:clamp(2.2rem, 4.8vw, 3.8rem); max-width:20ch; margin-bottom:20px}
.anchors{display:flex; gap:8px; flex-wrap:wrap; margin-top:32px}
.anchors a{font-size:.85rem; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink); text-decoration:none}
.anchors a:hover{border-color:var(--lilac)}

/* modal */
dialog{border:0; padding:0; border-radius:12px; width:min(620px, 100% - 32px); background:var(--navy-2); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(0,10,30,.7)}
.dlg-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line)}
.dlg-body{padding:24px}
.dlg-foot{display:flex; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--line)}
.x{background:none; border:0; color:var(--ink-soft); font-size:1.4rem; cursor:pointer; line-height:1}
.choice{display:block; width:100%; text-align:left; font:inherit; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:8px; cursor:pointer}
.choice:hover{border-color:var(--lilac)}
.choice[aria-pressed="true"]{border-color:var(--lilac); background:rgba(106,47,168,.3)}
.progress{height:3px; background:var(--line); margin-bottom:20px}
.progress i{display:block; height:100%; background:var(--lilac); width:0; transition:width .3s}

/* review mode */
.src{display:none}
body.review .src{display:inline-block; position:absolute; top:12px; right:12px; z-index:5; font-size:.72rem; font-weight:500; background:#FFCC33; color:#1a1a1a; padding:4px 8px; border-radius:4px; max-width:60%}
body.review .src.flag{background:#FF8A65}
.review-toggle{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:60; font:inherit; font-size:.8rem; padding:10px 14px; border-radius:999px; border:1px solid var(--lilac-2); background:var(--navy-2); color:var(--ink); cursor:pointer}
body.review .review-toggle{background:#FFCC33; color:#1a1a1a; border-color:#FFCC33}

/* ---------- v0.2 visual layer ---------- */
.ic{display:inline-flex; width:44px; height:44px; border-radius:10px; align-items:center; justify-content:center; background:rgba(222,176,254,.12); color:var(--lilac); margin-bottom:14px; flex:none}
.ic svg{width:24px; height:24px}
.paper .ic{background:rgba(106,47,168,.1); color:var(--violet)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .paper .ic{background:rgba(222,176,254,.12); color:var(--lilac)} }
:root[data-theme="dark"] .paper .ic{background:rgba(222,176,254,.12); color:var(--lilac)}
.ic.sm{width:34px;height:34px;margin:0}
.ic.sm svg{width:18px;height:18px}

.hero{background:linear-gradient(90deg, rgba(0,18,54,.97) 0%, rgba(0,18,54,.82) 45%, rgba(0,18,54,.35) 100%), var(--navy)}
.closer{background:linear-gradient(90deg, rgba(0,18,54,.96) 0%, rgba(0,18,54,.7) 55%, rgba(0,18,54,.3) 100%), url(../img/bg_close.webp) center/cover no-repeat, var(--navy)}
.page-hero .wrap.hv{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width: 900px){ .page-hero .wrap.hv{grid-template-columns:1fr} }

/* screenshot frame */
.frame{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 24px 60px rgba(0,8,30,.45); border:1px solid rgba(201,184,240,.25)}
.frame .bar{height:26px; background:#E9E6F3; display:flex; align-items:center; gap:6px; padding:0 10px}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#C9C3DA;display:block}
.frame img{display:block; width:100%; height:auto}
figure{margin:0}
figcaption{font-size:.85rem; color:var(--ink-soft); margin-top:12px}
.paper figcaption{color:var(--paper-soft)}
.collage{position:relative; padding-bottom:12%}
.collage .frame:nth-child(2){position:absolute; width:58%; right:-4%; bottom:0}
.collage .frame:first-child{width:88%}
.shots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
@media (max-width: 900px){ .shots{grid-template-columns:1fr} }

/* diagram panel */
.panel{background:rgba(18,40,92,.55); border:1px solid var(--line); border-radius:12px; padding:24px}
.paper .panel{background:var(--paper-card); border-color:var(--paper-line)}
.panel.white{background:#fff; border-color:#e2def0}
.panel img{display:block; width:100%; height:auto}
.figure-wide{margin-top:8px}

/* monolith */
.mono{display:flex; flex-direction:column; gap:6px; font-size:.82rem}
.mono .chan{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.mono .chan div{padding:10px; background:rgba(123,76,184,.35); text-align:center; border-radius:6px}
.mono .box{border:2px solid var(--lilac-2); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:5px; position:relative}
.mono .box::before{content:"Policy administration system"; font-size:.75rem; color:var(--lilac); margin-bottom:2px}
.mono .box div{padding:9px 12px; background:rgba(18,40,92,.9); border-left:3px solid var(--violet-2)}
.mono .box div.lock{border-left-color:#E36A6A}
.mono .note{color:var(--ink-soft); font-size:.8rem}

/* shift diagram v2 */
.diagram div{display:flex; align-items:center; gap:12px; border-radius:8px; padding:14px 16px}
.diagram div .ic{margin:0; width:32px; height:32px; background:transparent}
.diagram div .ic svg{width:18px;height:18px}
.diagram div.on .ic{color:#fff}

/* gantt */
.gantt{display:grid; grid-template-columns:150px 1fr; gap:14px 18px; align-items:center; font-size:.86rem}
.gantt .track{display:flex; gap:3px; height:38px}
.gantt .seg{display:flex; align-items:center; justify-content:center; color:#fff; font-size:.78rem; border-radius:4px; white-space:nowrap; overflow:hidden; padding:0 6px}
.gantt .axis{grid-column:2; display:flex; justify-content:space-between; color:var(--ink-soft); font-size:.75rem; border-top:1px solid var(--line); padding-top:6px}
.s-wait{background:#3B4C78}
.s-build{background:#5A6E9E}
.s-live{background:var(--violet)}
.s-rel{background:var(--violet-2)}
.s-demo{background:#2BB5A0}
@media (max-width: 620px){ .gantt{grid-template-columns:1fr} .gantt .axis{grid-column:1} }

/* chevrons */
.chev{display:flex; gap:4px; flex-wrap:wrap}
.chev span{flex:1 1 0; min-width:90px; padding:12px 18px 12px 22px; background:var(--navy-3); color:var(--ink); font-size:.82rem; font-weight:500; text-align:center; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)}
.chev span:first-child{clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%)}
.chev.hot span{background:var(--violet)}
.chev.teal span{background:#178C7C}
.paper .chev span{background:#E3DDF3; color:var(--paper-ink)}
.paper .chev.hot span{background:var(--violet); color:#fff}
.two-track{display:grid; gap:22px}
.two-track h4{margin-bottom:8px; font-size:.9rem}
.two-track p{font-size:.85rem}

/* hub */
.hub-svg{width:100%; height:auto; display:block}
.hub-svg text{font-family:var(--font)}

/* radial what-is */
.radial{display:grid; grid-template-columns:1fr 240px 1fr; gap:20px; align-items:center}
.radial .col{display:grid; gap:16px}
.radial .mark{display:flex; align-items:center; justify-content:center}
.radial .mark img{width:200px; height:auto; filter:drop-shadow(0 10px 40px rgba(106,47,168,.45))}
@media (max-width: 900px){ .radial{grid-template-columns:1fr} .radial .mark{order:-1} .radial .mark img{width:130px} }

/* ai stack */
.aistack{display:flex; flex-direction:column; gap:10px; position:relative}
.aistack .row{display:grid; grid-template-columns:1fr 56px; align-items:center; gap:0}
.aistack .lay{padding:16px 18px; background:rgba(18,40,92,.85); border-radius:8px 0 0 8px; border:1px solid var(--line); border-right:0}
.aistack .lay b{display:block; font-size:.95rem}
.aistack .lay span{font-size:.8rem; color:var(--ink-soft)}
.aistack .node{height:100%; display:flex; align-items:center; justify-content:center; background:var(--violet); border-radius:0 8px 8px 0; color:#fff}
.aistack .node svg{width:22px;height:22px}
.aistack .rail{position:absolute; right:27px; top:-14px; bottom:-14px; width:2px; background:linear-gradient(var(--lilac), var(--violet)); z-index:-1}
.aistack .cap{font-size:.78rem; color:var(--lilac-2); text-align:right; margin-top:4px}

/* plug diagram */
.plug{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:center}
.plug .col{display:grid; gap:8px}
.plug .col div{padding:10px 12px; border-radius:8px; background:var(--paper-card); border:1px solid var(--paper-line); font-size:.85rem; text-align:center}
.plug .mid{padding:22px 14px; border-radius:10px; background:var(--violet); color:#fff; text-align:center; font-size:.85rem; font-weight:500}
.plug .arr{color:var(--violet); font-size:1.4rem}
@media (max-width: 760px){ .plug{grid-template-columns:1fr} .plug .arr{transform:rotate(90deg); justify-self:center} }

/* options block matrix */
.blocks{display:grid; grid-template-columns:170px repeat(5,minmax(110px,1fr)); gap:6px; min-width:820px; font-size:.82rem}
.blocks .h{padding:8px 6px 12px; text-align:center}
.blocks .h b{display:block; font-size:1rem; color:var(--paper-ink)}
.blocks .h span{color:var(--paper-soft); font-size:.78rem}
.blocks .lab{display:flex; align-items:center; color:var(--paper-ink); font-weight:500}
.blocks .c{min-height:38px; border-radius:6px; display:flex; align-items:center; justify-content:center; text-align:center; padding:4px 6px}
.blocks .inc{background:var(--violet); color:#fff}
.blocks .opt{border:2px dashed var(--violet); color:var(--violet)}
.blocks .yours{background:repeating-linear-gradient(45deg, #D6D0E6 0 6px, #E8E4F2 6px 12px); color:#3a3550}
.blocks .none{background:transparent; border:1px solid var(--paper-line)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .blocks .opt{color:var(--lilac); border-color:var(--lilac)} }
:root[data-theme="dark"] .blocks .opt{color:var(--lilac); border-color:var(--lilac)}

/* mini options (home teaser) */
.mini-opts{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:end; height:220px}
.mini-opts .col{display:flex; flex-direction:column-reverse; gap:4px}
.mini-opts .col i{display:block; height:28px; border-radius:4px; background:var(--violet)}
.mini-opts .col i.y{background:repeating-linear-gradient(45deg, #C9C3DA 0 5px, #E1DDEC 5px 10px)}
.mini-opts .col i.o{background:transparent; border:2px dashed var(--violet)}
.mini-opts .col b{font-size:.75rem; text-align:center; color:var(--paper-ink); margin-top:6px; order:-1}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
@media (max-width: 800px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{padding:22px; border-left:3px solid var(--lilac)}
.stat .big{font-size:2.6rem; font-weight:300; color:var(--lilac); line-height:1.05}
.stat p{color:var(--ink-soft); font-size:.88rem; margin-top:6px}

/* icon tiles row */
.itile{display:flex; flex-direction:column}

/* map */
.map{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.map img{display:block; width:100%; height:auto}

/* badges */
.badges{display:flex; gap:16px; flex-wrap:wrap; margin:8px 0 36px}
.badge{display:flex; gap:12px; align-items:center; padding:14px 18px; border:1px solid var(--lilac-2); border-radius:10px}
.badge b{display:block; font-size:1rem}
.badge span{font-size:.8rem; color:var(--ink-soft)}

/* pipeline */
.pipe{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center}
.pipe .end{padding:18px 16px; border-radius:10px; text-align:center; font-size:.85rem; font-weight:500; background:var(--navy-3); border:1px solid var(--line)}
.pipe .end.t{background:var(--violet)}
.pipe .eng{border:1px dashed var(--lilac-2); border-radius:12px; padding:16px}
.pipe .eng .t{font-size:.78rem; color:var(--lilac); margin-bottom:10px}
@media (max-width: 760px){ .pipe{grid-template-columns:1fr} }

/* journey icons */
.journey .ic{margin-bottom:18px}

/* feature row (text + visual) */
.feature{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center}
.feature.rev{grid-template-columns:1.1fr 1fr}
.feature.rev > :first-child{order:2}
@media (max-width: 900px){ .feature,.feature.rev{grid-template-columns:1fr; gap:28px} .feature.rev > :first-child{order:0} }
.feature h2{margin-bottom:16px}
.feature .lede + .lede{margin-top:14px}
.feature ul{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.feature li{padding-left:22px; position:relative; color:var(--ink-soft)}
.paper .feature li{color:var(--paper-soft)}
.feature li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:2px; background:var(--violet-2)}

/* reasons v2 */
.reason h3{display:flex; gap:12px; align-items:center}

/* ================= v0.3 ================= */
.diagram div.on.core{color:#fff}
body{background:var(--navy)}
.glow{position:absolute; inset:auto; pointer-events:none; border-radius:50%; filter:blur(80px); opacity:.5}
section{overflow:hidden}
.hero{padding:72px 0 40px; min-height:calc(100vh - 72px)}
.hero .wrap{grid-template-columns:1fr 1fr; gap:40px}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem); font-weight:500; letter-spacing:-.02em; line-height:1.04}
.hero .triad{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 30px; padding:0; list-style:none}
.hero .triad li{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:500}
.hero .triad li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lilac); box-shadow:0 0 0 4px rgba(222,176,254,.18)}

/* isometric stack */
.iso{width:100%; height:auto; display:block; overflow:visible}
.iso .plate{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 110ms)}
@keyframes settle{from{transform:translateY(calc(-60px - var(--i) * 18px)); opacity:0} to{transform:none; opacity:1}}
.iso .lbl{animation:fadein .6s ease both; animation-delay:calc(700ms + var(--i) * 110ms)}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.iso text{font-family:var(--font)}
.iso .plate:hover polygon.top{filter:brightness(1.25)}

/* proof bar */
.proof{padding:28px 0 56px; background:var(--navy)}
.proof .row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; background:rgba(11,31,75,.6)}
.proof .row > div{padding:24px 26px; border-left:1px solid var(--line)}
.proof .row > div:first-child{border-left:0}
.proof .n{font-size:clamp(1.8rem,3vw,2.5rem); font-weight:300; color:#fff; line-height:1.05}
.proof .n b{font-weight:500; background:linear-gradient(90deg,#DEB0FE,#9C7BE0); -webkit-background-clip:text; background-clip:text; color:transparent}
.proof p{font-size:.85rem; color:var(--ink-soft); margin-top:6px}
@media (max-width: 800px){ .proof .row{grid-template-columns:1fr 1fr} .proof .row > div:nth-child(3){border-left:0} .proof .row > div:nth-child(n+3){border-top:1px solid var(--line)} }

/* system vs platform */
.svp{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center}
@media (max-width: 900px){ .svp{grid-template-columns:1fr} }
.seg-toggle{display:inline-flex; padding:4px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); margin:22px 0 18px}
.paper .seg-toggle{background:rgba(106,47,168,.08); border-color:var(--paper-line)}
.seg-toggle button{font:inherit; font-size:.88rem; padding:9px 18px; border-radius:999px; border:0; background:transparent; color:inherit; cursor:pointer}
.seg-toggle button[aria-pressed="true"]{background:var(--violet); color:#fff}
.morph{position:relative; display:grid; grid-template-columns:1fr; gap:0; padding:18px; border-radius:14px; border:2px solid #8E86A8; background:rgba(60,64,90,.25); transition:all .6s cubic-bezier(.2,.8,.2,1)}
.morph .ml{display:flex; align-items:center; gap:12px; padding:14px 16px; background:#2B3556; color:#C9CDE0; border-bottom:1px solid rgba(255,255,255,.06); transition:all .6s cubic-bezier(.2,.8,.2,1); font-size:.9rem}
.morph .ml .ic{margin:0; width:30px; height:30px; background:transparent; color:#9AA3C4}
.morph .ml .ic svg{width:18px; height:18px}
.morph .ml .tag{margin-left:auto; font-size:.72rem; padding:3px 8px; border-radius:999px; background:rgba(227,106,106,.18); color:#F3A5A5; transition:opacity .4s}
.morph .spine{position:absolute; right:-12px; top:18px; bottom:18px; width:0; border-radius:10px; background:linear-gradient(#DEB0FE,#6A2FA8); opacity:0; transition:all .6s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center; justify-content:center}
.morph .spine span{writing-mode:vertical-rl; transform:rotate(180deg); font-size:.75rem; font-weight:600; color:#fff; letter-spacing:.04em; white-space:nowrap}
.morph .cap{font-size:.78rem; color:var(--ink-soft); margin-top:12px}
.morph.platform{gap:10px; border-color:transparent; background:transparent; padding:18px 64px 18px 0}
.morph.platform .ml{border-radius:10px; color:#fff; border-bottom:0; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.morph.platform .ml .ic{color:#fff}
.morph.platform .ml .tag{opacity:0}
.morph.platform .spine{width:40px; opacity:1; right:0}
.morph.platform .ml:nth-child(1){background:#7B4CB8}
.morph.platform .ml:nth-child(2){background:#6A2FA8}
.morph.platform .ml:nth-child(3){background:#5A2A80}
.morph.platform .ml:nth-child(4){background:#3D2A78}
.morph.platform .ml:nth-child(5){background:#12285C; border:1px solid rgba(201,184,240,.4)}

/* value chain */
.vc-tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:36px; overflow-x:auto}
.vc-tabs button{font:inherit; font-size:.92rem; padding:14px 18px; background:none; border:0; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; display:flex; gap:10px; align-items:center}
.vc-tabs button .k{font-size:.75rem; width:22px; height:22px; border-radius:50%; display:inline-grid; place-content:center; border:1px solid var(--line)}
.vc-tabs button[aria-selected="true"]{color:#fff; border-bottom-color:var(--lilac)}
.vc-tabs button[aria-selected="true"] .k{background:var(--violet); border-color:var(--violet)}
.vc-panel{display:none; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center}
.vc-panel.on{display:grid; animation:fadein .4s ease}
@media (max-width: 900px){ .vc-panel.on{grid-template-columns:1fr} }
.vc-panel h3{font-size:1.7rem; font-weight:500; margin-bottom:14px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.chips span{font-size:.82rem; padding:7px 12px; border-radius:8px; background:rgba(222,176,254,.1); border:1px solid rgba(222,176,254,.2); color:#E9DDFB}
.shot{position:relative}
.shot .anno{position:absolute; display:flex; gap:10px; align-items:center; padding:10px 14px; border-radius:10px; background:rgba(11,31,75,.92); border:1px solid rgba(222,176,254,.35); box-shadow:0 12px 30px rgba(0,0,0,.35); font-size:.8rem; color:#fff; backdrop-filter:blur(6px)}
.shot .anno .ic{margin:0; width:28px; height:28px}
.shot .anno .ic svg{width:16px; height:16px}
.shot .a1{left:-18px; bottom:16%}
.shot .a2{right:-10px; top:10%}
@media (max-width: 700px){ .shot .a1{left:6px} .shot .a2{right:6px} }

/* bento */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:190px; gap:14px}
.bento .b{position:relative; border-radius:16px; overflow:hidden; background:var(--navy-2); border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; text-decoration:none; color:inherit}
.bento .b::before{content:""; position:absolute; inset:0; background:var(--img) center top/cover no-repeat; opacity:.9; z-index:-2; transition:transform .5s}
.bento .b::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,18,54,0) 20%, rgba(0,18,54,.92) 78%); z-index:-1}
.bento .b:hover::before{transform:scale(1.04)}
.bento .b.noimg::before{background:radial-gradient(120% 100% at 100% 0%, rgba(123,76,184,.55), transparent 60%)}
.bento .b.noimg::after{background:none}
.bento .b h3{font-size:1.05rem}
.bento .b p{font-size:.82rem; color:var(--ink-soft); margin-top:4px}
.bento .b .ic{position:absolute; top:18px; left:18px}
.bento .w2{grid-column:span 2} .bento .h2{grid-row:span 2}
@media (max-width: 900px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .bento{grid-template-columns:1fr} .bento .w2{grid-column:auto} }

/* paths */
.paths{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width: 1000px){ .paths{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .paths{grid-template-columns:1fr} }
.path{border-radius:16px; padding:22px; background:var(--paper-card); border:1px solid var(--paper-line); text-decoration:none; color:var(--paper-ink); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s}
.path:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(40,20,90,.15)}
.path .viz{height:120px; border-radius:10px; background:linear-gradient(160deg,#0B1F4B,#1D2E66); margin-bottom:18px; padding:14px; display:flex; align-items:center; justify-content:center; color:#fff}
.path h3{margin-bottom:6px}
.path p{font-size:.9rem; color:var(--paper-soft)}
.path .opt{margin-top:auto; padding-top:16px; font-size:.82rem; color:var(--violet); font-weight:500}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .path .opt{color:var(--lilac)} }

/* orbit */
.orbit-wrap{position:relative}
.orbit-wrap::before{content:""; position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle, rgba(106,47,168,.45), transparent 65%); filter:blur(30px); z-index:0}
.orbit-wrap > *{position:relative}

/* wave simulator */
.sim{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch}
@media (max-width: 960px){ .sim{grid-template-columns:1fr} }
.sim .panel{padding:20px}
.sim svg{width:100%; height:auto; display:block}
.sim svg text{font-family:var(--font)}
.sim .ctrl{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.sim .ctrl button{font:inherit; font-size:.82rem; padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.sim .ctrl button[aria-pressed="true"]{background:var(--violet); border-color:var(--violet)}
.sim .ctrl .play{margin-left:auto; border-color:var(--lilac-2)}
.sim .state{font-size:.9rem; color:var(--ink-soft); min-height:3em; margin-top:12px}
.sim .state b{color:#fff}
.wire{transition:d .8s cubic-bezier(.2,.8,.2,1), stroke .5s}
.node-legacy{transition:opacity .6s}

/* architecture interactive */
.archx{display:grid; grid-template-columns:1fr 64px; gap:12px}
.archx .rows{display:grid; gap:10px}
.archx .r{display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center; padding:12px; border-radius:12px; background:rgba(18,40,92,.55); border:1px solid var(--line); cursor:pointer; transition:all .25s; text-align:left; font:inherit; color:inherit; width:100%}
.archx .r:hover,.archx .r[aria-pressed="true"]{border-color:var(--lilac); background:rgba(106,47,168,.25)}
.archx .r .nm{font-weight:600; font-size:.9rem}
.archx .r .nm small{display:block; font-weight:400; color:var(--lilac-2); font-size:.72rem; margin-top:2px}
.archx .r .el{display:flex; flex-wrap:wrap; gap:6px}
.archx .r .el span{font-size:.75rem; padding:6px 10px; border-radius:6px; background:#12285C; border:1px solid rgba(201,184,240,.2)}
.archx .r.int .el span{background:#5A2A80; border-color:transparent}
.archx .r.pas .el span{background:#3D2A78}
.archx .spinex{border-radius:12px; background:linear-gradient(#DEB0FE,#6A2FA8); display:flex; align-items:center; justify-content:center}
.archx .spinex span{writing-mode:vertical-rl; transform:rotate(180deg); font-weight:600; font-size:.82rem; color:#fff; letter-spacing:.04em}
.archx-detail{margin-top:18px; padding:18px 20px; border-left:3px solid var(--lilac); background:rgba(106,47,168,.15); border-radius:0 10px 10px 0; min-height:4.5em}
@media (max-width: 700px){ .archx .r{grid-template-columns:1fr} .archx{grid-template-columns:1fr} .archx .spinex{min-height:44px} .archx .spinex span{writing-mode:horizontal-tb; transform:none} }

/* tco chart */
.tco svg{width:100%; height:auto}
.tco text{font-family:var(--font)}

/* migration run */
.run{position:relative}
.run .dot{position:absolute; top:50%; left:0; width:16px; height:16px; margin-top:-8px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(222,176,254,.35), 0 0 24px #DEB0FE; opacity:0; pointer-events:none}
.run.go .dot{animation:travel 3.2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes travel{0%{left:0; opacity:1} 92%{left:calc(100% - 16px); opacity:1} 100%{left:calc(100% - 16px); opacity:0}}
.run-res{margin-top:14px; font-size:.9rem; color:var(--ink-soft); min-height:1.6em}

/* timeline (seven reasons) */
.tl{position:relative; display:grid; gap:0}
.tl::before{content:""; position:absolute; left:23px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--lilac), var(--violet))}
.tl .it{display:grid; grid-template-columns:48px 1fr 1.2fr; gap:22px; padding:20px 0; align-items:start}
.tl .it .ic{margin:0; width:48px; height:48px; border-radius:50%; background:var(--navy-2); border:2px solid var(--lilac); position:relative}
.tl .it h3{padding-top:10px}
.tl .it p{color:var(--ink-soft); padding-top:8px}
@media (max-width: 800px){ .tl .it{grid-template-columns:48px 1fr} .tl .it p{grid-column:2; padding-top:0} }

/* section heading scale */
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-.015em}
.eyebrow-line{display:flex; align-items:center; gap:12px}

/* option column highlight */
.blocks .c, .blocks .h{transition:opacity .25s}
.blocks.focus .c, .blocks.focus .h{opacity:.28}
.blocks.focus .c.f, .blocks.focus .h.f{opacity:1}
.opt-pick{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.opt-pick button{font:inherit; font-size:.85rem; padding:8px 14px; border-radius:999px; border:1px solid var(--paper-line); background:transparent; color:var(--paper-ink); cursor:pointer}
.opt-pick button[aria-pressed="true"]{background:var(--violet); color:#fff; border-color:var(--violet)}
/* ===== v0.4 ===== */
.iso .plate{animation:snap 1.15s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 120ms)}
@keyframes snap{0%{transform:translateY(calc(-70px - var(--i) * 18px)); opacity:0} 68%{transform:translateY(5px); opacity:1} 84%{transform:translateY(-2px)} 100%{transform:none; opacity:1}}
.iso .flowline{stroke-dasharray:5 9; animation:pulse 2.4s linear infinite}
@keyframes pulse{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion: reduce){ .iso .flowline{animation:none} }
.svpwrap{position:relative}
.svpwrap svg{width:100%; height:auto; display:block}
.svpwrap svg text{font-family:var(--font)}
.svpview{transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.svpwrap .svpview[data-v="platform"]{position:absolute; inset:0}
.svpwrap[data-state="system"] .svpview[data-v="platform"], .svpwrap[data-state="platform"] .svpview[data-v="system"]{opacity:0; transform:scale(.96); pointer-events:none}
/* deck-style option matrix (Basic 14) */
.optgrid{display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:12px; min-width:820px; padding:20px; border-radius:16px; background:linear-gradient(160deg,#001236,#14205A)}
.ocol{display:grid; grid-template-rows:auto repeat(8,40px); gap:8px; transition:opacity .25s}
.ohead{border-radius:10px; padding:14px 14px 16px; background:linear-gradient(180deg,#7B4CB8,#6A2FA8); color:#fff; min-height:132px}
.ocol.feat .ohead{background:linear-gradient(180deg,#5A2A80,#45206A); box-shadow:0 0 0 1px #DEB0FE inset}
.ohead span{font-size:.72rem; letter-spacing:.08em; opacity:.85}
.ohead b{display:block; font-size:1.02rem; margin:4px 0 6px}
.ohead p{font-size:.8rem; color:#EBDDFF; line-height:1.4}
.ob{border-radius:7px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.8rem; color:#fff; padding:0 6px}
.ob.oi{background:linear-gradient(180deg,#7B4CB8,#5A2A80)}
.ob.oo{border:1.5px dashed rgba(201,184,240,.6); color:#E9DDFB}
.ob.oe{border:1px dashed rgba(201,184,240,.14)}
.ob.op{background:linear-gradient(180deg,#2D63C9,#1F48A3)}
.ob.oy{border:1.5px solid rgba(201,184,240,.5); background:#16244F; color:#C9CDE0}
.ob.oc{background:#2A3C66}
.ob.on{visibility:hidden}
.optgrid.focus .ocol{opacity:.25}
.optgrid.focus .ocol.f{opacity:1}
.olegend{margin-top:12px}
.paper .olegend{color:var(--paper-soft)}
.lg{display:inline-block; width:18px; height:12px; border-radius:3px}
.lg.oi{background:#7B4CB8} .lg.oo{border:1.5px dashed #9C7BE0} .lg.oy{border:1.5px solid #8D9CC0}

/* ================= v0.5 ================= */
.brand img{height:36px}
.top .wrap{height:76px}
@media (max-width:1080px){ .nav{top:76px} }
.hero .triad li{font-size:.95rem}

/* iso links */
.iso a{cursor:pointer}
.iso a:hover .plate polygon.top{filter:brightness(1.18) saturate(1.2)}
.iso a:hover .lbl text:first-of-type{fill:#DEB0FE}
.iso a:focus-visible{outline:none}
.iso a:focus-visible .lbl text{fill:#DEB0FE; text-decoration:underline}
.iso-hint{font-size:.8rem; color:var(--lilac-2); text-align:right; margin-top:-6px}

/* animated system diagram */
.sysanim .sl{animation:snap .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 90ms)}
.sysanim .lockp{animation:lockp 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes lockp{0%,100%{opacity:.85} 50%{opacity:1; filter:drop-shadow(0 0 6px #FF7A7A)}}
.flowpath{stroke-dasharray:6 8; animation:pulse 1.8s linear infinite}
@media (prefers-reduced-motion: reduce){ .sysanim .sl,.sysanim .lockp,.flowpath{animation:none} }

/* architecture picture (interactive) */
.archpic{display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center}
@media (max-width:960px){ .archpic{grid-template-columns:1fr} }
.archpic svg{width:100%; height:auto; display:block}
.archpic svg text, .svpwrap svg text{font-family:var(--font)}
.archpic a .hl{transition:filter .2s, opacity .2s}
.archpic a:hover .hl, .archpic .lit .hl{filter:brightness(1.25) drop-shadow(0 0 10px rgba(222,176,254,.55))}
.archlist{display:grid; gap:6px; counter-reset:n}
.archlist a{display:grid; grid-template-columns:34px 1fr; gap:14px; padding:12px 14px; border-radius:12px; text-decoration:none; color:inherit; border:1px solid transparent; transition:all .2s}
.archlist a:hover, .archlist a.lit{background:rgba(106,47,168,.22); border-color:rgba(222,176,254,.35)}
.archlist .num{width:30px; height:30px; border-radius:50%; background:#DEB0FE; color:#1A1040; font-weight:700; display:grid; place-content:center; font-size:.85rem}
.archlist b{display:block; font-weight:500}
.archlist span{font-size:.86rem; color:var(--ink-soft)}
.mini-arch{max-width:520px; margin-left:auto}

/* value chain: rounded chevrons */
.vc-tabs{border-bottom:0; gap:6px; padding:4px 18px 4px 0; margin-bottom:40px}
.vc-tabs button{position:relative; padding:0 16px 0 30px; height:52px; background:#1A2A5C; color:#C9CDE0; border-radius:14px 0 0 14px; border:0; margin-right:22px; transition:background .25s, color .25s; z-index:1}
.vc-tabs button:first-child{padding-left:18px}
.vc-tabs button::after{content:""; position:absolute; right:-18px; top:50%; width:37px; height:37px; background:inherit; transform:translateY(-50%) rotate(45deg); border-radius:0 9px 0 0; z-index:-1}
.vc-tabs button:not(:first-child)::before{content:""; position:absolute; left:-19px; top:50%; width:37px; height:37px; background:var(--navy-2); transform:translateY(-50%) rotate(45deg); border-radius:0 9px 0 0; z-index:0}
.vc-tabs button:hover{background:#24357A; color:#fff}
.vc-tabs button[aria-selected="true"]{background:#7B4CB8; color:#fff; border-bottom:0}
.vc-tabs button .k{border-color:rgba(255,255,255,.35); position:relative; z-index:1}
.vc-tabs button span{position:relative; z-index:1}

/* path option tiles */
.otiles{margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.otile{font-size:.76rem; font-weight:600; color:#fff; padding:5px 10px; border-radius:7px; background:linear-gradient(180deg,#7B4CB8,#5A2A80)}
.otile.or{background:none; color:var(--paper-soft); padding:0 2px; font-weight:400}
.otiles .ar{color:var(--violet); font-weight:700}

/* AI stack v5 */
.aistack .lay{display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:center}
.aistack .lay .ic{margin:0; width:40px; height:40px}
.aistack .lay p{font-size:.82rem; color:var(--ink-soft); margin-top:2px}
.aistack .row{grid-template-columns:1fr 60px}
.ai-own{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:22px}
.ai-own div{padding:12px; border-radius:10px; border:1px solid var(--line); background:rgba(18,40,92,.5); font-size:.84rem}
.ai-own b{display:block; color:#fff; margin-bottom:2px}
@media (max-width:700px){ .ai-own{grid-template-columns:1fr} }

/* sim button */
.sim .ctrl .play{background:var(--violet); border-color:var(--violet); color:#fff; font-weight:600; display:inline-flex; gap:8px; align-items:center; padding:9px 16px; box-shadow:0 0 0 0 rgba(222,176,254,.6); animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(222,176,254,.55)} 70%{box-shadow:0 0 0 12px rgba(222,176,254,0)} 100%{box-shadow:0 0 0 0 rgba(222,176,254,0)}}

/* world map */
.wmap{border-radius:16px; border:1px solid var(--line); background:radial-gradient(80% 90% at 50% 40%, #0F2257, #001236); padding:18px}
.wmap svg{width:100%; height:auto; display:block}
.wmap path{stroke:#001236; stroke-width:.5}
.wmap .pri{fill:#9C7BE0}
.wmap .est{fill:#2BB5A0}
.wmap .oth{fill:#25386E}
.wmap .pri:hover{fill:#DEB0FE}
.wmap .hub circle.c{fill:#fff}
.wmap .hub circle.r{fill:none; stroke:#fff; stroke-width:1.5; animation:hub 2.4s ease-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes hub{0%{transform:scale(.6); opacity:1} 100%{transform:scale(2.4); opacity:0}}
.wmap .hub text{font-family:var(--font); fill:#fff; font-size:13px; font-weight:600; paint-order:stroke; stroke:#001236; stroke-width:3px}
.wmap .hub text.s{fill:#DEB0FE; font-size:9.5px; font-weight:500; letter-spacing:.08em}
.mlegend{display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; font-size:.85rem; color:var(--ink-soft)}
.mlegend span{display:flex; gap:8px; align-items:center}
.mlegend i{width:16px; height:12px; border-radius:3px; display:inline-block}
.flag{width:34px; height:23px; border-radius:4px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.35); display:inline-block; flex:none}
.flag svg{width:100%; height:100%; display:block}
.hub .city{display:flex; gap:12px; align-items:center}

/* starting point dialog v5 */
dialog#check{width:min(980px, 100% - 24px); max-height:calc(100vh - 32px); background:linear-gradient(160deg,#0B1F4B,#14123E); border:1px solid rgba(222,176,254,.25); box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(106,47,168,.4)}
#check .dlg-head{background:linear-gradient(90deg,#6A2FA8,#2A1E6A); border-bottom:0; padding:22px 28px}
#check .dlg-head h3{font-size:1.25rem}
#check .steps{display:flex; gap:6px; margin-left:auto; margin-right:18px}
#check .steps i{width:28px; height:5px; border-radius:3px; background:rgba(255,255,255,.25)}
#check .steps i.on{background:#DEB0FE}
#check .dlg-body{padding:28px}
#check .dlg-foot{border-top:1px solid var(--line); padding:18px 28px}
.qtitle{font-size:1.35rem; font-weight:500; margin-bottom:18px}
.cgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:640px){ .cgrid{grid-template-columns:1fr} }
.card-choice{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; text-align:left; font:inherit; color:#fff; padding:16px; border-radius:14px; border:1px solid rgba(201,184,240,.22); background:rgba(18,40,92,.55); cursor:pointer; transition:all .2s}
.card-choice .ic{margin:0}
.card-choice:hover{border-color:#DEB0FE; transform:translateY(-2px)}
.card-choice[aria-pressed="true"]{background:linear-gradient(135deg,rgba(123,76,184,.55),rgba(42,30,106,.6)); border-color:#DEB0FE; box-shadow:0 0 0 1px #DEB0FE inset, 0 10px 30px rgba(106,47,168,.35)}
.card-choice span{font-size:.95rem}
.result{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start}
@media (max-width:760px){ .result{grid-template-columns:1fr} }
.result .jn{display:flex; gap:14px; align-items:center; margin:6px 0 12px}
.result .jn .ic{margin:0; width:52px; height:52px}
.result .jn h3{font-size:2rem; font-weight:500}
.pillars{display:flex; gap:10px; align-items:stretch; justify-content:center}
.pillars .ar2{align-self:center; color:#DEB0FE; font-size:1.4rem}
.pillars .ocol{grid-template-rows:auto repeat(8,28px); gap:5px; width:170px}
.pillars .ohead{min-height:96px; padding:10px 12px}
.pillars .ohead p{display:none}
.pillars .ob{font-size:.68rem}
.pillars .pwrap{padding:12px; border-radius:14px; background:linear-gradient(160deg,#001236,#14205A)}

/* contact v5 */
.phone{display:grid; grid-template-columns:130px 1fr; gap:8px}
.hubpick{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.hubpick label{margin:0; cursor:pointer}
.hubpick input{position:absolute; opacity:0; pointer-events:none}
.hubpick .hc{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:12px; border:1px solid var(--line); background:rgba(18,40,92,.5); font-size:.85rem; transition:all .2s}
.hubpick input:checked + .hc{border-color:#DEB0FE; background:linear-gradient(135deg,rgba(123,76,184,.5),rgba(42,30,106,.5)); box-shadow:0 0 0 1px #DEB0FE inset}
.hubpick input:focus-visible + .hc{outline:2px solid var(--lilac)}
@media (max-width:520px){ .hubpick{grid-template-columns:1fr} .hubpick .hc{flex-direction:row} }

/* why: forces with symptom */
.force .hb{margin-top:10px; padding-top:10px; border-top:1px dashed var(--paper-line); font-size:.86rem}
.force .hb b{display:block; font-size:.75rem; letter-spacing:.04em; color:#C2410C; margin-bottom:2px; font-weight:600}
.answer{margin-top:44px; border-radius:18px; padding:32px; background:linear-gradient(135deg,#6A2FA8,#2A1E6A 70%); color:#fff}
.answer h3{font-size:1.6rem; font-weight:500; margin-bottom:8px}
.answer > p{color:#E6DAFB; max-width:70ch}
.answer .ag{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:22px}
@media (max-width:900px){ .answer .ag{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .answer .ag{grid-template-columns:1fr} }
.answer .ag div{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px; font-size:.86rem; color:#EDE6FB}
.answer .ag b{display:block; color:#fff; margin:8px 0 2px; font-size:.95rem}
.answer .ag .ic{margin:0; background:rgba(255,255,255,.15); color:#fff; width:34px; height:34px}
.answer .ag .ic svg{width:18px;height:18px}

/* traditional PAS constraints */
.cons{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px}
@media (max-width:700px){ .cons{grid-template-columns:1fr} }
.cons div{display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; padding:10px 0; border-bottom:1px solid var(--line)}
.cons .ic{margin:0; width:34px; height:34px; background:rgba(227,106,106,.14); color:#F3A5A5}
.cons .ic svg{width:18px;height:18px}
.cons b{display:block; font-weight:600; font-size:.95rem}
.cons span{font-size:.85rem; color:var(--ink-soft)}

/* shifts v5 */
.shift-tabs button{display:inline-flex; gap:8px; align-items:center; background:#12285C; border-color:transparent; color:#C9CDE0}
.shift-tabs button .ic{margin:0; width:24px; height:24px; background:transparent}
.shift-tabs button .ic svg{width:16px; height:16px}
.shift-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#7B4CB8,#5A2A80); color:#fff; box-shadow:0 8px 24px rgba(106,47,168,.4)}
.shift-tabs button[aria-selected="true"] .ic{color:#fff}
#shiftDiagram{gap:8px; position:relative; padding-left:26px}
#shiftDiagram::before{content:""; position:absolute; left:8px; top:8px; bottom:8px; width:3px; border-radius:2px; background:linear-gradient(#DEB0FE,#6A2FA8); opacity:.5}
#shiftDiagram div{border:1px dashed rgba(201,184,240,.25); background:rgba(18,40,92,.4); color:#8E97B8; border-radius:12px; padding:16px 18px; position:relative; transition:all .5s cubic-bezier(.2,.8,.2,1)}
#shiftDiagram div::before{content:""; position:absolute; left:-24px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#12285C; border:2px solid #6A5C9E; transition:all .4s}
#shiftDiagram div.on{border:1px solid transparent; color:#fff; transform:translateX(4px); box-shadow:0 10px 30px rgba(0,0,0,.3)}
#shiftDiagram div.on::before{background:#DEB0FE; border-color:#fff; box-shadow:0 0 12px #DEB0FE}
#shiftDiagram div[data-l="5"].on{background:linear-gradient(90deg,#CDB0F7,#9C7BE0); color:#1A1040}
#shiftDiagram div[data-l="5"].on .ic{color:#1A1040}
#shiftDiagram div[data-l="3"].on{background:linear-gradient(90deg,#9C7BE0,#7B4CB8)}
#shiftDiagram div[data-l="2"].on{background:linear-gradient(90deg,#7B4CB8,#62399E)}
#shiftDiagram div[data-l="4"].on{background:linear-gradient(90deg,#B98BF0,#6A2FA8); box-shadow:0 0 30px rgba(222,176,254,.35)}
#shiftDiagram div[data-l="1"].on{background:linear-gradient(90deg,#5A2A80,#45206A)}

/* democratise band */
.demo{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; margin-top:40px; padding:32px; border-radius:18px; background:linear-gradient(135deg,#0B1F4B,#2A1E6A); color:#fff}
@media (max-width:900px){ .demo{grid-template-columns:1fr} }
.demo h3{font-size:1.6rem; font-weight:500; margin-bottom:10px}
.demo p{color:#D7DBEE}
.tiers{display:flex; align-items:flex-end; gap:12px; height:170px}
.tiers div{flex:1; border-radius:10px 10px 4px 4px; display:flex; align-items:flex-end; justify-content:center; padding:10px 6px; font-size:.78rem; text-align:center; color:#fff}
.tiers .t1{height:100%; background:linear-gradient(180deg,#5A6E9E,#3B4C78)}
.tiers .t2{height:70%; background:linear-gradient(180deg,#9C7BE0,#6A2FA8)}
.tiers .t3{height:45%; background:linear-gradient(180deg,#CDB0F7,#9C7BE0); color:#1A1040}
.tiers-cap{display:flex; justify-content:space-between; font-size:.75rem; color:#B9C1DA; margin-top:8px}
.tiers-line{position:relative}
.tiers-line::after{content:"The same platform, available to every insurer"; position:absolute; left:0; right:0; top:52%; border-top:2px dashed #DEB0FE; font-size:.75rem; color:#DEB0FE; padding-top:4px; text-align:center}

/* low code */
.lc{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
@media (max-width:900px){ .lc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .lc{grid-template-columns:1fr} }
.lc div{border-radius:14px; padding:18px; color:#fff}
.lc div:nth-child(1){background:linear-gradient(160deg,#9C7BE0,#7E5CC4)}
.lc div:nth-child(2){background:linear-gradient(160deg,#7B4CB8,#62399E)}
.lc div:nth-child(3){background:linear-gradient(160deg,#B98BF0,#9563D6)}
.lc div:nth-child(4){background:linear-gradient(160deg,#5A2A80,#45206A)}
.lc div:nth-child(5){background:linear-gradient(160deg,#2F2A6E,#251F58)}
.lc .ic{background:rgba(255,255,255,.18); color:#fff}
.lc b{display:block; margin-bottom:6px}
.lc p{font-size:.85rem; color:#EDE6FB}
.vs{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
@media (max-width:760px){ .vs{grid-template-columns:1fr} }
.vs > div{border-radius:14px; padding:20px; border:1px solid var(--paper-line); background:var(--paper-card)}
.vs h4{margin-bottom:12px}
.vs .chev span{font-size:.78rem}

/* arch rows coloured */
.archx .r{border-left:4px solid var(--c, #7B4CB8)}
.archx .r .nm{display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center}
.archx .r .nm .ic{margin:0; width:34px; height:34px; background:var(--c); color:#fff}
.archx .r .nm .ic svg{width:18px;height:18px}
.archx .r .el span{background:color-mix(in srgb, var(--c) 30%, #0B1F4B); border-color:color-mix(in srgb, var(--c) 60%, transparent)}
.archx .r:nth-child(1){--c:#9C7BE0} .archx .r:nth-child(2){--c:#7B4CB8} .archx .r:nth-child(3){--c:#B98BF0} .archx .r:nth-child(4){--c:#6A2FA8} .archx .r:nth-child(5){--c:#4A3A92} .archx .r:nth-child(6){--c:#5B6488} .archx .r:nth-child(7){--c:#2E4282}
.archx .r:nth-child(6){border-style:dashed}
.archx .r{grid-template-columns:200px 1fr}

/* day one */
.chev.icons span{display:flex; gap:8px; align-items:center; justify-content:center}
.chev.icons span svg{width:16px; height:16px}
.tailor{margin-top:22px; display:flex; gap:14px; align-items:center; padding:18px 20px; border-radius:14px; background:linear-gradient(90deg,rgba(106,47,168,.14),transparent); border-left:4px solid var(--violet)}
.tailor .ic{margin:0}

/* component tabs */
.comp-nav button{background:#1A2A5C; border-color:rgba(201,184,240,.18); color:#D7DBEE}
.comp-nav button:hover{background:#24357A}
.comp-nav button[aria-selected="true"]{background:linear-gradient(135deg,#DEB0FE,#9C7BE0); color:#1A1040; border-color:transparent; box-shadow:0 8px 24px rgba(156,123,224,.35)}

/* principles slide 31 */
.pr{display:flex; flex-direction:column}
.pr .m{font-size:.86rem; color:var(--paper-soft); margin-top:6px}
.pr .o{margin-top:auto; padding-top:12px; font-size:.86rem; color:var(--paper-ink); display:flex; gap:8px}
.pr .o::before{content:"→"; color:var(--violet); font-weight:700}
.pr .o{border-top:1px dashed var(--paper-line); margin-top:12px}

/* needs cards (Detailed 9) */
.needs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .needs{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .needs{grid-template-columns:1fr} }
.need{border-radius:16px; overflow:hidden; background:var(--paper-card); border:1px solid var(--paper-line); display:flex; flex-direction:column}
.need .t{display:flex; gap:12px; align-items:center; padding:18px 18px 12px}
.need .t .ic{margin:0}
.need .t h3{font-size:1.05rem}
.need .no{padding:10px 18px 14px; font-size:.86rem; color:var(--paper-soft); display:flex; gap:8px}
.need .no::before{content:"✕"; color:#C2410C; font-weight:700}
.need .yes{margin-top:auto; padding:14px 18px; background:linear-gradient(90deg,#7B4CB8,#5A2A80); color:#fff; font-size:.88rem; display:flex; gap:8px}
.need .yes::before{content:"✓"; color:#DEB0FE; font-weight:700}

/* products */
.paper .tags span{background:#EDE4FC; border-color:#D9C8F7; color:#4F2270; font-weight:500}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .paper .tags span{background:#2A2360; color:#E9DDFB; border-color:#4A3A92} }
.lob-tile .ic{background:linear-gradient(135deg,#7B4CB8,#5A2A80); color:#fff}
.lob-tile.feat{background:linear-gradient(160deg,#2A1E6A,#0B1F4B); color:#fff; border-top-color:#DEB0FE}
.lob-tile.feat p{color:#D7DBEE}
.lob-tile.feat .tags span{background:rgba(222,176,254,.15); border-color:rgba(222,176,254,.35); color:#fff}
.nolimit{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px}
@media (max-width:760px){ .nolimit{grid-template-columns:1fr} }
.nolimit > div{border-radius:16px; padding:24px; background:linear-gradient(135deg,#6A2FA8,#2A1E6A); color:#fff; display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start}
.nolimit .ic{margin:0; background:rgba(255,255,255,.15); color:#fff; width:48px; height:48px}
.nolimit h3{margin-bottom:6px}
.nolimit p{color:#E6DAFB; font-size:.92rem}
.combo{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.combo span{font-size:.75rem; padding:4px 9px; border-radius:6px; background:rgba(255,255,255,.14)}

/* product management framework (slide 47) */
.pmf{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; align-items:start}
@media (max-width:860px){ .pmf{grid-template-columns:1fr} }
.pmf .side{display:grid; gap:8px}
.pmf .ct{padding:10px; border-radius:10px; background:#7B4CB8; color:#fff; text-align:center; font-weight:600; font-size:.85rem}
.pmf .pp{border-radius:14px; border:2px solid #9C7BE0; padding:12px; display:grid; gap:7px; background:rgba(18,40,92,.6)}
.pmf .pp h5{margin:0 0 4px; font-size:.75rem; letter-spacing:.06em; color:#DEB0FE; text-align:center}
.pmf .pp div{padding:9px; border-radius:8px; background:linear-gradient(180deg,#9C7BE0,#7B4CB8); color:#fff; font-size:.82rem; text-align:center}
.pmf .mid{display:flex; flex-direction:column; align-items:center; gap:10px}
.plans{position:relative; width:170px; height:120px}
.plans div{position:absolute; width:130px; height:88px; border-radius:8px; background:#fff; border:1px solid #C9B8F0; box-shadow:0 6px 16px rgba(0,0,0,.25); font-size:.7rem; color:#4F2270; padding:6px 8px}
.plans div:nth-child(1){left:0; top:0} .plans div:nth-child(2){left:12px; top:10px} .plans div:nth-child(3){left:24px; top:20px} .plans div:nth-child(4){left:36px; top:30px; font-weight:600}
.pmf .arrow{color:#DEB0FE; font-size:1.4rem; line-height:1}
.core{width:100%; border-radius:16px; border:2px solid #DEB0FE; padding:12px; background:rgba(106,47,168,.18)}
.core h5{margin:0 0 8px; font-size:.75rem; letter-spacing:.06em; color:#DEB0FE; text-align:center}
.core .stk{display:grid; gap:5px}
.core .stk div{padding:9px; border-radius:8px; text-align:center; font-size:.82rem; color:#fff}
.core .stk div:nth-child(1){background:#B98BF0; margin:0 24px} .core .stk div:nth-child(2){background:#9C7BE0; margin:0 16px} .core .stk div:nth-child(3){background:#7B4CB8; margin:0 8px} .core .stk div:nth-child(4){background:#5A2A80} .core .stk div:nth-child(5){background:#45206A}
.pmf-base{margin-top:16px; padding:12px; border-radius:10px; text-align:center; font-weight:600; font-size:.85rem; letter-spacing:.04em; background:linear-gradient(90deg,#5A2A80,#7B4CB8,#5A2A80); color:#fff}

/* seven reasons cards */
.seven{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; align-items:stretch}
@media (max-width:1100px){ .seven{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){ .seven{grid-template-columns:1fr 1fr} }
.seven > div{border-radius:16px; padding:18px 14px; color:#fff; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform .25s}
.seven > div:hover{transform:translateY(-6px)}
.seven .n{font-size:2.6rem; font-weight:300; line-height:1; opacity:.9}
.seven .ic{margin:0; background:rgba(255,255,255,.16); color:#fff}
.seven h3{font-size:.98rem; line-height:1.25}
.seven p{font-size:.8rem; color:rgba(255,255,255,.82)}
.seven > div:nth-child(1){background:linear-gradient(180deg,#2A3C78,#1A2A5C)}
.seven > div:nth-child(2){background:linear-gradient(180deg,#3D2A78,#2A1E6A)}
.seven > div:nth-child(3){background:linear-gradient(180deg,#4F2270,#3D2A78)}
.seven > div:nth-child(4){background:linear-gradient(180deg,#5A2A80,#4F2270)}
.seven > div:nth-child(5){background:linear-gradient(180deg,#6A2FA8,#5A2A80)}
.seven > div:nth-child(6){background:linear-gradient(180deg,#7B4CB8,#6A2FA8)}
.seven > div:nth-child(7){background:linear-gradient(180deg,#9C7BE0,#7B4CB8); box-shadow:0 0 40px rgba(156,123,224,.35)}

/* big bang vs waves */
.bb svg{width:100%; height:auto; display:block}
.bb text{font-family:var(--font)}
.bb .draw{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s .3s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){ .bb .draw{animation:none; stroke-dashoffset:0} }

/* rationalisation */
.ratio{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center}
@media (max-width:760px){ .ratio{grid-template-columns:1fr} .ratio .mid-ar{transform:rotate(90deg); justify-self:center} }
.stack-plans{position:relative; height:220px}
.stack-plans div{position:absolute; width:62%; border-radius:8px; background:#fff; border:1px solid #C9B8F0; box-shadow:0 6px 16px rgba(30,10,60,.15); padding:6px 8px; font-size:.68rem; color:#4F2270}
.stack-plans div i{display:block; height:7px; border-radius:2px; background:#E3DDF3; margin-top:4px}
.mid-ar{font-size:2rem; color:var(--violet)}
.rat-core{border-radius:14px; padding:14px; background:var(--paper-card); border:2px solid var(--violet); text-align:center}
.rat-core .cp{padding:12px; border-radius:10px; background:linear-gradient(180deg,#7B4CB8,#5A2A80); color:#fff; font-weight:600}
.rat-core .pl{display:flex; gap:6px; justify-content:center; margin-top:10px; flex-wrap:wrap}
.rat-core .pl span{font-size:.72rem; padding:5px 8px; border-radius:6px; background:#EDE4FC; color:#4F2270; border:1px solid #D9C8F7}

/* migration approach (6 stages) */
.mig6{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
@media (max-width:1000px){ .mig6{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .mig6{grid-template-columns:1fr} }
.mig6 > div{border-radius:14px; overflow:hidden; background:rgba(18,40,92,.6); border:1px solid var(--line); display:flex; flex-direction:column}
.mig6 .h{padding:12px 14px; font-weight:600; font-size:.9rem; color:#fff; display:flex; gap:10px; align-items:center}
.mig6 .h b{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-content:center; font-size:.75rem; flex:none}
.mig6 > div:nth-child(1) .h{background:#2A3C78} .mig6 > div:nth-child(2) .h{background:#3D2A78} .mig6 > div:nth-child(3) .h{background:#4F2270} .mig6 > div:nth-child(4) .h{background:#5A2A80} .mig6 > div:nth-child(5) .h{background:#6A2FA8} .mig6 > div:nth-child(6) .h{background:#7B4CB8}
.mig6 ul{margin:0; padding:12px 14px 14px; list-style:none; display:grid; gap:6px; font-size:.8rem; color:var(--ink-soft)}
.mig6 li{padding-left:12px; position:relative}
.mig6 li::before{content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:#DEB0FE}

/* migration engine (3 tiers) */
.eng3{display:grid; grid-template-columns:150px 1fr 150px; gap:16px; align-items:center}
@media (max-width:860px){ .eng3{grid-template-columns:1fr} }
.eng3 .sys{border-radius:14px; padding:18px 12px; text-align:center; background:#12285C; border:1px solid var(--line); display:grid; gap:8px; justify-items:center; font-size:.85rem}
.eng3 .sys.t{background:linear-gradient(160deg,#7B4CB8,#5A2A80)}
.eng3 .sys .ic{margin:0}
.eng3 .sys.t .ic{background:rgba(255,255,255,.18); color:#fff}
.engine{border-radius:18px; padding:16px; background:linear-gradient(160deg,#14205A,#0B1F4B); border:1px solid rgba(222,176,254,.35); position:relative}
.engine > h4{font-size:.8rem; letter-spacing:.08em; color:#DEB0FE; margin-bottom:10px; text-align:center}
.tier{display:grid; grid-template-columns:90px 1fr 1fr; gap:12px; align-items:center; padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(201,184,240,.15); position:relative; transition:all .3s}
.tier + .tier{margin-top:10px}
.tier .nm{font-weight:600; font-size:.88rem; display:flex; gap:8px; align-items:center}
.tier .nm .ic{margin:0; width:30px; height:30px}
.tier .nm .ic svg{width:16px;height:16px}
.tier .data, .tier .ops{display:flex; flex-wrap:wrap; gap:5px}
.tier .data span{font-size:.72rem; padding:4px 8px; border-radius:6px; background:#2A3C78; color:#D7DBEE}
.tier .ops span{font-size:.72rem; padding:4px 8px; border-radius:6px; background:#7B4CB8; color:#fff; font-weight:500}
.tier.live{border-color:#DEB0FE; background:rgba(106,47,168,.25); box-shadow:0 0 24px rgba(222,176,254,.25)}
.tier.done .nm::after{content:"✓"; color:#2BB5A0; font-weight:700}
@media (max-width:640px){ .tier{grid-template-columns:1fr} }

/* mod 43 section */
.m43 .bb{border-radius:16px; padding:18px; background:#0B1F4B; border:1px solid var(--line)}
.vc-tabs button{font-size:.86rem; padding:0 10px 0 26px; margin-right:20px}
.vc-tabs button:first-child{padding-left:14px}
/* ================= v0.6: 1920 x 1080 standard, still responsive ================= */
.wrap{width:min(1440px, 100% - 64px)}
@media (max-width:620px){ .wrap{width:calc(100% - 40px)} }
.hero .kicker,.page-hero .kicker{font-size:1.35rem; margin-bottom:18px}
.hero h1{font-size:clamp(2.6rem,4.4vw,5rem)}
.page-hero h1{font-size:clamp(2.2rem,3.8vw,4.2rem)}
/* equal toggle */
.seg-toggle{display:grid; grid-template-columns:1fr 1fr; width:min(460px,100%)}
.seg-toggle button{text-align:center}
/* value chain: rounded points, no scroll */
.vc-tabs{overflow:visible; flex-wrap:nowrap; padding-right:24px}
.vc-tabs button{flex:1 1 0; justify-content:center; margin-right:26px; padding:0 6px 0 14px !important}
.vc-tabs button:not(:first-child)::before{display:none}
@media (max-width:1100px){ .vc-tabs{flex-wrap:wrap; row-gap:10px} .vc-tabs button{flex:1 1 40%} }
/* rounded chevrons everywhere */
.chev{gap:0; flex-wrap:wrap; row-gap:10px}
.chev span{clip-path:none !important; position:relative; z-index:1; border-radius:12px 0 0 12px; margin-right:24px; height:48px; padding:0 6px 0 14px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.2}
.chev span::after{content:""; position:absolute; right:-16px; top:50%; width:34px; height:34px; background:inherit; transform:translateY(-50%) rotate(45deg); border-radius:0 9px 0 0; z-index:-1}
.chev.icons span{gap:8px}
/* aligned rows via subgrid */
.forces .force{display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:6px; align-content:start}
.forces .force .ic{margin-bottom:6px}
.forces .force .hb{margin-top:6px}
.prs .pr{display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:6px}
.prs .pr .o{margin-top:6px}
.needs .need{display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0}
/* answer band: darker ground, lighter blue-indigo tiles */
.answer{background:linear-gradient(135deg,#040C24,#0B1F4B 75%)}
.answer .ag div{background:linear-gradient(160deg,#2D63C9,#4B3FA8); border-color:rgba(255,255,255,.28); color:#fff}
.answer .ag .ic{background:rgba(255,255,255,.22)}
/* tiers */
.tiers-line::before{content:""; position:absolute; left:0; right:0; top:52%; border-top:2px dashed #DEB0FE; z-index:2}
.tiers-line::after{top:auto; bottom:calc(48% + 6px); border-top:0; color:#fff; padding:0; z-index:2; font-weight:600}
.tiers .t3{background:linear-gradient(180deg,#9C7BE0,#7B4CB8); color:#fff}
/* hub labels */
.hub-svg text{font-family:var(--font)}
/* PMF v6 */
.plansbox{max-width:460px; margin:0 auto; border-radius:16px; border:2px solid #DEB0FE; padding:14px 16px 18px; background:rgba(106,47,168,.18)}
.plansbox h5{margin:0 0 10px; font-size:.75rem; letter-spacing:.06em; color:#DEB0FE; text-align:center}
.pcards{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.pcards div{border-radius:10px; padding:12px 8px; text-align:center; font-size:.8rem; color:#fff; background:linear-gradient(180deg,#B98BF0,#9C7BE0); box-shadow:0 6px 16px rgba(0,0,0,.25)}
.pcards div.me{background:linear-gradient(180deg,#7B4CB8,#5A2A80); outline:2px solid #DEB0FE}
.pmf-ar{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; margin:6px 0}
.pmf-ar svg{width:100%; height:64px; display:block}
.pmf-ar text{font-family:var(--font)}
@media (max-width:860px){ .pmf-ar{display:none} }
/* migration approach: summary tiles */
.mig6 .h{min-height:68px}
.mig6 p{padding:14px; font-size:.86rem; color:var(--ink-soft)}
/* migration engine (aligned to source schematic) */
.eng4{display:grid; grid-template-columns:160px 36px 1fr 36px 160px; gap:10px; align-items:center}
@media (max-width:980px){ .eng4{grid-template-columns:1fr} .eng4 .ar4{transform:rotate(90deg); justify-self:center} }
.sys4{border-radius:16px; padding:16px 12px; background:linear-gradient(160deg,#2E4282,#1A2A5C); border:1px solid rgba(201,184,240,.25); text-align:center}
.sys4.t{background:linear-gradient(160deg,#7B4CB8,#45206A)}
.sys4 h5{margin:0 0 12px; font-size:.95rem; font-weight:600}
.sys4 .icons{display:grid; grid-template-columns:1fr 1fr; gap:8px; justify-items:center}
.sys4 .ic{margin:0; background:rgba(255,255,255,.16); color:#fff}
.sys4 p{margin-top:12px; font-size:.82rem; color:#E6DAFB}
.ar4{color:#DEB0FE; font-size:1.8rem; text-align:center}
.engine4{border-radius:18px; padding:16px; background:linear-gradient(160deg,#16236A,#0B1F4B); border:1px solid rgba(222,176,254,.35)}
.engine4 > h5{margin:0 0 12px; text-align:center; font-size:.8rem; letter-spacing:.1em; color:#DEB0FE}
.t4{display:grid; grid-template-columns:34px 190px 1fr 190px; gap:14px; align-items:center; padding:14px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(201,184,240,.18)}
.t4 .vl{writing-mode:vertical-rl; transform:rotate(180deg); font-weight:600; font-size:.88rem; color:#DEB0FE; text-align:center}
.t4 .dc,.t4 .op{display:grid; gap:6px}
.t4 .dc span{font-size:.76rem; padding:6px 10px; border-radius:8px; background:linear-gradient(90deg,#3D72DA,#2350B8); color:#fff; text-align:center}
.t4 .op span{font-size:.78rem; padding:7px 10px; border-radius:8px; background:linear-gradient(90deg,#9C7BE0,#7B4CB8); color:#fff; text-align:center; font-weight:600}
.t4 .db{display:flex; justify-content:center}
.t4 .db svg{width:84px; height:auto}
.down4{width:0; height:0; margin:6px auto; border-left:14px solid transparent; border-right:14px solid transparent; border-top:12px solid #9C7BE0; position:relative; left:24px}
@media (max-width:700px){ .t4{grid-template-columns:1fr} .t4 .vl{writing-mode:horizontal-tb; transform:none} .down4{left:0} }
.wave-disc{margin-top:48px}
/* ================= v0.7 ================= */
.hero{min-height:calc(var(--vh,100vh) - 76px)}
dialog#check{max-height:calc(var(--vh,100vh) - 32px)}
.hero h1{font-size:clamp(2.3rem,3.5vw,4rem); line-height:1.06}
input[type=tel]{width:100%; font:inherit; font-size:.95rem; padding:12px 14px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink)}
.phone select{height:100%}
.need .no{min-height:58px; align-items:center}
.need .yes{min-height:78px; align-items:center}
.page[data-page="products"] .page-hero .wrap.hv{grid-template-columns:.8fr 1.2fr}
.page[data-page="products"] .page-hero .orbit-wrap{margin:-30px -20px -30px 0}
/* v0.7.1: every pink section heading at the large size, on every page */
.kicker{font-size:1.35rem; margin-bottom:16px; line-height:1.3}
.tile .kicker,.result .kicker{font-size:1.05rem; margin-bottom:10px}
/* ================= v1.1: Delivery page ================= */
.dl-pillars .ic{margin-bottom:12px}
.incloud{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-content:center; padding:28px; border-radius:18px; background:linear-gradient(160deg,#0B1F4B,#2A1E6A)}
.incloud span{font-size:.9rem; padding:9px 14px; border-radius:999px; color:#fff; background:rgba(222,176,254,.14); border:1px solid rgba(222,176,254,.35)}
.incloud span:nth-child(3n){background:linear-gradient(90deg,#7B4CB8,#5A2A80); border-color:transparent}
.incloud span:nth-child(4n+1){font-size:1rem}
.dflow{display:grid; grid-template-columns:1fr 64px 1fr 64px 1fr 64px 1fr 64px 1fr; align-items:stretch}
.dstep{position:relative; border-radius:16px; padding:22px 18px; color:#fff; display:flex; flex-direction:column; gap:8px}
.dstep:nth-of-type(1){background:linear-gradient(180deg,#2A3C78,#1A2A5C)}
.dstep:nth-of-type(3){background:linear-gradient(180deg,#3D2A78,#2A1E6A)}
.dstep:nth-of-type(5){background:linear-gradient(180deg,#5A2A80,#4F2270)}
.dstep:nth-of-type(7){background:linear-gradient(180deg,#6A2FA8,#5A2A80)}
.dstep:nth-of-type(9){background:linear-gradient(180deg,#9C7BE0,#7B4CB8); box-shadow:0 0 40px rgba(156,123,224,.35)}
.dstep .dn{font-size:2.2rem; font-weight:300; line-height:1; opacity:.9}
.dstep .ic{margin:0; background:rgba(255,255,255,.16); color:#fff}
.dstep h3{font-size:1.05rem}
.dstep p{font-size:.84rem; color:rgba(255,255,255,.85)}
.gate{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative}
.gate::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed rgba(222,176,254,.5)}
.gate .ic{margin:0; width:40px; height:40px; border-radius:50%; background:#DEB0FE; color:#1A1040; position:relative; z-index:1; box-shadow:0 0 0 6px rgba(222,176,254,.15)}
.gate span{font-size:.72rem; color:#DEB0FE; font-weight:600; position:relative; z-index:1; background:var(--navy-2); padding:0 4px}
@media (max-width:1000px){ .dflow{grid-template-columns:1fr} .gate{flex-direction:row; padding:6px 0} .gate::before{left:50%; right:auto; top:0; bottom:0; border-top:0; border-left:2px dashed rgba(222,176,254,.5)} }
.dlv > svg{width:100%; height:auto; display:block}
.dlv text{font-family:var(--font)}
.spin{animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation:none} }
[data-blend] > svg{width:100%; height:auto; display:block}
[data-blend] text{font-family:var(--font)}
.docstack{display:grid; gap:8px; padding:24px; border-radius:18px; background:linear-gradient(160deg,#0B1F4B,#2A1E6A)}
.docstack div{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(222,176,254,.22); font-size:.92rem; position:relative}
.docstack div::after{content:"↻"; margin-left:auto; color:#DEB0FE; font-size:1rem}
.docstack .ic{margin:0; width:32px; height:32px; background:rgba(222,176,254,.16); color:#DEB0FE}
.docstack .ic svg{width:17px; height:17px}
.docstack div:nth-child(odd){margin-left:18px}
.rp-ctrl{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.rp-chain{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rp{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 12px; min-width:118px; border-radius:14px; background:#12285C; border:1px solid rgba(201,184,240,.2); color:#C9CDE0; font-size:.88rem; transition:all .35s}
.rp .ic{margin:0}
.rpa{color:#6A5C9E; font-size:1.3rem}
.rp.src{background:linear-gradient(160deg,#E36A6A,#B84343); color:#fff; border-color:transparent; box-shadow:0 0 24px rgba(227,106,106,.45)}
.rp.src .ic{background:rgba(255,255,255,.2); color:#fff}
.rp.hit{background:linear-gradient(160deg,#9C7BE0,#6A2FA8); color:#fff; border-color:#DEB0FE; box-shadow:0 0 22px rgba(222,176,254,.35); transform:translateY(-4px)}
.rp.hit .ic{background:rgba(255,255,255,.2); color:#fff}
.rp-msg{margin-top:20px; color:var(--ink-soft); min-height:1.6em}
.ready{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:800px){ .ready{grid-template-columns:1fr} }
.rcard{border-radius:16px; padding:24px; background:var(--paper-card); border:1px solid var(--paper-line)}
.rcard.mid{background:linear-gradient(160deg,#7B4CB8,#5A2A80); color:#fff; border-color:transparent}
.rcard.mid p{color:#EDE6FB}
.rcard.mid .ic{background:rgba(255,255,255,.18); color:#fff}
.rcard h3{margin-bottom:6px}
.rcard p{font-size:.92rem; color:var(--paper-soft)}
/* fix: review tags marked "flag" were picking up the country-flag style and showing as small boxes */
.src.flag{display:none; width:auto; height:auto; overflow:visible; box-shadow:none}
body.review .src.flag{display:inline-block}
/* ================= v1.1 review ================= */
/* approval gates */
.gate::before{border-top:0; height:2px; top:50%; background:linear-gradient(90deg,rgba(222,176,254,.15),#DEB0FE,rgba(222,176,254,.15))}
.gate .gp{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px 10px; border-radius:999px; background:linear-gradient(180deg,#B98BF0,#6A2FA8); border:1px solid rgba(255,255,255,.35); box-shadow:0 0 0 5px rgba(156,123,224,.18), 0 10px 26px rgba(106,47,168,.45)}
.gate .gp .ic{width:30px; height:30px; border-radius:50%; background:#fff; color:#5A2A80; box-shadow:none; margin:0}
.gate .gp .ic svg{width:16px; height:16px}
.gate .gp span{background:none; color:#fff; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:0}
@media (max-width:1000px){ .gate::before{left:50%; right:auto; width:2px; height:auto; top:0; bottom:0; background:linear-gradient(180deg,rgba(222,176,254,.15),#DEB0FE,rgba(222,176,254,.15))} .gate .gp{flex-direction:row; padding:6px 14px} }
/* inflow / trace diagrams */
.inflow > svg,[data-trace] > svg{width:100%; height:auto; display:block}
.inflow text,[data-trace] text{font-family:var(--font)}
/* change flow */
.autoband{display:flex; gap:16px; align-items:center; padding:20px 24px; border-radius:16px; margin-bottom:28px; background:linear-gradient(90deg,#7B4CB8,#45206A); box-shadow:0 0 40px rgba(156,123,224,.25)}
.autoband .ic{margin:0; width:48px; height:48px; background:rgba(255,255,255,.18); color:#fff}
.autoband b{display:block; font-size:1.25rem; font-weight:600; color:#fff}
.autoband span{color:#EDE6FB; font-size:.95rem}
.cflow{display:grid; grid-template-columns:1fr 36px 1.35fr 36px 1fr 36px 1fr; align-items:center}
@media (max-width:1000px){ .cflow{grid-template-columns:1fr} .car{transform:rotate(90deg); justify-self:center} }
.car{color:#DEB0FE; font-size:1.6rem; text-align:center}
.cc{border-radius:16px; padding:20px; background:#12285C; border:1px solid rgba(201,184,240,.22); color:#fff; display:flex; flex-direction:column; gap:6px; height:100%}
.cc .ic{margin:0 0 6px; background:rgba(222,176,254,.16); color:#DEB0FE}
.cc .ct2{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#DEB0FE; font-weight:600}
.cc h3{font-size:1.05rem}
.cc p{font-size:.86rem; color:var(--ink-soft)}
.cc.last{background:linear-gradient(160deg,#7B4CB8,#5A2A80); border-color:transparent}
.cc.last .ic{background:rgba(255,255,255,.18); color:#fff}
.cc.last p{color:#EDE6FB}
.cc.report{background:linear-gradient(160deg,#16236A,#0B1F4B); border-color:#DEB0FE; box-shadow:0 0 30px rgba(222,176,254,.2); padding:18px}
.cc.report .rh{display:flex; gap:12px; align-items:center; margin-bottom:8px}
.cc.report .rh .ic{margin:0}
.rrow{display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.05); font-size:.84rem}
.rrow em{font-style:normal; font-size:.7rem; font-weight:600; padding:3px 8px; border-radius:999px}
.rrow em.hi{background:#7B4CB8; color:#fff}
.rrow em.md{background:rgba(222,176,254,.18); color:#DEB0FE}
.rrow em.lo{background:rgba(43,181,160,.18); color:#7FE0D0}
/* purple control band */
.answer.purp{background:linear-gradient(135deg,#0B1F4B,#2A1E6A 75%)}
.answer.purp .ag div{background:linear-gradient(160deg,#7B4CB8,#4F2270); border-color:rgba(222,176,254,.35)}
/* ================= v1.1: ZaZu branding ================= */
.zzlogo{display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:22px}
.zz{font-family:'Poppins','Roboto',sans-serif; font-weight:800; font-size:4.2rem; letter-spacing:.5px; line-height:1}
.zz .c1{color:#B287EC} .zz .c2{color:#E378D2} .zz .c3{color:#7FB0E8} .zz .c4{color:#D094FF}
.zzpart{display:flex; align-items:center; gap:8px; font-family:'Poppins','Roboto',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8FA0C4}
.zzpart img{height:18px; width:auto; opacity:.92}
.sdlcband{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:28px; padding:16px 18px; border-radius:16px; background:rgba(18,40,92,.6); border:1px solid rgba(222,176,254,.25)}
.sdlcband .lbl{font-weight:600; color:#DEB0FE; margin-right:6px}
.sdlcband span:not(.lbl){display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; background:linear-gradient(90deg,#7B4CB8,#5A2A80); color:#fff; font-size:.86rem}
.sdlcband .ic{margin:0; width:22px; height:22px; background:transparent; color:#fff}
.sdlcband .ic svg{width:15px; height:15px}
.nav a{padding:8px 9px}
/* ================= v1.1 review 3 ================= */
.gate .gsvg{width:68px; height:auto; position:relative; z-index:1; filter:drop-shadow(0 8px 18px rgba(106,47,168,.45))}
.gate .gsvg text{font-family:var(--font)}
.gate::before{height:3px}
@media (max-width:1000px){ .gate .gsvg{width:56px} }
.dstep{border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.25); transition:transform .25s}
.dstep:hover{transform:translateY(-4px)}
.dstep .dn{font-size:2.6rem; font-weight:200; background:linear-gradient(180deg,#fff,#DEB0FE); -webkit-background-clip:text; background-clip:text; color:transparent}
.dstep .ic{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.25)}
.dstep .out{margin-top:auto; padding-top:12px; border-top:1px dashed rgba(255,255,255,.25); font-size:.78rem; font-weight:600; color:#fff; display:flex; gap:6px; align-items:center}
.dstep .out::before{content:"→"; color:#DEB0FE}
.sdlcsec .sdlcgrid{display:grid; grid-template-columns:1.35fr .65fr; gap:40px; align-items:center}
@media (max-width:1000px){ .sdlcsec .sdlcgrid{grid-template-columns:1fr} }
[data-sdlc] > svg{width:100%; height:auto; display:block}
[data-sdlc] text{font-family:var(--font)}
.sdlcpts{display:grid; gap:12px}
.sdlcpts div{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:16px; border-radius:14px; background:rgba(18,40,92,.6); border:1px solid rgba(222,176,254,.22)}
.sdlcpts .ic{margin:0; background:linear-gradient(135deg,#9C7BE0,#5A2A80); color:#fff}
.sdlcpts b{display:block; color:#fff; margin-bottom:2px}
.sdlcpts span{font-size:.88rem; color:var(--ink-soft)}
/* change flow: shorter, centred side boxes */
.cflow{align-items:center}
.cc{height:auto}
.cc:not(.report){padding:18px 16px; text-align:center; align-items:center; max-width:250px; justify-self:center; width:100%; background:linear-gradient(160deg,#16285E,#0F1F4D); border:1px solid rgba(222,176,254,.3); box-shadow:0 14px 34px rgba(0,0,0,.3)}
.cc:not(.report) .ic{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#B98BF0,#6A2FA8); color:#fff; margin:0 auto 8px; box-shadow:0 0 0 6px rgba(156,123,224,.18)}
.cc.last{background:linear-gradient(160deg,#7B4CB8,#45206A) !important; border-color:#DEB0FE !important}
.car{width:36px; height:36px; border-radius:50%; display:grid; place-content:center; justify-self:center; background:linear-gradient(135deg,#DEB0FE,#7B4CB8); color:#1A1040; font-size:1.1rem; font-weight:700; box-shadow:0 0 18px rgba(222,176,254,.35)}
/* ================= v1.1 review 4 ================= */
.cflow{grid-template-columns:1fr 56px 1.35fr 56px 1fr 56px 1fr}
.cc:not(.report){max-width:none; justify-self:stretch}
.car{justify-self:center; align-self:center}
/* ================= v1.2 ================= */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:#DEB0FE; color:#1A1040; padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
.h4{font-size:1rem; font-weight:600}
.two-track .h4{margin-bottom:8px; font-size:.9rem}
.vs .h4{margin-bottom:12px}
.s-demo{background:#127566}
.core .stk div:nth-child(1),.core .stk div:nth-child(2){color:#1A1040}
/* dropdown navigation */
.nav{gap:2px}
.nav > a,.ddb{color:var(--ink); text-decoration:none; font:inherit; font-size:.9rem; padding:8px 11px; border-radius:6px; white-space:nowrap; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.nav > a:hover,.ddb:hover,.dd.open .ddb{background:rgba(222,176,254,.1)}
.ddb svg{width:14px; height:14px; transition:transform .2s}
.dd.open .ddb svg{transform:rotate(180deg)}
.nav > a[aria-current="page"],.ddb.cur{color:var(--lilac)}
.dd{position:relative}
.ddp{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); min-width:360px; padding:10px; border-radius:16px; background:rgba(11,31,75,.97); backdrop-filter:blur(12px); border:1px solid rgba(222,176,254,.25); box-shadow:0 24px 60px rgba(0,0,0,.45); display:none; z-index:50}
.ddp::before{content:""; position:absolute; top:-10px; left:0; right:0; height:10px}
.dd.open .ddp{display:grid; gap:2px}
.ddp a{display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center; padding:10px 12px; border-radius:10px; text-decoration:none; color:#fff}
.ddp a:hover,.ddp a:focus-visible{background:rgba(106,47,168,.35)}
.ddp a[aria-current="page"]{background:rgba(106,47,168,.25)}
.ddp .ic{margin:0; width:34px; height:34px}
.ddp .ic svg{width:17px; height:17px}
.ddp b{display:block; font-weight:500; font-size:.92rem}
.ddp small{display:block; color:var(--ink-soft); font-size:.78rem}
@media (max-width:1080px){
  .nav{max-height:calc(var(--vh,100vh) - 90px); overflow:auto}
  .nav > a,.ddb{width:100%; justify-content:space-between; padding:12px 8px; font-size:1rem}
  .ddp{position:static; transform:none; min-width:0; box-shadow:none; border:0; background:rgba(255,255,255,.04); margin:4px 0 8px}
}
/* cookie consent */
.ck{position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:70; max-width:980px; margin:0 auto; display:none; grid-template-columns:44px 1fr auto; gap:16px; align-items:center; padding:18px 20px; border-radius:16px; background:rgba(11,31,75,.97); border:1px solid rgba(222,176,254,.35); box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(10px)}
.ck.show{display:grid}
.ck .ic{margin:0}
.ck p{font-size:.9rem; color:#E6E9F5}
.ck p a{color:var(--lilac)}
.ck .cka{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.ck .btn{padding:9px 14px; font-size:.85rem}
@media (max-width:760px){ .ck{grid-template-columns:1fr} .ck .ic{display:none} .ck .cka{justify-content:stretch} .ck .btn{flex:1} }
body.review .review-toggle{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
dialog#ckPrefs{width:min(620px,100% - 24px); background:linear-gradient(160deg,#0B1F4B,#14123E); border:1px solid rgba(222,176,254,.25)}
.ckrow{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line)}
.ckrow b{display:block}
.ckrow span{font-size:.86rem; color:var(--ink-soft)}
.sw{position:relative; width:48px; height:28px; flex:none}
.sw input{opacity:0; width:100%; height:100%; margin:0; cursor:pointer; position:absolute; inset:0; z-index:1}
.sw i{position:absolute; inset:0; border-radius:999px; background:#3B4C78; transition:background .2s}
.sw i::after{content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s}
.sw input:checked + i{background:var(--violet)}
.sw input:checked + i::after{transform:translateX(20px)}
.sw input:disabled + i{opacity:.6}
.sw input:focus-visible + i{outline:2px solid var(--lilac); outline-offset:2px}
/* legal pages */
.legalw{max-width:860px}
.legalw h2{font-size:1.45rem; margin:38px 0 12px}
.legalw h3{font-size:1.05rem; margin:22px 0 8px}
.legalw p,.legalw li{color:var(--paper-soft); line-height:1.7}
.legalw ul{padding-left:20px; display:grid; gap:6px; margin:10px 0}
.legalw a{color:var(--violet)}
.ph{background:#FFF1B8; color:#5A4500; padding:0 4px; border-radius:4px; font-size:.95em}
.draftnote{display:flex; gap:12px; align-items:center; padding:14px 18px; border-radius:12px; background:#FFF6D6; color:#5A4500; border:1px solid #F0D98A; margin-bottom:28px; font-size:.92rem}
.legal-toc{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px}
.legal-toc a{font-size:.82rem; padding:6px 12px; border-radius:999px; border:1px solid var(--paper-line); text-decoration:none; color:var(--paper-ink)}
.ctable{width:100%; border-collapse:collapse; margin:12px 0 4px; font-size:.92rem}
.ctable th,.ctable td{text-align:left; padding:12px; border-bottom:1px solid var(--paper-line); vertical-align:top; color:var(--paper-soft)}
.ctable th{color:var(--paper-ink); font-weight:600}
footer .legal .ll{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
footer .legal .ll a,footer .legal .ll button{display:inline; color:var(--ink-soft); background:none; border:0; font:inherit; font-size:.88rem; cursor:pointer; padding:0; text-decoration:none}
footer .legal .ll a:hover,footer .legal .ll button:hover{color:var(--lilac)}