/* START PAGE — welcome page layout (start.html, start.js, pricing.js). Shares the cockpit's tokens and type; layout only. */
body.start{
  display:block;
  background:radial-gradient(1000px 500px at 100% 0%,color-mix(in srgb,#c04cf0 14%,transparent),transparent 70%),
    radial-gradient(900px 500px at 0% 20%,color-mix(in srgb,#6a5cf5 14%,transparent),transparent 70%),
    var(--bg);
  color:var(--text);
}
/* ---------- Top bar and navigation (start.html) ---------- */
.s-top{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px var(--space-10);
  background:linear-gradient(118deg,#1a2b45,#2a2f6b 55%,#6a5cf5);
  color:#fff;
}
.s-brand{display:flex;align-items:center;gap:10px;color:#7fc4ff;font-size:17px}
.s-brand b{color:#fff}
.s-nav{display:flex;align-items:center;gap:var(--space-5)}
.s-nav a{color:#d6e4f3;text-decoration:none;font-size:14px;font-weight:600}
.s-nav a.btn-sm{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.s-nav a.btn-sm:hover{background:#7fc4ff;color:var(--navy)}
.s-nav a.btn.primary{
  background:linear-gradient(118deg,#6a5cf5,#c04cf0);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--g1) 70%,transparent);
}
.s-nav a.btn.primary:hover{background:var(--surface)}
/* ---------- Hero and KPI card (start.html) ---------- */
.s-hero{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:var(--space-10);
  align-items:center;
  padding:72px var(--space-10) 56px;
  max-width:1280px;
  margin:0 auto;
  --page:#6a5cf5;
  --page2:#c04cf0;
}
.s-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.s-tag{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--navy);margin:-2px 0 16px}
.s-hero h1{
  font-size:40px;
  line-height:1.12;
  margin:0 0 18px;
  letter-spacing:-.01em;
  background:linear-gradient(118deg,#1a2b45 0%,#3b3f8f 55%,#6a5cf5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.s-hero p{font-size:17px;line-height:1.6;color:#3b4a5c;margin:0 0 24px;max-width:60ch}
.btn.big{padding:13px 24px;font-size:16px;text-decoration:none}
.start a.btn{text-decoration:none;display:inline-block}
.s-fine{font-size:var(--text-xs);color:var(--muted);margin-top:14px;line-height:1.5}
.s-hero-card{
  background:linear-gradient(160deg,var(--white) 0%,color-mix(in srgb,var(--g1) 4%,var(--surface)) 100%);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:var(--space-6);
  border:1.5px solid var(--line);
  border-top:0;
}
.s-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.s-kpis div{padding:var(--space-4);background:var(--grey-bg);border-radius:var(--radius)}
.s-kpis span{display:block;font-size:var(--text-xs);color:var(--muted);font-weight:600}
.s-kpis b{display:block;font-size:30px;margin:4px 0 2px;line-height:1.1;font-weight:900;letter-spacing:-.02em}
.s-kpis small{font-size:12px;color:var(--muted);line-height:1.35;display:block}
.s-kpis b.r{color:#c8264d}
.s-kpis b.a{color:#9a5b00}
.s-kpis b.g{color:#0f7a4a}
/* ---------- Sections, feature grids, steps, timeline (start.html) ---------- */
.s-sec{padding:64px var(--space-10);max-width:1280px;margin:0 auto}
.s-sec.alt{
  max-width:none;
  background:linear-gradient(180deg,color-mix(in srgb,#6a5cf5 6%,#fff),color-mix(in srgb,#c04cf0 5%,#fff));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.s-sec.alt>*{max-width:1200px;margin-left:auto;margin-right:auto}
.s-sec h2{font-size:30px;margin:0 0 12px;line-height:1.2}
.s-lead{font-size:17px;line-height:1.6;color:#3b4a5c;max-width:72ch;margin:0 0 28px}
.s-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:28px}
.s-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-top:28px}
.s-grid3 article,.s-grid2 article{
  background:linear-gradient(160deg,var(--white) 0%,color-mix(in srgb,var(--g1) 4%,var(--surface)) 100%);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6);
  box-shadow:var(--shadow);
  border:1.5px solid var(--line);
  border-top:3px solid color-mix(in srgb,#6a5cf5 60%,#c04cf0);
}
.s-sec.alt article{background:var(--white);box-shadow:var(--shadow)}
.s-grid3 h3,.s-grid2 h3{margin:0 0 8px;font-size:17px}
.s-grid3 p,.s-grid2 p{margin:0;font-size:var(--text-sm);line-height:1.6;color:#3b4a5c}
.s-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);counter-reset:s}
.s-steps li{counter-increment:s;background:var(--grey-bg);border-radius:var(--radius-lg);padding:var(--space-5)}
.s-steps li::before{
  content:counter(s);
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
}
.s-steps b{display:block;font-size:15px;margin-bottom:6px}
.s-steps span{font-size:13px;line-height:1.55;color:#3b4a5c}
.s-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);margin-top:28px}
.s-timeline div{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow);
  border-left:4px solid var(--green-dot,#2f9e63);
}
.s-timeline b{display:block;font-size:15px;margin-bottom:6px}
.s-timeline span{font-size:13px;line-height:1.55;color:#3b4a5c}
/* ---------- Price panel and call to action (start.html) ---------- */
.s-price{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);max-width:820px;margin-top:28px}
.s-price>div{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow)}
.s-price>div>span{display:block;font-size:var(--text-sm);color:var(--muted);font-weight:600}
.s-price b{display:block;font-size:34px;margin:6px 0 4px}
.s-price b small{font-size:16px;color:var(--muted);font-weight:700}
.s-price>div>small{font-size:13px;color:var(--muted)}
.s-sec.cta{
  text-align:center;
  background:linear-gradient(118deg,#1a2b45 0%,#3b3f8f 50%,#6a5cf5 100%);
  color:#fff;
  max-width:none;
  border-radius:0;
}
.s-sec.cta h2{color:#fff}
.s-sec.cta .s-lead{color:#d6e4f3;margin-left:auto;margin-right:auto}
.s-sec.cta .row{justify-content:center}
.s-sec.cta .btn.primary{background:#fff;color:#2a2f6b;border-color:#fff}
.s-sec.cta .btn.quiet{border-color:#7fc4ff;color:#fff}
.s-sec.cta .btn.quiet:hover{background:#7fc4ff;color:var(--navy)}
.s-sec.cta .s-fine{color:#9fc3ea}
.s-foot{padding:28px var(--space-10);font-size:var(--text-xs);color:var(--muted);text-align:center}
/* ---------- Price in your currency calculator (pricing.js) ---------- */
.pc{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:var(--space-6);
  margin-top:28px;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:var(--space-6);
}
.pc-form{display:grid;gap:var(--space-4);align-content:start}
.pc .fld span{font-size:var(--text-xs);font-weight:700;color:var(--muted);display:block;margin-bottom:4px}
.pc .fld select{
  width:100%;
  font:inherit;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}
.pc-out{background:var(--grey-bg);border-radius:var(--radius);padding:var(--space-5)}
.pc-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-4);
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:var(--text-sm);
}
.pc-row:last-of-type{border-bottom:0}
.pc-row b{white-space:nowrap;font-size:17px}
.pc-row small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.pc-row.total{border-top:2px solid var(--navy);border-bottom:0;margin-top:4px}
.pc-row.total b{font-size:24px}
/* ---------- Footer links (start.html) ---------- */
.s-foot-link{color:inherit;opacity:.7;text-decoration:none}
.s-foot-link:hover{opacity:1;text-decoration:underline}