/* ===================================================================
   CORDA — Design tokens
   Vanta-black foundation, electric-blue accent, cool white/gray
   typography. Editorial bones stay (hairline borders, generous
   whitespace) but the surface now reads as engineered rather than
   flat: a faint glow, a precise accent, confident scale.
   =================================================================== */
:root{
  --bg:          #000000;
  --bg-raised:   #0A0A0A;
  --bg-elevated: #131313;
  --ink:         #FFFFFF;
  --ink-dim:     rgba(255,255,255,0.66);
  --ink-faint:   rgba(255,255,255,0.52);
  --ink-hair:    rgba(255,255,255,0.28);
  --line:        rgba(255,255,255,0.14);
  --line-soft:   rgba(255,255,255,0.08);

  --accent:       #FFFFFF;
  --accent-2:     #E8E8E8;
  --accent-deep:  #1A1A1A;
  --accent-dim:   rgba(255,255,255,0.5);
  --accent-faint: rgba(255,255,255,0.14);
  --accent-glow:  rgba(255,255,255,0.35);
  --on-accent:    #000000;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Krub', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(24px, 5vw, 64px);

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-reveal: cubic-bezier(.16,1,.3,1);

  --radius: 2px;
}

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

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

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

body{
  margin:0;
  background:
    radial-gradient(ellipse 1200px 700px at 50% -8%, rgba(255,255,255,0.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}

/* Faint engineered grid, fixed to the viewport so it reads as one
   continuous surface the sections sit on top of, not a per-section
   background. Extremely low contrast — texture, not decoration. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 60%, transparent 100%);
}
.nav, .hero, section, footer{ position:relative; z-index:1; }

/* Ambient field — living glow layer, injected by script.js on every
   page. Sits above section content but below the nav/mobile CTA, and
   never intercepts pointer events. mix-blend-mode:screen means it only
   ever adds light: it disappears against light text and blooms softly
   against the dark surfaces underneath, so it can't reduce legibility
   anywhere on the site. */
.ambient-fx{
  position:fixed;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion: reduce){
  .ambient-fx{ display:none; }
}

/* Eyebrow — small accent-colour caps label used above section
   headlines throughout, the one place colour is used for emphasis
   rather than for interaction. */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 22px;
}
.eyebrow::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--accent);
  flex:0 0 auto;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; touch-action:manipulation; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; touch-action:manipulation; }
input,select,textarea{ font:inherit; }

:focus-visible{
  outline:1px solid var(--accent-2);
  outline-offset:3px;
}
::selection{ background:var(--accent-dim); color:var(--on-accent); }

.section__inner{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(30px, 4.4vw, 48px);
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0 0 20px;
  max-width:16ch;
}
.h2--light{ color:var(--ink); }

.p{
  font-size:16px;
  color:var(--ink-dim);
  max-width:52ch;
  margin:0;
}
.p--light{ color:var(--ink-dim); }

/* Statement lines — the short, crucial payoff lines throughout the
   site. Set in caps with wide tracking rather than colour, so they
   read as a decision, not a decoration. */
.caps-statement{
  text-transform:uppercase;
  letter-spacing:0.02em;
}

/* Reveal-on-scroll — fade + rise, staggered per group by script.js */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition-property:opacity, transform;
  transition-duration:0.85s;
  transition-timing-function:var(--ease-reveal);
  transition-delay:0s;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ===================================================================
   SPLIT-WORD SCROLL REVEAL
   Each word is wrapped in an overflow-hidden mask (.word-mask) around
   an inner span (.word-inner) that rises up from below into place.
   The parent gains .is-split-visible when it crosses into view; every
   word inside rises on its own staggered delay (set inline by
   script.js), so the line reads as if it's being typed up out of the
   page rather than simply fading in.
   =================================================================== */
.word-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.08em;
  margin-bottom:-0.08em;
}
.word-inner{
  display:inline-block;
  transform:translateY(112%);
  opacity:0;
  transition:transform 0.85s var(--ease-reveal), opacity 0.5s ease;
  will-change:transform, opacity;
}
.is-split-visible .word-inner{
  transform:translateY(0);
  opacity:1;
}

/* Buttons — flat rectangles with a precise accent glow on the primary
   action. Still no pill, no sheen sweep: the cue is colour + a soft
   lift, not a gimmick. */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 30px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:0;
  border:1px solid var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn--solid{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  box-shadow:0 0 0 rgba(255,255,255,0);
}
.btn--solid:hover{
  background:var(--accent-2);
  border-color:var(--accent-2);
  color:var(--on-accent);
  box-shadow:0 8px 30px -6px var(--accent-glow);
  transform:translateY(-1px);
}

.btn--ghost{
  border-color:var(--line);
  background:transparent;
  color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--accent-2); color:var(--ink); transform:translateY(-1px); }

/* Loading state — shared by any .btn (form submits use it while a
   request is in flight). Text stays in place and just dims slightly;
   the spinner sits to its left so the button doesn't change width. */
.btn.is-loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.btn.is-loading::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:currentColor;
  border-right-color:currentColor;
  color:var(--on-accent);
  animation:btnSpin .7s linear infinite;
}
.btn--ghost.is-loading::after{ color:var(--ink); }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-loading::after{ animation:none; }
}

/* ===================================================================
   TOAST — a brief, dismissible confirmation for a successful form
   submission. Supplements the inline .form__status text (which stays
   for accessibility and for error states); the toast is the moment
   of "yes, that worked" a status line alone can be easy to miss.
   =================================================================== */
.toast-region{
  position:fixed;
  left:0; right:0;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0 var(--gutter);
  pointer-events:none;
  z-index:300;
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:420px;
  width:100%;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  box-shadow:0 16px 48px -12px rgba(0,0,0,0.6);
  padding:16px 18px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .35s var(--ease-reveal), transform .35s var(--ease-reveal);
}
.toast.is-visible{ opacity:1; transform:translateY(0); }
.toast__icon{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
}
.toast__icon svg{ width:11px; height:11px; }
.toast__body{ flex:1; min-width:0; }
.toast__title{ font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--ink); margin:0 0 3px; }
.toast__text{ font-size:12.5px; color:var(--ink-dim); margin:0; line-height:1.5; }
.toast__close{
  flex:0 0 auto;
  width:22px; height:22px;
  margin:-11px -8px -11px 4px;
  padding:11px 8px;
  background-clip:content-box;
  box-sizing:content-box;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
  cursor:pointer;
}
.toast__close:hover{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .toast{ transition:opacity .2s linear; transform:none; }
}
@media (max-width:520px){
  .toast-region{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ===================================================================
   NAVBAR — plain fixed bar, hairline bottom border once scrolled.
   No floating pill, no blur.
   =================================================================== */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  border-bottom:1px solid transparent;
  background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-scrolled{
  background:rgba(5,6,10,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:22px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav__mark{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.nav__mark-icon{
  height:24px;
  width:auto;
  filter:grayscale(1) brightness(1.6);
  transition:filter .3s var(--ease);
}
.nav__mark:hover .nav__mark-icon{
  filter:grayscale(0) brightness(1) drop-shadow(0 0 10px var(--accent-glow));
}

.nav__links{
  display:flex;
  gap:34px;
}
.nav__link{
  font-size:12.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-dim);
  position:relative;
  padding-bottom:4px;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--accent-2);
  transition:right .3s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ right:0; }

/* Platform handoff — "Create Account" leaves this marketing site for the
   Corda web app on a different domain. A pill (not plain text) plus a
   visible external-link glyph signals the jump before the click, and it
   opens in a new tab so this site is still here after. */
.nav__link--app{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-dim);
}
.nav__link--app::after{ content:none; }
.nav__link--app:hover{ border-color:var(--accent-2); color:var(--ink); background:var(--bg-raised); }
.nav__link-external{ width:11px; height:11px; flex:0 0 auto; }
.nav__mobileLink--app{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--ink-dim);
}
.nav__mobileLink--app .nav__link-external{ width:13px; height:13px; }

.nav__cta{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:11px 22px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--accent-dim);
  border-radius:0;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 6px 24px -6px var(--accent-glow); }

.nav__burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:26px;
  min-width:44px;
  min-height:44px;
  padding:4px;
}
.nav__burger span{
  height:1px; width:100%; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__mobile{
  display:none;
  flex-direction:column;
  width:100%;
  background:var(--bg);
  border-top:1px solid var(--line);
  max-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  transition:max-height .4s var(--ease);
}
/* min() caps the menu at 560px on tall screens but never taller than the
   viewport itself (minus a little breathing room), so on short/landscape
   phones it scrolls internally instead of clipping the last link or the
   CTA button silently. */
.nav__mobile.is-open{ max-height:min(560px, calc(100vh - 72px)); }
.nav__mobileLink{
  padding:18px var(--gutter);
  border-top:1px solid var(--line-soft);
  font-size:14px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.nav__mobileCta{
  margin:16px var(--gutter) 22px;
  padding:14px 0;
  text-align:center;
  border:1px solid var(--ink);
  color:var(--ink);
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

@media (max-width: 860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav__mobile{ display:flex; }
}

/* Dims and blocks the page behind the open mobile menu, so whatever sits
   just below the menu's own height (like the hero's own CTA button) never
   shows through or reads as a second, confusing copy of a menu link. */
.nav__scrim{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
  z-index:95;
}
@media (max-width:860px){
  .nav__scrim{ display:block; }
}
.nav__scrim.is-open{ opacity:1; pointer-events:auto; }

/* ===================================================================
   HERO — cinematic ground: a slow radial accent glow anchors the
   headline, the canvas draws a faint constellation behind it. The
   headline reads in two beats — a quiet question, then the accent
   resolve — rather than one shouted line.
   =================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  padding-top:120px;
  padding-bottom:100px;
}
.hero::before{
  content:"";
  position:absolute;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:min(1100px, 140vw);
  height:900px;
  background:radial-gradient(ellipse at center, var(--accent-glow) 0%, rgba(255,255,255,0.06) 45%, transparent 72%);
  pointer-events:none;
  z-index:0;
  opacity:0.45;
}

.hero__grid{
  position:relative;
  z-index:2;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
}
.hero__inner{
  min-width:0;
  max-width:760px;
}

/* Dotted globe — decorative, sits to the right of the hero copy on
   wide viewports only. Hidden below the breakpoint rather than
   squeezed, so it never competes with the headline for space. */
.hero__visual{
  display:none;
}
.hero__globe{
  display:block;
}
@media (min-width:1080px){
  .hero__grid{
    display:grid;
    grid-template-columns:minmax(0, 760px) 1fr;
    align-items:center;
    gap:24px;
  }
  .hero__visual{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }
}

/* Marquee — a full-bleed, continuously-scrolling strip of the network's
   categories, sitting right under the fold like a trust/logo strip.
   Two identical lists sit side by side and the whole track scrolls
   exactly one list-width so the loop is seamless. */
.marquee{
  position:relative;
  z-index:1;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-raised);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__list{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}
.marquee__list li{
  padding:22px 36px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  position:relative;
}
.marquee__list li::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent-dim);
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}
.hero__label{
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 40px;
  opacity:0;
  animation:heroIn .9s var(--ease-reveal) .05s forwards;
}

.hero__headline{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(38px, 6vw, 74px);
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0 0 22px;
  max-width:15ch;
  overflow-wrap:break-word;
  color:var(--ink-dim);
  opacity:0;
  animation:heroIn 1s var(--ease-reveal) .16s forwards;
}

.hero__lede{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(30px, 4.6vw, 56px);
  line-height:1.1;
  letter-spacing:-0.015em;
  text-transform:none;
  max-width:20ch;
  margin:0 0 26px;
  color:var(--ink);
  background:linear-gradient(90deg, var(--ink) 0%, var(--accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  animation:heroIn .9s var(--ease-reveal) .34s forwards;
}
.hero__sub{
  font-size:15.5px;
  max-width:44ch;
  color:var(--ink-dim);
  margin:0 0 34px;
  opacity:0;
  animation:heroIn .9s var(--ease-reveal) .4s forwards;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  opacity:0;
  animation:heroIn .9s var(--ease-reveal) .5s forwards;
}
@keyframes heroIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero__note{
  display:flex;
  align-items:center;
  gap:9px;
  margin:36px 0 0;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0;
  animation:heroIn .9s var(--ease-reveal) .6s forwards;
}
.hero__note-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--ink-faint);
  flex:0 0 auto;
}

/* Live status chip — a small honest "we're a real, active team" signal:
   a real local Abuja clock plus a gently cycling status line. Not a
   claim about specific counts, just ambient proof of life. */
.hero__pulse{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:20px 0 0;
  padding:9px 16px 9px 12px;
  border:1px solid var(--line);
  background:var(--bg-raised);
  font-size:11.5px;
  letter-spacing:0.03em;
  color:var(--ink-faint);
  opacity:0;
  animation:heroIn .9s var(--ease-reveal) .75s forwards;
}
.hero__pulse-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 0 var(--accent-glow); }
  50%{ box-shadow:0 0 0 5px transparent; }
}
.hero__pulse-text{ color:var(--ink-dim); min-width:11em; transition:opacity .3s ease; }
.hero__pulse-sep{ color:var(--ink-faint); opacity:0.6; }
.hero__pulse-clock{ font-variant-numeric:tabular-nums; color:var(--ink); }
.hero__pulse-tz{ color:var(--ink-faint); }
@media (max-width:600px){
  .hero__pulse{ flex-wrap:wrap; row-gap:4px; }
  .hero__pulse-text{ min-width:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__pulse-dot{ animation:none; }
}

/* ===================================================================
   PROBLEM
   =================================================================== */
.problem{ padding:130px 0; background:var(--bg); }
.problem__grid{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:80px;
  align-items:start;
}
.problem__copy{ margin:22px 0 40px; }
.problem__end{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  border-top:1px solid var(--line);
  padding-top:24px;
  max-width:30ch;
}
.problem__list{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.problem__list li{
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:19px;
  color:var(--ink);
  position:relative;
  padding-left:0;
  transition:padding-left .3s var(--ease), color .3s var(--ease);
}
.problem__list li:hover{ padding-left:16px; color:var(--accent-2); }

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

/* ===================================================================
   HOW IT WORKS
   =================================================================== */
.how{ padding:130px 0; background:var(--bg); color:var(--ink); }
.how__title{ color:var(--ink); max-width:20ch; }
.how__steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:56px;
  border-top:1px solid var(--line);
}
.step{
  position:relative;
  z-index:1;
  background:transparent;
  border-right:1px solid var(--line);
  padding:40px 34px 44px;
  transition:background .3s var(--ease);
}
.step:last-child{ border-right:none; }
.step:hover{ background:var(--bg-raised); }
.step:hover .step__num{ border-color:var(--accent); color:var(--accent-2); box-shadow:0 0 0 4px var(--accent-faint); }
.step__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12.5px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:50%;
  margin-bottom:26px;
  transition:border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.step__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:21px;
  margin:0 0 12px;
  max-width:16ch;
}
.how .p{ color:var(--ink-dim); }

@media (max-width:860px){
  .how__steps{ grid-template-columns:1fr; border-top:none; }
  .step{ border-right:none; border-top:1px solid var(--line); }
}

/* ===================================================================
   MATCHER — a small two-step interactive widget: pick a category,
   describe the need, hand off to the real request form on connect.html
   with the answers pre-filled via query params. Genuinely useful
   interactivity rather than decoration.
   =================================================================== */
.matcher{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.matcher__intro{ margin-top:0; }
.matcher__widget{
  max-width:640px;
  margin-top:48px;
  border:1px solid var(--line);
  padding:44px 40px;
  background:var(--bg-raised);
  position:relative;
  overflow:hidden;
}
.matcher__progress{ display:flex; gap:8px; margin-bottom:28px; }
.matcher__dot{
  width:28px;
  height:3px;
  background:var(--line);
  transition:background .3s var(--ease);
}
.matcher__dot.is-active{ background:var(--accent); }
.matcher__step{ animation:tabPanelIn .4s var(--ease) forwards; }
.matcher__step[hidden]{ display:none; }
.matcher__q{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  margin:0 0 24px;
  color:var(--ink);
}
.matcher__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.matcher__chip{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink-dim);
  background:transparent;
  border:1px solid var(--line);
  padding:11px 20px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.matcher__chip:hover{ border-color:var(--ink-hair); color:var(--ink); }
.matcher__chip.is-selected{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  font-weight:600;
}
.matcher__field{ margin-bottom:20px; }
.matcher__field em{ font-style:normal; text-transform:none; color:var(--ink-faint); opacity:0.8; }
.matcher__field input{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  padding:13px 14px;
  font-family:var(--font-body);
  font-size:14.5px;
  text-transform:none;
  letter-spacing:normal;
}
.matcher__field input:focus{ outline:none; border-color:var(--accent); }
.matcher__actions{ display:flex; gap:12px; margin-top:8px; }

@media (max-width:600px){
  .matcher__widget{ padding:32px 22px; }
  .matcher__actions{ flex-direction:column-reverse; }
  .matcher__actions .btn{ width:100%; text-align:center; }
}

/* ===================================================================
   NETWORK / CATEGORIES
   =================================================================== */
.network{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.network-preview__cta{ margin-top:40px; }
.network-preview__cats{
  list-style:none;
  padding:0;
  margin:50px 0 0;
  border-top:1px solid var(--line);
}
.network-preview__cats li{ margin:0; border-bottom:1px solid var(--line); }
.network-preview__cats a{
  display:flex;
  align-items:baseline;
  gap:24px;
  padding:26px 4px;
  font-family:var(--font-display);
  font-size:clamp(19px, 2.4vw, 27px);
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink-dim);
  transition:color .3s var(--ease), padding-left .3s var(--ease), gap .3s var(--ease);
  position:relative;
}
.network-preview__cats a::before{
  content:attr(data-index);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  flex:0 0 auto;
  transition:color .3s var(--ease);
}
.network-preview__cats a::after{
  content:"→";
  margin-left:auto;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--accent-2);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.network-preview__cats a:hover{
  color:var(--ink);
  padding-left:14px;
  gap:20px;
}
.network-preview__cats a:hover::before{ color:var(--accent-2); }
.network-preview__cats a:hover::after{ opacity:1; transform:translateX(0); }
.contact__form-nudge{ margin-top:26px; font-size:14px; }
.contact__form-nudge a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.network__intro{ margin-top:0; margin-bottom:8px; }
.network__layout{
  margin-top:56px;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  background:transparent;
}
.network__cats{
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
}
.cat{
  text-align:left;
  padding:22px 28px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.cat:hover{ padding-left:34px; background:var(--bg-raised); }
.cat:last-child{ border-bottom:none; }
.cat__name{ font-family:var(--font-display); font-size:17px; }
.cat__count{ font-size:12.5px; color:var(--ink-faint); }
.cat[aria-selected="true"]{ background:var(--bg-raised); box-shadow:inset 3px 0 0 var(--accent); }
.cat[aria-selected="true"] .cat__name{ color:var(--accent-2); }
.cat[aria-selected="true"] .cat__count{ color:var(--ink-dim); }

.network__reveal{
  padding:32px 34px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.network__empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:12px 0;
}
.network__empty-text{
  font-size:14px;
  color:var(--ink-dim);
  margin:0;
}
.network__empty-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:10px 18px;
  border-radius:0;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.network__empty-cta:hover{
  background:var(--ink);
  color:var(--bg);
}
.profile-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(8px);
  animation:rowIn .5s var(--ease) forwards;
}
.profile-row:last-child{ border-bottom:none; }
@keyframes rowIn{ to{ opacity:1; transform:translateY(0); } }
.profile-row__name{ font-family:var(--font-display); font-size:16px; }
.profile-row__role{ font-size:13px; color:var(--ink-faint); }

@media (max-width:860px){
  .network__layout{ grid-template-columns:1fr; }
  .network__cats{ border-right:none; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; }
  .cat{ flex:1 1 50%; border-bottom:1px solid var(--line); }
}

/* ===================================================================
   WHY CORDA
   =================================================================== */
.why{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.why__head{ max-width:620px; margin-bottom:56px; }
.why__title{ margin-bottom:0; }

/* Tabbed feature walkthrough — a left-hand tab list plus a single
   revealed panel on the right, in the site's existing bordered,
   no-card visual language (hairlines, not boxes with shadows). */
.tabs{
  display:grid;
  grid-template-columns:0.62fr 1.38fr;
  border:1px solid var(--line);
}
.tabs__nav{
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
}
.tabs__btn{
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  padding:24px 26px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink-dim);
  cursor:pointer;
  font-family:var(--font-body);
  transition:background .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
}
.tabs__btn:last-child{ border-bottom:none; }
.tabs__num{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  flex:0 0 auto;
  transition:color .3s var(--ease);
}
.tabs__label{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:-0.005em;
}
.tabs__btn:hover{ background:var(--bg-raised); color:var(--ink); }
.tabs__btn.is-active{
  background:var(--bg-raised);
  color:var(--ink);
  padding-left:20px;
  box-shadow:inset 3px 0 0 var(--accent);
}
.tabs__btn.is-active .tabs__num{ color:var(--accent-2); }

.tabs__panels{ position:relative; }
.tabs__panel{
  display:flex;
  align-items:center;
  gap:40px;
  padding:48px 56px;
  min-height:220px;
  opacity:0;
  animation:tabPanelIn .45s var(--ease) forwards;
}
.tabs__panel[hidden]{ display:none; }
@keyframes tabPanelIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.tabs__visual{
  flex:0 0 auto;
  width:72px;
  height:72px;
  color:var(--accent-2);
  opacity:0.9;
}
.tabs__visual svg{ width:100%; height:100%; }
.tabs__copy{ margin:0; max-width:44ch; font-size:16.5px; }

@media (max-width:860px){
  .tabs{ grid-template-columns:1fr; }
  .tabs__nav{ border-right:none; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; }
  .tabs__btn{ flex:1 1 50%; padding:16px 18px; }
  .tabs__btn.is-active{ padding-left:18px; box-shadow:inset 0 -3px 0 var(--accent); }
  .tabs__panel{ padding:32px 24px; gap:24px; }
  .tabs__visual{ width:52px; height:52px; }
}
@media (max-width:520px){
  .tabs__panel{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .tabs__panel{ animation:none; opacity:1; }
}

/* ===================================================================
   TRUST — clean statistics, no cards: a bordered grid of numbers.
   The count-up is handled by script.js via [data-count-to].
   =================================================================== */
.trust{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:60px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.trust__stat{
  padding:44px 30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.trust__stat:hover{ background:var(--bg-raised); }
.trust__num{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(38px, 4.6vw, 58px);
  line-height:1;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg, var(--ink) 20%, var(--accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.trust__label{
  display:block;
  margin-top:14px;
  font-size:12.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
  max-width:20ch;
}

@media (max-width:860px){
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .trust__grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   NETWORK VISUALIZATION (web) — plain bordered labels, static radial
   layout, no bounce, no glow, no colour swap on hover.
   =================================================================== */
.web{ padding:130px 0 110px; background:var(--bg); color:var(--ink); border-top:1px solid var(--line); }
.web__intro{ color:var(--ink-dim); margin-top:0; }
.web__canvas{
  position:relative;
  max-width:var(--container);
  margin:70px auto 0;
  padding:0 var(--gutter);
  height:520px;
}
.web-node{
  position:absolute;
  transform:translate(-50%,-50%);
  border:1px solid var(--line);
  padding:10px 18px;
  border-radius:0;
  font-size:13px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  background:var(--bg);
  cursor:default;
  transition:border-color .3s var(--ease), color .3s var(--ease);
  z-index:2;
}
.web-node:hover, .web-node.is-active{
  border-color:var(--accent);
  color:var(--accent-2);
  box-shadow:0 0 24px -6px var(--accent-glow);
}
.web-node--center{
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--on-accent);
  font-family:var(--font-display);
  font-weight:600;
  padding:16px 26px;
  font-size:14px;
  box-shadow:0 0 40px -4px var(--accent-glow);
}
.web__lines{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.web__lines line{
  stroke:var(--line);
  stroke-width:1;
  transition:stroke .3s var(--ease);
}
.web__lines line.is-active{ stroke:var(--accent-2); }

@media (max-width:760px){
  .web__canvas{ height:640px; }
  .web-node{ font-size:11px; padding:8px 12px; }
}

/* ===================================================================
   FIND A CONNECTION
   =================================================================== */
.find{ padding:120px 0; background:var(--bg); border-top:1px solid var(--line); }
.find__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.find__copy{ margin:20px 0 34px; }
.find__examples{ display:flex; flex-direction:column; gap:0; }
.find__examples li{
  font-family:var(--font-display);
  font-size:17px;
  padding:18px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.find__examples li:last-child{ border-bottom:1px solid var(--line); }

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

/* ===================================================================
   TRUST BADGES — a row of things Corda can actually back up right
   now (not borrowed compliance marks), sitting right before the
   request form to reassure at the point of commitment.
   =================================================================== */
.badges{ background:var(--bg-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.badges__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:0;
}
.badge{
  display:flex;
  align-items:center;
  gap:14px;
  padding:30px 22px;
  border-right:1px solid var(--line);
}
.badge:last-child{ border-right:none; }
.badge__icon{
  flex:0 0 auto;
  width:26px;
  height:26px;
  color:var(--accent-2);
}
.badge__icon svg{ width:100%; height:100%; }
.badge__label{
  font-size:13px;
  line-height:1.4;
  color:var(--ink-dim);
}

@media (max-width:860px){
  .badges__grid{ grid-template-columns:repeat(2,1fr); }
  .badge{ border-bottom:1px solid var(--line); }
  .badge:nth-child(2n){ border-right:none; }
}
@media (max-width:520px){
  .badges__grid{ grid-template-columns:1fr; }
  .badge{ border-right:none; }
}

/* ===================================================================
   JOIN THE NETWORK — final CTA
   =================================================================== */
.join{
  position:relative;
  padding:170px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  text-align:center;
  overflow:hidden;
}
.join::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(1000px, 130vw);
  height:600px;
  background:radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 68%);
  opacity:0.55;
  pointer-events:none;
}
.join__grid{ position:relative; z-index:1; max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.join__grid .h2{
  max-width:16ch;
  font-weight:500;
  font-size:clamp(32px, 5vw, 58px);
  line-height:1.12;
  letter-spacing:-0.015em;
  text-transform:none;
  color:var(--ink);
}
.join__copy{ margin:22px 0 42px; max-width:46ch; }
.join__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* ===================================================================
   ABOUT
   =================================================================== */
.about{ padding:130px 0; background:var(--bg); color:var(--ink); border-top:1px solid var(--line); }
.about__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
.about__title{ color:var(--ink); }
.about__lines p{
  font-family:var(--font-display);
  font-size:clamp(19px,2.4vw,26px);
  margin:0 0 6px;
  color:var(--ink);
}
.about__copy{ color:var(--ink-dim); margin-top:26px; }

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

/* ===================================================================
   STATS + TESTIMONIALS
   =================================================================== */
.stats{ padding:110px 0 120px; background:var(--bg); border-top:1px solid var(--line); }
.founding{ max-width:760px; margin-bottom:90px; }
.founding__eyebrow{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:18px;
}
.founding__copy{ margin:18px 0 30px; max-width:62ch; }
.founding__points{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.founding__points li{
  font-size:12.5px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  color:var(--ink-dim);
}

.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.testimonial__quote{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 18px;
}
.testimonial__by{ font-size:13px; color:var(--ink-faint); margin:0; }
.testimonials__empty{
  grid-column:1 / -1;
  font-size:14px;
  color:var(--ink-faint);
  padding:20px 0;
}

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

/* ===================================================================
   FEATURED CONNECTIONS
   =================================================================== */
.profiles{ padding:120px 0 130px; background:var(--bg); border-top:1px solid var(--line); }
.profiles__intro{ margin-top:0; margin-bottom:0; }
.profiles__grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.profiles__empty{
  grid-column:1 / -1;
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:56px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.profiles__empty-text{
  font-size:14px;
  color:var(--ink-dim);
  margin:0;
  max-width:44ch;
}
.profile-card{
  background:transparent;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  transition:background .3s var(--ease);
  position:relative;
  z-index:1;
}
.profile-card:hover{ background:var(--bg-raised); z-index:2; box-shadow:inset 0 1px 0 var(--accent-dim); }
.profile-card:hover .profile-card__name{ color:var(--accent-2); }
.profile-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:22px;
}
.profile-card__name{
  font-family:var(--font-display);
  font-size:19px;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:6px;
}
/* Verified badge — only rendered when a profile carries verified:true.
   A checkmark, not a claim in words, so it never reads as marketing copy. */
.profile-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px; height:15px;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  flex:0 0 auto;
}
.profile-card__badge svg{ width:9px; height:9px; }
.profile-card__cat{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 11px;
}
.profile-card__loc{ font-size:12px; color:var(--ink-faint); text-align:right; }
.profile-card__desc{ font-size:14px; color:var(--ink-dim); margin:0 0 22px; flex:1; }
.profile-card__skills{
  display:flex; flex-wrap:wrap; gap:0;
  margin-bottom:26px;
  border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);
}
.profile-card__skills span{
  font-size:11px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:5px 12px;
  color:var(--ink-faint);
}
/* Request Intro — a real button (not just a hover row), matching the
   editorial bordered language the rest of the card uses. */
.profile-card__cta{
  margin-top:auto;
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--accent-dim);
  padding:12px 18px;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.profile-card__cta:hover,
.profile-card__cta:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.profile-card__cta svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.profile-card__cta:hover svg{ transform:translateX(2px); }

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

/* ===================================================================
   SUCCESS STORIES — case-study cards, same bordered-grid language as
   the profile cards above. Rendered from a JS array (script.js);
   empty by design until real stories exist — see the honest empty
   state below, matching the "Nobody's featured yet" pattern used for
   profiles rather than inventing placeholder testimonials.
   =================================================================== */
.stories{ padding:120px 0 130px; background:var(--bg); border-top:1px solid var(--line); }
.stories__intro{ margin-top:0; margin-bottom:0; }
.stories__grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.stories__empty{
  grid-column:1 / -1;
  border:1px solid var(--line);
  padding:56px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.stories__empty-text{
  font-size:14px;
  color:var(--ink-dim);
  margin:0;
  max-width:48ch;
}
.story-card{
  background:transparent;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:36px 34px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:background .3s var(--ease);
}
.story-card:hover{ background:var(--bg-raised); box-shadow:inset 0 1px 0 var(--accent-dim); }
.story-card__cat{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent-2);
}
.story-card__quote{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.005em;
  margin:0;
}
.story-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12.5px;
  color:var(--ink-faint);
  border-top:1px solid var(--line-soft);
  padding-top:16px;
}

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

/* ===================================================================
   CONTACT
   =================================================================== */
.contact{ padding:130px 0; background:var(--bg); color:var(--ink); }
.contact__grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:70px; align-items:start; }

/* Mode toggle — two plain text tabs with an underline indicator,
   not a pill switch. */
.mode-toggle{
  display:inline-flex;
  gap:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
.mode-toggle__btn{
  padding:0 0 14px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.01em;
  color:var(--ink-faint);
  position:relative;
  transition:color .3s var(--ease);
}
.mode-toggle__btn::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.mode-toggle__btn:hover{ color:var(--ink); }
.mode-toggle__btn[aria-selected="true"]{ color:var(--ink); }
.mode-toggle__btn[aria-selected="true"]::after{ transform:scaleX(1); }

.mode-panel{ display:none; }
.mode-panel.is-active{ display:grid; }

.contact__copy{ margin:18px 0 34px; }
.whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  border:1px solid var(--line);
  background:transparent;
  padding:13px 22px;
  border-radius:0;
  transition:border-color .3s var(--ease);
}
.whatsapp:hover{ border-color:var(--ink); }
.whatsapp__dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); }
.whatsapp--email{ margin-top:0; }
.whatsapp__dot--email{ background:var(--ink); }
.contact__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }

.form{ display:flex; flex-direction:column; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form__field{ display:flex; flex-direction:column; gap:8px; font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); }
.form__field input, .form__field select, .form__field textarea{
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:13px 16px;
  color:var(--ink);
  font-size:15px;
  text-transform:none;
  letter-spacing:normal;
  transition:border-color .3s var(--ease);
  resize:vertical;
}
.form__field select option{ background:var(--bg); color:var(--ink); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-faint);
  outline:none;
}
.form__fee-note{ font-size:13px; color:var(--ink-faint); margin:-6px 0 4px; }
.form__fee-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.form__submit{ margin-top:6px; align-self:flex-start; }
.form__status{ font-size:13px; color:var(--ink-dim); min-height:1em; margin:0; }
.form__status--error{ color:var(--ink); text-decoration:underline; }
.form__pay{ margin-top:16px; }
.form__pay-btn{ display:inline-flex; }
.form__pay-note{ margin-top:10px !important; }

@media (max-width:860px){
  .contact__grid{ grid-template-columns:1fr; gap:44px; }
  .form__row{ grid-template-columns:1fr; }
  .mode-toggle{ width:100%; }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{ background:var(--bg); color:var(--ink-dim); padding:70px 0 0; border-top:1px solid var(--line); }
.footer__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid var(--line);
}
.footer__mark{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:21px;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 6px;
}
.footer__mark-icon{ height:26px; width:auto; filter:grayscale(1) brightness(1.6); }
.footer__tag{ font-size:13px; margin:0; color:var(--ink-faint); }
.footer__links{ display:flex; flex-direction:column; gap:10px; font-size:13px; letter-spacing:0.02em; text-transform:uppercase; }
.footer__social{ display:flex; flex-direction:column; gap:10px; font-size:13px; letter-spacing:0.02em; text-transform:uppercase; }
.footer__links a, .footer__social a{
  color:var(--ink-dim);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.footer__links a:hover, .footer__social a:hover{
  color:var(--accent-2);
  padding-left:3px;
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  padding:26px 0;
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--ink-faint);
}
@media (max-width:600px){
  .footer__bottom{ flex-direction:column; gap:8px; }
}

/* ===================================================================
   FAQ — plain divider list, no cards.
   =================================================================== */
.faq{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.faq__grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:60px; align-items:start; }
.faq__intro .p{ margin-top:14px; }
.faq__list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.faq__item{
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  border-radius:0;
  padding:4px 0;
  transition:background .3s var(--ease);
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:22px 30px 22px 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  position:relative;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
  color:var(--ink-faint);
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.faq__item summary:hover::after{ color:var(--accent-2); }
.faq__item[open] summary::after{ content:"–"; color:var(--accent-2); }
.faq__item .p{ margin:0 0 22px; max-width:60ch; }

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

/* ===================================================================
   PRICING — two flat-rate plans, side by side. Same bordered-cell
   language as the "How it works" steps, so it reads as part of the
   same system rather than a bolted-on page.
   =================================================================== */
.pricing{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.pricing__intro{ max-width:60ch; }
.pricing__intro .p{ margin-top:14px; }

.pricing__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-top:56px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.pricing__plan{
  position:relative;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:44px 40px 48px;
  transition:background .3s var(--ease);
}
.pricing__plan:hover{ background:var(--bg-raised); }

/* The promo badge (e.g. "Most Popular") is taken out of normal flow and
   pinned as a small tag straddling the card's top edge, instead of
   sitting inline above the kicker. That way a plan with a badge and a
   plan without one both start their kicker/price/description at the
   exact same offset from the top of the card, so every card in a row
   (or stack, on mobile) lines up on the same grid regardless of which
   one happens to be flagged. */
.pricing__badge{
  position:absolute;
  top:0;
  right:40px;
  transform:translateY(-50%);
  max-width:calc(100% - 80px);
  display:inline-block;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--on-accent);
  background:var(--accent);
  padding:6px 12px;
  margin:0;
}
/* Only one of these is ever shown at once — the short label is a
   fallback for the narrow side-by-side mobile layout below, where the
   full sentence would wrap across several lines inside the pill. */
.pricing__badge-short{ display:none; }
.pricing__kicker{
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 20px;
}
.pricing__price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:0 0 18px;
}
.pricing__amount{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(34px, 3.6vw, 46px);
  letter-spacing:-0.02em;
  color:var(--ink);
}
.pricing__period{
  font-size:14px;
  color:var(--ink-faint);
}
.pricing__desc{
  color:var(--ink-dim);
  max-width:38ch;
  margin:0 0 28px;
}
.pricing__features{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 0 32px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.pricing__features li{
  font-size:14.5px;
  color:var(--ink-dim);
  padding-left:22px;
  position:relative;
}
.pricing__features li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:8px; height:8px;
  border:1px solid var(--ink);
  border-radius:50%;
}
.pricing__cta{ width:100%; justify-content:center; }
.pricing__note{
  margin:14px 0 0;
  font-size:13px;
  color:var(--ink-faint);
  line-height:1.55;
}
.pricing__note a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.pricing__foot{
  margin:18px 0 0;
  font-size:13px;
  color:var(--ink-faint);
}
.pricing__foot a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

.pricing__disclaimer{
  margin:32px 0 0;
  font-size:12.5px;
  color:var(--ink-faint);
}

@media (max-width:860px){
  .pricing__grid{ grid-template-columns:1fr; }
  .pricing__plan{ border-right:none; }

  /* The Free/Pro pair stays side by side even once the single "for
     clients" card above drops to one column — they're a comparison,
     and stacking them full-width loses that at a glance. Every card
     keeps its right-hand border here (matching the desktop version),
     so the pair reads as one fully-boxed grid rather than leaving the
     outer right edge open. */
  .pro-plans{ grid-template-columns:1fr 1fr; }
  .pro-plans .pricing__plan{ border-right:1px solid var(--line); }
}
@media (max-width:600px){
  .pricing{ padding-top:80px; padding-bottom:80px; }
  .pricing__plan{ padding:36px 26px 40px; }
  .pricing__badge{ right:26px; max-width:calc(100% - 52px); }
}

/* ------------------------------------------------------------------
   Free/Pro pair at phone widths — each card is now roughly half the
   screen, so every element inside is scaled down a size to keep the
   price, feature list and button legible instead of wrapping into a
   dense wall of text. The full badge sentence swaps for a short
   "Most popular" tag, matching how a narrow pill actually reads.
   ------------------------------------------------------------------ */
@media (max-width:600px){
  .pro-plans{ margin-top:32px; }
  .pro-plans .pricing__plan{ padding:22px 16px 26px; }

  .pro-plans .pricing__badge{
    right:12px;
    max-width:calc(100% - 24px);
    padding:5px 9px;
    font-size:9px;
    letter-spacing:0.06em;
  }
  .pro-plans .pricing__badge-full{ display:none; }
  .pro-plans .pricing__badge-short{ display:inline; }

  .pro-plans .pricing__kicker{ font-size:10px; margin-bottom:12px; }
  .pro-plans .pricing__price{ margin-bottom:12px; }
  .pro-plans .pricing__amount{ font-size:clamp(20px, 8vw, 26px); }
  .pro-plans .pricing__period{ font-size:10.5px; }
  .pro-plans .pricing__desc{ font-size:12px; line-height:1.5; margin-bottom:16px; }

  .pro-plans .pricing__features{ gap:8px; padding-top:14px; margin-bottom:18px; }
  .pro-plans .pricing__features li{ font-size:11.5px; line-height:1.4; padding-left:15px; }
  .pro-plans .pricing__features li::before{ width:6px; height:6px; top:4px; }

  .pro-plans .pricing__cta{ padding:11px 8px; font-size:10px; letter-spacing:0.04em; text-align:center; }
  .pro-plans .pricing__soon{ font-size:10px; }
  .pro-plans .pricing__note{ font-size:11px; }
}

/* ===================================================================
   PROFESSIONAL MEMBERSHIP (Free / Pro)
   Reuses the existing .pricing__* card system above; adds only what's
   new — the ecosystem strip, the join→upgrade flow, and a restrained
   elevated-surface emphasis on the Pro card (no added color).
   =================================================================== */
.pro-membership{ padding:130px 0; background:var(--bg); border-top:1px solid var(--line); }
.pro-membership__intro{ max-width:62ch; }
.pro-membership__intro .p{ margin-top:14px; }

.ecosystem{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:28px 0 0;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.ecosystem span{ color:var(--ink-hair); }

.flow{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:18px;
  margin:56px 0 0;
  padding:32px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.flow__step{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  flex:1 1 140px;
  min-width:120px;
}
.flow__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:50%;
}
.flow__label{
  font-size:13.5px;
  color:var(--ink-dim);
  max-width:14ch;
}
.flow__arrow{
  align-self:center;
  color:var(--ink-hair);
  font-size:16px;
  padding-top:4px;
}

.pro-plans{ margin-top:56px; }

.pricing__soon{
  margin:12px 0 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}
.pricing__grid--single{
  grid-template-columns:1fr;
  max-width:460px;
}

@media (max-width:860px){
  .flow{ flex-direction:column; gap:20px; }
  .flow__step{ flex-basis:auto; }
  .flow__arrow{ transform:rotate(90deg); align-self:flex-start; margin-left:14px; }
}
@media (max-width:600px){
  .pro-membership{ padding-top:80px; padding-bottom:80px; }
}

/* ===================================================================
   FOUNDER (inside About)
   =================================================================== */
.founder{
  margin-top:60px;
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding-top:50px;
  border-top:1px solid var(--line);
}
.founder__avatar{
  flex:0 0 auto;
  width:50px; height:50px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  color:var(--ink);
  border:1px solid var(--line);
}
.founder__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:17px;
  color:var(--ink);
  margin:2px 0 8px;
}
.founder__role{ font-weight:400; color:var(--ink-faint); font-size:14px; }
.founder__bio{ color:var(--ink-dim); max-width:56ch; margin:0; }

@media (max-width:600px){
  .founder{ flex-direction:column; gap:14px; }
}

/* ===================================================================
   FOOTER "GET UPDATES" MINI-FORM
   =================================================================== */
.footer__updates{ margin-top:22px; max-width:320px; }
.footer__updates label{ display:block; font-size:12px; color:var(--ink-faint); margin-bottom:10px; }
.footer__updates-row{ display:flex; gap:8px; }
.footer__updates-row input{
  flex:1;
  min-width:0;
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:11px 14px;
  color:var(--ink);
  font-size:13.5px;
}
.footer__updates-row input::placeholder{ color:var(--ink-faint); }
.footer__updates-row input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-faint);
}
.footer__updates-row button{
  flex:0 0 auto;
  background:var(--accent);
  color:var(--on-accent);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:11px 18px;
  border-radius:0;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.footer__updates-row button:hover{ background:var(--accent-2); box-shadow:0 6px 20px -6px var(--accent-glow); }
.footer__updates-status{ font-size:12px; color:var(--ink-dim); min-height:1em; margin:8px 0 0; }

@media (max-width:480px){
  .footer__updates-row{ flex-direction:column; }
  .footer__updates-row button{ width:100%; }
}

/* ===================================================================
   RESPONSIVE — small phones
   =================================================================== */
@media (max-width:600px){
  .form__field input, .form__field select, .form__field textarea,
  .footer__updates-row input{ font-size:16px; }

  .nav__inner{ padding:16px var(--gutter); }

  .hero{ padding-top:110px; padding-bottom:70px; }
  .hero__label{ margin-bottom:20px; }
  .hero__headline{ margin-bottom:18px; font-size:clamp(28px, 8.5vw, 38px); }
  .hero__headline br{ display:none; }
  .hero__lede{ font-size:clamp(22px, 6.5vw, 28px); margin-bottom:18px; }
  .hero__sub{ font-size:14.5px; margin-bottom:26px; }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }

  .h2{ font-size:clamp(24px, 6.5vw, 32px); margin-bottom:16px; }
  .join__grid .h2{ font-size:clamp(24px, 6.5vw, 32px); }

  .problem, .how, .network, .why, .web, .find, .join,
  .about, .stats, .profiles, .contact, .faq{ padding-top:64px; padding-bottom:64px; }

  .network__reveal{ padding:24px 22px; }
  .cat{ padding:18px 20px; }

  .why__list{ gap:32px 24px; }

  .contact{ padding-top:90px; padding-bottom:90px; }
  .form__submit{ width:100%; justify-content:center; }

  .example{ padding:24px 22px 20px; }
  .example__row{ gap:14px; }

  .faq__item summary{ font-size:15px; min-height:44px; display:flex; align-items:center; }

  /* Comfortable thumb-sized tap targets throughout: footer links, small
     inline arrow links, and the mode toggle all grow their hit area on
     phones without changing how they look. */
  .footer__links a, .footer__social a{
    padding:9px 0;
    margin:-9px 0;
    display:inline-block;
  }
  .pricing__note a, .pricing__foot a, .form__fee-note a, .contact__form-nudge a{
    display:inline-block;
    padding:6px 2px;
    margin:-6px -2px;
  }
  .mode-toggle__btn{ padding:12px 4px 14px; min-height:44px; }
}

/* ===================================================================
   MOBILE FLOATING WHATSAPP CTA — support channel, deliberately quieter
   than the primary "Find a Connection" action: an outline pill on the
   raised surface rather than a solid-accent fill, so it never reads as
   a second equally-weighted call to action.
   =================================================================== */
.mobile-cta{
  display:none;
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  color:var(--ink-dim);
  font-family:var(--font-display);
  font-weight:500;
  font-size:12.5px;
  box-shadow:0 8px 26px -8px rgba(0,0,0,0.6);
  transition:transform .2s var(--ease), opacity .25s var(--ease), visibility .25s, border-color .2s var(--ease), color .2s var(--ease);
}
.mobile-cta:active{ transform:scale(0.97); border-color:var(--accent-2); color:var(--ink); }
.mobile-cta__dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); flex:0 0 auto; }

/* Faded out once the footer (which already has its own WhatsApp link)
   scrolls into view, so the floating button never sits on top of the
   footer's own form/links on short mobile pages. */
.mobile-cta.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px) scale(0.97);
}

@media (max-width:760px){
  .mobile-cta{ display:inline-flex; }
}

/* ===================================================================
   PRIVACY POLICY
   =================================================================== */
.policy{ padding:150px 0 130px; background:var(--bg); border-top:1px solid var(--line); }
.policy__intro{ max-width:70ch; margin-bottom:56px; }
.policy__intro .p{ max-width:70ch; margin-top:14px; }
.policy__updated{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:18px;
}
.policy__body{ display:flex; flex-direction:column; gap:44px; max-width:76ch; }
.policy__section h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  color:var(--ink);
  margin:0 0 12px;
}
.policy__section .p{ max-width:70ch; margin:0 0 10px; }
.policy__section .p:last-child{ margin-bottom:0; }
.policy__section ul{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0; }
.policy__section ul li{
  font-size:16px;
  color:var(--ink-dim);
  padding-left:18px;
  position:relative;
  max-width:66ch;
}
.policy__section ul li::before{
  content:"";
  position:absolute; left:0; top:10px;
  width:4px; height:4px; border-radius:50%;
  background:var(--ink-faint);
}

@media (max-width:760px){
  .policy{ padding:110px 0 80px; }
}

/* ===================================================================
   Honest section — three short spoken lines. One orchestrated
   word-reveal per line on scroll.
   =================================================================== */
.honest{
  padding:70px 0 100px;
  background:var(--bg);
}
.honest__line{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(24px, 3.6vw, 38px);
  line-height:1.32;
  letter-spacing:-0.01em;
  color:var(--ink);
  max-width:19ch;
  margin:0 0 10px;
}
.honest__line--sub{
  font-weight:400;
  color:var(--ink-dim);
  font-size:clamp(18px, 2.4vw, 24px);
  max-width:34ch;
}
.honest__resolve{
  margin:22px 0 0;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ===================================================================
   "Everyone knows a guy" — problem/resolve beat, plain and centered.
   =================================================================== */
.knowaguy{
  padding:120px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.knowaguy__inner{ text-align:center; }
.knowaguy__line{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0 auto 14px;
  max-width:22ch;
}
.knowaguy__line:first-child{ font-size:clamp(28px, 4.6vw, 46px); }
.knowaguy__line--problem{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(15px, 1.9vw, 18px);
  color:var(--ink-dim);
  max-width:36ch;
}
.knowaguy__line--resolve{
  font-size:clamp(20px, 3vw, 32px);
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:22px;
}

/* Honeypot field for spam-bot filtering — kept out of the visual
   layout and off-screen for assistive tech, never display:none so
   it still trips up bots that skip hidden fields. */
.hp-field{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  left:-9999px !important;
}