/* Lokstack site & presentation components. Uses tokens.css only. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #151A2B; font-family: var(--font-sans); color: var(--sp-ink-900); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Header (site chrome, not part of slides) ---------- */
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-2); padding: 12px 24px;
  background: rgba(11, 16, 32, .82); backdrop-filter: blur(14px); color: var(--sp-white); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-header .brand { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-black); font-size: 18px; letter-spacing: -0.02em; text-decoration: none; }
.site-header .brand img { width: 30px; height: 30px; }
.site-header .brand span span { color: var(--sp-brand-300); }
.site-header nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hbtn { font: var(--fw-semibold) 14px var(--font-sans); padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .16);
  background: transparent; color: var(--sp-white); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background var(--dur) var(--ease); }
.hbtn:hover { background: rgba(255, 255, 255, .08); }
.hbtn--primary { background: var(--sp-gradient); border-color: transparent; }
.hbtn--primary:hover { filter: brightness(1.08); background: var(--sp-gradient); }
.hbtn .ic { width: 16px; height: 16px; }

/* ---------- Deck & slides ---------- */
.deck { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); counter-reset: slide; }
.scaler { flex: none; }
.slide { counter-increment: slide; width: 1920px; height: 1080px; position: relative; overflow: hidden; flex: none; transform-origin: top left;
  display: flex; flex-direction: column; justify-content: center; padding: var(--space-7) var(--space-8) 140px;
  background: var(--sp-ink-50); color: var(--sp-ink-900); }
.slide--dark { background: var(--sp-ink-900); color: var(--sp-white); }
.slide--brand { background: var(--sp-gradient); color: var(--sp-white); }
.slide--dark::before { content: ""; position: absolute; inset: auto -300px -500px auto; width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 108, 73, .22), transparent); pointer-events: none; }
.slide > * { position: relative; }

/* Type */
.kicker { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--sp-brand-500); margin: 0 0 var(--space-3); }
.slide--dark .kicker { color: var(--sp-brand-300); }
.slide--brand .kicker { color: rgba(255, 255, 255, .78); }
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: var(--fw-black); margin: 0; }
.title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--tracking-heading); font-weight: var(--fw-black); margin: 0 0 var(--space-4); }
.title--xl { font-size: var(--fs-h1); }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; font-weight: var(--fw-bold); margin: 0 0 10px; }
.tagline { font-size: var(--fs-tagline, 52px); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--sp-white); margin: 18px 0 0; }
.h3--lg { font-size: calc(var(--fs-h3) * 1.25); }
.display--close { font-size: calc(var(--fs-display) * .86); }
.contact-line { margin: 44px auto 0; color: var(--sp-white) !important; font-weight: var(--fw-semibold); font-size: calc(var(--fs-lead) * .82); }
.lead { font-size: var(--fs-lead); line-height: 1.42; color: var(--sp-ink-500); margin: 0; max-width: 1320px; }
.slide--dark .lead, .slide--brand .lead { color: rgba(255, 255, 255, .8); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.muted { color: var(--sp-ink-500); }
.slide--dark .muted, .slide--brand .muted { color: rgba(255, 255, 255, .68); }
.mono { font-family: var(--font-mono); }
.accent { background: var(--sp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide--dark .accent { background: none; color: var(--sp-brand-300); }
strong { font-weight: var(--fw-bold); }

/* Layout */
.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 600px 1fr; gap: var(--space-6); align-items: center; }
.split--even { grid-template-columns: 1fr 1fr; }
.center { text-align: center; align-items: center; }

/* Icon */
.ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-tile { width: 68px; height: 68px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--sp-brand-100); color: var(--sp-brand-500); margin-bottom: var(--space-3); }
.icon-tile .ic { width: 32px; height: 32px; }
.slide--dark .icon-tile { background: rgba(111, 251, 190, .12); color: var(--sp-brand-300); }
.slide--brand .icon-tile { background: rgba(255, 255, 255, .16); color: var(--sp-white); }

/* Card */
.card { background: var(--sp-white); border: 1px solid var(--sp-ink-200); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.card p { font-size: 25px; line-height: 1.5; margin: 0; color: var(--sp-ink-500); }
.slide--dark .card { background: var(--sp-ink-800); border-color: var(--sp-ink-600); box-shadow: none; }
.slide--dark .card p { color: rgba(255, 255, 255, .7); }
.card--glass { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .2) !important; box-shadow: none; }
.card--glass p { color: rgba(255, 255, 255, .86) !important; }

/* Pill & badge */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  background: var(--sp-brand-100); color: var(--sp-brand-500); }
.slide--dark .pill, .slide--brand .pill { background: rgba(255, 255, 255, .12); color: var(--sp-white); }
.badge-pro { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--sp-gradient); color: var(--sp-white); font-size: 17px; font-weight: var(--fw-black); letter-spacing: .06em; vertical-align: middle; }

/* Buttons (inside slides) */
.btn { display: inline-flex; align-items: center; gap: 14px; font-weight: var(--fw-black); font-size: 30px; padding: 22px 38px; border-radius: var(--radius-md);
  text-decoration: none; box-shadow: var(--shadow-float); transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn .ic { width: 30px; height: 30px; stroke-width: 2.4; }
.btn--primary { background: var(--sp-gradient); color: var(--sp-white); }
.btn--light { background: var(--sp-white); color: var(--sp-ink-900); }
.btn--coffee { background: var(--sp-coffee); color: var(--sp-ink-900); box-shadow: none; }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: 18px; align-items: flex-start; font-size: var(--fs-body); line-height: 1.42; margin-bottom: 18px; }
.checks li .ic { width: 30px; height: 30px; margin-top: 3px; color: var(--sp-brand-500); stroke-width: 2.6; }
.slide--dark .checks li .ic, .slide--brand .checks li .ic { color: var(--sp-brand-300); }
.checks--sm li { font-size: 23px; margin-bottom: 12px; }
.checks--sm li .ic { width: 24px; height: 24px; }

/* Window frame around screenshots */
.window { filter: drop-shadow(0 30px 50px rgba(11, 16, 32, .22)); } /* the Mac window shot carries its own chrome, corners and transparency */
.window img { width: 100%; }

/* Terminal */
.term { background: #0D1117; color: #D1D9E6; font-family: var(--font-mono); font-size: 24px; line-height: 1.65; border-radius: var(--radius-lg); padding: 30px 36px; white-space: pre; border: 1px solid var(--sp-ink-600); }
.term .c { color: #6B7384; } .term .r { color: #F87171; } .term .y { color: #FBBF24; } .term .g { color: #34D399; }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.plan { background: var(--sp-white); border: 1px solid var(--sp-ink-200); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-card); }
.plan--pro { border: 2px solid transparent; background: linear-gradient(var(--sp-white), var(--sp-white)) padding-box, var(--sp-gradient) border-box; box-shadow: 0 24px 60px rgba(0, 108, 73, .18); }
.plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; }
.plan__name { font-size: 34px; font-weight: var(--fw-black); }
.plan__price { font-size: 64px; font-weight: var(--fw-black); letter-spacing: -0.03em; }
.plan__price small { font-size: 24px; font-weight: var(--fw-semibold); color: var(--sp-ink-500); letter-spacing: 0; }
.plan__note { font-size: 22px; color: var(--sp-ink-500); margin: 0 0 26px; }

/* Comparison table */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 24px; background: var(--sp-white); border: 1px solid var(--sp-ink-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.cmp th, .cmp td { padding: 17px 22px; border-bottom: 1px solid var(--sp-ink-200); text-align: center; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp th { background: var(--sp-ink-100); font-size: 20px; color: var(--sp-ink-500); font-weight: var(--fw-semibold); }
.cmp th.us { background: var(--sp-gradient); color: var(--sp-white); }
.cmp td.us { background: var(--sp-brand-50); font-weight: var(--fw-bold); }
.yes { color: var(--sp-green); } .no { color: #B8BECC; } .part { color: var(--sp-amber); }

/* Architecture */
.layer { border-radius: var(--radius-lg); padding: 26px 30px; }
.layer + .layer { margin-top: 20px; }
.layer__t { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module { background: var(--sp-white); border: 1px solid var(--sp-ink-200); border-radius: var(--radius-md); padding: 18px 22px; }
.module b { display: block; font-size: 23px; margin-bottom: 4px; }
.module span { font-size: 19px; color: var(--sp-ink-500); }

/* Roadmap */
.phase h3 { display: flex; align-items: center; gap: 14px; }
.phase ul { margin: 12px 0 0; padding-left: 26px; }
.phase li { font-size: 23px; color: var(--sp-ink-500); margin-bottom: 8px; }

/* Footer inside slides */
.foot { position: absolute; left: var(--space-8); right: var(--space-8); bottom: 44px; display: flex; align-items: center; gap: 14px; font-size: 20px; color: var(--sp-ink-500); }
.slide--dark .foot, .slide--brand .foot { color: rgba(255, 255, 255, .6); }
.foot img { width: 28px; height: 28px; }
.foot .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.foot .num::after { content: counter(slide, decimal-leading-zero); }

/* ---------- Present mode ---------- */
body.present { overflow: hidden; background: #000; }
body.present .site-header { display: none; }
body.present .deck { padding: 0; gap: 0; }
body.present .scaler { display: none; }
body.present .scaler.on { display: block; }
.present-hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .5); font: 13px var(--font-sans); display: none; }
body.present .present-hint { display: block; }

/* ---------- Flow mode (phones & narrow windows): slides become normal responsive sections ---------- */
body.flow { background: var(--sp-ink-50); }
body.flow .deck { padding: 0; gap: 0; display: block; }
body.flow .scaler { width: auto !important; height: auto !important; }
body.flow .slide { width: 100%; height: auto; min-height: 0; transform: none !important; padding: 64px 22px 84px; justify-content: flex-start;
  --fs-display: 54px; --fs-tagline: 26px; --fs-h1: 40px; --fs-h2: 34px; --fs-h3: 22px; --fs-lead: 19px; --fs-body: 17px; --fs-small: 14px; --fs-micro: 13px; }
body.flow .grid--2, body.flow .grid--3, body.flow .grid--4, body.flow .split, body.flow .split--even, body.flow .plans, body.flow .modules { grid-template-columns: 1fr; gap: var(--space-3); }
body.flow .card, body.flow .plan { padding: 22px; border-radius: var(--radius-md); }
body.flow .card p, body.flow .phase li, body.flow .checks--sm li { font-size: 16px; }
body.flow .checks li { font-size: 17px; gap: 12px; margin-bottom: 10px; }
body.flow .checks li .ic { width: 20px; height: 20px; }
body.flow .icon-tile { width: 48px; height: 48px; margin-bottom: 14px; }
body.flow .icon-tile .ic { width: 24px; height: 24px; }
body.flow .term { font-size: 12px; padding: 16px; overflow-x: auto; }
body.flow .btn { font-size: 18px; padding: 14px 22px; }
body.flow .btn .ic { width: 20px; height: 20px; }
body.flow .plan__price { font-size: 40px; }
body.flow .plan__name { font-size: 24px; }
body.flow .plan__note, body.flow .module span { font-size: 14px; }
body.flow .module b { font-size: 16px; }
body.flow .layer__t { font-size: 13px; }
body.flow .cmp { font-size: 13px; display: block; overflow-x: auto; }
body.flow .cmp th, body.flow .cmp td { padding: 10px 8px; }
body.flow .foot { position: static; margin-top: 28px; font-size: 13px; }
body.flow .foot img { width: 20px; height: 20px; }
body.flow .hero-logo { width: 96px !important; height: 96px !important; }
body.flow .hide-flow { display: none !important; }
body.flow .slide--dark::before { display: none; }

/* ---------- Print / PDF: one slide per page ---------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { background: none; }
  .site-header, .present-hint { display: none !important; }
  .deck { padding: 0; gap: 0; display: block; }
  .scaler { width: auto !important; height: auto !important; margin: 0 !important; }
  .slide { transform: none !important; break-after: page; }
}
body.flow .plan__price small { display: block; font-size: 14px; margin-top: 4px; }
body.flow .site-header { padding: 10px 14px; }
body.flow .site-header .brand > span { display: none; }