/* Beckon Access landing page — "violet keyhole at night"
   Violet palette lifted from the old beckonaccess.com brand gradient
   (linear-gradient(to left, #7b4397, #291f45)); layout mirrors the
   beckonbilling-homepage this project is derived from. */

:root {
  --bg: #0a0813;
  --bg-elev: #120e22;
  --surface: #191330;
  --surface-2: #241b3d;
  --line: rgba(160, 98, 206, 0.14);
  --line-strong: rgba(160, 98, 206, 0.32);
  /* Accent violets. --violet and --violet-bright also colour real body text
     (.legal-block a, .risk-line, .hw-price), so both are pinned above the
     4.5:1 AA floor against --bg. Only the display gradients go darker. */
  --violet: #a062ce;
  --violet-bright: #be87e5;
  --violet-deep: #241241;
  /* Display-gradient stops (clip:text headlines, figures, wordmark). Large
     text, so a 3:1 floor applies to the top stop; the bottom stop may dip
     lower (currently 2.49:1). Never let the bottom reach --violet-deep
     (#241241 = 1.24:1 on --bg) or the feet of the glyphs vanish. */
  --violet-grad-top: #a98cf0;
  --violet-grad-mid: #8a5cc8;
  --violet-text-end: #6d3b88;
  /* Indigo sweep: the display gradients and the primary fills travel from
     indigo (258deg) into violet. Deliberately cooler than --orchid, which
     still owns focus rings, hairlines and glows. */
  --indigo: #46299b;
  --orchid: #c65bd6;
  --orchid-deep: #a13ab8;
  --orchid-glow: rgba(198, 91, 214, 0.28);
  --ink: #eae4f2;
  --muted: #9a8fae;
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--orchid);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------- shared type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--orchid));
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  max-width: 24ch;
  text-wrap: balance;
}

section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* gradient hairline — the product's top-bar signature, used as the page's thread */
.problem,
.solution,
.breadth,
.how,
.trace,
.faq {
  position: relative;
}

.problem::before,
.solution::before,
.breadth::before,
.how::before,
.trace::before,
.faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 3rem));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 98, 206, 0.4), rgba(198, 91, 214, 0.3), transparent);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.85rem 1.6rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  color: #fdfbff;
  background: linear-gradient(160deg, var(--indigo), var(--violet-deep));
  box-shadow:
    inset 0 1px 0 rgba(160, 130, 255, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(70, 41, 155, 0.42);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(160, 130, 255, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 16px 40px rgba(70, 41, 155, 0.55);
}

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--violet);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 1rem 2.1rem;
  font-size: 1.02rem;
}

.btn-sm {
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

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

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 8, 19, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-head::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 98, 206, 0.5), rgba(198, 91, 214, 0.4), transparent);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.8rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  filter: drop-shadow(0 0 14px rgba(160, 98, 206, 0.26));
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--violet-grad-top), var(--violet-grad-mid) 52%, var(--violet-text-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
}

/* The nav row: the collapsing content links, then the region + language square
   toggles (right on desktop), and the burger. On mobile the links drop into the
   burger and the two square toggles sit in the bar before it. */
.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links .btn-primary {
  color: #fdfbff;
}


.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px 8px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}

.burger-bar {
  width: 18px;
  height: 2px;
  background: var(--violet);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}

.hero .eyebrow {
  justify-content: center;
}

.hero .eyebrow::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--orchid), var(--violet));
}

.hero h1 {
  margin-inline: auto;
  max-width: 17ch;
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--violet-grad-top), var(--violet-grad-mid) 52%, var(--violet-text-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
}

.hero-sub {
  margin: 1.4rem auto 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--muted);
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}

.microtrust {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* hero stage: screenshot + floating company switcher */

.stage {
  position: relative;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.stage::before {
  content: '';
  position: absolute;
  inset: auto -10% -12% -10%;
  height: 55%;
  background: radial-gradient(55% 90% at 50% 100%, var(--orchid-glow), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Schematic diagrams (feature-users/messages/access) — transparent line art. They
   sit within the text measure so their box aligns with the station copy. */
.diagram-media {
  margin: 1rem 0 0;
}

.diagram-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* The two station diagrams (access, messages) get a bordered box to match the
   `.st-schematic` "Eine Tür" frame. Scoped to `.st-media.diagram-media` so the
   breadth users hub (`.diagram-media` only, no `.st-media`) stays frameless. */
.st-media.diagram-media {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
}

.browser {
  position: relative;
  margin: 0;
  background: var(--bg-elev);
  border: 1px solid rgba(160, 98, 206, 0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(208, 168, 236, 0.12) inset,
    0 30px 90px rgba(0, 0, 0, 0.6);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #16112b;
  border-bottom: 1px solid rgba(160, 98, 206, 0.12);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-orchid { background: var(--orchid-deep); }
.dot-violet { background: var(--violet); }
.dot-dim { background: #372c52; }

.browser img {
  display: block;
  width: 100%;
}

.switcher {
  position: absolute;
  top: 52px;
  right: -26px;
  width: 272px;
  padding: 0.65rem;
  text-align: left;
  background: rgba(20, 18, 27, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(198, 91, 214, 0.08);
}

.switcher-label {
  margin: 0.2rem 0 0.5rem;
  padding-inline: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.co {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.co-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--violet);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: all 0.35s ease;
}

.co-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.co-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.co-check {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--violet);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.co.active {
  background: var(--surface-2);
  border-color: rgba(160, 98, 206, 0.35);
  box-shadow: inset 2px 0 0 var(--violet);
}

.co.active .co-avatar {
  color: #fdfbff;
  background: linear-gradient(160deg, var(--indigo), var(--violet-deep));
  border-color: transparent;
}

.co.active .co-check {
  opacity: 1;
}

/* ---------- problem: the ledger ---------- */

.problem h2 {
  margin-bottom: 2.5rem;
}

.entry {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1.5rem 2rem;
  align-items: baseline;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}

/* Dividers sit only between entries - no line above the first or below the last. */
.entry:last-child {
  border-bottom: none;
}

.entry-no {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--muted);
}

.entry-no::before {
  content: '№ ';
  color: var(--muted);
}

.entry-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entry-body p {
  margin: 0.5rem 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 0.97rem;
}

.entry-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--orchid);
  white-space: nowrap;
}

/* ---------- solution: the cast (portal + hardware + app) ---------- */

.solution .lead {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

/* the three components: portal + hardware + app */

.components {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.4rem;
}

.component {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.2rem;
}

/* No line above the first row (all three on desktop); the 960px block below
   restores the separators on the cells that drop into later rows. */
.component:nth-child(-n + 3) {
  border-top: none;
}

.component-no {
  display: inline-block;
  margin-top: -2.02rem;
  padding-right: 0.8rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
}

.component h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.component p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 36ch;
}



.kicker {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orchid);
}



.browser-mini .browser-bar {
  padding: 7px 12px;
}

.browser-mini {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- breadth: beyond invoices ---------- */

.breadth-head {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.breadth .lead {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.breadth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 2.5rem;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
}

.breadth-cell {
  border-top: 1px solid var(--line-strong);
  padding-top: 1rem;
}

/* The border-tops act as between-row separators, so the first row carries none.
   The "first row" shrinks with the column count, so each breakpoint below
   restores the border on the cells that drop into row 2. */
.breadth-cell:nth-child(-n + 3) {
  border-top: none;
}

.breadth-cell h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.breadth-cell p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 34ch;
}








/* ---------- how it works ---------- */

.how h2 {
  margin-bottom: 3.4rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.step {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
}

/* No line above the first row (all three on desktop); the 960px block restores
   the separators on the steps that drop into later rows. */
.step:nth-child(-n + 3) {
  border-top: none;
}

.step-no {
  display: inline-block;
  margin-top: -2.32rem;
  padding-right: 0.8rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--muted);
}

.step h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.step p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

/* ---------- the phone frame (station `approach`) ---------- */



.app-platforms {
  margin: 1.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.phone {
  position: relative;
  width: 264px;
  justify-self: center;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(180deg, #171230, #100d20);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* dynamic-island notch, floating over the top of the screen */
.phone-island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 24px;
  border-radius: 13px;
  background: #05030d;
  z-index: 2;
  pointer-events: none;
}

.phone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(208, 168, 236, 0.6), rgba(161, 58, 184, 0.35), rgba(208, 168, 236, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.phone::after {
  content: '';
  position: absolute;
  inset: auto -30% -18% -30%;
  height: 40%;
  background: radial-gradient(50% 80% at 50% 100%, var(--orchid-glow), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  z-index: -1;
}

.phone-screen {
  position: relative;
  min-height: 468px;
  background: #0f0c1e;
  border-radius: 36px;
  display: flex;
  flex-direction: column;
}

/* the real app recording (reused from the old homepage hero) fills the screen */


/* home indicator, floating over the bottom safe area of the video */
/* the app placeholder fills the screen exactly as the old recording did
   (888x1920 intrinsic, object-fit: cover) */
.phone-screen-shot {
  overflow: hidden;
}

.phone-shot {
  display: block;
  width: 100%;
  height: auto;
  min-height: 468px;
  object-fit: cover;
  border-radius: 36px;
}

.phone-home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: rgba(236, 228, 242, 0.4);
  z-index: 2;
}

/* ---------- hardware showcase ---------- */


.hw-figure {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(123, 67, 151, 0.1);
}

.hw-figure img {
  display: block;
  width: 100%;
}

.hw-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 2.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.hw-group {
  border-top: 1px solid var(--line-strong);
  padding-top: 1rem;
}

.hw-group h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hw-group ul {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.hw-group li {
  position: relative;
  padding: 0.22rem 0 0.22rem 1.3rem;
  color: var(--ink);
  font-size: 0.92rem;
}

.hw-group li::before {
  content: '▸';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--orchid);
}

/* .home .station-body p (0,2,1) outweighs a bare .hw-price (0,1,0) and was
   zeroing the top margin + muting the colour - scope it under .st-media to win. */
.home .st-media .hw-price {
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--violet-bright);
}

/* ---------- pricing ---------- */






.price {
  margin: 1.8rem 0 0;
}

.price-figure {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--violet-grad-top), var(--violet-grad-mid) 52%, var(--violet-text-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
}

.price-unit {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}





.risk-line {
  margin: 2.2rem 0 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--violet-bright);
}


/* ---------- pricing: one panel, calculator + offer ----------
   The offer card and the calculator used to be two disconnected panels at
   different widths. They are now a single .pricebox: configuration on the left,
   and the calculator's results column IS the offer (total -> breakdown -> CTA),
   so the button sits under the number the visitor just produced. */

.pricebox {
  position: relative;
  max-width: 1060px;
  margin-inline: auto;
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: 20px;
  background: linear-gradient(180deg, #171230, #100d20);
  border: 1px solid var(--line);
}

.pricebox::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(169, 140, 240, 0.5), rgba(198, 91, 214, 0.25), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pricebox-grid {
  display: grid;
  grid-template-columns: 6fr 5.6fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}

/* the instruction line: the only copy telling a visitor this block is interactive.
   margin-bottom is 1.4rem, not the field's 1.1rem padding: "Mitglieder" is
   vertically centred in a flex row against the taller number input, so its text
   sits ~4px lower. This equalises the *visible* gap above and below the rule. */
.calc-lead {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

/* the calculator sheds its own panel chrome inside the pricebox */
.pricebox .calc {
  max-width: none;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.pricebox .calc::before {
  display: none;
}

.pricebox .calc-body {
  display: block;
  margin-top: 0;
}

.pricebox .calc-note {
  margin-top: 1.4rem;
}

/* the live quote: the results column, promoted to the offer card */
.quote {
  position: sticky;
  top: 6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
}

.quote .price {
  margin: 0 0 1.2rem;
}

.quote .price-figure {
  font-size: 1.05rem;
}

.quote .price-unit {
  display: block;
}

.quote .risk-line {
  margin-top: 1.4rem;
}

.quote .btn {
  display: block;
  margin-top: 1.4rem;
  text-align: center;
}

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

  .quote {
    position: static;
  }
}

/* ---------- price calculator (ported from the old homepage) ---------- */

.calc {
  position: relative;
  max-width: 980px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}





.calc-body {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

.calc-field {
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}

/* the first field keeps its rule so a separator sits under .calc-lead,
   matching the one between the members slider and Beckon Hardware */
.calc-field:first-child {
  padding-top: 1.1rem;
}

.calc-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.calc-field-head label,
.calc-field-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
}

.calc-num {
  width: 90px;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: right;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  /* Kill the native number spinners: they render as light UA chrome on a dark
     panel, and the −/+ steppers (plus the members slider) already cover the
     affordance. Keyboard arrows still step the value. */
  appearance: textfield;
  -moz-appearance: textfield;
}

.calc-num::-webkit-outer-spin-button,
.calc-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.calc-num:focus-visible {
  outline: 2px solid var(--orchid);
  outline-offset: 1px;
}

.calc-num-center {
  width: 64px;
  text-align: center;
}

.calc-range {
  width: 100%;
  margin-top: 1rem;
  accent-color: var(--violet);
}

.calc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
}

.calc-hw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
}

.calc-hw-info {
  display: flex;
  flex-direction: column;
}

.calc-hw-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.calc-hw-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.calc-stepper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.calc-step {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.calc-step:hover {
  border-color: var(--violet);
  color: var(--violet-bright);
}

/* addon toggle switch */

.calc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* switch right-aligns with the hardware steppers */
  gap: 1rem;
  cursor: pointer;
}

.calc-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.calc-track {
  flex: none;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.calc-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s ease, background 0.2s ease;
}

.calc-toggle input:checked ~ .calc-track {
  background: linear-gradient(160deg, var(--indigo), var(--violet-deep));
  border-color: transparent;
}

.calc-toggle input:checked ~ .calc-track .calc-thumb {
  transform: translateX(18px);
  background: #fdfbff;
}

.calc-toggle input:focus-visible ~ .calc-track {
  outline: 2px solid var(--orchid);
  outline-offset: 2px;
}

.calc-toggle-text {
  display: flex;
  flex-direction: column;
}

.calc-toggle-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.calc-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--muted);
}

.calc-toggle-price {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

/* results panel */

.calc-results {
  align-self: start;
  padding: 1.2rem 1.3rem;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.calc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.calc-total-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.calc-total-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.6rem;
  background: linear-gradient(180deg, var(--violet-grad-top), var(--violet-grad-mid) 52%, var(--violet-text-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
}

.calc-breakdown {
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.18rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.calc-breakdown li span:last-child {
  font-family: var(--font-mono);
  color: var(--ink);
}

.calc-mult {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.calc-onetime {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

.calc-onetime span:last-child {
  font-family: var(--font-mono);
  color: var(--violet-bright);
}

.calc-tiers {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.calc-tiers-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc-tiers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}

.calc-tiers-table td {
  padding: 0.22rem 0;
}

.calc-tiers-table td:nth-child(2) {
  text-align: center;
}

.calc-tiers-table td:last-child {
  text-align: right;
  color: var(--ink);
}

.calc-note {
  margin: 1.4rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---------- faq ---------- */

.faq h2 {
  margin-bottom: 2rem;
}

.faq-list {
  max-width: 800px;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

/* Dividers sit between questions - no line under the last one. */
.faq-list details:last-child {
  border-bottom: none;
}

.faq-list summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.3rem 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--violet);
  flex: none;
}

.faq-list details[open] summary::after {
  content: '−';
}

.faq-list details p {
  margin: 0;
  padding: 0 3rem 1.5rem 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- final cta ---------- */

.final {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.final::before {
  content: '';
  position: absolute;
  inset: auto -20% -50% -20%;
  height: 90%;
  background: radial-gradient(50% 70% at 50% 100%, var(--orchid-glow), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.final h2 {
  margin-inline: auto;
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.final p {
  margin: 1.2rem auto 0;
  max-width: 56ch;
  color: var(--muted);
}

/* ---------- legal pages (Impressum) ---------- */

.legal {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
  min-height: 55vh;
}

.legal h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.legal-intro {
  /* generous bottom margin: clear break before the first block */
  margin: 1rem 0 3.4rem;
  color: var(--muted);
  max-width: 62ch;
}

.legal-block {
  /* .legal-block is a <section>: cancel the global section padding */
  padding-block: 0;
  margin-top: 2rem;
  max-width: 62ch;
}

.legal-block h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet);
  max-width: none;
}

.legal-block p {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}

.legal-block ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-block a {
  color: var(--violet);
}

.legal-odr {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.foot-tagline {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 34ch;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;          /* German labels ("Datenschutzerklärung", "Präsentation")
                               overflowed the viewport below ~560px and forced the
                               whole page to scroll horizontally */
  gap: 0.6rem 1.6rem;
}

.foot-links a {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.foot-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

/* ---------- region (EU/US) + language (DE/EN) single square toggles ---------- */
/* One square button each, on every viewport - same 36x31px box as the burger.
   The region button shows the current region and toggles on tap; the language
   button shows the current locale and links to the other one. */
.region-sq,
.lang-sq {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 31px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: none;
  color: var(--violet);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.region-sq:hover,
.lang-sq:hover {
  color: var(--violet-bright);
  border-color: var(--violet);
}

/* ---------- login region modal ---------- */
body.modal-open {
  overflow: hidden;
}

.region-modal[hidden] {
  display: none;
}

.region-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.region-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 13, 0.74);
  backdrop-filter: blur(4px);
}

.region-modal-card {
  position: relative;
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.region-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.region-modal-close:hover {
  color: var(--ink);
}

.region-modal-eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
}

.region-modal-card h2 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.region-modal-sub {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.region-options {
  display: grid;
  gap: 0.8rem;
}

.region-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.region-option:hover,
.region-option:focus-visible {
  border-color: var(--violet);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.region-flag {
  min-width: 2.6rem;
  padding: 0.34rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--violet-bright);
  text-align: center;
}

.region-text {
  display: flex;
  flex-direction: column;
}

.region-name {
  font-weight: 600;
}

.region-host {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}


/* ---------- decorative "no cookies" toast ----------
   A rotated rubber-stamp reading "COOKIES: 0", shown once per session then
   auto-dismissed by main.js. Pure decoration - the site sets no cookies and
   loads nothing third-party, so there is no accept/reject and no consent logic. */
.cookie-toast {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 60;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cookie-toast.is-in { opacity: 1; transform: translateY(0); }
.cookie-stamp {
  display: inline-block;
  transform: rotate(-6deg);
  padding: 8px 16px;
  border: 2px solid var(--violet);
  border-radius: 8px;
  background: rgba(160, 98, 206, 0.1);
  color: var(--violet-bright);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.cookie-cap {
  display: block;
  margin: 8px 2px 0;
  max-width: 30ch;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .cookie-toast { transition: opacity 0.3s ease; transform: none; }
  .cookie-toast.is-in { transform: none; }
}


/* ---------- the access trace ("Die Spur") ----------
   Everything here is scoped under .home so it cannot leak into the legal pages,
   which render as <main class="legal">. Stations never alternate sides: the
   direct replacement for billing's .feature/.feature-flip zig-zag. The rail is
   drawn per-station (::before) rather than as one absolutely-positioned element,
   so it survives any station reordering and needs no JS to size. */

.home .trace {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 9vw, 7.5rem);
}

.home .trace-head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.home .station {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 168px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(2.2rem, 4.5vw, 4rem) 1.5rem;
}

/* the continuous keyhole-lit seam */
.home .station::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.5rem + clamp(96px, 11vw, 168px) / 2);
  width: 1px;
  background: linear-gradient(180deg,
    rgba(160, 98, 206, 0.1), rgba(198, 91, 214, 0.45), rgba(160, 98, 206, 0.1));
}

.home .station:first-child::before { top: clamp(2.2rem, 4.5vw, 4rem); }

/* loop-close: the rail curls shut on the final station. Grounded in the real
   claim (Closed-Loop-Kommunikation / "schließt den Kreis vom Zutritt bis zur
   Zahlung") - it is not a timing claim. */
.home .station-loop::before { bottom: 50%; }

.home .station-loop .station-rail::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid var(--orchid);
  border-radius: 50%;
  opacity: 0.5;
}

.home .station-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.2rem;
}

.home .keyhole-node {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border-radius: 50%;
}

.home .keyhole-node svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* locked -> open. The punch is filled with the page, never white. */
.kn-body {
  fill: var(--surface-2);
  stroke: var(--line-strong);
  stroke-width: 1.2;
  transition: fill 0.5s ease, stroke 0.5s ease;
}

.kn-punch {
  fill: var(--bg);
}

.home .station.revealed .kn-body {
  fill: url(#kn-grad);
  stroke: var(--orchid);
}

.home .station.revealed .keyhole-node {
  filter: drop-shadow(0 0 10px rgba(198, 91, 214, 0.45));
}

/* mono promoted to structural chrome - the controller-log register */
.home .phase,
.home .timecode,
.home .role-tag {
  font-family: var(--font-mono);
  text-align: center;
  line-height: 1.3;
}

.home .phase {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
}

.home .timecode {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--orchid);
}

.home .timecode-off {
  color: var(--muted);
  opacity: 0.45;
}

.home .role-tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
}

.home .station-body {
  min-width: 0;              /* grid children default to min-content: without this
                                the phone frame forces the row wider than the page */
  max-width: 64ch;
}

.home .station-body h3 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.9rem;
}

.home .station-body p {
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.home .st-midline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  margin: 1.6rem 0 0.8rem;
}

.home .st-subs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.4rem;
}

.home .st-subs li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
}

/* the dissolved metrics band: figures pinned where they are relevant */
.home .proof-chip {
  display: flex;
  align-items: center;      /* centre the figure against the whole (often two-line)
                               label; baseline only centred single-line labels */
  gap: 0.8rem;
  border-left: 2px solid var(--orchid);
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin: 0 0 1.6rem;
}

.home .proof-fig {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  white-space: nowrap;
  background-image: linear-gradient(180deg, var(--violet-grad-top), var(--violet-grad-mid) 52%, var(--violet-text-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home .proof-lab {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 40ch;
}

.home .st-media {
  margin-top: 1.6rem;
}

/* The .phone::after glow is inset -30% left/right; on narrow phones it bled past
   the viewport (a pseudo-element, so a bounding-rect scan misses it). Clip the
   horizontal bleed at the media container - `clip`, so no scroll box appears. */
.home .st-media-phone {
  overflow-x: clip;
}

.home .st-media-phone .phone {
  margin: 0;
  justify-self: start;
}

.home .st-schematic svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.sch-t {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  fill: var(--muted);
}

/* the hero clock seeds the trace */
.trace-clock {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--orchid);
}

.trace-clock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orchid);
  box-shadow: 0 0 8px var(--orchid);
}

/* Mobile keeps the lit thread rather than collapsing into billing's anonymous
   stacked cards - the sibling distinction has to survive on phones. */
@media (max-width: 720px) {
  .home .station {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 2.6rem;
  }

  .home .station::before { left: 1rem; }

  .home .station-rail {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    margin-left: -1.7rem;
    margin-bottom: 1rem;
  }

  .home .keyhole-node { width: 28px; height: 28px; }
  .home .keyhole-node svg { width: 24px; height: 24px; }

  .home .phase,
  .home .timecode,
  .home .role-tag { text-align: left; }

  .home .station-body { max-width: none; }

  .home .station-loop .station-rail::after { display: none; }
}

/* ---------- motion ---------- */

.rise {
  animation: rise 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  animation-delay: calc(var(--d, 0) * 110ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* the trace reads as a complete, already-traveled static timeline */
  .home .kn-body {
    fill: url(#kn-grad);
    stroke: var(--orchid);
  }

  .home .keyhole-node { filter: none; }

  html {
    scroll-behavior: auto;
  }

  .rise {
    animation: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .switcher {
    right: 14px;
  }
}

/* Tablet headers only: the sibling brand drops its label (the full nav is still
   inline here and the two wordmarks overflowed). Below 760px the nav collapses to
   the burger, which frees the space, so the sibling wordmark returns on mobile. */

@media (max-width: 960px) {


  .entry {
    grid-template-columns: 48px 1fr;
  }

  .entry-tag {
    grid-column: 2;
    justify-self: start;
  }

  .metric-row,
  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* 1 column: steps 2 & 3 drop to later rows and need their separators back. */
  .step:nth-child(2),
  .step:nth-child(3) {
    border-top: 1px solid var(--line-strong);
  }

  .breadth-head {
    grid-template-columns: 1fr;
  }

  .breadth-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* 2 columns: cell 3 drops to row 2, so it needs its separator back. */
  .breadth-cell:nth-child(3) {
    border-top: 1px solid var(--line-strong);
  }

  .components {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  /* 1 column: components 2 & 3 drop to later rows and need their separators back. */
  .component:nth-child(2),
  .component:nth-child(3) {
    border-top: 1px solid var(--line-strong);
  }

  .hw-specs {
    grid-template-columns: 1fr 1fr;
  }

  .calc-body {
    grid-template-columns: 1fr;
  }

  .app-grid {
    grid-template-columns: 1fr;
  }

  .phone {
    margin-top: 1rem;
  }

  .step {
    max-width: 520px;
  }

  .switcher {
    position: static;
    width: auto;
    max-width: 340px;
    margin: 1rem auto 0;
  }
}

@media (max-width: 760px) {
  .nav-burger {
    display: flex;
  }

  /* The secondary "log in to the portal" CTA is desktop-only. */
  .cta-secondary {
    display: none;
  }

  /* Match beckonbilling-homepage's mobile spacing: an even 10px row of
     region square, language square, burger (the content links are in the burger). */
  .nav {
    gap: 10px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 1.5rem 1.2rem;
    background: rgba(10, 8, 19, 0.97);
    border-bottom: 1px solid var(--line-strong);
    text-align: left;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 0.7rem 0;
    font-size: 1rem;
  }

  .nav-links .btn-primary {
    margin-top: 0.7rem;
    text-align: center;
  }


  .breadth-grid {
    grid-template-columns: 1fr;
  }

  /* 1 column: only cell 1 is the first row; cell 2 needs its separator back
     (cell 3 was already restored at the 960px breakpoint). */
  .breadth-cell:nth-child(2) {
    border-top: 1px solid var(--line-strong);
  }

  .hw-specs {
    grid-template-columns: 1fr;
  }

  .faq-list details p {
    padding-right: 0;
  }

  .foot-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Only two legal links remain, so a simple wrapping row (inherited from the
     desktop rule) replaces the old two-column grid built for the five-item list.
     Keep the 44px tap rows. */
  .foot-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
  }
}