/* Marketing pages: landing, security, status, legal */

.display { font-size: clamp(2.4rem, 8vw + 0.1rem, 5.4rem); }

/* ---------- hero ---------- */
.hero { display: grid; gap: 48px; padding-block: clamp(36px, 7vw, 88px) clamp(24px, 4vw, 48px); align-items: center; }
.hero-copy { display: grid; gap: 22px; align-content: start; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-note { font-size: 0.92rem; }
@media (min-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 56px; }
}

.hero-visual { position: relative; margin: 0; padding-top: 56px; }
.hero-mark { position: absolute; z-index: 0; top: 0; right: 2%; width: clamp(150px, 34vw, 230px); aspect-ratio: 1; filter: drop-shadow(0 20px 50px var(--glow-a)); }
.hero-mark-svg { width: 100%; height: 100%; overflow: visible; animation: float 7s ease-in-out infinite; }
.hm-a { stop-color: var(--accent-text); }
.hm-b { stop-color: var(--accent-2); }
.hm-off { fill: var(--text); opacity: 0.12; }
.hm-ping { transform-box: fill-box; transform-origin: center; animation: ping 3.2s var(--ease) infinite; opacity: 0; }
.hm-ping-2 { animation-delay: 1.6s; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-8px) rotate(-1.2deg); } }

.console { position: relative; z-index: 1; padding: 0; overflow: hidden; box-shadow: var(--highlight), var(--shadow-2); }
.console-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.8rem; min-width: 0; }
.console-bar .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-dots { display: inline-flex; gap: 6px; flex: none; }
.console-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.calls { display: grid; }
.call { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.call code { background: none; border: 0; padding: 0; font-size: 0.95rem; color: var(--text); overflow-wrap: anywhere; }
.call-out { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; padding-left: 2px; }
.call-out.ok { color: var(--read); }
.call-out.warn { color: var(--write); }
.call-out.bad { color: var(--danger); }
.call-blocked { background: linear-gradient(90deg, var(--danger-bg), transparent 70%); }
@media (min-width: 520px) {
  .call { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .call-out { grid-column: auto; justify-self: end; text-align: right; }
}
.approval-peek { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; }
.approval-title { font-weight: 650; }
.approval-peek .faint { font-size: 0.88rem; }

.works { padding-block: 24px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.works-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }
.works-list { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 650; font-size: 1.05rem; color: var(--text-2); letter-spacing: -0.01em; }

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 9vw, 120px) 0; }
.section-head { display: grid; gap: 14px; max-width: 780px; margin-bottom: clamp(28px, 5vw, 52px); }

/* steps */
.steps { display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.step { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px 22px 26px; }
.step-n { position: absolute; top: 18px; right: 20px; font-size: 0.8rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); }
.step-vis { height: 124px; margin-bottom: 8px; border-radius: 18px; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; padding: 14px; overflow: hidden; align-content: center; gap: 8px; }
.keypad { display: grid; grid-template-columns: repeat(3, 14px); gap: 12px; }
.keypad i { width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); }
.keypad i.on { background: var(--accent-text); }
.keypad i.lit { background: var(--accent-2); box-shadow: 0 0 0 4px var(--surface-solid), 0 0 0 5.5px var(--accent-2); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--surface-solid), 0 0 0 9px transparent; } }
.url-pill { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 12px 10px 16px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--line-strong); font-size: 0.78rem; box-shadow: var(--shadow-1); }
.url-pill .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.url-copy { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.bubble { justify-self: end; max-width: 92%; padding: 8px 14px; border-radius: 18px 18px 4px 18px; background: var(--accent); color: var(--accent-ink); font-size: 0.82rem; line-height: 1.35; font-weight: 550; }
.bubble-reply { justify-self: start; border-radius: 18px 18px 18px 4px; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); }

/* tier cards */
.tier-cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .tier-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tier-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; overflow: hidden; }
.tier-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tc); }
.tc-read { --tc: var(--read); --tcbg: var(--read-bg); }
.tc-write { --tc: var(--write); --tcbg: var(--write-bg); }
.tc-danger { --tc: var(--danger); --tcbg: var(--danger-bg); }
.tier-card header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tier-card header .tier { margin-left: auto; }
.tc-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--tcbg); color: var(--tc); flex: none; }
.eg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.eg code { font-size: 0.8rem; }
.gate { display: grid; gap: 8px; padding-top: 6px; }
.gate-bar { position: relative; display: block; height: 10px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; }
.gate-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--tc); }
.gate-bar.open::after { width: 100%; }
.gate-bar.half::after { width: 56%; }
.gate-bar.shut::after { width: 100%; background: repeating-linear-gradient(135deg, var(--tc) 0 5px, transparent 5px 10px); opacity: 0.55; }
.gate-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); font-family: var(--mono); }

/* arm */
.arm-layout { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .arm-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 72px; } }
.arm-copy { display: grid; gap: 18px; }
.ticks { display: grid; gap: 14px; margin-top: 8px; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--text-2); }
.ticks .icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--read-bg); color: var(--read); }
.ticks strong { color: var(--text); }

.arm-demo { display: grid; justify-items: center; gap: 22px; padding: clamp(22px, 4vw, 36px); }
.arm-demo .eyebrow { justify-self: start; }
.demo-speed { text-transform: none; letter-spacing: 0; font-weight: 500; }
.arm-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.demo-foot { font-size: 0.85rem; text-align: center; }

.more { margin-top: 28px; }
.fine { margin-top: 18px; font-size: 0.82rem; max-width: 680px; }

/* security grid */
.sec-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.sec { padding: 24px; display: grid; gap: 10px; align-content: start; }
.sec > .icon-lg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 6px; }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 4px; cursor: pointer; font-weight: 600; font-size: 1.08rem; list-style: none; border-radius: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.5s var(--spring); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq-a { padding: 0 4px 22px; color: var(--text-2); max-width: 640px; animation: faq-in 0.5s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* cta */
.cta-wrap { padding-top: clamp(56px, 9vw, 120px); }
.cta { display: grid; justify-items: center; gap: 16px; text-align: center; padding: clamp(36px, 7vw, 80px) var(--gutter); border-radius: var(--r-xl); background-image: radial-gradient(60% 120% at 50% 0%, var(--accent-soft), transparent 70%); }
.cta .lede { max-width: 520px; }
.cta .hero-cta { justify-content: center; }

/* ---------- secondary pages ---------- */
.info-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .info-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info-card { padding: 24px; display: grid; gap: 10px; align-content: start; }
.info-card h3 { font-size: 1.15rem; }
.sub-section { margin-top: clamp(40px, 7vw, 80px); }
.sub-section > h2 { margin-bottom: 18px; }

.flow { display: grid; gap: 10px; }
.flow-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--sunken); border: 1px solid var(--line); }
.flow-row b { font-weight: 650; }
.flow-arrow { justify-self: center; color: var(--text-3); }

.data-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { font-weight: 650; background: var(--sunken); }
.data-table tr:last-child td { border-bottom: 0; }

/* status */
.status-banner { display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.status-banner .big-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); flex: none; }
.status-banner.ok .big-dot { background: var(--ok); box-shadow: 0 0 0 6px var(--read-bg); }
.status-banner.bad .big-dot { background: var(--danger); box-shadow: 0 0 0 6px var(--danger-bg); }
.status-list { display: grid; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-row .nm { font-weight: 600; }
.status-row .ds { font-size: 0.88rem; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .hero-mark-svg, .hm-ping, .keypad i.lit, .ring-wrap.armed .ring-state::before { animation: none; }
  .hm-ping { opacity: 0; }
  .ring-prog { transition: none; }
}

.nav-signin { display: none; }
@media (min-width: 560px) { .nav-signin { display: inline-flex; } }

/* ---------- landing motion integration (see css/fx.css and js/fx/) ---------- */
.hero { position: relative; }
.hero-copy { container-type: inline-size; min-width: 0; }
.hero-title { font-size: clamp(2.1rem, 10.6cqi, 4.7rem); line-height: 1.16; letter-spacing: -0.04em; }
.ht-line { display: block; white-space: nowrap; }
.hero-safe { font-size: clamp(1.1rem, 1.6vw + 0.8rem, 1.5rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }

/* how it works: pinned intro on the left, steps scroll past with a tracing beam */
.how-layout { display: grid; gap: 32px; }
.how-layout .section-head { margin-bottom: 0; }
.how-layout .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 38px; --fx-beam-x: 9px; }
@media (min-width: 960px) {
  .how-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
  .how-head { position: sticky; top: 112px; }
}

/* safety tiers */
.tc-slot { display: flex; min-width: 0; }
.tc-slot > .tier-card { flex: 1; min-width: 0; }
.tc-read { --tc-glow: color-mix(in srgb, var(--read) 42%, #5b8cff); }
.tc-write { --tc-glow: var(--write); }
.tc-danger { --tc-glow: var(--danger); }

/* terminal block in the arming section */
.term-wrap { display: grid; gap: 14px; max-width: 820px; margin: clamp(40px, 6vw, 72px) auto 0; }
.term-wrap .eyebrow { justify-self: start; }

/* smooth FAQ accordion (progressive: browsers without ::details-content keep the fade) */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
    .faq-a { animation: none; }
  }
}
.status-banner + .status-list, #status-root > * + * { margin-top: 14px; }
.status-actions { margin-top: 18px; }

/* ---------- design v2 overrides (docs/DESIGN-DIRECTION.md): no gradients, no glow, no glass, hairlines ---------- */
.cta { background-image: none; border: 1px solid var(--line); }
.hero-mark { filter: none; }
.call-blocked { background: var(--danger-bg); }

/* =====================================================================================================
   Dot field (Ryan 10/12, after the blueprint frame was too busy): ONE texture, a faint dot pattern, and only where
   a page starts or a section begins. It is strongest at the top of the hero and behind section headlines and fades
   to nothing through a soft radial mask, so long pages stay clean. No rails, no line grid, no section hairlines.
   Every layer is a pseudo element: never focusable or selectable, pointer-events none, under the content.
   body.bp is added by tools/build-pages.mjs to marketing and content pages (not auth pages, not the app).
   ===================================================================================================== */
:root { --dot: rgba(10, 10, 10, 0.19); --dot-gap: 22px; }
:root[data-theme="dark"] { --dot: rgba(255, 255, 255, 0.13); }
.bp { --dots: radial-gradient(circle at center, var(--dot) 0.85px, transparent 1.25px); }

/* the hero: a wide field under the header that fades out well before the next section */
body.bp { position: relative; isolation: isolate; }
body.bp::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(980px, 110vh);
  pointer-events: none; user-select: none;
  background-image: var(--dots); background-size: var(--dot-gap) var(--dot-gap); background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 22%, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 22%, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 78%);
}
/* section headlines: a small patch of the same dots behind the two-tone headline, fading in every direction */
.bp :is(.lp-head, .pg-head) { position: relative; isolation: isolate; }
.bp :is(.lp-head, .pg-head)::before {
  content: ""; position: absolute; z-index: -1; inset: -64px -48px -40px -64px; pointer-events: none; user-select: none;
  background-image: var(--dots); background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 22% 50%, rgba(0, 0, 0, 0.75) 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 70% at 22% 50%, rgba(0, 0, 0, 0.75) 0%, transparent 72%);
}
.bp .lp-head-center::before { -webkit-mask-image: radial-gradient(ellipse 46% 70% at 50% 50%, rgba(0, 0, 0, 0.75) 0%, transparent 72%); mask-image: radial-gradient(ellipse 46% 70% at 50% 50%, rgba(0, 0, 0, 0.75) 0%, transparent 72%); }
/* the old line grid is retired on these pages */
.bp .grid-bg::before { display: none; }
@media (max-width: 719px) {
  :root { --dot-gap: 20px; }
  .bp :is(.lp-head, .pg-head)::before { inset: -40px calc(-1 * var(--gutter)) -28px; }
}
/* cells and boxes sit on clean paper */
.bp :is(.lp-cell, .pg-card, .pg-tier, .lp-slot-li, .lp-press-grid li) { background-color: var(--bg); }
.bp .lp-cell:hover, .bp .pg-card:hover { background-color: var(--bg-2); }
@media (forced-colors: active) { body.bp::before, .bp :is(.lp-head, .pg-head)::before { display: none; } }