/* Public pages: the same warm tokens as the app, with more air, fluid type and liquid surfaces. */
body.public {
  background:
    radial-gradient(900px 520px at 8% -10%, var(--wash-1), transparent 70%),
    radial-gradient(760px 460px at 98% 2%, var(--wash-2), transparent 66%),
    radial-gradient(1100px 700px at 55% 112%, var(--wash-3), transparent 74%),
    var(--ground);
  background-attachment: fixed;
}
.public-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--rule);
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  position: sticky; top: 0; z-index: 10;
}
.public-nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); flex-wrap: wrap; }
.public-nav a { color: var(--ink-2); text-decoration: none; font-weight: 560; font-size: 0.92rem; }
.public-nav a:hover { color: var(--ink); }
.public-nav a[aria-current="page"] { color: var(--accent); }
.public-nav a.btn { color: var(--gold-ink); }

main#main { max-width: 1140px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px) 48px; display: grid; gap: clamp(22px, 2.6vw, 40px); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 3vw, 44px);
  align-items: center; padding: clamp(32px, 5vw, 64px) 0 clamp(6px, 1vw, 14px); }
.hero-text { display: grid; gap: 15px; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.028em; }
.hero h1 { background: linear-gradient(120deg, var(--ink) 30%, var(--accent) 120%); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.lede { font-size: clamp(1rem, 0.96rem + 0.3vw, 1.13rem); color: var(--ink-2); max-width: 62ch; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 6px; }
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 0; }
.proof div { padding-left: 13px; border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--gold-2), var(--accent-3)) 1; }
.proof dt { font-size: 0.78rem; color: var(--ink-3); }
.proof dd { margin: 3px 0 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 680; letter-spacing: -0.02em; }
.hero-mock { display: grid; gap: 9px; justify-items: center; }
.hero-mock .mock { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.caption { font-size: 0.78rem; color: var(--ink-3); }

.band { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 34px); display: grid; gap: 17px; box-shadow: var(--shadow-1); }
.band h2 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
.section-lede { color: var(--ink-2); max-width: 80ch; }
.band-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center;
  background: linear-gradient(125deg, var(--accent-soft), var(--gold-soft) 130%); border-color: transparent; }
.page-intro { padding: clamp(28px, 4vw, 52px) 0 0; display: grid; gap: 13px; }
.page-intro h1 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.6rem); }

.cover-grid, .control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.cover { border: 1px solid var(--rule); border-radius: var(--radius); padding: 17px; background: var(--surface);
  display: grid; gap: 7px; align-content: start; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.cover:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cover h3 { font-size: 0.99rem; }
.cover p { font-size: 0.9rem; color: var(--ink-2); }
.fix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.fix { padding: 2px 0 2px 15px; display: grid; gap: 7px; border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--gold-2), var(--coral)) 1; }
.fix h3 { font-size: 0.99rem; }
.fix p { font-size: 0.9rem; color: var(--ink-2); }
.control { color: var(--ink-2); font-size: 0.88rem; }
.label-inline { font-size: 0.7rem; font-weight: 720; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent-2); margin-right: 7px; }

.fix-list { list-style: none; counter-reset: fix; margin: 0; padding: 0; display: grid; gap: 15px; }
.fix-list li { counter-increment: fix; background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 24px 22px 66px; position: relative;
  display: grid; gap: 9px; box-shadow: var(--shadow-1); }
.fix-list li::before { content: counter(fix); position: absolute; left: 22px; top: 22px; width: 28px; height: 28px;
  border-radius: 50%; background: linear-gradient(170deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
  font-weight: 720; font-size: 0.82rem; display: grid; place-items: center; }
.fix-list h2 { font-size: 1.06rem; }
.fix-list p { color: var(--ink-2); }

.step-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(20px, 2.5vw, 34px);
  align-items: center; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(20px, 2.2vw, 30px); box-shadow: var(--shadow-1); }
.step-band:nth-child(even) .step-mock { order: -1; }
.step-text { display: grid; gap: 11px; }
.step-number { font-size: 0.74rem; font-weight: 720; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); }
.step-text h2 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.28rem); }
.step-text p { color: var(--ink-2); }

.diagram, .mock { width: 100%; height: auto; max-width: 100%; }
.dg-box { fill: var(--surface-2); stroke: var(--rule-2); stroke-width: 1; }
.dg-box-gate { fill: var(--gold-soft); stroke: var(--gold); }
.dg-title { fill: var(--ink); font: 600 14px var(--font); }
.dg-note { fill: var(--ink-2); font: 400 11.5px var(--font); }
.dg-mono { fill: var(--ink-2); font: 400 11px var(--mono); }
.dg-gate { fill: var(--gold); font: 700 10px var(--font); letter-spacing: 0.08em; }
.dg-line { stroke: var(--rule-2); stroke-width: 1.4; fill: none; }
.dg-dashed { stroke-dasharray: 4 4; }
.dg-arrow { fill: var(--accent-3); }

.mock { border-radius: var(--radius); }
.mk-bg { fill: var(--surface); stroke: var(--rule); }
.mk-side { fill: var(--surface-3); stroke: none; }
.mk-navline, .mk-line { fill: var(--rule-2); }
.mk-title { fill: var(--ink-3); }
.mk-card { fill: var(--surface-2); stroke: var(--rule); }
.mk-card-key { fill: var(--gold-soft); stroke: var(--gold); }
.mk-figure { fill: var(--accent); opacity: 0.55; }
.mk-row { fill: var(--surface-2); stroke: var(--rule); }
.mk-pill { fill: var(--surface-3); stroke: var(--rule); }
.mk-pill-on { fill: var(--accent); stroke: var(--accent); }
.mk-badge { fill: var(--rule-2); }
.mk-badge-block { fill: var(--crit); }
.mk-badge-warn { fill: var(--warn); }
.mk-badge-info { fill: var(--indigo); }
.mk-gold { fill: var(--gold); }
.mk-quiet { fill: var(--surface-2); stroke: var(--rule-2); }
.mk-mono { fill: var(--rule-2); }
.mk-check { fill: var(--surface-2); stroke: var(--accent); }

.public-foot { max-width: 1140px; margin: 0 auto; padding: 26px clamp(16px, 3vw, 40px) 48px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; color: var(--ink-2); font-size: 0.9rem; }
.public-foot nav { display: flex; gap: 17px; flex-wrap: wrap; }
.public-foot a { color: var(--ink-2); }

@media (max-width: 900px) {
  .hero, .step-band, .band-cta { grid-template-columns: minmax(0, 1fr); }
  .step-band:nth-child(even) .step-mock { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .cover:hover { transform: none; } }