/* Circl, circlapp.org
   Editorial rather than card based. Flat colour only, no gradients.
   Structure comes from hairline rules and a left meta column, not from
   floating boxes with shadows, which is the look this is avoiding. */

:root {
  --ink:       #0E2A1B;
  --ink-2:     #1B3C29;
  --cream:     #F4F1E8;
  --cream-2:   #EAE6D8;
  --paper:     #FFFFFF;
  --green:     #2F7D4B;
  --green-br:  #5BC174;
  --text:      #16261D;
  --body:      #2C3A31;
  --muted:     #4C594F;
  --rule:      #D6D1C0;
  --rule-dk:   #2A4A36;
  --wrap:      1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face { font-family: Clash; src: url('fonts/ClashDisplay-Medium.otf')   format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Clash; src: url('fonts/ClashDisplay-Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Clash; src: url('fonts/ClashDisplay-Bold.otf')     format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Nunito; src: url('fonts/Nunito-Regular.ttf')  format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Nunito; src: url('fonts/Nunito-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Nunito; src: url('fonts/Nunito-Bold.ttf')     format('truetype'); font-weight: 700; font-display: swap; }

body {
  background: var(--cream); color: var(--body);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Larger and looser than before. 16.5/1.6 is fine for UI, tight for prose. */
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: Clash, sans-serif; letter-spacing: -0.025em;
                       font-weight: 700; color: var(--ink); line-height: 1.06; }
a { color: var(--ink); text-decoration: none; }
p a, .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
p a:hover, .prose a:hover { text-decoration-color: var(--green); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }

/* Metadata labels. Uppercase, tracked, small. Used instead of coloured pills. */
.label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
/* Replaced .num, which set a decorative 01/02/03. The number is kept only
   where the items are a sequence somebody follows, and reads as a step. */
.step { font-family: Clash, sans-serif; font-weight: 600; font-size: 12px;
        letter-spacing: .06em; color: var(--green); text-transform: uppercase;
        white-space: nowrap; }
/* The divider only appears when a step precedes the label, so pages that
   dropped the number do not render a stray bullet. */
.step + .label::before { content: "\00B7"; margin-right: 10px; color: var(--rule); }

.icon { width: 19px; height: 19px; flex: 0 0 19px; stroke: currentColor;
        fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Header ─────────────────────────────────────────────────────────── */
header { border-bottom: 1px solid var(--rule); background: var(--cream); }
.nav { display: flex; align-items: center; height: 74px; gap: 40px; }
.nav .mark { height: 24px; filter: brightness(0); opacity: .9; }
.nav-links { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: 15px; font-weight: 600; color: var(--muted);
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--ink); border-bottom-color: var(--green); }
.nav-links .nav-join { display: none; }

/* ── Features dropdown ──────────────────────────────────────────────── */
.has-menu { position: relative; display: flex; align-items: center; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  font-family: Nunito, sans-serif; font-size: 15px; font-weight: 600; color: var(--muted);
  cursor: pointer; padding: 0 0 2px; border-bottom: 1.5px solid transparent;
}
.menu-btn:hover { color: var(--ink); }
.menu-btn.on { color: var(--ink); border-bottom-color: var(--green); }
.menu-btn .caret { width: 15px; height: 15px; flex-basis: 15px; transition: transform .15s; }
.menu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.menu-panel {
  display: none; position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%); min-width: 230px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: 8px; z-index: 60;
}
.menu-panel.open { display: block; }
.menu-panel a {
  display: block; padding: 10px 12px; font-size: 15px; font-weight: 600;
  color: var(--muted); border-radius: 6px; border: 0;
}
.menu-panel a:hover { background: var(--cream); color: var(--ink); }
.menu-panel a.on { color: var(--ink); background: var(--cream); }

/* ── Features overview grid ─────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
         padding: 54px 0 64px; }
.fcard { display: flex; flex-direction: column; border: 1px solid var(--rule);
         border-radius: 6px; overflow: hidden; background: var(--paper); }
.fcard:hover { border-color: var(--ink); text-decoration: none; }
.fcard:hover .fcard-media img { transform: translateY(-6px); }

/* A phone screenshot is about 1:2.2. Dropped whole into a card it makes a
   tower, and three towers of different content length line up badly. Instead
   each card gets a fixed window with the top of the device peeking up from the
   bottom, so every card is the same height and the screenshots still read. */
.fcard-media {
  height: 250px; background: var(--cream-2); border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
  padding-top: 20px;
}
.fcard-media img {
  display: block; width: 232px; border: 1px solid var(--rule); border-bottom: 0;
  border-radius: 20px 20px 0 0; transition: transform .18s ease;
}
.fcard-body { padding: 20px 22px 24px; flex-grow: 1; }
.fcard-body .label { display: block; margin-bottom: 8px; }
.fcard-body strong { display: block; font-family: Clash, sans-serif; font-size: 20px;
                     color: var(--ink); line-height: 1.15; }
.fcard-body p { font-size: 15.5px; color: var(--body); margin-top: 8px; line-height: 1.6; }

@media (max-width: 960px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fgrid { grid-template-columns: 1fr; } }
.nav-cta { font-size: 15px; font-weight: 700; color: var(--ink);
           border-bottom: 1.5px solid var(--green); padding-bottom: 2px; }

/* Hidden on desktop, where the links are already visible. */
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule);
              border-radius: 999px; width: 44px; height: 44px; cursor: pointer;
              align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle .icon { width: 21px; height: 21px; flex-basis: 21px; }

/* ── Buttons: square, flat, no shadow ───────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: Nunito, sans-serif;
       font-weight: 700; font-size: 15.5px; padding: 13px 26px; border-radius: 999px;
       border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* ── Page head ──────────────────────────────────────────────────────── */
.phead { padding: 78px 0 58px; border-bottom: 1px solid var(--rule); }
.phead .label { margin-bottom: 20px; }
.phead h1 { font-size: 60px; line-height: .98; max-width: 15ch; }
.phead p { font-size: 19.5px; color: var(--body); margin-top: 24px; max-width: 46ch; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: 66px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.hero h1 { font-size: 74px; line-height: .95; text-transform: lowercase; }
.hero h1 .accent { color: var(--green); }
.hero .lede { font-size: 20px; color: var(--body); margin-top: 26px; max-width: 34ch; }
.hero-cta { display: flex; gap: 14px; margin: 34px 0 60px; flex-wrap: wrap; align-items: center; }
/* The hero screenshot sits in a device shell turned slightly away from the
   viewer. The perspective is on the wrapper rather than the phone, so the
   rotation reads as depth instead of a skew. The screenshot already carries
   iOS's own status bar and dynamic island, so none is drawn here. */
.device-stage { perspective: 2400px; display: flex; justify-content: flex-end; }
.iphone {
  width: 300px; padding: 11px; background: #12140F; border-radius: 52px;
  /* One axis only. A z-tilt on top of a y-rotation reads as a phone that is
     falling over rather than one turned to the side, and an x-rotation on a
     tall object exaggerates the near corner. */
  transform: rotateY(-13deg);
  transform-origin: 50% 50%;
  /* Cast away from the turn, so the light direction agrees with the rotation. */
  box-shadow: 26px 30px 56px rgba(14, 42, 27, .18);
  position: relative;
}
/* Volume and power, on the edge whose side face the rotation actually
   exposes: turning the right edge toward the viewer reveals the left flank. */
.iphone::before, .iphone::after {
  content: ""; position: absolute; left: -3px; width: 3px;
  background: #2A2D26; border-radius: 3px 0 0 3px;
}
.iphone::before { top: 150px; height: 34px; }
.iphone::after  { top: 198px; height: 58px; }
.iphone img { display: block; width: 100%; border-radius: 42px; }

@media (max-width: 960px) {
  .device-stage { justify-content: center; perspective: none; }
  .iphone { transform: none; box-shadow: 0 18px 40px rgba(14, 42, 27, .16); }
}

/* ── The three negations ────────────────────────────────────────────────
   Replaces a numbered 01/02/03 row stack. Two things were wrong with that:
   the numbers implied a sequence these three statements do not have (they
   are parallel claims, not steps), and each row spent a 200px column and a
   full screen-height band saying one short thing, leaving the right third of
   the page empty.

   Three columns instead, divided by the same hairline the rest of the page
   uses, so the structure itself says "three of a kind". The negation is the
   heading, because what Circl leaves out is the whole proposition. */
.nots { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
        padding: 46px 0 50px; }
.nots-lead { font-size: 17px; color: var(--muted); margin-bottom: 34px; }
.nots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.not { padding: 0 34px; border-left: 1px solid var(--rule); }
.not:first-child { padding-left: 0; border-left: 0; }
.not:last-child { padding-right: 0; }
.not h3 { font-size: 27px; line-height: 1.1; margin-bottom: 12px; color: var(--ink); }
.not p { color: var(--body); font-size: 15.5px; line-height: 1.65; }

@media (max-width: 860px) {
  .nots { padding: 34px 0 36px; }
  .nots-lead { margin-bottom: 24px; }
  .nots-grid { grid-template-columns: 1fr; gap: 0; }
  /* Stacked, the vertical rules become horizontal ones between the three:
     the divider has to follow the axis the items are laid out on. */
  .not { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .not:first-child { padding-top: 0; border-top: 0; }
  .not h3 { font-size: 23px; }
}

/* ── Rule rows: the main structural device ──────────────────────────── */
/* The meta is an eyebrow above the prose, not a column beside it.
   As a 170-200px column it held two short lines of small text against a row
   whose height was set by a tall screenshot, so most of it was empty, and the
   gap pushed the prose into a narrow middle channel. Running it along the top
   gives the text the full column and removes the empty one entirely. */
.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 1fr; gap: 0;
       padding: 38px 0; border-bottom: 1px solid var(--rule); }
.row-meta { display: flex; flex-direction: row; align-items: baseline;
            gap: 10px; margin-bottom: 14px; }
.row-body h3 { font-size: 25px; margin-bottom: 10px; }
.row-body p { color: var(--body); max-width: 60ch; }
.row-body ul { list-style: none; margin-top: 18px; }
.row-body li { display: flex; gap: 11px; align-items: flex-start; margin-top: 11px; font-size: 16px; line-height: 1.6; }
.row-body li .icon { color: var(--green); margin-top: 3px; width: 16px; height: 16px; flex-basis: 16px; }

/* A rule row that also carries a screenshot. Three columns rather than two,
   so the meta label, the prose and the image stay on one baseline. */
/* Two columns, and the screenshot is vertically centred against the prose.
   Top-aligning a 550px image beside 200px of text left a wall of empty space
   under the words; centring it balances the row at any text length. */
/* grid-template-rows is not optional here. The screenshot spans both rows,
   and with auto-sized rows a tall item spanning two of them grows BOTH — so
   the meta row inflated to share the image's height and dropped the heading
   halfway down the row. `auto 1fr` pins the eyebrow to its own content and
   gives the remainder to the prose. */
.row.has-shot { grid-template-columns: minmax(0,1fr) 290px; gap: 0 54px;
                grid-template-rows: auto 1fr;
                grid-template-areas: "meta shot" "body shot"; align-items: start; }
.row.has-shot .row-meta { grid-area: meta; }
.row.has-shot .row-body { grid-area: body; }
.row.has-shot .row-shot { grid-area: shot; align-self: center; }
.row.has-shot .row-shot img { width: 100%; border: 1px solid var(--rule);
                              border-radius: 4px; display: block; }

@media (max-width: 860px) {
  .row.has-shot { grid-template-columns: 1fr; gap: 0;
                  grid-template-areas: "meta" "body" "shot"; }
  .row.has-shot .row-shot { margin-top: 22px; max-width: 320px; }
}

/* Evenly weighted trio, used where no single screenshot leads. */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
         padding: 52px 0 58px; border-bottom: 1px solid var(--rule); }
.strip figure img { width: 100%; border: 1px solid var(--rule); border-radius: 4px; display: block; }
.strip figcaption { margin-top: 14px; }
.strip figcaption .label { display: block; margin-bottom: 5px; }
.strip figcaption p { font-size: 15.5px; color: var(--body); margin-top: 4px; line-height: 1.6; }
.strip figcaption strong { font-family: Clash, sans-serif; font-size: 17.5px; color: var(--ink); }

@media (max-width: 960px) {
  .row.has-shot { grid-template-columns: 1fr; }
  .row.has-shot .row-shot img { max-width: 260px; }
  .strip { grid-template-columns: 1fr; gap: 34px; }
  .strip figure img { max-width: 260px; }
}

/* ── Feature blocks with a screenshot ───────────────────────────────── */
.feature { display: grid; grid-template-columns: 1fr 300px; gap: 64px;
           align-items: center; padding: 58px 0; border-bottom: 1px solid var(--rule); }
.feature.flip { grid-template-columns: 300px 1fr; }
.feature.flip .feature-media { order: -1; }
.feature h3 { font-size: 30px; margin: 12px 0 12px; }
.feature p { color: var(--body); max-width: 54ch; }
.feature ul { list-style: none; margin-top: 20px; }
.feature li { display: flex; gap: 11px; align-items: flex-start; margin-top: 11px; font-size: 16px; line-height: 1.6; }
.feature li .icon { color: var(--green); margin-top: 3px; width: 16px; height: 16px; flex-basis: 16px; }
.feature-media img { width: 100%; border: 1px solid var(--rule); border-radius: 4px; display: block; }

/* ── Statement band ─────────────────────────────────────────────────── */
.band { background: var(--ink); color: var(--cream); padding: 74px 0; }
.band h2 { color: var(--cream); font-size: 42px; line-height: 1.06; max-width: 22ch; }
.band p { color: rgba(244,241,232,.86); margin-top: 20px; max-width: 54ch; font-size: 18px; }
.band .label { color: var(--green-br); }
.band-rows { margin-top: 52px; border-top: 1px solid var(--rule-dk); }
.band-row { display: grid; grid-template-columns: 200px 1fr; gap: 48px;
            padding: 30px 0; border-bottom: 1px solid var(--rule-dk); }
.band-row h3 { color: var(--cream); font-size: 21px; }
.band-row p { color: rgba(244,241,232,.82); margin-top: 6px; font-size: 16px; line-height: 1.65; }
.band-row .icon { color: var(--green-br); }

/* Four controls as a quadrant, divided by hairlines rather than boxed into
   cards. A vertical list of four reads as a queue; a 2x2 shows the set at a
   glance, which is what the heading claims. No borders on the outer edges, so
   it reads as a division of the band rather than a table dropped onto it. */
.controls {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 54px; border-top: 1px solid var(--rule-dk);
}
.control { padding: 36px 44px 38px 0; border-bottom: 1px solid var(--rule-dk); }
.control:nth-child(odd) { padding-right: 52px; border-right: 1px solid var(--rule-dk); }
.control:nth-child(even) { padding-left: 52px; }
.control:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 8px; }
.control .icon { color: var(--green-br); width: 24px; height: 24px; flex-basis: 24px; }
.control h3 {
  color: var(--cream); font-size: 21px; margin: 16px 0 10px; line-height: 1.2;
}
.control p { color: rgba(244,241,232,.82); font-size: 16px; line-height: 1.65; max-width: 40ch; }
.control .tag {
  display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-br);
}

@media (max-width: 860px) {
  .controls { grid-template-columns: 1fr; }
  .control, .control:nth-child(odd), .control:nth-child(even) {
    padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--rule-dk);
  }
  .control:last-child { border-bottom: 0; }
}

/* ── Early access ───────────────────────────────────────────────────── */
.join { padding: 74px 0; border-bottom: 1px solid var(--rule); }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.join h2 { font-size: 38px; line-height: 1.05; }
.join p.sub { color: var(--muted); margin-top: 16px; max-width: 44ch; }
.join-form { display: flex; gap: 10px; flex-wrap: wrap; }
/* Pill, to match .btn's border-radius:999px sitting beside it. The horizontal
   padding goes up with it: at 15px the text sat inside the curve and looked
   cramped against the rounded ends. */
.join-form input {
  flex: 1 1 260px; padding: 13px 22px; font-family: Nunito, sans-serif; font-size: 16px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--text);
}
.join-form input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.form-msg { margin-top: 14px; font-size: 15px; min-height: 22px; }
.form-msg.err { color: #A7382C; }
.form-msg.ok  { color: var(--green); font-weight: 700; }
.join-fine { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* ── CTA strip: closes every page except join itself ────────────────── */
.cta-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
             background: var(--cream-2); padding: 46px 0; }
.cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.cta-grid h2 { font-size: 29px; margin-top: 12px; max-width: 24ch; line-height: 1.1; }

/* ── Join page ──────────────────────────────────────────────────────── */
/* The one dark page on the site. Flat ink, no gradient: the contrast against
   every other page is what gives it weight. */
.join-stage { background: var(--ink); color: var(--cream); overflow: hidden; }
.join-grid2 { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
              /* Top and bottom only: this sits on a .wrap, and the shorthand
                 zeroed the wrap's 30px sides, so on phones the copy ran into
                 the screen edge. */
              align-items: center; padding-top: 88px; padding-bottom: 92px; }
.join-stage .label { color: var(--green-br); }
.join-stage h1 { color: var(--cream); font-size: 56px; line-height: 1.0;
                 margin-top: 20px; max-width: 15ch; }
.join-stage .lede { font-size: 19.5px; color: rgba(244,241,232,.86);
                    margin-top: 22px; max-width: 46ch; }

/* Form inverted for the dark ground. */
.join-stage .join-form { margin-top: 34px; max-width: 480px; }
.join-stage .join-form input {
  background: var(--cream); border-color: var(--cream); color: var(--text);
}
.join-stage .join-form input::placeholder { color: #8A948C; }
.join-stage .join-form input:focus { outline: 2px solid var(--green-br); outline-offset: 2px; }
.join-stage .btn-primary { background: var(--green-br); color: var(--ink); }
.join-stage .btn-primary:hover { background: #77CE8C; }
.join-stage .form-msg.ok { color: var(--green-br); }
.join-stage .form-msg.err { color: #F0A79C; }
.join-stage .join-fine { color: rgba(244,241,232,.68); }

/* Assurances under the form, on one line. */
.join-points { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px;
               padding-top: 24px; border-top: 1px solid var(--rule-dk); }
.join-points div { display: flex; gap: 9px; align-items: center;
                   font-size: 14.5px; color: rgba(244,241,232,.72); }
.join-points .icon { color: var(--green-br); width: 17px; height: 17px; flex-basis: 17px; }

/* Three devices fanned, sharing the hero's perspective treatment. */
.fan { position: relative; height: 560px; perspective: 2400px; }
.fan .iphone { position: absolute; width: 232px; padding: 9px; border-radius: 42px;
               box-shadow: 22px 26px 50px rgba(0,0,0,.42); }
.fan .iphone img { border-radius: 34px; }
.fan .iphone::before, .fan .iphone::after { display: none; }
.fan .f1 { left: 0;    top: 92px;  transform: rotateY(-15deg) scale(.88); z-index: 1; }
.fan .f2 { left: 150px; top: 18px; transform: rotateY(-13deg);            z-index: 3; }
.fan .f3 { left: 316px; top: 118px; transform: rotateY(-11deg) scale(.84); z-index: 2; }

@media (max-width: 1080px) {
  .fan { height: 480px; }
  .fan .iphone { width: 196px; }
  .fan .f2 { left: 128px; }
  .fan .f3 { left: 266px; }
}
@media (max-width: 960px) {
  .join-grid2 { grid-template-columns: 1fr; gap: 44px; padding-top: 62px; padding-bottom: 68px; }
  .join-stage h1 { font-size: 40px; }
  /* The fan needs width it does not have on a phone; one device reads better
     than three crushed together. */
  .fan { height: 420px; perspective: none; }
  .fan .iphone { position: static; transform: none; width: 240px; margin: 0 auto; }
  .fan .f1, .fan .f3 { display: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer { padding: 56px 0 38px; background: var(--cream-2); }
.foot { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.foot h4 { font-family: Nunito, sans-serif; font-size: 11.5px; font-weight: 700;
           text-transform: uppercase; letter-spacing: .14em; color: var(--ink); margin-bottom: 15px; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--muted); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot-mark { height: 22px; filter: brightness(0); opacity: .85; margin-bottom: 14px; }
.foot-about { font-size: 15px; color: var(--muted); max-width: 30ch; }
.foot-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--rule);
               display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
               font-size: 13.5px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid, .feature, .feature.flip, .join-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .feature-media { order: 0; }
  .row, .band-row { grid-template-columns: 1fr; gap: 14px; }
  .hero h1 { font-size: 52px; }
  .phead h1 { font-size: 44px; }
  .band h2 { font-size: 33px; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 14px; }
  .shot { margin: 0 auto; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 42px; }
  .phead h1 { font-size: 36px; }
  .nav { gap: 14px; height: 62px; }
  .foot { grid-template-columns: 1fr; }

  /* The links move into a panel under the header rather than vanishing.
     Hiding them was fine when every item was an anchor on one page; now
     each is its own page, so hiding them removes the only way to reach them. */
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--cream);
    border-bottom: 1px solid var(--rule); padding: 6px 30px 18px; z-index: 40;
    /* The base rule centres items for the horizontal bar. Left as-is in a
       column it centres each link and shrinks it to its text, so the rules
       between them become short floating dashes. */
    align-items: stretch;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--rule);
    border-top: 0; min-height: 44px; display: flex; align-items: center;
  }
  .nav-links a.on { color: var(--ink); border-bottom-color: var(--rule); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .nav-join { display: flex; font-weight: 700; color: var(--green); }

  /* No hovering on a phone, and no room for a floating panel: the features
     sit inline, indented under their own heading. */
  .has-menu { display: block; }
  .menu-btn { width: 100%; justify-content: space-between; font-size: 17px;
              padding: 14px 0; min-height: 44px; border-bottom: 1px solid var(--rule); }
  .menu-panel { position: static; transform: none; display: none; min-width: 0;
                border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
                padding: 4px 0 10px; background: none; }
  .menu-panel.open { display: block; }
  .menu-panel a { padding: 11px 0 11px 16px; font-size: 15.5px; min-height: 44px;
                  display: flex; align-items: center; }
  .menu-panel a:hover, .menu-panel a.on { background: none; }

  header { position: relative; }

  /* Footer links were 20px tall: fine to click, too small to tap. Padding
     rather than font size, so the footer reads the same and the target does
     not. The list margin goes, or the footer doubles in height. */
  .foot a { display: inline-block; padding: 12px 0; }
  .foot li { margin-bottom: 0; }
  .nav > a:first-child { display: flex; align-items: center; min-height: 44px; }

  /* Full width targets read better than two odd-sized pills on a phone. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .cta-grid { grid-template-columns: 1fr; gap: 20px; }
  .cta-act .btn { width: 100%; justify-content: center; }
  .join-form { flex-direction: column; }
  /* flex-basis applies to the main axis, so the base `flex: 1 1 260px` turns
     into a 260px HEIGHT once this container is a column. The field rendered as
     a cream slab with the placeholder stranded in the middle of it. */
  .join-form input, .join-form .btn { width: 100%; flex: 0 0 auto; }
  .join-form .btn { justify-content: center; }
}