/* Pooled — site styles.
 *
 * One stylesheet for six pages. Hand-written, no framework, no build step:
 * the pages are served straight off GitHub Pages, and a generator would put a
 * toolchain between the design and the thing people load.
 *
 * Tokens below are lifted verbatim from the pen.dev document's variables, so
 * the site and the app are the same product to look at. Where a value here
 * disagrees with the design file, the design file is right and this is a bug.
 *
 * Nothing in this file fetches anything. Fonts are self-hosted in
 * ../fonts (see fonts.css); there is no CDN, no analytics and no script.
 * The site says Pooled does not track you — a stylesheet that phoned a third
 * party to render itself would make that a lie on the page making the claim.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --bg: #F5F4EF;
  --surface: #FFFFFF;
  --surface-alt: #EBEAE3;

  --ink: #1A1B16;
  --ink-2: #6C6E63;
  --ink-3: #A2A498;
  --line: #E3E1D8;

  --lime: #CBF264;
  --lime-soft: #E6F7BE;
  --lilac: #C9BCFF;
  --lilac-soft: #EDE8FF;
  --lilac-deep: #6C4EE3;

  --pos: #3D7F5C;
  --neg: #C2593F;
  --amber: #F2C14E;
  --amber-soft: #FBEBC4;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Space Grotesk', var(--font);

  --r-card: 22px;
  --r-tile: 16px;

  /* 1120 is the design's content width inside a 1440 canvas. The gutter is
     what keeps it off the edge once the window is narrower than that. */
  --content: 1120px;
  --gutter: 24px;
  --nav-h: 94px;
}

/* --------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections land below the sticky nav instead of under it. */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Visible only to a screen reader, and to anyone tabbing into it. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; }

/* One visible focus ring for everything, rather than each component
   inventing its own and two of them forgetting. */
:focus-visible {
  outline: 3px solid var(--lilac-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ typography */

/* Hero sizes are clamped rather than fixed. The design is drawn at 1440 and
   the mobile board at 390; clamp covers the thousand widths in between that
   nobody draws. */
.h-hero {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 66px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.h-hero--lg { font-size: clamp(42px, 7.2vw, 76px); }
.h-hero--md { font-size: clamp(38px, 5.6vw, 62px); }
.h-hero--sm { font-size: clamp(34px, 5vw, 58px); }

.h-sec {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.h-block {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.eyebrow--lilac { color: var(--lilac-deep); }

.lede {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--ink-2);
  line-height: 1.6;
}

.muted { color: var(--ink-2); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: #292B22; }

.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #D6F783; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-3); }

.btn--play { padding: 16px 28px; font-size: 17px; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
/* The rule only appears once the page has moved, so the hero reads as one
   uninterrupted surface at rest. */
.nav[data-scrolled='true'] { border-bottom-color: var(--line); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.lockup svg { width: 34px; height: 34px; flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__links a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
}
.nav__links a[aria-current='page'] {
  font-weight: 700;
  color: var(--lilac-deep);
}
.nav__links a:not([aria-current='page']):hover { color: var(--ink-2); }

.nav__cta { padding: 12px 22px; font-size: 14px; font-weight: 600; }

/* The menu button and panel exist only below the breakpoint. */
.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }

.nav__panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 12px var(--gutter) 24px;
}
.nav__panel a {
  display: block;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav__panel a:last-of-type { border-bottom: 0; }

/* --------------------------------------------------------------- layout */

.section { padding-block: clamp(56px, 7vw, 96px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.sec-head { max-width: 760px; }
.sec-head .h-sec { margin-top: 12px; }
.sec-head .lede { margin-top: 14px; }

/* Two columns that become one. `--split` lets a block weight the text column
   against the image column without a new class each time. */
.split {
  display: grid;
  grid-template-columns: var(--split, 1fr 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 16px); }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 28px;
}
.card h3 { font-size: 19px; letter-spacing: -0.02em; }
.card p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------- lists */

/* Feature and check lists: a coloured dot or tick, then the line. */
.ticks { --gap: 14px; display: flex; flex-direction: column; gap: var(--gap); }
.ticks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.5;
}
.ticks svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }

.feature-list { display: flex; flex-direction: column; gap: 22px; }
.feature-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}
.feature-list .ico {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--lime-soft);
  color: var(--ink);
}
.feature-list .ico--lilac { background: var(--lilac-soft); }
.feature-list .ico--amber { background: var(--amber-soft); }
.feature-list .ico svg { width: 22px; height: 22px; }
.feature-list h3 { font-size: 17px; letter-spacing: -0.01em; }
.feature-list p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }

/* ------------------------------------------------------------- pill row */

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.pill svg { width: 16px; height: 16px; color: var(--pos); }

/* --------------------------------------------------------------- panels */

/* The dark CTA slab, with the concentric rings from the design. The rings are
   decorative and sit behind the content; `overflow: hidden` on the panel is
   what keeps them from painting over the section below. */
.panel-dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
  border-radius: 32px;
  padding: clamp(40px, 5vw, 72px);
}
.panel-dark .h-sec, .panel-dark .h-hero { color: var(--bg); }
.panel-dark .lede { color: #C8C9BF; }

.rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rings span {
  position: absolute;
  border: 1px solid rgba(245, 244, 239, 0.10);
  border-radius: 50%;
}
.rings span:nth-child(1) { width: 700px; height: 700px; left: -180px; bottom: -320px; }
.rings span:nth-child(2) { width: 688px; height: 688px; left: -60px;  bottom: -400px; }
.rings span:nth-child(3) { width: 320px; height: 320px; left: 40px;   bottom: -120px; }

.panel-dark > * { position: relative; }

/* -------------------------------------------------------------- phones */

/* The app shots are exported from the design file at 2x and shown at their
   drawn size. width/height are set on the element as well as in CSS so the
   page does not reflow as they decode. */
.phone { width: 100%; height: auto; }

.phone-stack {
  position: relative;
  min-height: 560px;
}
.phone-stack--hero { min-height: 620px; }
.phone-stack img { position: absolute; }

/* The three hero phones, overlapping as the design draws them. These live
   here rather than inline because the mobile rules below have to be able to
   undo them, and an inline style cannot be undone by a media query. */
.hero-phone--c { width: 300px; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
.hero-phone--l { width: 270px; left: 0; top: 60px; z-index: 1; }
.hero-phone--r { width: 250px; right: 0; top: 120px; z-index: 1; }

/* ------------------------------------------------------------- footer */

.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: 64px 40px;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__brand .lockup { font-size: 22px; }
.footer__byline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.footer__byline svg { width: 16px; height: 16px; color: var(--amber); }

.footer__contact { text-align: right; }
.footer__contact .eyebrow { letter-spacing: 0.1em; }
.footer__contact a {
  display: inline-block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.footer__contact a:hover { border-bottom-color: var(--ink); }

.footer hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 32px;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 340px;
  gap: 32px;
}
.footer__cols h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer__cols ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.footer__cols a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.footer__cols a:hover { color: var(--ink); }

.footer__bottom {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: center;
}

/* --------------------------------------------------------------- prose */

/* Privacy and Terms. A measure of ~68 characters, because these are the two
   pages on the site somebody actually has to read end to end. */
.prose { max-width: 720px; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 23px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 32px; }
.prose h3 { font-size: 17px; margin-top: 28px; }
.prose p, .prose ul { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
/* The dash is absolutely positioned, not a grid column: with `display: grid`
   on the <li>, every <strong>, <a> and <em> inside an item became a grid
   cell of its own and a sentence broke into a column of single words. */
.prose ul, .prose ol { padding-left: 0; display: flex; flex-direction: column; gap: 8px; }
.prose ol { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--ink-2); counter-reset: n; }
.prose li { position: relative; padding-left: 28px; list-style: none; }
.prose ul > li::before { content: '—'; position: absolute; left: 2px; top: 0; color: var(--ink-3); }
.prose ol > li { counter-increment: n; }
.prose ol > li::before { content: counter(n) '.'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--lilac-deep); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 26px;
  margin-top: 28px;
}
.summary p { margin-top: 10px; }
.summary p:first-child { margin-top: 0; }

/* Anything the owner still has to supply. Loud on purpose: a placeholder that
   blends in is a placeholder that ships. */
.fill {
  background: var(--lime-soft);
  border-bottom: 2px solid var(--pos);
  padding: 0.05em 0.3em;
  border-radius: 3px;
  font-weight: 600;
  color: var(--ink);
}

/* ------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__cols > *:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --nav-h: 66px; }

  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav[data-open='true'] .nav__panel { display: block; }
  .nav[data-open='true'] { border-bottom-color: var(--line); }

  .split { grid-template-columns: 1fr; }
  /* Once stacked, the image belongs under the words that explain it,
     whichever side the desktop layout put it on. */
  .split--reverse > *:first-child { order: 0; }
  .split > .split__visual { order: 2; }

  .grid--2, .grid--3 { grid-template-columns: 1fr; }

  .phone-stack, .phone-stack--hero { min-height: 0; }
  .phone-stack img { position: static; margin-inline: auto; transform: none; }
  /* Three overlapping phones is a composition at 1440 and a long scroll on a
     phone. Keep the one the hero is actually about. */
  .phone-stack img:not(:first-child) { display: none; }

  .footer__top { flex-direction: column; }
  .footer__contact { text-align: left; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  /* 56px above and below every section stacked into ~110px of blank space
     between them on a phone. */
  .section { padding-block: 40px; }
  .section--tight { padding-block: 32px; }
  body { font-size: 16px; }
  .panel-dark { border-radius: 24px; }
  .footer__cols { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .rings span:nth-child(1) { width: 420px; height: 420px; left: -140px; }
  .rings span:nth-child(2) { width: 400px; height: 400px; }
  .rings span:nth-child(3) { display: none; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------ how-it-works steps */

/* The numbered index under the hero. Counter-free: the numbers are in the
   markup because they are content, not decoration — they name the steps the
   sections below are titled by. */
.journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.journey a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.journey a:hover { color: var(--lilac-deep); }
.journey span {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}

/* Each step is a big ghosted numeral in a rail on the left, with a dot and a
   spine that runs down to the next one. The spine is drawn from the dot to
   the bottom of the section, so it lines up whatever the section's height. */
.step__grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.step__rail { position: relative; align-self: stretch; min-height: 100%; }
.step__num {
  font-family: var(--font-display);
  font-size: 128px;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--line);
  display: block;
}
.step__dot {
  position: absolute;
  left: 4px;
  top: 150px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lilac-deep);
}
.step__spine {
  position: absolute;
  left: 8px;
  top: 168px;
  bottom: -96px;
  width: 2px;
  background: var(--line);
}

/* The oversized price that sits over the step-one phone, as drawn. */
.accent-figure {
  position: absolute;
  right: 0;
  bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
}

@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The rail becomes a plain heading above the step: a 128px numeral in a
     168px column does not fit a phone, and a spine between stacked sections
     connects nothing. */
  .step__grid { grid-template-columns: 1fr; }
  .step__num { font-size: 72px; }
  .step__dot, .step__spine { display: none; }
  .step__rail { margin-bottom: 8px; }
  .accent-figure { position: static; margin-top: 12px; text-align: right; }
}

@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; gap: 12px; }
}

/* ----------------------------------------------------------- print */

@media print {
  .nav, .footer__cols, .skip-link { display: none; }
  body { background: #fff; font-size: 12pt; }
  .prose { max-width: none; }
}