/* Data Union Café — marketing site (stage 1).
   Productionized from approved mockups: variant-C1d / our-values / for-organisations
   (~/.gstack/projects/duc/designs/landing-onepager-20260807/).
   Two fonts only: Plus Jakarta Sans + Inconsolata. Sky + glass brand layer. */

/* ============ RESET & TOKENS ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #15222E;
  --muted: #51606E;
  --navy: #12304A;
  --sky-slate: #253B4E;      /* body text directly on sky — 4.5:1+ even on mid-blue sky */
  --teal: #01A99D;
  --teal-deep: #056A61;
  --blue: #0070A0;
  --gold: #F6BE4F;
}
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
  font-size: 15px;
  overflow-x: hidden;
  background: linear-gradient(180deg,
    #EAF3FC 0px,
    #EAF3FC 1150px,
    #EFF6FD 2200px,
    #F4F9FE 3100px,
    #F7FAFE 4000px,
    #FAF9F6 5100px,
    #FBFAF7 100%);
}
body.page-sub {
  background: linear-gradient(180deg,
    #EAF3FC 0px,
    #EAF3FC 980px,
    #EFF6FD 1500px,
    #F4F9FE 1950px,
    #F7FAFE 2400px,
    #FAF9F6 100%);
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
button { font: inherit; background: none; border: none; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #12161B;
  color: #FFFFFF;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ============ THE SKY ============ */
.sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1150px;
  background: url('../assets/sky.jpg') center top / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.page-sub .sky { height: 980px; }
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(234,243,252,0) 0%,
    rgba(234,243,252,0) 52%,
    rgba(234,243,252,.55) 78%,
    rgba(234,243,252,.92) 92%,
    #EAF3FC 100%);
}
main { position: relative; z-index: 1; }
.site-header { position: relative; z-index: 2; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; position: relative; }

/* Soft cloud-blur blobs + sparkles — atmosphere, not noise */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  pointer-events: none;
}
.blob-1 { width: 460px; height: 300px; background: rgba(255,255,255,.50); top: 120px; left: -170px; }
.blob-2 { width: 380px; height: 260px; background: rgba(255,255,255,.42); top: 430px; right: -150px; }
.sparkle {
  position: absolute;
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9);
  pointer-events: none;
  line-height: 1;
}

/* ============ TYPE UTILITIES ============ */
.mono {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.kicker { color: var(--blue); }
.kicker-teal { color: var(--teal-deep); }

/* ============ GLASS ============ */
.glass {
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(31,58,95,.10);
}
.glass-strong {
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(31,58,95,.10);
}
/* Calmer variant for the near-white lower half */
.glass-calm {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(31,58,95,.07);
}

/* ============ PILLS (solid semantics, crisp on glass) ============ */
.pill {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-gold    { background: #FBEFD3; color: #8A6510; }
.pill-blue    { background: #E1EEF5; color: #0070A0; }
.pill-teal    { background: #DBEEEB; color: #056A61; }
.pill-warm    { background: #F9E7E0; color: #B03A15; }
.pill-neutral { background: #EFEFF3; color: #5D6355; }

/* ============ HEADER ============ */
.site-header { padding-top: 22px; }
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 22px;
  border-radius: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; flex: none; min-height: 44px; }
.roundel-chip {
  width: 52px; height: 52px;
  background: #FFFFFF;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(31,58,95,.12);
  flex: none;
}
.roundel-chip img { width: 42px; height: 42px; display: block; }
.wordmark { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.brand-tag { display: block; margin-top: 2px; font-size: 9.5px; color: var(--blue); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px; font-weight: 600; color: #33475A;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav-link[aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(18,48,74,.10);
  box-shadow: inset 0 -2px 0 var(--teal), 0 1px 6px rgba(31,58,95,.08);
}
.signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px; font-weight: 600; color: #33475A;
  margin-left: 12px;
  padding: 0 20px;
  border: 1px solid rgba(18,48,74,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  flex: none;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(18,48,74,.16);
  background: rgba(255,255,255,.7);
  color: var(--navy);
  flex: none;
}
.nav-toggle svg { display: block; }

/* ============ BUTTONS ============ */
.btn-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: #12161B;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0 42px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(18,22,27,.22);
}
.btn-learn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  background: rgba(255,255,255,.55);
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0 30px;
  border: 1px solid rgba(18,48,74,.25);
  border-radius: 4px;
}
.btn-learn .down, .btn-ghost .down { font-size: 15px; line-height: 1; }
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: #12161B;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0 34px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(18,22,27,.22);
  text-align: center;
}
.join-micro {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sky-slate);
}

/* ============ HERO (home) ============ */
.hero { padding: 92px 0 44px; }
.hero-grid {
  display: grid;
  /* Was 3fr/2fr with a 64px gap: two heavy objects with no air between them.
     The text column gives a little width back and the gap grows — the headline
     no longer runs up against the phone cluster. */
  grid-template-columns: 2.15fr 2fr;
  gap: 72px;
  align-items: center;
}
.hero-kicker {
  display: inline-block;
  padding: 8px 16px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.85);
  color: var(--navy);
  font-size: 10.5px;
  box-shadow: 0 2px 10px rgba(31,58,95,.08);
}
h1 {
  margin-top: 26px;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.hero-sub {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--sky-slate);
  max-width: 520px;
}
.hero-cta {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* Browser-frame mini-dashboard */
.browser {
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(31,58,95,.16);
  overflow: hidden;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(18,48,74,.08);
}
.dots { display: flex; gap: 7px; flex: none; }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot-r { background: #F0776C; }
.dot-y { background: #F5C664; }
.dot-g { background: #6FCB86; }
.urlbar {
  flex: 1;
  text-align: center;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .4px;
  color: var(--muted);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(18,48,74,.07);
  border-radius: 8px;
  padding: 6px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-body { padding: 18px 18px 16px; }
.browser-body .mono-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.browser-body .mono-row .mono:first-child { color: var(--navy); }
.browser-body .mono-row .mono:last-child { color: var(--muted); font-weight: 600; }
.reqrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(31,58,95,.06);
  padding: 13px 15px;
}
.reqrow + .reqrow { margin-top: 10px; }
.req-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.req-kind { margin-top: 3px; color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: 1.1px; font-family: 'Inconsolata', monospace; text-transform: uppercase; }
.dividend {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-radius: 13px;
  background: linear-gradient(120deg, #0070A0, #12617E);
  border: 1px solid rgba(255,255,255,.35);
}
.dividend .mono { color: #FFFFFF; }
.dividend-val {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .5px;
  color: #FFFFFF;
}

/* Scroll cue */
.cue { text-align: center; padding: 40px 0 26px; }
.cue .mono { color: var(--sky-slate); font-size: 10px; }
.chevron {
  width: 9px; height: 9px;
  margin: 10px auto 0;
  border-right: 2px solid var(--sky-slate);
  border-bottom: 2px solid var(--sky-slate);
  transform: rotate(45deg);
  opacity: .7;
}

/* ============ SECTIONS ============ */
section { padding: 44px 0; }
.section-head { margin-bottom: 30px; }
.section-head .kicker-row {
  display: flex; align-items: center; justify-content: space-between;
}
.rule {
  flex: 1;
  height: 1px;
  background: rgba(18,48,74,.12);
  margin: 0 20px;
}
h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--navy);
}
.section-lede {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--muted);
  font-weight: 500;
  max-width: 720px;
}
.furniture { color: var(--muted); font-weight: 600; }

/* THE UNFAIR TRADE */
.problem-panel {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 52px;
  padding: 48px 52px;
  align-items: center;
}
.problem-panel h2 { margin-top: 16px; font-size: clamp(24px, 3vw, 30px); line-height: 1.22; }
.problem-copy {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 500;
}
.problem-copy strong { font-weight: 700; color: var(--navy); }
.problem-copy + .problem-copy { margin-top: 16px; }

/* ============ WHAT MEMBERS GET — mini-bento ============ */
.bento { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.btile { padding: 22px 22px 20px; display: flex; flex-direction: column; }
.btile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tag {
  display: inline-block;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #33475A;
  background: rgba(18,48,74,.06);
  border: 1px solid rgba(18,48,74,.10);
  padding: 5px 10px 4px;
  border-radius: 999px;
  white-space: nowrap;
}
.btile h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.32;
}
.btile p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.fineprint {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  color: #33475A;
  font-size: 9.5px;
  font-weight: 600;
}
.register-line {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* touch target */
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-list { list-style: none; margin-top: 10px; }
.agent-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.45;
}
.agent-list li + li { margin-top: 8px; }
.mini-tick {
  flex: none;
  width: 16px; height: 16px; margin-top: 1px;
  border-radius: 50%;
  background: #DBEEEB; color: #056A61;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* Price watch */
.pricewatch-vals { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.pw-you {
  font-family: 'Inconsolata', monospace; font-weight: 700;
  font-size: 26px; color: var(--teal-deep); letter-spacing: -.5px;
}
.pw-vs { font-family: 'Inconsolata', monospace; font-weight: 700; font-size: 12px; color: #B03A15; letter-spacing: .6px; }
.spark { margin-top: 10px; display: block; }
/* Breaches stamp */
.breach-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.stamp {
  flex: none;
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px dashed #056A61;
  background: rgba(219,238,235,.55);
  color: #056A61;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transform: rotate(-8deg);
}
.stamp .big { font-family: 'Inconsolata', monospace; font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }
.stamp .small { font-family: 'Inconsolata', monospace; font-weight: 600; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; }
/* Lockr files */
.file-list { list-style: none; margin-top: 10px; }
.file-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  font-family: 'Inconsolata', monospace; font-weight: 600;
  font-size: 11.5px; letter-spacing: .3px; color: var(--ink);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(18,48,74,.08);
  border-radius: 8px;
  padding: 7px 10px;
}
.file-list li + li { margin-top: 6px; }
.file-list .sz { color: var(--muted); font-size: 10px; }
/* Ethical pairing swap */
.swap { margin-top: 10px; }
.swap-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(18,48,74,.08);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.swap-arrow { text-align: center; color: var(--teal-deep); font-size: 15px; line-height: 1; margin: 5px 0; }

/* ============ THE APP — phone showcase ============ */
.phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 12px;
}
.phone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.phone-col-left  { z-index: 1; margin-right: -26px; }
.phone-col-right { z-index: 1; margin-left: -26px; }
.phone-col-centre { z-index: 2; }
.phone {
  width: 260px;
  max-width: 78vw;
  background: #12161B;
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 24px 48px rgba(31,58,95,.18);
}
.phone img {
  display: block;
  width: 100%;
  border-radius: 34px;
}
.phone-centre {
  width: 300px;
  box-shadow: 0 28px 56px rgba(31,58,95,.22);
}
.phone-caption {
  margin-top: 16px;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ============ TAKE CONTROL — Lockr file card ============ */
.control-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.filecard { overflow: hidden; }
.filecard-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(18,48,74,.08);
}
.filecard-name {
  font-family: 'Inconsolata', monospace; font-weight: 700;
  font-size: 12px; letter-spacing: .5px; color: var(--navy);
  overflow-wrap: anywhere;
}
.filecard-name .meta { color: var(--muted); font-weight: 600; }
.codeblock {
  margin: 16px 18px 8px;
  background: #16222C;
  border-radius: 12px;
  padding: 18px 20px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: .2px;
  color: #C7D6E2;
  overflow-x: auto;
  white-space: pre;
}
.codeblock .k { color: #7FD9D0; }
.codeblock .s { color: #FBD98F; }
.codeblock .n { color: #F6BE4F; }
.filecard-caption {
  display: block;
  padding: 0 18px 16px;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.control-copy h3 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.016em;
  color: var(--navy);
  line-height: 1.28;
}
.promise-list { list-style: none; margin-top: 24px; }
.promise-list li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: 15.5px; line-height: 1.55; font-weight: 500; color: var(--ink);
}
.promise-list li + li { margin-top: 16px; }
.tick {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #DBEEEB;
  color: #056A61;
  font-size: 12px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ============ BARGAINING POWER — diagram ============ */
.diagram-panel { padding: 40px 44px 34px; }
.diagram-row {
  display: flex; align-items: center; justify-content: center; gap: 36px;
  flex-wrap: wrap;
}
.cluster { position: relative; width: 300px; height: 210px; flex: none; }
.spoke {
  position: absolute; left: 150px; top: 105px;
  height: 2px;
  transform-origin: 0 50%;
}
.spoke-weak   { background: rgba(18,48,74,.20); }
.spoke-strong { background: rgba(1,169,157,.55); }
.node {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(18,48,74,.16);
  box-shadow: 0 2px 8px rgba(31,58,95,.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inconsolata', monospace; font-weight: 700;
  font-size: 10.5px; letter-spacing: .5px; color: var(--navy);
}
.node-strong { border: 1.5px solid rgba(1,169,157,.6); color: var(--teal-deep); }
.hub {
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inconsolata', monospace; font-weight: 700;
  letter-spacing: 1px; color: var(--navy);
}
.hub-weak {
  width: 46px; height: 46px; left: 127px; top: 82px;
  border: 2px solid rgba(18,48,74,.25);
  font-size: 9px;
  box-shadow: 0 3px 10px rgba(31,58,95,.10);
}
.hub-strong {
  width: 54px; height: 54px; left: 123px; top: 78px;
  border: 2.5px solid var(--teal);
  color: var(--teal-deep);
  font-size: 9.5px;
  box-shadow: 0 4px 16px rgba(1,169,157,.30);
}
.cluster-caption {
  text-align: center;
  margin-top: 4px;
  font-family: 'Inconsolata', monospace; font-weight: 700;
  font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase;
}
.cap-weak { color: var(--muted); }
.cap-strong { color: var(--teal-deep); }
.diagram-arrow {
  flex: none;
  text-align: center;
  color: var(--navy);
}
.diagram-arrow .arr { font-size: 30px; line-height: 1; font-weight: 400; }
.diagram-foot {
  margin-top: 22px;
  text-align: center;
}
.diagram-foot .headline {
  font-size: 15.5px; font-weight: 700; color: var(--navy);
}
.diagram-foot .micro {
  display: block; margin-top: 9px;
  font-family: 'Inconsolata', monospace; font-weight: 600;
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted);
}

/* ============ HOUSEHOLD + PRICING ============ */
.household-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  padding: 46px 50px;
  align-items: center;
}
.household-panel h2 { font-size: clamp(24px, 3vw, 30px); }
.household-copy {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 500;
}
.household-quote {
  margin-top: 18px;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.pricing-block {
  grid-column: 1 / -1;
  margin-top: 38px;
  padding-top: 36px;
  border-top: 1px solid rgba(18,48,74,.10);
}
.plan-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.toggle-pill {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: #46545F;
  border: 1px solid rgba(18,48,74,.18);
}
.toggle-pill[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border: 1px solid var(--ink); }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E7E1D6;
  border-radius: 16px;
  padding: 26px 26px 24px;
  box-shadow: 0 6px 24px rgba(31,58,95,.06);
}
.plan-name { color: var(--navy); }
.plan-price {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan-price .per { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 2px; }
.plan-sub {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--muted);
}
.plan-bullets { margin-top: 12px; }
.plan-foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.plan-btn {
  align-self: stretch;
  padding: 0;
  box-shadow: 0 8px 20px rgba(18,22,27,.16);
}
.plan-micro {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}
.seats { display: flex; justify-content: space-between; gap: 10px; }
.seat { text-align: center; flex: 1; }
.seat-avatar {
  width: 46px; height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(0,112,160,.35);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: var(--blue);
  box-shadow: 0 3px 10px rgba(31,58,95,.08);
}
.seat.you .seat-avatar { border-color: var(--teal); color: var(--teal-deep); box-shadow: 0 4px 14px rgba(1,169,157,.25); }
.seat.spare .seat-avatar { border-style: dashed; border-color: rgba(18,48,74,.25); color: var(--muted); font-size: 18px; font-weight: 600; }
.seat-name { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.seat-sub {
  margin-top: 3px;
  font-family: 'Inconsolata', monospace; font-weight: 600;
  font-size: 9.5px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted);
}
.pool-bar {
  margin-top: 22px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(225,238,245,.75);
  border: 1px solid rgba(0,112,160,.14);
}
.pool-bar .mono { color: var(--blue); font-size: 9.5px; flex: none; }
.pool-bar .pool-copy { font-size: 12.5px; font-weight: 600; color: #33475A; line-height: 1.45; }

/* HOW IT WORKS — settled zone */
.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.step { padding: 30px 28px 28px; }
.step-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--teal);
  color: var(--teal-deep);
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.step h3 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.step p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.64;
  color: var(--muted);
}

/* TRUST */
.trust-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  gap: 52px;
  padding: 48px 52px;
}
.trust-panel h2 { font-size: clamp(24px, 3vw, 30px); }
.trust-lede {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--muted);
}
.trust-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  align-content: center;
}
.trust-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}
.trust-list li.span2 { grid-column: 1 / -1; }

/* FINAL CTA */
.final {
  position: relative;
  text-align: center;
  padding: 96px 0 84px;
}
.final .watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  opacity: .06;
  pointer-events: none;
}
.final-inner { position: relative; }
.final h2 { font-size: clamp(28px, 4vw, 36px); margin: 12px 0 30px; }
.final .kicker { font-size: 10.5px; }
.final .join-micro { margin-top: 15px; }

/* FOOTER */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 26px 0 40px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.site-footer .sep { margin: 0 9px; opacity: .5; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ OUR VALUES page ============ */
.hero-centre { padding: 96px 0 40px; text-align: center; }
.hero-centre h1 { margin: 28px auto 0; max-width: 880px; line-height: 1.08; }
.hero-centre .hero-sub { margin: 24px auto 0; }

.principles { padding: 22px 52px; }
.principle {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 28px;
  padding: 30px 0 32px;
  align-items: start;
}
.principle + .principle { border-top: 1px solid rgba(18,48,74,.09); }
.p-num {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--teal-deep);
  padding-top: 6px;
}
.p-num .of { color: rgba(5,106,97,.55); }
.principle h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--navy);
  line-height: 1.3;
}
.principle p {
  margin-top: 10px;
  max-width: 780px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}
.principle p .prov {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #33475A;
  background: rgba(18,48,74,.06);
  border: 1px solid rgba(18,48,74,.10);
  border-radius: 999px;
  padding: 3px 8px 2px;
  white-space: nowrap;
  position: relative;
  top: -1px;
}

.union-panel {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 52px;
  padding: 48px 52px;
  align-items: center;
}
.union-panel h2 { margin-top: 16px; font-size: clamp(24px, 3vw, 30px); line-height: 1.22; }
.union-copy {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 500;
}
.union-copy strong { font-weight: 700; color: var(--navy); }
.union-copy p + p { margin-top: 16px; }

.bargain { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.bargain-card { padding: 30px 28px 28px; }
.bargain-card h3 {
  margin-top: 18px;
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.3;
}
.bargain-card p {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.66;
  color: var(--muted);
}
.bargain-card .fineprint {
  margin-top: 14px;
  padding-top: 0;
  line-height: 1.7;
}

/* ============ FOR ORGANISATIONS page ============ */
.anchor-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.panel { padding: 50px 54px 46px; }
.panel-kicker-row { display: flex; align-items: center; }
.panel-kicker-row .rule { margin: 0 0 0 20px; }
.panel h2 { margin-top: 16px; font-size: clamp(25px, 3.2vw, 32px); line-height: 1.2; }
.panel-lede {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--muted);
  font-weight: 500;
  max-width: 720px;
}
.subgrid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sub {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(31,58,95,.06);
  padding: 26px 26px 24px;
}
.sub h3 {
  margin-top: 15px;
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--navy);
  line-height: 1.28;
}
.sub p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--muted);
}
.sub p strong { font-weight: 700; color: var(--navy); }
.chip-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: #DBEEEB;
  padding: 5px 11px 4px;
  border-radius: 999px;
}
.fitline {
  margin-top: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(219,238,235,.5);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 20px 24px;
}
.fitline .mono { color: var(--teal-deep); flex: none; padding-top: 3px; }
.fitline p {
  font-size: 15px;
  line-height: 1.62;
  font-weight: 500;
  color: var(--ink);
}
.cta-row {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cta-note {
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .6px;
  color: var(--muted);
}
.org-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.org-list { list-style: none; display: grid; gap: 18px; }
.org-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.62;
  font-weight: 500;
  color: var(--ink);
}
.org-list li strong { font-weight: 700; color: var(--navy); }
.module {
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 40px rgba(31,58,95,.13);
  padding: 20px 20px 18px;
}
.module .mono-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  margin-bottom: 13px;
}
.module .mono-row .mono:first-child { color: var(--navy); }
.module .mono-row .mono:last-child { color: var(--muted); font-weight: 600; }
.module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(18,48,74,.07);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(31,58,95,.05);
  padding: 13px 15px;
}
.module-row + .module-row { margin-top: 10px; }
.module-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.module-kind { margin-top: 3px; color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: 1.1px; font-family: 'Inconsolata', monospace; text-transform: uppercase; }
.module-foot {
  margin-top: 13px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.module .fineprint { text-align: center; padding-top: 10px; }
.module-caption {
  margin-top: 12px;
  text-align: center;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sky-slate);
}
.trust-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 34px 48px;
  text-align: left;
}
.trust-band .roundel-chip { width: 58px; height: 58px; }
.trust-band .roundel-chip img { width: 46px; height: 46px; }
.trust-band p {
  font-size: 17.5px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--navy);
  max-width: 720px;
}
.trust-band p strong { font-weight: 800; }

/* ============ INTERACTION STATES (restrained, colour-only — no movement,
   so they are safe under prefers-reduced-motion; transitions live in the
   no-preference block below) ============ */
.btn-join:hover, .btn-solid:hover { background: #000000; }
.btn-learn:hover, .btn-ghost:hover { background: rgba(255,255,255,.82); }
.nav-link:not([aria-current="page"]):hover {
  color: var(--navy);
  background: rgba(255,255,255,.55);
}
.signin:hover { color: var(--navy); background: rgba(255,255,255,.85); }
.toggle-pill:not([aria-pressed="true"]):hover {
  color: var(--navy);
  background: rgba(255,255,255,.95);
}
.register-line:hover { text-decoration-thickness: 2px; }

/* ============ MOTION (2 intentional motions: hero entrance fade, slow cloud drift) ============ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn-join, .btn-solid, .btn-learn, .btn-ghost,
  .nav-link, .signin, .toggle-pill {
    transition: background-color .15s ease, color .15s ease;
  }
  .hero .hero-grid > div,
  .hero-centre .hero-inner {
    animation: duc-rise .7s cubic-bezier(.2,.6,.2,1) both;
  }
  .hero .hero-grid > div:last-child { animation-delay: .12s; }
  .blob-1 { animation: duc-drift 26s ease-in-out infinite alternate; }
  .blob-2 { animation: duc-drift 32s ease-in-out infinite alternate-reverse; }
}
@keyframes duc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes duc-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(46px); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1020px) {
  .wrap { padding: 0 24px; }
  .hero { padding-top: 56px; }
  /* Mobile hero stacks headline-over-preview */
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .problem-panel, .union-panel, .trust-panel, .household-panel,
  .control-grid, .org-grid { grid-template-columns: 1fr; gap: 30px; }
  .problem-panel, .trust-panel, .household-panel, .panel, .principles { padding: 34px 30px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .subgrid { grid-template-columns: 1fr; }
  .steps, .bargain { grid-template-columns: 1fr; }
  .trust-list { grid-template-columns: 1fr; }
  .trust-list li.span2 { grid-column: auto; }
  .phones { flex-wrap: wrap; gap: 34px; align-items: center; }
  .phone-col-left, .phone-col-right { margin: 0; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .nav-toggle { display: inline-flex; }
  .header-bar { flex-wrap: wrap; }
  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid rgba(18,48,74,.10);
    margin-top: 10px;
  }
  .nav.open { display: flex; }
  .nav-link, .signin { min-height: 48px; margin-left: 0; justify-content: flex-start; border-radius: 12px; }
  .bento { grid-template-columns: 1fr; }
  .plan-cards { grid-template-columns: 1fr; }
  .seats { flex-wrap: wrap; gap: 14px; }
  .seat { flex: 1 1 30%; }
  .hero-cta .btn-join, .hero-cta .btn-learn { flex: 1 1 100%; }
  .diagram-panel { padding: 28px 18px 26px; }
  .trust-band { flex-direction: column; text-align: center; }
  .final .watermark { width: 320px; height: 320px; }
  .principle { grid-template-columns: 1fr; gap: 8px; }
  .cluster { transform: scale(.86); transform-origin: center; }
}

/* ============================================================================
   Founder review, 2026-08-10
   ========================================================================= */

/* Hero now carries the app screens (the dashboard mock moved down the page).

   Composed as ONE object, not three. Three equal phones read as competing
   detail — at this size the screens are illegible anyway, so equal weight buys
   noise rather than information. Instead the centre phone leads and the outer
   two recede: smaller, dropped, rotated away and dimmed. That gives the cluster
   a single focal point, depth, and a narrower footprint, which is what buys the
   headline its breathing room back. */
/* nowrap + gap:0 override the generic .phones mobile treatment (flex-wrap +
   34px gap), which is meant for the standalone showcase and fights the overlap
   this composition depends on. */
.phones-hero { padding-top: 0; align-items: center; flex-wrap: nowrap; gap: 0; }
.phones-hero .phone {
  width: 172px;
  border-radius: 26px;
  padding: 5px;
  box-shadow: 0 14px 30px rgba(31, 58, 95, .18);
}
.phones-hero .phone img { border-radius: 22px; }
.phones-hero .phone-centre {
  width: 231px;
  border-radius: 34px;
  padding: 7px;
  box-shadow: 0 26px 54px rgba(31, 58, 95, .26);
}
/* Deeper overlap + outward fan: less total width, and the eye reads one image. */
.phones-hero .phone-col-left  { margin-right: -62px; }
.phones-hero .phone-col-right { margin-left: -62px; }
.phones-hero .phone-col-left  .phone { transform: rotate(-4deg) translateY(22px); }
.phones-hero .phone-col-right .phone { transform: rotate(4deg)  translateY(22px); }
/* The supporting screens sit back so the centre one is unambiguously the subject. */
.phones-hero .phone-col-left  .phone,
.phones-hero .phone-col-right .phone { opacity: .82; }
.phones-hero .phone-col-centre { z-index: 3; }

/* Desktop-only headline break — see the comment on the h1. */
.h1-break { display: none; }
@media (min-width: 901px) { .h1-break { display: inline; } }

/* The relocated dashboard mock. */
.dash-showcase { max-width: 640px; margin: 0 auto; }

/* Three plans instead of two. */
.plan-cards-3 { grid-template-columns: repeat(3, 1fr); }
.plan-cards-3 .plan-bullets { margin-top: 14px; }
.plan-cards-3 .plan-bullets li { align-items: flex-start; }
/* The middle column is the one we want chosen — lift it, don't shout. */
.plan-card-feature { border-color: var(--teal, #01A99D); box-shadow: 0 10px 30px rgba(31, 58, 95, .10); }
/* Cards sit in a grid row, so push each foot to the bottom and keep the CTAs
   on one line regardless of how many bullets a column carries. */
.plan-cards-3 .plan-card { height: 100%; }
.plan-cards-3 .plan-foot { margin-top: auto; padding-top: 16px; }

/* One note under all three columns. */
.plan-orgs {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #E7E1D6;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft, #5D6355);
}
.plan-orgs a { font-weight: 700; }

/* Founder: the birds watermark should not overlap the containers above it.
   `overflow: hidden` clips the 500px mark to the final panel — the bleed was
   the actual complaint — and the opacity comes down a touch as well. */
.final { overflow: hidden; }
.final .watermark { opacity: .045; }

@media (min-width: 901px) and (max-width: 1200px) {
  .phones-hero .phone { width: 138px; }
  .phones-hero .phone-centre { width: 185px; }
  .phones-hero .phone-col-left  { margin-right: -50px; }
  .phones-hero .phone-col-right { margin-left: -50px; }
}

@media (max-width: 900px) {
  .plan-cards-3 { grid-template-columns: 1fr; }
  /* 106 + 138 + 106 - 60 = 290, inside the ~310px the wrap leaves at 390px.
     Shallower rotation too — at this size a 6deg tilt reads as a mistake. */
  .phones-hero { margin-left: -20px; margin-right: -20px; }
  .phones-hero .phone { width: min(122px, 30vw); }
  .phones-hero .phone-centre { width: min(160px, 40vw); }
  .phones-hero .phone-col-left  { margin-right: -34px; }
  .phones-hero .phone-col-right { margin-left: -34px; }
  .phones-hero .phone-col-left  .phone { transform: rotate(-4deg) translateY(12px); }
  .phones-hero .phone-col-right .phone { transform: rotate(4deg)  translateY(12px); }
}

/* The tagline under the wordmark got longer ("Own your data, own your future"),
   which widened the brand block past the header's available width on phones and
   bumped the menu button onto a second row. Letting the brand block shrink puts
   the button back on the brand's row; the tagline wraps to two lines instead,
   which is the right thing to give up here. */
@media (max-width: 700px) {
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-tag { letter-spacing: 1px; }
}