/* ==========================================================================
   SafeGrd Landing surface — "/"

   Tokens and shared primitives live in system.css, which this page loads
   first. This file holds ONLY the landing page's own sections: hero, the
   readout panel, the pipeline steps, guarantees, the alarm band, pricing.

   Read css/STYLE.md before adding to this file. If a rule here would be
   useful in the console too, move it to system.css rather than copying it.
   ========================================================================== */

body {
  /* Graph paper, not a brochure background. */
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 22px 22px;
  overflow-x: hidden;
}

/* --- Landing display type ---------------------------------------------------- */

h2.display {
  font-size: clamp(25px, 3.3vw, 39px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-transform: uppercase;
  max-width: 22ch;
}

h2.display em { font-style: normal; color: var(--signal); }

.lede {
  font-size: clamp(15px, 1.35vw, 16.5px);
  color: var(--ink-2);
  max-width: 62ch;
}

/* --- Section header ------------------------------------------------------- */

.sec-head {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Crosshair at the section origin. */
.sec-head::before,
.sec-head::after { content: ""; position: absolute; background: var(--signal); }
.sec-head::before { top: -1px; left: -5px; width: 11px; height: 1px; }
.sec-head::after  { top: -6px; left: -1px; width: 1px; height: 11px; }

@media (max-width: 760px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* A registration target, not a logo. */
.wordmark .mark {
  position: relative;
  width: 11px; height: 11px;
  border: 1px solid var(--signal);
  flex: none;
}

.wordmark .mark::before,
.wordmark .mark::after { content: ""; position: absolute; background: var(--signal); }
.wordmark .mark::before { left: 50%; top: -3px; bottom: -3px; width: 1px; transform: translateX(-50%); }
.wordmark .mark::after  { top: 50%; left: -3px; right: -3px; height: 1px; transform: translateY(-50%); }

@media (max-width: 880px) { .nav-hide { display: none; } }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(40px, 5.5vw, 74px) clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

@media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.hero > * { min-width: 0; }

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.hero-eyebrow .dot { width: 7px; height: 7px; background: var(--status); flex: none; }

h1 {
  font-size: clamp(29px, 4.5vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.042em;
  text-transform: uppercase;
  margin-bottom: 24px;
  max-width: 23ch;
  text-wrap: balance;
}

h1 em {
  display: block;
  font-style: normal;
  color: var(--signal);
  margin-top: .18em;
}

.hero-lede {
  font-size: clamp(15px, 1.4vw, 16.5px);
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: 28px;
}

.hero-lede strong { color: var(--ink); font-weight: 600; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.install {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
  color: var(--ink-2);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.install .prompt { flex: none; color: var(--signal); user-select: none; }
.install code { flex: 1 1 auto; min-width: 0; white-space: nowrap; color: var(--ink); }

.copy-btn {
  flex: none;
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.copy-btn:hover { color: var(--signal); border-color: var(--signal); }

.hero-foot {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-foot span { display: inline-flex; align-items: center; gap: 7px; }
.hero-foot span::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--line); flex: none; }

/* --- Readout panel (hero centrepiece) ------------------------------------- */

.cert-stage { position: relative; }
.cert { position: relative; }

.cert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cert-top strong { color: var(--ink); font-weight: 700; letter-spacing: .22em; }

.cert-body { padding: 8px 16px 4px; }

.cert-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-data);
}

.cert-row:last-child { border-bottom: 0; }
.cert-row dt { color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-label); padding-top: 1px; }
.cert-row dd { color: var(--ink); word-break: break-word; }
.cert-row dd .muted { color: var(--ink-3); }

/* Dimension bars: the payload, measured. */
.cert-dims { padding: 14px 16px 12px; border-top: 1px solid var(--line); }
.cert-dims .dim-row { margin-bottom: 11px; }
.cert-dims .dim-row:last-child { margin-bottom: 0; }
.cert-dims .dim-row.narrow .dim { width: 44%; }

.cert-seal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.cert-seal-text { font-family: var(--mono); font-size: var(--fs-label); line-height: 1.75; color: var(--ink-3); }
.cert-seal-text b { display: block; color: var(--ink); font-size: var(--fs-ui); letter-spacing: .12em; text-transform: uppercase; }

/* --- Bands ---------------------------------------------------------------- */

.band { padding-block: clamp(42px, 5vw, 68px); }

.steps {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step {
  position: relative;
  padding: 26px 22px 26px 0;
  border-right: 1px solid var(--line);
}

/* Tick mark hanging off the top rule, one per step. */
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 1px; height: 9px;
  background: var(--signal);
}

.step:last-child { border-right: 0; }

@media (max-width: 900px) {
  .step:nth-child(2n) { border-right: 0; }
  .step { padding-right: 22px; }
}
@media (max-width: 520px) {
  .step { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .step:last-child { border-bottom: 0; }
}

.step h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 10px 0 8px;
}

.step p { font-size: 14px; color: var(--ink-2); }

.step .spec {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.note {
  margin-top: 30px;
  padding: 18px 20px;
  border: 1px solid var(--signal);
  background: var(--signal-2);
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 82ch;
}

.note b { color: var(--ink); font-weight: 700; }
.note em { font-style: normal; color: var(--signal); font-weight: 600; }

/* --- Guarantees ----------------------------------------------------------- */

.guarantees { margin-top: 34px; border-top: 1px solid var(--line); }

.g-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr) 156px;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 900px) {
  .g-row { grid-template-columns: 40px 1fr; gap: 6px 16px; }
  .g-row .g-desc { grid-column: 2; }
  .g-row .g-spec { grid-column: 2; text-align: left; margin-top: 6px; }
}

.g-row h3 {
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 800;
  letter-spacing: -.018em;
  text-transform: uppercase;
}

.g-desc { font-size: 14.5px; color: var(--ink-2); }

.g-spec {
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* --- Inverted alarm band --------------------------------------------------- */

.invert { background: var(--band-bg); color: var(--band-fg); }

.invert .tag { color: color-mix(in srgb, var(--band-fg) 50%, transparent); }
.invert .sec-no { color: var(--alarm); }
.invert h2.display { color: var(--band-fg); }
.invert h2.display em { color: var(--alarm); }
.invert .sec-head { border-top-color: var(--band-line); }
.invert .sec-head::before, .invert .sec-head::after { background: var(--alarm); }
.invert .lede { color: color-mix(in srgb, var(--band-fg) 70%, transparent); }

.invert-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4.5vw, 56px);
  align-items: start;
}

@media (max-width: 860px) { .invert-grid { grid-template-columns: minmax(0, 1fr); } }
.invert-grid > * { min-width: 0; }

.freeze {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--alarm) 50%, transparent);
  background: color-mix(in srgb, var(--alarm) 8%, transparent);
  padding: 18px 20px;
  font-size: var(--fs-data);
  line-height: 1.8;
}

.freeze::before, .freeze::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border: 2px solid var(--alarm);
}

.freeze::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.freeze::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.freeze .hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--alarm) 38%, transparent);
  color: var(--alarm);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.freeze .hdr .pulse {
  width: 8px; height: 8px;
  background: var(--alarm);
  flex: none;
  animation: pulse 1.8s steps(1, end) infinite;
}

@keyframes pulse { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .freeze .hdr .pulse { animation: none; } }

.freeze dl { display: grid; grid-template-columns: 138px 1fr; gap: 3px 12px; }
.freeze dt { color: color-mix(in srgb, var(--band-fg) 55%, transparent); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: .1em; }
.freeze dd { color: var(--band-fg); }
.freeze .frozen { color: var(--alarm); font-weight: 700; }

.checks { list-style: none; display: grid; }

.checks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--band-line);
  font-size: 14.5px;
  color: color-mix(in srgb, var(--band-fg) 74%, transparent);
}

.checks li:first-child { border-top: 1px solid var(--band-line); }
.checks li b { color: var(--band-fg); font-weight: 700; }

.checks li::before {
  content: "";
  width: 11px; height: 11px;
  margin-top: 6px;
  border: 1px solid var(--alarm);
  border-left-width: 3px;
}

/* --- Pricing --------------------------------------------------------------- */

.plans {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (max-width: 880px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  padding: 24px 22px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.plan-featured { background: var(--panel); position: relative; }

.plan-featured::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--signal);
}

.plan-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.plan-name .flag { color: var(--signal); font-size: var(--fs-micro); letter-spacing: .12em; }

.plan-price {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 18px 0 4px;
}

.plan-price sub {
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: baseline;
  margin-left: 6px;
}

.plan-for { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; }

.plan ul {
  list-style: none;
  display: grid;
  gap: 10px;
  padding-top: 18px;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}

.plan li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.plan li::before { content: ""; width: 7px; height: 7px; margin-top: 7px; border: 1px solid var(--signal); }
.plan li b { color: var(--ink); font-weight: 700; }

.plan .btn { margin-top: auto; width: 100%; }

.plan-foot {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* --- Closer ---------------------------------------------------------------- */

.closer {
  padding-block: clamp(52px, 7vw, 92px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.closer h2 {
  font-size: clamp(25px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-transform: uppercase;
  max-width: 21ch;
  margin: 16px auto 18px;
}

.closer h2 em { font-style: normal; color: var(--signal); }
.closer .lede { margin: 0 auto 26px; text-align: center; }
.closer .hero-actions { justify-content: center; }

/* --- Footer ---------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  padding-block: 36px 32px;
}

.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

.foot-grid h4 {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 13px;
}

.foot-grid ul { list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.foot-grid a { color: var(--ink-2); }
.foot-grid a:hover { color: var(--signal); }

.foot-note {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--ink-3);
}

.badge-embed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.badge-embed .led { width: 6px; height: 6px; background: var(--status); flex: none; }

/* --- Motion ---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* The nav is sticky, so anchor jumps must clear it. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* ===================================================== Surfaces (§01) ==
   The three capture surfaces and the schematic that converges them on one
   vault. Colour is tokens only; motion is opt-out per STYLE.md §7 rule 9. */

.surface-map {
  margin-top: 34px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(14px, 2.4vw, 26px);
}
.surface-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.sm-box rect {
  fill: var(--ground);
  stroke: var(--line);
  stroke-width: 1;
}
.sm-crypt rect { stroke: var(--signal); fill: var(--signal-2); }
.sm-vault rect { stroke: var(--status); fill: var(--status-2); }

.sm-t {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  fill: var(--ink);
}
.sm-s {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  fill: var(--ink-3);
}
.sm-on { fill: var(--status); }

.sm-w {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.sm-flow {
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-dasharray: 6 210;
  animation: sm-travel 3.4s linear infinite;
}
.sm-d2 { animation-delay: .6s; }
.sm-d3 { animation-delay: 1.2s; }

@keyframes sm-travel {
  from { stroke-dashoffset: 216; }
  to   { stroke-dashoffset: 0; }
}

.surfaces {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.surface {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 20px 20px;
  background: var(--panel);
}
.surface-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.surface h3 { font-size: 17px; letter-spacing: -0.01em; }
.surface p {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.s-state {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 3px 7px;
  white-space: nowrap;
}
.s-state.s-on {
  color: var(--status);
  border-color: var(--status);
  background: var(--status-2);
}

@media (max-width: 860px) {
  .surfaces { grid-template-columns: 1fr; }
}

/* Below this the schematic's labels fall under the 11px floor. The three
   .surface cards state the same thing in prose, so drop it rather than
   shipping type nobody can read. */
@media (max-width: 720px) {
  .surface-map { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-flow { animation: none; stroke-dasharray: none; opacity: .5; }
}