/* ============================================================
   PeerFlow — landing page only.

   This file styles index.html and nothing else. The rest of the
   site (signup, login, the app pages) still uses styles.css.
   Keeping them apart means changing the landing page can't break
   the signup flow, and vice versa.
   ============================================================ */

:root{
  --ink:#171A2E;
  --ink-soft:#4A4E68;
  --ink-faint:#82869C;
  --paper:#F3F2F6;
  --card:#FFFFFF;
  --line:#E2E1E9;
  --live:#0FA36B;
  --live-soft:#E3F4EC;
  --live-deep:#0A7350;
  /* The band that closes the page. Darker than --live-deep so white text
     sits on it comfortably at body size. */
  --deep:#12352C;
  /* One typeface for the whole page. Loaded as a variable font over the
     400-800 range, so headings and body copy come from a single file.
     The fallback is the same stack styles.css uses. */
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

/* .um-wrap and friends are display:flex, which beats the hidden attribute's
   own display:none. Without this a logged-out visitor sees a stray account
   chip that JS has already marked hidden. */
[hidden]{display:none!important}


body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* 1320 is the number the signed-in app already uses for main and the top
   bar, so the site stops changing width the moment you log in. At 1060 a
   1512-wide screen was 30% empty margin and a 1920 one was 45%, while the
   pictures in how-it-works — drawn to be read at that size — were stuck at
   327px. The gutter matches the app's 32px too. */
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}

/* Keyboard users need to see where they are. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--live-deep);
  outline-offset:3px;
  border-radius:4px;
}

.mono{
  font-family:var(--mono);font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- nav ---------- */
/* space-between does nothing once the two sides add up to more than the row,
   so the gap is there to guarantee the wordmark and the buttons never touch.
   position:relative is what the mobile panel hangs off. */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 0}
/* The wordmark keeps its own greens (#0b8f66 mark, #097a57 "flow") rather
   than the page's --live — it's the brand, not an accent. */
.logo{display:flex;align-items:center;gap:11px;font-weight:400;font-size:20px;letter-spacing:-0.015em}
.logo svg{display:block;flex:0 0 auto;width:32px;height:32px}
.logo b{font-weight:700;color:#097a57}
.nav-right{display:flex;align-items:center;gap:28px;font-size:15.5px;color:var(--ink-soft)}

/* Lifts on hover, presses back down on click — the same behaviour the app
   uses, so the two surfaces feel like one product. */
.btn{
  display:inline-block;color:#fff;padding:11px 20px;line-height:1.2;
  border-radius:10px;font-size:14px;font-weight:600;border:0;cursor:pointer;
  font-family:var(--body);text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,#2B2F49,var(--ink));
  box-shadow:0 1px 2px rgba(23,26,46,.3), inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .15s ease,box-shadow .15s ease,transform .1s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#232741,#0D0F1E);
  box-shadow:0 4px 12px rgba(23,26,46,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(23,26,46,.26)}
.btn-sm{padding:11px 20px;font-size:15px}

/* ---------- mobile navigation ----------
   Off entirely above the breakpoint. Everything here is switched on by the
   one @media block near the bottom of this file, so there is no width where
   the inline row and the panel are both on screen. */
.menu-btn,.nav-menu{display:none}

/* A real button with a real word in it. Outlined rather than filled: the hero
   already has the dark primary button, and two of those in the first 200px of
   a phone screen is one too many. 40px tall with the padding below, which is
   a comfortable thumb target. */
.menu-btn{
  align-items:center;gap:8px;flex:0 0 auto;
  padding:10px 14px;border-radius:10px;cursor:pointer;
  font-family:var(--body);font-size:15px;font-weight:600;line-height:1.2;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(23,26,46,.06);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.menu-btn svg{width:16px;height:16px;flex:0 0 auto}
/* Open state is carried by the icon swapping to a cross as well as by the
   colour, so it does not depend on seeing green. */
.menu-btn .menu-ico-x{display:none}
.menu-btn[aria-expanded="true"]{
  color:var(--live-deep);background:var(--live-soft);border-color:#BFE6D5;
}
.menu-btn[aria-expanded="true"] .menu-ico{display:none}
.menu-btn[aria-expanded="true"] .menu-ico-x{display:block}

/* The panel. Same 14px radius and the same shadow as the account dropdown in
   the app, so the two surfaces open the same way. Anchored to the right edge
   of .nav and capped so it can never reach the gutters. */
.nav-menu{
  position:absolute;top:100%;right:0;z-index:60;
  width:min(260px,calc(100vw - 64px));
  flex-direction:column;gap:2px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 34px rgba(23,26,46,.13);
  animation:navpop .14s ease-out;
}
/* The whole row is the target, not just the words in it. */
.nav-menu a{
  display:block;padding:12px 13px;border-radius:9px;
  font-size:15px;font-weight:600;color:var(--live-deep);
}
.nav-menu a:hover{background:var(--live-soft)}
/* The primary action, full width at the foot of the panel. */
.nav-menu a.btn{
  margin-top:6px;text-align:center;color:#fff;
  padding:13px;font-size:15px;border-radius:10px;
}
.nav-menu a.btn:hover{transform:none}
/* Killed wholesale by the prefers-reduced-motion rule at the end of the file. */
@keyframes navpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
/* The gap carries this, not the ratio and not the type size.

   Measured rather than guessed: "person who shows up." is 658px at 55px, and
   the old split gave the copy column 623 at 1440, so the headline fell into
   three lines with a stubby middle one. Shrinking the type fixes it by making
   the headline smaller. Taking the width off the session card fixes it by
   making the card smaller. Cutting the gap fixes it by taking the space from
   nowhere — 70px between two columns was more than the hero needed.

   1.08/0.92 at a 28px gap: two lines at 1366, 1440 and 1920, the type still
   55px, and the card 565px where it was 563 — very slightly wider than
   before. 1280 and below still take three lines; there is no split that
   rescues those without shrinking something. Below 900 the hero is one
   column and none of this applies.

   All of the above was measured against "person who shows up.", which is two
   headlines ago, and the last line of it is no longer true: the headline is one
   short sentence now and takes two lines at 1024 as well. The ratio is left
   where it is because it was never the thing holding the wrap — re-measured
   with the current copy, widening the copy column to 1.3fr changed the line
   count at no width at all. */
.hero{
  display:grid;grid-template-columns:1.08fr .92fr;gap:28px;
  align-items:center;padding:82px 0 92px;
}
/* text-wrap:balance, back again, and the note it replaces is worth keeping
   because the answer flipped when the copy did. It was removed because the
   headline of the day — "Learn IT together, not alone" — balanced into three
   short lines where greedy filling gave a clean two-line break at the comma.

   The headline is now one sentence and five words, and greedy is the one that
   breaks it badly: measured at 1280 through 2000, filling gives lines of 608px
   and 233px — "Find your tech study" over a lone "partner." — where balance
   gives 425 and 416. Two lines either way at every width, so this costs no
   height; it only decides whether the second line is a stub. At 1024 and below
   the column is narrow enough that the two agree.

   The size is not the lever for how this wraps — the column width is. See the
   note on .hero above.

   --live-deep, not --live: the bright accent green is 2.9:1 against this
   background, which fails even the relaxed large-text bar, and a headline is
   the one thing on a page nobody should have to squint at. --live-deep is
   5.26:1 and reads as the same brand green. This used to be an inline style on
   index.html with a note saying it belonged here; it now is here. */
h1{
  font-size:clamp(34px,4.6vw,55px);line-height:1.06;
  letter-spacing:-0.03em;font-weight:800;margin:0 0 20px;
  color:var(--live-deep);text-wrap:balance;
}
/* A grid column is min-content wide by default, so one long unbroken word in
   the headline would push the card off the side rather than wrap. */
.hero-copy{min-width:0}
/* 42ch, which used to be a fix for a longer line than this one: the lede was a
   full sentence about the path, the match and the four weeks, and 38ch broke it
   into four short lines that read like a list. It had grown to four lines even
   at 42 by the time it was measured. The keyword phrases have since come out —
   they were already in this page's meta description word for word, which is the
   text a search result actually shows — and two sentences now sit on two lines,
   which is what the cap was ever for. */
.lede{font-size:18px;color:var(--ink-soft);margin:0 0 30px;max-width:42ch}

/* One way in. There was a second, quieter button beside it pointing at
   how-it-works; it promised matching the product doesn't do, and a hero reads
   harder with one action in it than with two. The row stays as the wrapper —
   it carries the hero button's size and the gap down to the trust line — and
   .btn-ghost went with the button it styled. */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 20px}
.cta-row .btn{font-size:15px;padding:13px 22px}

/* Three plain facts under the button. No numbers — there is nothing to count
   yet, and an invented one would be the first dishonest thing on the page.

   --ink-soft, not --ink-faint. Faint is 3.23:1 on paper, which is under the
   4.5:1 floor at this size, and it was the one thing in this hero that really
   was too pale rather than merely too much — the lede beside it is 7.30:1 and
   was only ever guilty of being four lines long. Soft is that same 7.30:1 and
   still sits a clear step below the lede at 13.5px. */
.trust{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}

/* ---------- session card ----------
   Four blocks now the cycle strip has gone: the state, the two faces, the two
   facts, the clock. Everything below is a few pixels looser than it was — the
   card lost about seventy pixels of height with the strip, and keeping the old
   tight rhythm in a shorter card left it looking clipped rather than calm. */
.session{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.session-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.live{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--live-deep);
  background:var(--live-soft);padding:5px 10px;border-radius:999px;
}
.live b{width:6px;height:6px;border-radius:50%;background:var(--live);display:block}

/* Two camera tiles side by side — theirs plain, yours in the brand green.
   16:10 rather than 4:3 keeps the card from towering over the headline. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{
  position:relative;aspect-ratio:16/10;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:#EDECF2;border:1px solid var(--line);
}
.tile.you{background:var(--live-soft);border-color:#BFE6D5}
.tav{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:500;font-size:14px;letter-spacing:0.02em;
}
.tname{
  position:absolute;left:9px;bottom:8px;font-family:var(--mono);font-size:11px;
  color:var(--ink);background:#FFFFFFD9;border-radius:6px;padding:2px 8px;
}

/* Same label/value row as the rest of the site. */
.rows{margin-top:20px;display:grid;gap:14px;font-size:14px}
.row{display:flex;justify-content:space-between;align-items:center}
.row span{color:var(--ink-soft)}
.row b{font-weight:600}

/* Pomodoro: a small dial beside the time, not a big ring floating in space.
   It stays at 38px with a 16px readout even though there is room for more —
   at 52px with a 22px readout it was the last thing you saw and the loudest,
   which made a session look like a stopwatch. home.js drives the arc via
   stroke-dashoffset; 270.18 is the circumference of the r=43 circle in the
   SVG, and that stays true at any rendered size because it is viewBox units. */
.pom{
  display:flex;align-items:center;gap:12px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.pom-ring{width:38px;height:38px;flex:0 0 auto}
.pom-ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.pom-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.pom-track{stroke:var(--live-soft)}
.pom-arc{stroke:var(--live);stroke-dasharray:270.18;stroke-dashoffset:0}
.pom-txt b{
  display:block;font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;line-height:1.2;
}
.pom-txt span{font-size:12.5px;color:var(--ink-soft)}

/* ---------- sounds familiar? ----------
   No boxes and no word above the sentence. Three rules, a small drawing at
   the head of each line, and the sentence at 19px — the largest body type on
   the page outside the hero, because these three lines are the whole section.

   Boxes were the wrong instinct here. This section is surrounded by cards —
   four in how-it-works, eight learning paths — so a third deck read as more
   of the same and the problem stopped registering as a different kind of
   statement. Rules say "these three things" without claiming to be another
   card deck.

   The drawings replace the kickers that used to sit here (Drop-off, Matching,
   Momentum). Each one shows the sentence rather than labelling it: a climb
   that rises and then dots away, one person beside the pale outline of the
   partner who is not there, five weeks with two of them practised. They share
   a 56×32 box so the three sit on one baseline down the left.

   It sits last now, between the learning paths and the founder note, so it
   reads as the reason rather than the pitch: here is what happens on your
   own, and then a person saying why they built the alternative.

   A white band, full bleed, the same way the closing band is one — see the
   long note by the bands further down for why it is a shadow and a clip-path
   rather than a background on a wider element.

   This is the page's first white band, and putting it here is what set the
   rest of the order: grey hero, white here, grey how-it-works, white paths,
   dark green close. No two fields of the same colour touch anywhere down the
   page. how-it-works used to hold this white and gave it up in the swap.

   92 both ways rather than .sec's 110. Grey sits on both sides of this band,
   so it wants to read as one even block, and three ruled lines are a lighter
   thing to frame than a row of cards. */
#problem{
  background:var(--card);
  box-shadow:0 0 0 100vmax var(--card);
  clip-path:inset(0 -100vmax);
  padding:92px 0;
}
#problem .sec-head{margin-bottom:26px}
.probs{list-style:none;margin:0;padding:0}
/* The last row needs the closing rule, or the list trails off with its bottom
   edge missing. #DEDDE6 rather than var(--line) for the same reason the
   how-it-works cards restate their border: --line is picked to read against
   the grey, and on white it goes faint. */
.prob{display:flex;align-items:center;gap:26px;padding:26px 4px;border-top:1px solid #DEDDE6}
.prob:last-child{border-bottom:1px solid #DEDDE6}
.prob svg{width:100px;flex:0 0 100px;display:block}
/* Capped at 640 rather than left to run the full 1320: a single line of type
   that wide is a paragraph you scan rather than a sentence you read. */
.prob h3{
  margin:0;font-size:19px;font-weight:600;line-height:1.45;
  letter-spacing:-0.015em;color:var(--ink);max-width:640px;text-wrap:pretty;
}

/* ---------- how it works ---------- */
/* Four cards, picture on top. The pictures are made to be read at this width
   — roughly 300px on a full-size screen — rather than being screenshots of
   the real pages shrunk until the words turn into texture. */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.how-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
}
/* One shape for all four picture areas. The two PNGs are 1280×841 and
   1280×813, so without this the third card's body would start a few pixels
   above its neighbours' — and the two drawn panels would have to guess a
   height. The 813 photo is covered rather than squashed: 1.7% off each side,
   which is nothing, and it is never distorted. */
.how-shot{
  aspect-ratio:1280/841;line-height:0;
  border-bottom:1px solid var(--line);background:#FAFAFB;
}
.how-shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
/* Step one's picture is an inline SVG rather than a PNG or a drawn panel. Its
   viewBox is 400×263 — the same 1280:841 shape — so it fills the box exactly
   and the row still lines up. */
.how-map{width:100%;height:100%;display:block}
.how-body{padding:20px 22px 24px}
.how-body .mono{color:var(--live-deep)}
.how-body h3{margin:8px 0 5px;font-size:18px;font-weight:700;letter-spacing:-0.015em}
.how-body p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* ---------- the two drawn panels ----------
   Steps one and four have no photograph and no PNG: nothing in assets says
   "pick a field" or "you finished something". They are built here instead,
   in the same shell the drawn PNGs use — green PeerFlow bar, white body — at
   the same 1280:841 shape, so the four cards read as one set.

   Everything inside is sized in cqi (1% of the panel's own width), which is
   what lets one set of numbers hold from a 250px card in a four-up row to a
   550px card in a two-up one. The proportions are lifted straight from
   assets/how-frames.html so the drawn panels and the PNGs match: the bar is
   96/1280 of the width, the wordmark 30/1280, the mark 32/1280. */
.how-draw{
  container-type:inline-size;
  aspect-ratio:1280/841;background:var(--card);
  display:flex;flex-direction:column;line-height:1.2;
}
.hd-bar{
  height:7.5cqi;flex:0 0 auto;background:#0F6E56;
  display:flex;align-items:center;gap:.94cqi;padding:0 2.66cqi;
}
.hd-bar svg{width:2.5cqi;height:2.5cqi;flex:0 0 auto;fill:#fff}
.hd-bar b{font-size:2.34cqi;font-weight:800;letter-spacing:-0.03em;color:#fff}
.hd-bar b i{font-style:normal;color:#9FE1CB}
/* The body fills the panel rather than floating in the middle of it: the two
   PNGs beside these use every pixel under their bar, and a drawn panel that
   left a white margin top and bottom read as the odd one out at a glance. */
.hd-body{
  flex:1;min-height:0;padding:3.2cqi;
  display:flex;flex-direction:column;gap:2.4cqi;
}

/* --- 04: the thing you made, shipped --- */
.hd-win{
  flex:1;min-height:0;display:flex;flex-direction:column;
  border:.3cqi solid #E7E6EC;border-radius:2.4cqi;overflow:hidden;background:#fff;
}
.hd-chrome{
  flex:0 0 auto;display:flex;align-items:center;gap:1cqi;
  padding:1.8cqi 2cqi;background:#F3F2F6;border-bottom:.2cqi solid #E7E6EC;
}
.hd-chrome i{width:1.7cqi;height:1.7cqi;border-radius:50%;background:#D4D3DC;flex:0 0 auto}
.hd-url{
  margin-left:1.2cqi;flex:1;min-width:0;
  padding:.8cqi 1.8cqi;border-radius:1.6cqi;background:#fff;
  border:.2cqi solid #E7E6EC;color:#82869C;
  font-family:var(--mono);font-size:2.3cqi;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Lines of code rather than letters of it: at 300px wide real characters are
   a grey smear, and the shape of a file is the part that still reads. The
   green line is the one the two of you finished. */
.hd-code{
  flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:1.9cqi;padding:0 2.4cqi;
}
.hd-code span{display:block;height:1.8cqi;border-radius:999px;background:#EDECF2}
.hd-code span.g{background:#9FE1CB}
.hd-live{
  flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;gap:1.2cqi;
  padding:1.5cqi 3cqi;border-radius:999px;
  background:linear-gradient(180deg,#1D9E75,#0F6E56);color:#fff;
  font-size:3cqi;font-weight:700;letter-spacing:-0.015em;
  box-shadow:0 .5cqi 1.2cqi rgba(8,80,65,.22);
}
.hd-live svg{width:3cqi;height:3cqi;flex:0 0 auto}

/* ---------- paths ---------- */
.sec{padding:110px 0}

/* ---------- bands ----------
   The page used to be one grey field from the nav to the footer, and the only
   grouping on it came from white cards — which appear in two different
   sections, so they read as one long run rather than two ideas. Two full-bleed
   bands fix that: white behind how-it-works, dark green behind the close.

   Full bleed without leaving .wrap: the shadow paints past the element on
   both sides and the clip-path lets it. */
/* Full bleed without leaving .wrap: the shadow paints 100vmax past the
   element on both sides and the clip-path allows it.

   No hairline on the edges. It was tried three ways and each one failed for
   its own reason: a border stops at the element's 1012px while the band does
   not; an extra shadow puts its offset edge 100vmax away rather than at the
   band; and a pseudo-element reaching that far adds to the page's scroll
   width, which overflow-x could not reliably take back. White meeting
   #F3F2F6 is a visible edge on its own, and the closing band is dark green
   against grey, so neither of them was relying on a line. Doing it properly
   means moving these two sections out of .wrap in the markup — worth it only
   if the edges ever start to look soft. */
/* No band here any more. It held the page's white for a long time, but with
   the problem section moved above it that put two white fields against each
   other, so the white moved on to #paths and this one went back to the grey.
   Its cards keep var(--line), which is the border picked for grey. */
/* This head is a heading and nothing else. Without the line of prose that
   used to sit under it, 32px left the h2 resting on the cards. */
#how .sec-head{margin-bottom:42px}
.sec-head{margin-bottom:32px}
.sec-head h2{font-size:clamp(27px,3.2vw,33px);letter-spacing:-0.026em;font-weight:700;margin:8px 0 6px;text-wrap:balance}
/* Capped independently of the container. Width is for pictures and grids;
   a line of prose still wants about 65 characters however much room it is
   given. */
.sec-head p{margin:0;color:var(--ink-soft);font-size:16px;max-width:62ch}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.path{
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* focus-within as well as hover: the button inside is the only thing on the
   card you can reach with a keyboard, and it used to get the focus ring while
   the card around it stayed flat — the pointer got feedback and the keyboard
   didn't. */
.path:hover,.path:focus-within{
  transform:translateY(-3px);border-color:#CFCEDA;
  box-shadow:0 10px 24px rgba(23,26,46,.09);
}
/* The illustration runs to the card edge, so it needs a line under it or it
   bleeds into the label. */
.path svg{width:100%;display:block;border-bottom:1px solid var(--line)}
.path-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
/* 700 rather than 600: the count above it is uppercase mono and the button
   below it is 600, and at 600 the name of the path was the least emphatic
   thing in its own card. */
.path h3{margin:0;font-size:17.5px;font-weight:700;letter-spacing:-0.015em;line-height:1.25}
.path .cta{
  margin-top:auto;text-align:center;border:1px solid var(--ink);border-radius:9px;
  padding:11px 10px;font-size:14px;font-weight:600;line-height:1.2;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.path:hover .cta,.path:focus-within .cta{background:var(--ink);color:#fff;
  box-shadow:0 2px 8px rgba(23,26,46,.2), inset 0 1px 0 rgba(255,255,255,.12)}
.path .cta:active{transform:translateY(1px)}

/* How many people are on this path right now. Filled in by home.js from
   real sign-ups — it stays invisible (but keeps its space, so the cards
   don't jump) until we actually know the number. */
.waiting{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.05em;color:var(--live-deep);
  display:flex;align-items:center;gap:6px;min-height:17px;visibility:hidden;
}
.waiting.shown{visibility:visible}
.waiting b{width:6px;height:6px;border-radius:50%;background:var(--live);display:block;flex:0 0 auto}
.waiting.none{color:var(--ink-faint)}
.waiting.none b{background:#C9CBD6}

/* The band #how used to carry. Eight cards is the biggest single block on
   the page and it was the one section still sitting flat on the grey with
   nothing marking where it started. */
#paths{
  background:var(--card);
  box-shadow:0 0 0 100vmax var(--card);
  clip-path:inset(0 -100vmax);
}
/* var(--line) is chosen against grey; on white the cards need a shade more. */
#paths .path{border-color:#DEDDE6}

.other{margin-top:18px;font-size:14px;color:var(--ink-soft)}
.other a{border-bottom:1px solid var(--ink-faint)}

/* ---------- founder ----------
   The page used to trail off into a pale strip of small grey text. It ends on
   this instead, which is the most persuasive thing on it. Centred on purpose:
   everything above is left-aligned, so the change of alignment is the change
   of pace a pull quote wants. */
.founder{
  background:var(--deep);color:#fff;
  box-shadow:0 0 0 100vmax var(--deep);
  clip-path:inset(0 -100vmax);
  padding:110px 0;text-align:center;
}
.founder .sec-head{margin-bottom:20px}
.founder h2{
  margin:0;font-size:clamp(27px,3.2vw,33px);
  letter-spacing:-0.026em;font-weight:700;color:#fff;
}
.founder blockquote{
  margin:0 auto;max-width:740px;font-size:27px;line-height:1.42;
  letter-spacing:-0.018em;font-weight:500;
}
.founder cite{
  display:block;margin-top:18px;font-style:normal;font-size:14px;
  color:#8FD3BB;font-family:var(--mono);
}

/* ---------- footer ----------
   Sits on the same band as the quote, so the page closes once rather than
   twice. */
footer{
  background:var(--deep);color:#A9BDB6;
  box-shadow:0 0 0 100vmax var(--deep);
  clip-path:inset(0 -100vmax);
  padding:30px 0 46px;display:flex;
  justify-content:space-between;font-size:13.5px;
  flex-wrap:wrap;gap:10px;
}
footer a{color:#CFE7DD}

/* Four across only while four across is still worth reading. Below 1180 the
   cards drop under 265px and the pictures start to close up, so the row folds
   into a 2×2 block — which is also what a tablet gets — and below 680 the two
   columns would be under 300px each, so it becomes one. */
@media (max-width:1180px){
  .how-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .how-grid{grid-template-columns:1fr}
}
/* The drawing shrinks before the sentence does — it is the supporting half
   of the row, and the words are the half worth keeping legible. Below 600 the
   sentence starts wrapping, so the rows grow taller and the padding comes in
   to stop the list running down the whole screen. */
@media (max-width:820px){
  .prob{gap:20px;padding:22px 2px}
  .prob svg{width:78px;flex-basis:78px}
  .prob h3{font-size:17.5px}
}
@media (max-width:600px){
  .prob{gap:16px;padding:19px 0}
  .prob svg{width:62px;flex-basis:62px}
  .prob h3{font-size:16px;line-height:1.4}
}
@media (max-width:380px){
  .prob{gap:13px}
  .prob svg{width:52px;flex-basis:52px}
  .prob h3{font-size:15px}
}

@media (max-width:760px){
  /* The one place the two navigations swap. Above this the inline row is the
     nav and the button does not exist; at and below it the row's links go and
     the button appears. Nothing is visible in both states, so there is no
     width showing the same four links twice.

     .nav-right itself stays in the layout rather than being display:none'd:
     usermenu.js appends the signed-in account chip to it, and the chip should
     still sit in the top bar on a phone. Signed out it has no visible children
     and collapses to nothing. */
  .nav-right > a{display:none}
  .menu-btn{display:inline-flex}
  .nav-menu{display:flex}
  .sec{padding:56px 0}
  .founder{padding:60px 0}
  .founder blockquote{font-size:22px}
}

@media (max-width:900px){
  /* 20 rather than 28 so the four links still have real space at 768 instead
     of the 28px they were left with. */
  .nav-right{gap:20px}
  .hero{grid-template-columns:1fr;gap:36px;padding:40px 0 52px}
  .grid{grid-template-columns:repeat(2,1fr)}
  /* Stacked, the card would run the full width of the page and the two camera
     tiles would tower over the sentence they exist to illustrate. */
  .session{max-width:460px}
}
@media (max-width:520px){
  /* Eight paths, one per row, was 2,500px of scrolling before the page could
     get to anything else — and each card gave a 212px illustration to a
     one-word label. Two up holds all the way down instead, with the type
     stepped down to suit the narrower column. */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .path-body{padding:12px 13px 14px;gap:9px}
  .path h3{font-size:15px}
  .path .cta{padding:10px 6px;font-size:12.5px}
  .nav{padding:18px 0}
  .logo{font-size:17px;gap:9px}
  .logo svg{width:26px;height:26px}
  .cta-row .btn{font-size:14.5px;padding:12px 18px}
  /* Half a phone wide, a 16:10 tile is 83px tall, and the centred initials
     landed straight on top of the name pinned in the corner — true before
     this hero and true after it. Below 520 the name comes out of the corner
     and sits under the initials instead, so the two can't meet however narrow
     the screen gets. */
  .tile{aspect-ratio:4/3;flex-direction:column;gap:7px}
  .tav{width:34px;height:34px;font-size:11px}
  .tname{position:static;left:auto;bottom:auto}
}
@media (max-width:380px){
  /* The wordmark and the Menu button together are about 210px at 320, against
     256px of usable row, so nothing needs shaving any more — the gap is kept
     small only so the two never look crowded. */
  .nav{gap:10px}
  /* The clamp floor of 34px puts "Learn IT together," a few pixels wider than
     the text column on a 360- or 375-wide phone, which drops "not alone." onto
     a third line on its own. 29px is the largest size that holds the comma
     break down to about 340px — measured, not guessed. Below that it goes to
     three lines again, and the headline it would take to prevent that is
     barely larger than the sentence underneath it. */
  h1{font-size:29px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Account chip — only appears once you're signed in, and matches
   the one in the app so the two surfaces feel like one product.
   Injected by usermenu.js.
   ============================================================ */

.um-wrap{position:relative;display:flex;align-items:center}
.um-btn{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:4px 11px 4px 4px;font-family:inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.um-btn:hover{border-color:#C6C5D0;box-shadow:0 1px 3px rgba(23,26,46,.07)}
.um-btn[aria-expanded="true"]{border-color:var(--live);box-shadow:0 0 0 3px rgba(15,163,107,.15)}
.um-btn[aria-expanded="true"] .um-chev{transform:rotate(180deg)}
.um-face,.um-bigface{display:flex;align-items:center;justify-content:center;border-radius:50%;
  overflow:hidden;flex:0 0 auto;font-weight:700}
.um-face{width:30px;height:30px;font-size:12.5px}
.um-bigface{width:38px;height:38px;font-size:15px}
.um-face img,.um-bigface img{width:100%;height:100%;object-fit:cover;display:block}
.um-label{font-size:13.5px;font-weight:600;color:var(--ink);max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-chev{color:var(--ink-faint);flex:0 0 auto;transition:transform .15s}

.um-menu{position:absolute;top:48px;right:0;width:248px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:6px;z-index:40;
  box-shadow:0 12px 34px rgba(23,26,46,.13)}
.um-head{display:flex;align-items:center;gap:11px;padding:11px 12px 12px;
  border-bottom:1px solid var(--line);margin:-6px -6px 6px}
.um-who{min-width:0}
.um-name{display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-mail{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:1px;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;
  font-size:14px;color:var(--ink-soft);background:none;border:0;font-family:inherit;
  cursor:pointer;text-align:left}
.um-item svg{flex:none;color:var(--ink-faint)}
.um-item:hover{background:#EDECF2;color:var(--ink)}
.um-item:hover svg{color:var(--live-deep)}
.um-item.danger{color:#C0392B}
.um-item.danger svg{color:#C0392B}
.um-item.danger:hover{background:#FDEEEC;color:#A53125}
.um-sep{height:1px;background:var(--line);margin:6px 4px}

@media (max-width:820px){
  .um-label,.um-chev{display:none}
  .um-btn{padding:4px}
}
/* The chip used to need defending here, because the rule that emptied the nav
   at this width was `a:not(.btn)` and could be read as catching it. The mobile
   rule is `.nav-right > a` now, which only ever matches links, so the chip —
   a div — survives on its own and sits beside the Menu button. */

/* Two guides, linked from the homepage. An indexable page that nothing links
   to is one search engines discount — dev/seo-tests.js asserts every one of
   them has at least one linker — and separately, somebody still deciding
   whether to sign up is exactly the person these two are written for. */
.guides{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.guides a{
  display:block;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);text-decoration:none;color:var(--ink);
}
.guides a:hover{border-color:var(--live)}
.guides b{display:block;font-size:17px;font-weight:700;line-height:1.35;margin-bottom:6px}
.guides span{display:block;font-size:15px;line-height:1.6;color:var(--ink-soft)}