/* Primary buttons: two dark tones, the second leaning toward black, with
   white ink. The shared gradient with near-black ink was bright and
   low-contrast at button size.

   Blue rather than violet, and the dark end stops short of true black —
   the card behind it is around #0e0f14, and going further merges that
   edge into the card so the pill loses its shape. */
:root {
  /* VARIANT S — azure to near-black, hue 199 against the accent's 193.

     Earlier attempts sat at hue 218-243, a different family from this
     product's cyan. One sat at hue 205 but dark and desaturated, which
     reads teal — the hue was never the problem, the brightness was. */
  --grad: var(--grad-alden);
  --btn-ink: #ffffff;
}

/* Alden subsite — supplementary styles.
   Extends the shared Quant Intelligence design system (../../css/style.css).
   Does not redefine anything already provided there. Cyan-only accent. */

/* ---------- Nav: back-to-parent + solid-cyan brand mark ---------- */

.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}

.nav-back:hover { color: var(--text-dim); }

@media (max-width: 640px) {
  .nav-back span.nav-back-label { display: none; }
}

/* ---------- Feature grids ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* A lone card: centred at a readable width rather than filling the left
   half of a two-column grid. */
.feature-grid.cols-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
/* Its list keeps to the left edge, with room before the link. */
.feature-grid.cols-1 .prose-list { margin: 14px 0 26px; }

.feature-card {
  padding: 38px 34px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--cyan);
}

.feature-icon svg { width: 20px; height: 20px; }

.feature-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.feature-card h4 { font-size: 1.05rem; margin-bottom: 8px; color: var(--cyan); }
.feature-card p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .feature-grid, .feature-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- Governance flow ---------- */

.flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto 56px;
}

/* Squared-off boxes, so the flow steps don't read as the round nav and
   tab pills above them. */
.flow-step {
  padding: 13px 20px;
  border-radius: 10px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
}


.flow-arrow {
  color: var(--text-faint);
  font-size: 1rem;
}

@media (max-width: 640px) {
  .flow-row { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
}

.flow-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto 56px;
}

.flow-card {
  flex: 1 1 200px;
  max-width: 220px;
  padding: 20px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface);
  text-align: center;
}


.flow-card .flow-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}


.flow-card .flow-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

.flow-arrow-sep {
  align-self: center;
  color: var(--text-faint);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .flow-grid { flex-direction: column; align-items: center; }
  .flow-card { max-width: 320px; width: 100%; }
  .flow-arrow-sep { transform: rotate(90deg); }
}

/* ---------- Permission category cards ---------- */

.perm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.perm-card {
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: var(--surface);
}

.perm-card h4 { font-size: 1.02rem; margin-bottom: 10px; color: var(--cyan); }
.perm-card p { font-size: 0.9rem; }

.perm-rules {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.perm-rules li {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 5px 11px;
}

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

/* ---------- Roadmap / planned badge ---------- */

.badge-roadmap {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Home hero: the app's orb above the headline ----------
   js/alden-orb.js draws the Alden app's own orb into .alden-orb; the
   still picture stays when motion is off or 3D is unavailable. Screen
   blending drops the orb's black so only its light shows on the page. */

.hero.has-orb { flex-direction: column; gap: 8px; }

.alden-orb {
  position: relative;
  width: clamp(200px, 40vh, 440px);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  flex: none;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%);
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%);
}

.alden-orb canvas,
.alden-orb-still {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* The still shows only as the fallback; the moving orb fades in once its
   first frames are ready, so it never flickers in. */
.alden-orb-still { display: none; }
.alden-orb.is-still .alden-orb-still { display: block; }
.alden-orb canvas { opacity: 0; transition: opacity 0.8s ease-out; }
.alden-orb.is-live canvas { opacity: 1; }
@media (max-width: 700px) {
  .alden-orb { width: clamp(170px, 26vh, 260px); }
}

/* Scroll version: the hero is taller than the screen and its inside sticks
   to the top while the orb grows to fill the screen; then the page moves
   on. js/alden-orb.js sets the zoom, the orb's lift and the text fade. */
.hero.orb-scroll { display: block; height: 260vh; padding: 0; overflow: visible; background: var(--bg); }
.orb-scroll .orb-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 108px 28px 20vh;
  overflow: hidden;
  /* The sticky box is its own layer, so the orb's screen blending only
     sees what is painted here: it carries the hero's background itself. */
  background:
    radial-gradient(60% 50% at 50% 28%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(50% 45% at 72% 62%, rgba(167, 107, 255, 0.12), transparent 70%),
    var(--bg);
}
.orb-scroll .alden-orb {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.orb-scroll .alden-orb-still { object-fit: contain; height: 40vh !important; top: 12vh; }
.orb-scroll .hero-content { position: relative; z-index: 1; }
@media (max-width: 700px) { .orb-scroll .orb-sticky { padding-bottom: 11vh; } }
/* The next section rises over the last stretch, while the orb fades. */
.hero.orb-scroll + section { position: relative; z-index: 1; margin-top: -50vh; }
/* Melts the box's lower edge into the page, so no line shows as the next
   section rises. */
.orb-scroll .orb-sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* ---------- Simple content sections (non-hero) ---------- */

.alden-section {
  max-width: 760px;
  margin: 0 auto;
  /* Horizontal only. Using the `padding` shorthand here wiped out the
     vertical padding these inherit as <section> elements, which left
     stacked sections flush against each other and the last one sitting
     directly on the footer's top border. */
  padding-left: 28px;
  padding-right: 28px;
  text-align: center;
}

.alden-section.wide { max-width: var(--maxw); }

.alden-section p.lede {
  font-size: 1.02rem;
  margin: 0 auto 48px;
  max-width: 620px;
}

/* ---------- Forms (signup / login) ---------- */

.form-panel {
  /* One width for every form on the site. Sign-up needed the wider box
     for the consent document, and a sign-in card half its size beside it
     read as two different products. */
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 40px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: var(--bg-elevated);
}

.form-field { margin-bottom: 20px; text-align: left; }

.form-field label {
  display: block;
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.form-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease);
}

.form-field input:focus {
  outline: none;
  border-color: var(--cyan);
}

.form-panel .btn { width: 100%; justify-content: center; margin-top: 6px; }

.form-note {
  font-size: 0.86rem;
  color: var(--text-faint);
  margin-bottom: 24px;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface);
}

.form-note a { color: var(--cyan); border-bottom: 1px solid rgba(59, 120, 255, 0.4); }

.form-success {
  display: none;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(59, 120, 255, 0.35);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
}

.form-success a { color: var(--cyan); }

.form-success.show { display: block; }

.form-footnote {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-faint);
  margin-top: 24px;
}

.form-footnote a { color: var(--cyan); border-bottom: 1px solid var(--cyan); }
.form-footnote a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- Before-you-install gate ---------- */

/* The dialog is a positioned wrapper and nothing more. Everything inside is
   the macOS card from the download page, unchanged: same .feature-card, same
   .feature-icon, same 420px from .feature-grid.is-single, same left-hanging
   icon above centred text. No colours, no background and no spacing are
   restated here, so the card cannot drift away from its twin. */
.install-gate {
  border: 0;
  background: transparent;
  color: var(--text);
  /* 8px of breathing room inside the dialog's own clip box. The card lifts
     4px on hover and a <dialog> clips its content, which took the top edge
     and its rounded corners off. Padding gives the lift somewhere to go
     WITHOUT turning clipping off, so a short window still scrolls instead of
     pushing the top of the card above the viewport where it cannot be
     reached. box-sizing is border-box globally, so max-width and width both
     carry the 16px back to leave the card at exactly 420px, the width it had
     inside .feature-grid.is-single. */
  padding: 8px;
  max-width: 436px;
  width: calc(100% - 24px);
}

.install-gate::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}

/* The card sat in .alden-section, which centres its text. The dialog is not
   in that section, so the one inherited property is restated. */
.install-gate .feature-card { text-align: center; }

/* button.btn in the shared sheet sets `font: inherit`, which is a shorthand
   and therefore wipes .btn's own font-size and weight. The card's button was
   an <a>, so it kept them. These two lines put a <button> back to what the
   original card rendered. Scoped to the gate: the same mismatch exists on
   other pages and is not this component's to fix. */
.install-gate .btn {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Matches the single button the macOS card carried, at the same 18px. */
.install-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

@media (max-width: 480px) {
  .install-gate-actions { flex-direction: column; }
}

/* Opening a modal moves focus to its first focusable element, which was
   Continue, so every visitor met the browser's own focus ring around it —
   mouse users included. The card takes the focus instead: the dialog is
   still announced and Escape still works, and no ring lands on a button
   nobody has tabbed to. Keyboard focus stays visible on the buttons
   themselves, the same split the nav uses at style.css:1776. */
.install-gate .feature-card:focus { outline: none; }
.install-gate .btn:focus { outline: none; }
.install-gate .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* .feature-card's background is a near-transparent white gradient
   (0.05 → 0.015). On the page that sat over the opaque --bg; in a dialog it
   sits over a dimmed, blurred view of the page, so the page read straight
   through it. The card's own gradient is untouched and still translucent —
   what sits under it is --bg at 72%, so the page behind is softened rather
   than removed. That one alpha is the dial: lower is more see-through. */
.install-gate .feature-card {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 6, 10, 0.38);
  /* The ::backdrop already dims the page 62%, so tint alone stacked on top
     of that read as solid. Blurring what is behind the card instead lets it
     stay genuinely see-through while the text keeps a calm ground: the page
     is visible through it as shape and colour rather than as detail. */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* ---------- Product header: logo and product name ---------- */
/* Product header: the logo, then the product name beside it, large and in
   the gradient, centred on the logo. */
.nav .nav-brand { font-size: 1.75rem; line-height: 1.1; }
@media (max-width: 360px) { .nav .nav-brand { font-size: 1.45rem; } }
.nav-mark-link { display: flex; flex: none; }
.nav-brand-group:has(> .nav-mark-link) { display: flex; align-items: center; gap: 14px; }
.nav-mark-link .nav-mark { height: 76px; }
@media (max-width: 860px) { .nav-mark-link .nav-mark { height: 64px; } }

/* Alden's name in blue: cyan into azure. */
.nav .nav-brand > .notranslate { background: linear-gradient(120deg, #4fb0ff, #2f6cf5); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Phones: a faint stroke in the blue so the name reads thick enough. */
@media (max-width: 860px) { .nav-brand-group > .nav-brand > .notranslate { -webkit-text-stroke: 1px rgba(79, 170, 255, 0.85); } }