:root{
  --ground:#FCF9F5; --surface:#FFFFFF; --raised:#F1EEEA;
  --border:#DBD7D2; --border-strong:#C7C1B9;
  --ink:#1F1915; --ink-2:#69625D; --ink-3:#9A938C;
  --accent:#005B89; --panel:#1F1915; --panel-ink:#FCF9F5;
  --panel-muted:rgba(252,249,245,.60); --panel-rule:rgba(252,249,245,.15);
  --ok:#4F7050; --terracotta:#B95B3D;
  --phase-1:#7DA4C0; --phase-2:#3C93AC; --phase-3:#008288;
  --phase-4:#A98C35; --phase-5:#B95B3D;
  --r:4px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.6 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
h1,h2,h3{margin:0; font-weight:600; line-height:1.15; letter-spacing:-.025em}
p{margin:0}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px}

/* --------------------------------------------------------------- header */
header{background:var(--panel); color:var(--panel-ink)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:24px;
     padding-top:18px; padding-bottom:18px}
.brand{display:flex; align-items:center; gap:10px; color:var(--panel-ink)}
.brand:hover{text-decoration:none}
.brand .name{font-weight:600; font-size:17px; letter-spacing:-.015em}
nav.site-nav{display:flex; align-items:center; gap:28px; flex:1; margin-left:8px}
nav.site-nav a{color:var(--panel-muted); font-size:14px; font-weight:500}
nav.site-nav a:hover{color:var(--panel-ink); text-decoration:none}
nav.site-nav a[aria-current="page"]{color:var(--panel-ink)}
.header-cta{display:flex; align-items:center; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:var(--r); font-size:14px; font-weight:500;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  white-space:nowrap;
}
.btn:hover{background:var(--raised); text-decoration:none}
.btn.primary{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.btn.primary:hover{opacity:.88}
.btn.on-dark{background:transparent; border-color:var(--panel-rule); color:var(--panel-ink)}
.btn.on-dark:hover{background:rgba(252,249,245,.08)}
.btn.on-dark.primary{background:var(--panel-ink); border-color:var(--panel-ink); color:var(--ink)}
.btn.on-dark.primary:hover{opacity:.88; background:var(--panel-ink)}

/* ------------------------------------------------------------- page hero */
.page-hero{padding:64px 0 48px; border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(32px,4.4vw,46px); letter-spacing:-.03em; max-width:20ch}
.page-hero p.lede{margin:18px 0 0; font-size:18px; color:var(--ink-2); max-width:56ch}

/* ----------------------------------------------------------------- hero */
.hero{padding-top:76px; padding-bottom:0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,60px); letter-spacing:-.035em; max-width:15ch}
.hero p.lede{margin:22px 0 0; font-size:19px; color:var(--ink-2); max-width:54ch}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.cta .note{font-size:14px; color:var(--ink-3); align-self:center}

/* The phase run, the same device the product uses. */
.run{margin-top:56px; border-top:1px solid var(--border-strong); padding-top:0; display:flex; overflow-x:auto}
.gate{flex:1 1 0; min-width:112px; padding:0 14px 0 0; position:relative}
.gate::before{content:""; display:block; height:4px; border-radius:2px; background:var(--ph,var(--border)); margin-top:-2px}
.gate.todo::before{background:var(--border)}
.gate .code{display:block; margin-top:14px; font-weight:600; font-size:15px; color:var(--ph,var(--ink-3))}
.gate .nm{display:block; margin-top:2px; font-size:13px; color:var(--ink-3); line-height:1.35}
.p1{--ph:var(--phase-1)} .p2{--ph:var(--phase-2)} .p3{--ph:var(--phase-3)}
.p4{--ph:var(--phase-4)} .p5{--ph:var(--phase-5)}

/* ---------------------------------------------------------- illustration */
.sheet{width:100%; height:auto}
.portal-card{width:100%; height:auto}

/* -------------------------------------------------------------- feature */
section{padding:76px 0; border-top:1px solid var(--border)}
.page-hero + section{border-top:none}
.kicker{font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:12px}
.grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:38px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:24px}
.card h3{font-size:17px}
.card p{margin-top:8px; font-size:15px; color:var(--ink-2)}

/* -------------------------------------------------------------- pricing */
.price-panel{background:var(--panel); color:var(--panel-ink); border-radius:var(--r); padding:44px}
.price-panel h2{color:var(--panel-ink); font-size:30px}
.price-panel p{color:var(--panel-muted); margin-top:14px; max-width:56ch}
.rules{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:0}
.rules li{padding:16px 0; border-top:1px solid var(--panel-rule); display:grid;
          grid-template-columns:260px 1fr; gap:16px; align-items:start}
.rules b{color:var(--panel-ink); font-weight:600}
.rules span{color:var(--panel-muted); font-size:15px}

/* ------------------------------------------------------------------ faq */
.faq{display:grid; gap:0; margin-top:38px; max-width:74ch}
.faq > div{padding:22px 0; border-top:1px solid var(--border)}
.faq > div:last-child{border-bottom:1px solid var(--border)}
.faq h3{font-size:16px}
.faq p{margin-top:8px; font-size:15px; color:var(--ink-2)}

/* -------------------------------------------------------------- callout */
.callout{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
         padding:36px; display:flex; align-items:center; justify-content:space-between;
         gap:24px; flex-wrap:wrap}
.callout h2{font-size:24px; max-width:32ch}
.callout p{margin-top:8px; color:var(--ink-2); font-size:15px}

footer{padding:40px 0 56px; border-top:1px solid var(--border); color:var(--ink-3); font-size:14px}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot nav{display:flex; gap:18px; flex-wrap:wrap}
.foot nav a{color:var(--ink-3)}
.foot nav a:hover{color:var(--ink-2)}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
}
@media (max-width:640px){
  nav.site-nav{display:none}
  .hero{padding-top:56px; padding-bottom:48px}
  .page-hero{padding:48px 0 36px}
  section{padding:52px 0}
  .price-panel{padding:28px}
  .rules li{grid-template-columns:1fr; gap:4px}
  .callout{padding:24px}
}