/* ==========================================================================
   Keel - brand design system
   Tokens from Theme/BRAND.md · Ocean Depth / Teal Current / Seafoam / Keel Green
   No framework, no Node build step. Trunk copies this verbatim.
   ========================================================================== */

:root {
  /* Brand */
  --ocean: #0d3d4a;
  --ocean-deep: #071f26;
  --ocean-abyss: #05171d;
  --teal: #1fa6b5;
  --teal-dim: #17808c;
  --seafoam: #66d1d6;
  --green: #2dbf73;
  --green-dim: #20a45f;
  --mist: #e6f7f1;
  --snow: #f4fafa;

  /* Surfaces (dark) */
  --card: #0b303b;
  --card-2: #0a2933;
  --line: #ffffff14;
  --line-strong: #1fa6b53d;

  /* Text */
  --ink: #f4fafa;
  --ink-2: #b7d3d9;
  --muted: #8aa4ad;

  /* Gradients */
  --grad-brand: linear-gradient(120deg, #1fa6b5 0%, #2dbf73 100%);
  --grad-ocean: linear-gradient(150deg, #0f4a5a 0%, #082830 100%);
  --grad-text: linear-gradient(100deg, #66d1d6 0%, #2dbf73 90%);

  /* Shape + depth */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 2px 10px #0006;
  --shadow-md: 0 18px 44px -18px #000a;
  --shadow-glow: 0 24px 70px -30px #1fa6b599;

  --font: "Poppins", system-ui, "Segoe UI", sans-serif;
  --maxw: 1160px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ocean-deep);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

/* The mark is raster artwork; keep it from inheriting inline-image baseline gaps. */
.keel-mark {
  display: block;
  height: auto;
  flex: none;
}

a {
  color: var(--seafoam);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--green);
}

h1,
h2,
h3,
h4 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
}

::selection {
  background: #1fa6b555;
  color: #fff;
}

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

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Ambient brand wash behind everything */
.site::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 12% -8%, #1fa6b52e, transparent 70%),
    radial-gradient(760px 460px at 92% 4%, #2dbf7322, transparent 72%);
}

.site > * {
  position: relative;
  z-index: 1;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 1.5rem;
  width: 100%;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: #071f26cc;
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}
.nav-brand:hover {
  color: var(--ink);
}
.nav-brand .sub {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--seafoam);
  text-transform: uppercase;
  margin-top: -2px;
}
.nav-links {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}
.nav-links a:not(.btn) {
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--grad-brand);
  border-radius: 2px;
  transition: width 0.2s ease;
}
.nav-links a:not(.btn):hover {
  color: var(--ink);
}
.nav-links a:not(.btn):hover::after {
  width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.78rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
/* Ocean ink rather than white: white on Teal Current measures 2.92:1, under the
   4.5:1 AA floor for body-size text. Dark ink on the same brand teal is 5.8:1
   and matches how the green button already reads. */
.btn-primary {
  background: var(--teal);
  color: #04222a;
  box-shadow: 0 10px 26px -12px #1fa6b5cc;
}
.btn-primary:hover {
  background: #35c0d0;
  color: #04222a;
  box-shadow: 0 16px 34px -12px #1fa6b5;
  transform: translateY(-1px);
}
.btn-green {
  background: var(--green);
  color: #042016;
  box-shadow: 0 10px 26px -12px #2dbf73cc;
}
.btn-green:hover {
  background: #35d281;
  color: #042016;
  box-shadow: 0 16px 34px -12px #2dbf73;
  transform: translateY(-1px);
}
.btn-ghost {
  background: #ffffff08;
  color: var(--ink);
  border: 1px solid #1fa6b566;
}
.btn-ghost:hover {
  border-color: var(--seafoam);
  color: var(--seafoam);
  background: #1fa6b514;
}
.btn-tertiary {
  background: none;
  padding: 0.4rem 0;
  color: var(--seafoam);
}
.btn-tertiary:hover {
  color: var(--green);
  gap: 0.75rem;
}
.btn-lg {
  padding: 0.95rem 1.75rem;
  font-size: 1rem;
}
.btn-block {
  width: 100%;
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.section {
  padding: 5rem 0;
}
.section-tight {
  padding: 3.25rem 0;
}
.section-light {
  background: linear-gradient(180deg, #f4fafa 0%, #e6f7f1 100%);
  color: var(--ocean);
}
.section-light h2,
.section-light h3,
.section-light h4 {
  color: var(--ocean);
}
.section-light p,
.section-light li {
  color: #3d616b;
}
.section-light a {
  color: var(--teal-dim);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seafoam);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.section-light .eyebrow {
  color: var(--teal-dim);
}

.section-head {
  max-width: 640px;
  margin-bottom: 2.75rem;
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.section-head.center .eyebrow {
  justify-content: center;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 700;
}
.section-head p {
  color: var(--muted);
  margin: 0.75rem 0 0;
  font-size: 1.02rem;
}
.section-light .section-head p {
  color: #4a6f79;
}

.gradient-text {
  /* Seafoam first so the headline is still legible if background-clip:text
     is unavailable - otherwise transparent text on a dark page disappears. */
  color: var(--seafoam);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    color: transparent;
  }
}

/* Wave divider */
.wave-divider {
  display: block;
  width: 100%;
  height: 70px;
  line-height: 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Mirrored for the light -> dark boundary. */
.wave-divider.flip svg {
  transform: scaleY(-1);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 4.5rem 0 3rem;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.35rem, 5.4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 1.1rem;
}
.hero .lede {
  color: var(--ink-2);
  font-size: 1.08rem;
  max-width: 33rem;
  margin: 0 0 2rem;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-meta svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  border-radius: 999px;
  background: #1fa6b51f;
  border: 1px solid #1fa6b544;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}
.badge b {
  background: var(--grad-brand);
  color: #04222a;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
}

/* ==========================================================================
   App mockup (pure HTML/CSS replica of Keel Desktop)
   ========================================================================== */

.mockup {
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, #0e3f4d 0%, #071f26 62%);
  border: 1px solid #1fa6b53d;
  box-shadow: var(--shadow-glow), var(--shadow-md);
  overflow: hidden;
  font-size: 11px;
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.mockup:hover {
  transform: perspective(1600px) rotateY(-2deg) rotateX(0deg) translateY(-4px);
}
.mockup-plain {
  transform: none;
}
.mockup-plain:hover {
  transform: translateY(-3px);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: #ffffff08;
}
.mockup-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff26;
  display: block;
}
.mockup-bar .title {
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.mockup-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 300px;
}
.mockup-side {
  border-right: 1px solid var(--line);
  padding: 0.85rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: #0a2f3a80;
}
.mockup-side .m-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--ink);
  font-size: 12px;
  margin-bottom: 0.75rem;
  padding-inline: 0.25rem;
}
.mockup-side .m-nav {
  color: var(--muted);
  padding: 0.35rem 0.5rem;
  border-radius: 7px;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mockup-side .m-nav.on {
  background: #1fa6b52e;
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #1fa6b555;
}
.mockup-side .m-nav i {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}
.mockup-main {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.mockup-hello {
  color: var(--ink);
  font-weight: 600;
  font-size: 12.5px;
}
.mockup-hello span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 10px;
}
.m-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.m-stat {
  background: #ffffff0a;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.5rem 0.55rem;
  min-width: 0;
}
.m-stat b {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-stat u {
  display: block;
  text-decoration: none;
  color: var(--muted);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.m-stat em {
  font-style: normal;
  color: var(--green);
  font-size: 9px;
  font-weight: 600;
}
.m-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 0.5rem;
  flex: 1;
}
.m-panel {
  background: #ffffff0a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.m-panel h5 {
  margin: 0;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-panel h5 small {
  color: var(--seafoam);
  font-weight: 500;
  font-size: 9px;
}
.m-chart {
  flex: 1;
  min-height: 92px;
}
.m-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.m-legend {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 9.5px;
  color: var(--ink-2);
}
.m-legend div {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.m-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}
.m-legend span {
  margin-left: auto;
  color: var(--muted);
}
.m-donut {
  display: grid;
  place-items: center;
  padding: 0.15rem 0;
}
.m-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 9.5px;
}
.m-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  background: #ffffff08;
  color: var(--ink-2);
}
.m-row i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--grad-brand);
  flex: none;
  opacity: 0.85;
}
.m-row b {
  color: var(--ink);
  font-weight: 500;
}
.m-row span {
  margin-left: auto;
  color: var(--green);
  font-weight: 600;
}
.m-row span.neg {
  color: #ff9a8b;
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.strip {
  border-block: 1px solid var(--line);
  background: #ffffff05;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding: 1.5rem 0;
}
.strip-item {
  text-align: center;
}
.strip-item b {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.strip-item span {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Cards + feature grid
   ========================================================================== */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.1rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}

.card {
  background: linear-gradient(160deg, #ffffff0d, #ffffff05);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: block;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}
.section-light .card {
  background: #fff;
  border-color: #0d3d4a14;
  box-shadow: 0 2px 14px #0d3d4a0f;
}
.section-light .card:hover {
  box-shadow: 0 20px 40px -22px #0d3d4a5c;
  border-color: #1fa6b544;
}
.section-light .card p {
  color: #52757e;
}
/* `.card h3` is declared after `.section-light h3` at equal specificity, so it
   would otherwise win and paint headings snow-white on a white card. Anything
   nested inside a light section needs the two-class selector to take priority. */
.section-light .card h3,
.section-light .card h4,
.section-light .step h4,
.section-light .os-card b,
.section-light .price-card h3 {
  color: var(--ocean);
}
.section-light .os-card span,
.section-light .reqs li {
  color: #52757e;
}

.icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1fa6b524;
  border: 1px solid #1fa6b53d;
  display: grid;
  place-items: center;
  color: var(--seafoam);
}
.icon-wrap svg {
  width: 22px;
  height: 22px;
}
.icon-wrap.green {
  background: #2dbf7322;
  border-color: #2dbf733d;
  color: var(--green);
}
.section-light .icon-wrap {
  background: #1fa6b514;
  color: var(--teal-dim);
}

/* ==========================================================================
   Split feature rows
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  align-items: center;
}
.split.reverse .split-media {
  order: -1;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.85rem;
}
.feature-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.feature-list svg {
  width: 22px;
  height: 22px;
  color: var(--green);
  margin-top: 1px;
}
.feature-list b {
  color: var(--ink);
  font-weight: 600;
  display: block;
}
.section-light .feature-list li {
  color: #4a6f79;
}
.section-light .feature-list b {
  color: var(--ocean);
}

/* ==========================================================================
   Steps
   ========================================================================== */

.steps {
  display: grid;
  gap: 0.9rem;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.1rem;
  align-items: start;
  background: linear-gradient(160deg, #ffffff0d, #ffffff05);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem 1.35rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.step:hover {
  border-color: var(--line-strong);
  transform: translateX(3px);
}
.step-num {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--grad-brand);
  color: #04222a;
  font-weight: 700;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
}
.step h4 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 600;
}
.step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.price-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  align-items: start;
  max-width: 900px;
  margin-inline: auto;
}
.price-card {
  position: relative;
  background: linear-gradient(165deg, #0e404f, #0a2731);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-md);
}
.price-card.featured {
  border-color: #2dbf7366;
  box-shadow: 0 30px 70px -34px #2dbf7380, var(--shadow-md);
}
.price-card .ribbon {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--grad-brand);
  color: #04222a;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.price-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.price-card .note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1.35rem;
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}
.price-big {
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.price-sub {
  color: var(--seafoam);
  font-weight: 500;
  font-size: 0.95rem;
}
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.7rem;
}
.price-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.65rem;
  align-items: start;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.price-list svg {
  width: 18px;
  height: 18px;
  color: var(--green);
  margin-top: 3px;
}

/* ==========================================================================
   Brand voice panel
   ========================================================================== */

.voice {
  background: linear-gradient(135deg, #0d3d4a 0%, #10505f 55%, #0a2f3a 100%);
  border-radius: var(--r-xl);
  padding: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.voice::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -60%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #2dbf7333, transparent 65%);
  pointer-events: none;
}
.voice h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.25;
}
.voice p {
  color: #b7d3d9;
  margin: 1rem 0 0;
}
.voice-pillars {
  display: grid;
  gap: 1.35rem;
  position: relative;
}
.pillar {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1rem;
  align-items: start;
}
.pillar h4 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 600;
}
.pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ==========================================================================
   Download / OS cards
   ========================================================================== */

.os-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: inherit;
}
.os-card:hover {
  color: inherit;
}
.os-card .os-icon {
  width: 40px;
  height: 40px;
  color: var(--seafoam);
  margin-bottom: 0.5rem;
}
.os-card b {
  font-size: 1.05rem;
  font-weight: 600;
}
.os-card span {
  color: var(--muted);
  font-size: 0.86rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.os-card .go {
  margin-top: 0.75rem;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.reqs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.reqs li {
  color: var(--ink-2);
  font-size: 0.9rem;
  display: flex;
  gap: 0.55rem;
  align-items: center;
}
.reqs li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* Code block */
.code {
  background: #05171d;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--seafoam);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.7;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(110deg, #0d3d4a 0%, #157d8e 48%, #2dbf73 130%);
  border-radius: var(--r-xl);
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin-bottom: 0.6rem;
}
.cta-band p {
  color: #d9f2f4;
  margin: 0 auto 1.75rem;
  max-width: 34rem;
}
.cta-band .hero-cta {
  justify-content: center;
  margin: 0;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff1a 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.cta-band > * {
  position: relative;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: #05171d;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding: 3rem 0 2.25rem;
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 1rem 0 1.25rem;
  max-width: 26rem;
}
.footer h5 {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seafoam);
  font-weight: 700;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.footer ul a {
  color: var(--muted);
  font-size: 0.9rem;
}
.footer ul a:hover {
  color: var(--ink);
}
.socials {
  display: flex;
  gap: 0.6rem;
}
.socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff0d;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.socials a:hover {
  background: var(--grad-brand);
  color: #04222a;
  transform: translateY(-2px);
}
.socials svg {
  width: 17px;
  height: 17px;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.25rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
}
.footer-bottom .tagline {
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.footer-bottom .domain {
  letter-spacing: 0.3em;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.72rem;
}

/* ==========================================================================
   Generic pages
   ========================================================================== */

.page {
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}
.page h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.page h2 {
  font-size: 1.2rem;
  margin: 2.25rem 0 0.6rem;
  font-weight: 600;
}
.page p,
.page li {
  color: var(--ink-2);
}
.page .muted {
  color: var(--muted);
  font-size: 0.88rem;
}
.page ol,
.page ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
}

.note-box {
  border-left: 3px solid var(--teal);
  background: #1fa6b514;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1rem 1.25rem;
  color: var(--ink-2);
  font-size: 0.92rem;
  margin: 1.5rem 0;
}

/* ==========================================================================
   Live CSI board (static site - populated by csi.js, never hardcoded)
   ========================================================================== */

.board {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: 0.4rem;
}
.board-meta {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.board-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #ffffff0d, #ffffff05);
  border: 1px solid var(--line);
}
.board-row .rank {
  color: var(--green);
  font-weight: 700;
  text-align: center;
}
.board-row .tkr {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
}
.board-row .nm {
  color: var(--muted);
  font-size: 0.8rem;
}
.board-row .csi {
  color: var(--seafoam);
  font-weight: 600;
  font-size: 0.9rem;
}
.board-empty {
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
@keyframes drawLine {
  from {
    stroke-dashoffset: 900;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.rise {
  animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rise-1 {
  animation-delay: 0.06s;
}
.rise-2 {
  animation-delay: 0.14s;
}
.rise-3 {
  animation-delay: 0.22s;
}
.float {
  animation: floatY 7s ease-in-out infinite;
}
.spark-line {
  stroke-dasharray: 900;
  animation: drawLine 2.4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mockup {
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .hero-grid,
  .voice {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .voice {
    padding: 2.25rem;
  }
  .mockup {
    transform: none;
  }
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .split.reverse .split-media {
    order: 0;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 3.5rem 0;
  }
  .nav-links .hide-sm {
    display: none;
  }
  .nav-links {
    gap: 1rem;
  }
  .m-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .m-panels {
    grid-template-columns: minmax(0, 1fr);
  }
  .mockup-body {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .cta-band,
  .voice {
    padding: 2rem 1.5rem;
  }
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .price-card {
    padding: 1.6rem 1.35rem;
  }
}

@media (max-width: 460px) {
  .btn {
    width: 100%;
  }
  .hero-cta,
  .cta-band .hero-cta {
    flex-direction: column;
  }
  .btn-tertiary {
    width: auto;
  }
}

/* ==========================================================================
   Admission - application form, status, and the download gate
   ========================================================================== */

.wrap.narrow {
  max-width: 760px;
}

.apply-intro {
  margin-bottom: 2rem;
}

.feature-list.tight li {
  margin-bottom: 0.7rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.9rem;
  text-align: left;
}

.form:hover {
  transform: none;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.field-hint {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.input {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.72rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--card-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px #1fa6b52e;
}

textarea.input {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.55;
}

select.input {
  appearance: none;
  cursor: pointer;
  /* Chevron drawn inline so the control needs no image request. */
  background-image: linear-gradient(45deg, transparent 50%, var(--seafoam) 50%),
    linear-gradient(135deg, var(--seafoam) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

select.input option {
  background: var(--card-2);
  color: var(--ink);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0.5rem 0;
}

.form-heading {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.form-sub {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
}

.form-sub.center {
  text-align: center;
}

.form-error {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid #ff8a7a4d;
  background: #ff8a7a14;
  color: #ffb3a8;
  font-size: 0.9rem;
  line-height: 1.55;
}

.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-2);
  cursor: pointer;
}

.consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--green);
  cursor: pointer;
}

.consent a {
  color: var(--seafoam);
}

/* ---- receipt, status, gate ---- */

.receipt,
.gate {
  text-align: center;
  padding: 2.2rem 1.9rem;
}

.receipt:hover,
.gate:hover,
.status-card:hover {
  transform: none;
}

.receipt code {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  background: #1fa6b52e;
  color: var(--seafoam);
  font-size: 0.95em;
  letter-spacing: 0.02em;
}

.receipt .btn,
.gate .btn {
  margin-top: 1.2rem;
}

.gate-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.status-card {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--card-2);
}

.status-card.ok {
  border-color: #2dbf7366;
  background: #2dbf7314;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
}

.status-row b {
  color: var(--ink);
}

.reasons {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .form {
    padding: 1.4rem;
  }
}

/* ---- admissions console -------------------------------------------------- */

.admin-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.admin-bar.tight {
  justify-content: space-between;
  margin: 0;
}

.consent.inline {
  margin-right: auto;
  font-size: 0.85rem;
}

.admin-table {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) 5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.admin-row:hover {
  border-color: var(--line-strong);
  background: var(--card-2);
}

.admin-row.head {
  background: none;
  border: 0;
  padding-block: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
}

.admin-row .strong {
  color: var(--ink);
  font-weight: 600;
}

.admin-row .strong em {
  margin-left: 0.5rem;
  color: var(--muted);
  font-style: normal;
  font-size: 0.8rem;
}

.admin-row .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--seafoam);
}

.admin-row .muted {
  color: var(--muted);
}

.score {
  font-weight: 700;
  color: var(--ink-2);
}

.score.ok {
  color: var(--green);
}

.score.low {
  color: #ff8a7a;
}

.record {
  margin-top: 1rem;
  text-align: left;
}

.record:hover {
  transform: none;
}

.answer {
  margin-top: 0.9rem;
}

.answer p {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.ai-summary {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  background: #1fa6b51f;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.65;
}

.dims {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

.dim {
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #0000001f;
}

.dim-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.dim-head b {
  color: var(--ink);
  font-size: 0.88rem;
}

.dim-head .muted {
  color: var(--muted);
  font-size: 0.75rem;
}

.dim-head .score {
  margin-left: auto;
}

.dim p {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .admin-row {
    grid-template-columns: minmax(0, 1fr) 5rem;
    row-gap: 0.35rem;
  }
  .admin-row.head {
    display: none;
  }
}

/* ---- google sign-in + documents ------------------------------------------ */

.google-btn {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 0.5rem;
  min-height: 44px;
}

.signed-in {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid #2dbf7340;
  background: #2dbf7314;
}

.signed-in .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
}

.signed-in div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.signed-in b {
  color: var(--ink);
  font-size: 0.92rem;
}

.signed-in span {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verified-pill {
  margin-left: auto;
  flex: none;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #2dbf7333;
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input[type="file"].input {
  padding: 0.6rem;
  cursor: pointer;
}

input[type="file"].input::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--teal);
  color: #062a30;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Name-match readout in the admissions console. */
.name-match {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.name-match b {
  color: var(--ink-2);
}

.doc-list a {
  color: var(--seafoam);
}

/* ---- status card breathing room ----------------------------------------
   The admitted card stacks rows, a paragraph, and two buttons; at the old
   1.25rem it read as one dense block. */

.status-card {
  padding: 1.6rem 1.35rem;
}

.status-card .status-row {
  padding: 0.5rem 0;
}

.status-card .form-sub {
  margin-top: 0.85rem;
  margin-bottom: 0.35rem;
  line-height: 1.65;
}

.status-card .btn {
  margin-top: 0.75rem;
}

.status-card .btn + .btn {
  margin-top: 0.6rem;
}

.status-card .reasons {
  margin-top: 0.85rem;
  margin-bottom: 0.35rem;
}

.status-card .form-error {
  margin-top: 0.85rem;
}

/* ---- inline KYC document viewer ----------------------------------------
   Reviewers need to read the small print on an ID, so documents render at
   full width rather than as a thumbnail or a link. */

.doc-card {
  margin-top: 0.9rem;
  padding: 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: #0000002e;
}

.doc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.doc-head b {
  color: var(--ink);
  font-size: 0.9rem;
  text-transform: capitalize;
}

.doc-head .muted {
  color: var(--muted);
  font-size: 0.76rem;
}

.doc-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  background: #ffffff08;
}

.doc-frame {
  width: 100%;
  height: 78vh;
  min-height: 480px;
  border: 0;
  border-radius: var(--r-sm);
  background: #ffffff08;
}

/* Google renders its button inside a cross-origin iframe, so its corners
   cannot be styled from here - but the iframe element itself can be. Without
   this the iframe's white background squares off the pill. Structural
   selectors on purpose: Google's class names are obfuscated and change. */
.google-btn > div,
.google-btn iframe {
  border-radius: 999px;
  overflow: hidden;
}

/* Decline is a destructive, final action - it should look like one rather than
   like a tertiary text link sitting next to two real buttons. */
.btn-danger {
  background: #d9483b;
  color: #fff;
  box-shadow: 0 6px 18px #d9483b3d;
}

.btn-danger:hover {
  background: #e35a4c;
}

/* Separators between an applicant's answers. Reading five paragraphs of
   free text with no rules between them is where a reviewer loses their place. */
.record .answer + .answer,
.record .doc-list + .answer {
  margin-top: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.record .answer {
  padding-bottom: 0.15rem;
}

/* An open appeal is the most important thing on a reviewer's screen. */
.status-card.appeal {
  border-color: #e0a33a66;
  background: #e0a33a14;
}

.status-card.appeal .answer + .answer {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

/* ---- phone hand-off ----------------------------------------------------- */

.handoff {
  padding: 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: #0000001f;
  text-align: center;
}

.handoff .field-hint {
  margin-bottom: 0.9rem;
}

.handoff .btn {
  display: inline-flex;
  width: auto;
}

.qr {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.75rem;
}

/* The encoder emits a bare <svg>; round it so it sits in the card. */
.qr svg {
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  width: 208px;
  height: 208px;
}

.field-hint.center {
  text-align: center;
}

.qr-link {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.qr-link summary {
  cursor: pointer;
  color: var(--seafoam);
}

.qr-link code {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--ink-2);
  font-size: 0.72rem;
  word-break: break-all;
}

/* The mark carries the brand in the nav; at 42px it read as an afterthought
   beside the wordmark. Scaled up, with the lockup rebalanced around it. */
.nav-brand {
  gap: 0.85rem;
  font-size: 1.55rem;
}

.nav-brand .sub {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
}

.nav {
  padding-block: 0.35rem;
}

@media (max-width: 720px) {
  /* Keep the mark dominant on mobile but stop it crowding the nav buttons. */
  .nav-brand {
    font-size: 1.2rem;
    gap: 0.55rem;
  }
  .nav-brand img,
  .nav-brand svg {
    max-width: 52px;
    height: auto;
  }
}

/* Bigger again. The nav row grows with the mark rather than clipping it. */
.nav-brand {
  gap: 1rem;
  font-size: 1.85rem;
}

.nav-brand .sub {
  font-size: 0.72rem;
}

.nav {
  padding-block: 0.5rem;
}

@media (max-width: 900px) {
  .nav-brand {
    font-size: 1.4rem;
  }
  .nav-brand img,
  .nav-brand svg {
    max-width: 76px;
    height: auto;
  }
}

@media (max-width: 720px) {
  .nav-brand img,
  .nav-brand svg {
    max-width: 56px;
  }
}

/* The tagline was a whisper next to the wordmark. Sized to read as the second
   line of one lockup rather than a footnote under it. */
.nav-brand .sub {
  font-size: 1.02rem;
  letter-spacing: 0.2em;
  margin-top: 1px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .nav-brand .sub {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 720px) {
  .nav-brand .sub {
    font-size: 0.62rem;
  }
}

/* ---- lockup parity with the desktop app ---------------------------------
   Desktop is the reference: a 104px mark beside a 19px wordmark and a 13px
   tagline at 2.4px tracking. Those are ratios, not pixels - mark:title 5.47,
   tagline:title 0.68, tracking 0.185em. The web lockup was carrying a much
   larger wordmark against its mark, so the two products read differently.
   These come last so they win over the earlier sizing. */
.nav-brand {
  gap: 0.28rem;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.nav-brand .sub {
  font-size: 0.88rem;
  letter-spacing: 0.185em;
  font-weight: 700;
  margin-top: 0;
}

@media (max-width: 900px) {
  .nav-brand {
    font-size: 1.05rem;
  }
  .nav-brand .sub {
    font-size: 0.72rem;
  }
}

@media (max-width: 720px) {
  .nav-brand {
    font-size: 0.92rem;
  }
  .nav-brand .sub {
    font-size: 0.62rem;
  }
}

/* ---- download builds ---------------------------------------------------- */

.os-card.build {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.os-card.build .btn {
  width: 100%;
  margin-top: 0.4rem;
}

.os-card.build .filename {
  font-size: 0.72rem;
  color: var(--muted);
  word-break: break-all;
}

.checksum {
  width: 100%;
  font-size: 0.74rem;
  color: var(--muted);
}

.checksum summary {
  cursor: pointer;
  color: var(--seafoam);
}

/* Monospace and wrapping: a SHA-256 must be readable to be checkable. */
.checksum code {
  display: block;
  margin-top: 0.4rem;
  padding: 0.45rem;
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.64rem;
  line-height: 1.5;
  word-break: break-all;
}

/* Seat picker on the activation step. A seat is one live account, so the
   number a customer chooses here becomes the Stripe subscription quantity. */
/* Ghost buttons carry a 1px border and solid ones do not, so side by side in
   the nav the ghost stood 2px taller. A transparent border on the solid variant
   makes both compute the same box. */
.btn-primary,
.btn-green {
  border: 1px solid transparent;
}

.seat-picker {
  margin: 18px 0 10px;
  /* Centred as a block, not just the stepper. The account card centres its
     text and the status card does not, so centring only the buttons left the
     label and the price line hanging to the left of them - worse than either
     alignment on its own. */
  text-align: center;
}
.seat-row {
  display: flex;
  align-items: center;
  /* The card centres its text, but a flex container ignores text-align and
     packs to the start, which left the stepper hanging off the left edge of an
     otherwise centred card. */
  justify-content: center;
  gap: 14px;
  margin: 8px 0 10px;
}
.seat-step {
  width: 40px;
  min-width: 40px;
  padding: 0;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seat-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.seat-count {
  /* Matched to the buttons rather than left to a text line box. `align-items:
     center` centres each item by its own height, and a 22px line box is not
     40px tall, so the digit sat a couple of pixels above the buttons' centre
     line. Giving it the same box and centring inside makes the three share one
     axis exactly. */
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 22px;
  font-weight: 700;
  /* Wide enough for two digits so the buttons do not shift when the count
     crosses 10, and tabular figures so 1 and 8 occupy the same width. */
  min-width: 2.5ch;
  font-variant-numeric: tabular-nums;
}

/* The download card matching the visitor's own OS. Emphasis only - every
   platform stays downloadable, because fetching an installer for a different
   machine is ordinary and the detection is a guess. */
.os-card.recommended {
  border-color: var(--green, #2DBF73);
  box-shadow: 0 0 0 1px var(--green, #2DBF73) inset;
}
.os-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(45, 191, 115, 0.14);
  color: var(--green, #2DBF73);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Carried back to the queue after a decision. Amber rather than red: it is
   something the operator must act on, not something that went wrong. */
.notice {
  background: rgba(232, 180, 74, 0.12);
  border: 1px solid rgba(232, 180, 74, 0.45);
  border-radius: var(--radius, 8px);
  padding: 12px 14px;
  margin: 0 0 16px;
  color: var(--ink, #0D3D4A);
}