@import url("https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&display=swap");

/* Recoleta — the real headline font (Castoro was the free stand-in).
   ⚠ LICENSE: the current woff2 was converted from a file whose
   internal name says "Recoleta Regular DEMO" (personal-use preview
   only). The founder bought a license 2026-08-23; the purchased
   Regular cut must replace fonts/Recoleta-Regular.woff2 BEFORE this
   goes live on tasklyplanner.com. */
@font-face {
  font-family: "Recoleta";
  src: url("fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  --purple: #6C419E;
  --purple-soft: #845CB4;
  --lav: #DCD3F2;        /* page background */
  --lav-deep: #CFC3EC;   /* hero bottom / accents */
  --paper: #F7F5FB;      /* light section */
  --card: #FFFFFF;
  --ink: #23202B;
  --ink-soft: #5D5768;
  --border: #E2DCF0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FCFCFC;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 22px 72px;
}

/* ================= top bar ================= */

header.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 26px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.3px;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: block;
}

header.nav nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

header.nav nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
}

/* Every nav link gets the same soft pill on hover — the white at 55%
   used before was invisible once the lavender band came off, so only
   Contact (a white pill already) appeared to react. */
header.nav nav a:hover { background: #F1EEF9; }
header.nav nav a.cta:hover { background: #000; }

header.nav nav a.cta {
  background: var(--ink);
  color: #fff;
  margin-left: 8px;
}

header.nav nav a.cta:hover { background: #000; }

/* ================= hero ================= */

section.hero {
  text-align: center;
  padding: 34px 0 0;
  overflow: hidden;
  background: linear-gradient(var(--lav) 60%, var(--lav-deep));
}

section.hero .wrap { padding-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}

section.hero h1 {
  font-family: "Recoleta", "Castoro", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  -webkit-text-stroke: 0.25px var(--lav);
  paint-order: stroke fill;
  font-size: 56px;
  line-height: 1.12;
  letter-spacing: normal;
  color: #35313C;
  margin: 0 0 18px;
}

section.hero p.lede {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 auto 30px;
  max-width: 30em;
}

.pill {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.pill:hover { background: #000; }

.note {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* ================= empty phone frames ================= */

.phone {
  background: #1C1B20;
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 24px 60px rgba(60, 40, 110, .28);
  position: relative;
  width: 100%;
}

.phone .screen {
  background: #FDFDFF;
  border-radius: 36px;
  aspect-ratio: 9 / 19.2;
  position: relative;
  overflow: hidden;
}

/* dynamic island */
.phone .screen::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 3.6%;
  background: #1C1B20;
  border-radius: 999px;
}

.phone.tint .screen { background: linear-gradient(#F3EFFB, #E9E2F7); }

/* hero fan */
.fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
  max-width: 980px;
  margin: 56px auto -6px;
  padding: 0 22px;
}

.fan .phone      { max-width: 270px; }
.fan .phone.side { max-width: 220px; transform: translateY(26px); }
.fan .phone.side.l { rotate: -4deg; }
.fan .phone.side.r { rotate: 4deg; }

/* ================= feature rows ================= */

.features-band {
  background: #FCFCFC;
  border-top: 1px solid var(--border);
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 92px 26px;
}

.feature + .feature { padding-top: 0; }

.feature .copy h2 {
  font-family: "Recoleta", "Castoro", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  color: #35313C;
  font-size: 36px;
  line-height: 1.14;
  letter-spacing: -0.4px;
  margin: 0 0 14px;
}

.feature .copy p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

.feature .shot .phone {
  max-width: 265px;
  margin: 0 auto;
}

.feature.flip .copy { order: 2; }
.feature.flip .shot { order: 1; }

/* ================= FAQ ================= */

.faq {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq .wrap { padding: 66px 22px; }

.faq h2 {
  font-family: "Recoleta", "Castoro", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  margin: 0 0 26px;
}

.faq h3 { font-size: 17px; margin: 26px 0 4px; }

.faq p { margin: 0; color: var(--ink-soft); }

.faq a { color: var(--purple); }

/* ================= closer ================= */

.closer {
  text-align: center;
  background: linear-gradient(var(--lav), var(--lav-deep));
}

.closer .wrap { padding: 78px 22px 70px; }

.closer h2 {
  font-family: "Recoleta", "Castoro", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  margin: 0 0 12px;
}

.closer p.lede {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

/* ================= footer ================= */

footer.site {
  background: #232030;
  color: #B9B3C6;
  font-size: 14.5px;
}

footer.site .wrap { padding: 40px 22px 52px; }

footer.site .brand { color: #fff; margin-bottom: 14px; }

footer.site nav { display: block; margin-bottom: 16px; }

footer.site nav a,
footer.site a {
  color: #CFC9DD;
  text-decoration: none;
  margin-right: 18px;
}

footer.site a:hover { color: #fff; }

footer.site a[href^="mailto"] { color: #CBB6EC; margin-right: 0; }

/* ================= legal pages (privacy / terms / support) ================= */

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 8px;
  flex-wrap: wrap;
}

header.site nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  margin-left: 18px;
}

header.site nav a:hover { color: var(--purple); }

.brand .dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--purple);
  display: inline-block;
}

.legal h1 {
  font-family: "Recoleta", "Castoro", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  font-size: 34px;
  margin: 28px 0 6px;
}

.legal .updated {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 28px;
}

.legal h2 { font-size: 21px; margin: 34px 0 8px; letter-spacing: -0.2px; }
.legal h3 { font-size: 17px; margin: 22px 0 4px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a  { color: var(--purple); }

.callout {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
  font-size: 16px;
}

/* legal pages reuse footer.site as a slim bar inside .wrap */
.wrap > footer.site,
.wrap footer.site {
  background: none;
  color: var(--ink-soft);
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.wrap footer.site a { color: var(--ink-soft); margin-right: 16px; }
.wrap footer.site a:hover { color: var(--purple); }

/* ================= responsive ================= */

@media (max-width: 860px) {
  section.hero h1 { font-size: 40px; }
  .feature {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 64px 22px;
    text-align: center;
  }
  .feature.flip .copy { order: 1; }
  .feature.flip .shot { order: 2; }
  .feature .copy h2 { font-size: 29px; }
  .fan { gap: 14px; }
  .fan .phone { max-width: 200px; }
  .fan .phone.side { max-width: 150px; }
  .closer h2 { font-size: 32px; }
  header.nav nav a:not(.cta) { padding: 8px 10px; }
}

@media (max-width: 540px) {
  section.hero h1 { font-size: 42px; line-height: 1.1; }
  .fan .phone.side { display: none; }
  .fan .phone { max-width: 230px; }
}

/* lavender band wraps nav + hero together, like the reference */
.hero-band { background: none; }
header.nav { background: none; }


/* ===== pixel pass: utility strip, dual nav pills, five-phone fan ===== */

.hero-band { border-radius: 0; }



section.hero h1 { font-size: 64px; }
section.hero .wrap { max-width: 1000px; }

/* five overlapping phones, cropped at the section's bottom edge */
.fan5 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 60px;
  height: 560px;
  overflow: hidden;
}
.fan5 .phone { flex: 0 0 auto; }
.fan5 .p3 { width: 350px; z-index: 5; }
.fan5 .p2, .fan5 .p4 { width: 310px; z-index: 4; margin: 46px -58px 0; }
.fan5 .p1, .fan5 .p5 { width: 290px; z-index: 3; margin-top: 84px; }
.fan5 .p2 { margin-left: -58px; }
.fan5 .p4 { margin-right: -58px; }

.phone .screen.dark { background: linear-gradient(#1B1A20, #232130); }
.phone .screen.dark::before { background: #000; }
.phone .screen.tint { background: linear-gradient(#F3EFFB, #E9E2F7); }
.phone .screen.tintdeep { background: linear-gradient(#EFE9FA, #DFD5F2); }

@media (max-width: 900px) {
  section.hero h1 { font-size: 40px; }
  .fan5 { height: 420px; }
  .fan5 .p3 { width: 250px; }
  .fan5 .p2, .fan5 .p4 { width: 220px; margin: 34px -44px 0; }
  .fan5 .p1, .fan5 .p5 { width: 200px; margin-top: 62px; }
}
@media (max-width: 560px) {
  .fan5 .p1, .fan5 .p5 { display: none; }
  .fan5 { height: 360px; }
}


/* ===== smart floating nav: blur in on scroll-up, tuck away on scroll-down ===== */

header.nav.floating {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  max-width: none;
  background: rgba(243, 239, 251, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(35, 32, 43, .08);
  padding-top: 14px;
  padding-bottom: 14px;
  transform: translateY(0);
  transition: transform .28s ease;
}

header.nav.floating.tucked { transform: translateY(-110%); }


/* thin utility strip above the nav — flat default purple */
.topstrip {
  background: var(--purple);
  height: 47px;      /* 34 -> 39 (+15%) -> 47 (+20%) */
}
.topstrip a {
  color: #fff;
  text-decoration: none;
  margin-left: 22px;
  font-weight: 500;
}




/* legal pages: the lavender band holds only the nav, then content on paper */
.wrap.legal { padding-top: 20px; }



/* inner pages: the lavender band carries the nav only — no second block
   under it, since the homepage has no such bar. */


/* ===================================================================
   Legal pages: everything black, everything in the system font.
   No serif headings, no grey secondary text (founder 2026-08-01).
   =================================================================== */

.wrap.legal,
.wrap.legal h1,
.wrap.legal h2,
.wrap.legal h3,
.wrap.legal p,
.wrap.legal li,
.wrap.legal strong,
.wrap.legal .updated,
.wrap.legal .callout {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: #000;
}

.wrap.legal h1 { font-weight: 700; letter-spacing: -0.4px; }
.wrap.legal .updated { color: #000; }


/* ===================================================================
   The app's Settings support card, ported.
   AccentTheme.soft purple rgb(132,92,180), AppSpacing.xl corner (24),
   base/lg padding (16/20), title 18 semibold white, body 16 medium at
   90% white with the number heavy, centred, and the card hugs the text
   rather than spanning the column (founder 2026-07-15).
   =================================================================== */

.support-card {
  /* width follows the text so the sides are not padded out; the box
     hugs its content like the app's card does */
  width: fit-content;
  max-width: 100%;
  margin: 26px auto 30px;
  padding: 18px;          /* uniform on all four sides */
  border-radius: 24px;
  background: #845CB4;
  /* proSheen(), ported exactly: the app masks the card so its top 6pt
     sits at 75% opacity and fades to solid, which lifts the top edge.
     It is a mask, not a white overlay painted on top. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75) 0, #000 6px, #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.75) 0, #000 6px, #000 100%);
  text-align: center;
}

.wrap.legal .support-card p { color: #fff; margin: 0; }

.wrap.legal .support-card .sc-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.wrap.legal .support-card .sc-body {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
}

.wrap.legal .support-card strong { color: #fff; font-weight: 800; }
.wrap.legal .support-card a { color: #fff; text-decoration: none; font-weight: 700; }


/* ===================================================================
   Nav logo: the real app icon. The tile is white, and so is the page,
   so without an edge it reads as a bare circle. A hairline plus a soft
   drop shadow makes it sit on the page like an icon on a Home Screen.
   =================================================================== */

header.nav .brand {
  font-family: "Recoleta", "Castoro", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0;
  color: #000;
}

header.nav .brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;          /* iOS-ish squircle at this size */
  box-shadow: 0 1px 3px rgba(35, 32, 43, .18),
              0 0 0 1px rgba(35, 32, 43, .06);
}


/* Icon rides with the links, sitting just before Support, and the whole
   group is centred on the page. */
header.nav { justify-content: center; }
header.nav nav { align-items: center; }
header.nav .brand { order: 0; margin-right: 6px; }


/* The icon is not a link chip — no hover pill behind it. */
header.nav .brand:hover { background: none; }


/* Measured 46px above the card and 30px below; the wrap's own top
   padding was stacking on the card's margin. Zero the padding and let
   the card own both gaps so they match exactly. */
.wrap.legal { padding-top: 0; }
.support-card { margin-top: 30px; margin-bottom: 30px; }


/* The icon IS a control again (founder 2026-08-23: "when u click this
   it bring u to homepage pls") — it links to /. It was deliberately
   inert before, so the pointer-events/cursor lockout is gone; only the
   text-selection guard stays, and the hover pill is still suppressed
   by the rule above so it reads as a mark, not a nav chip. */
header.nav .brand,
header.nav .brand img {
  cursor: pointer;
  user-select: none;
}
header.nav a.brand { text-decoration: none; }

/* ===== Log in: the beige pill in the nav, opening Taskly for Web ===== */

header.nav nav a.login {
  background: #E9E5DE;
  color: var(--ink);
  margin-left: 8px;
  white-space: nowrap;
}

header.nav nav a.login:hover { background: #E0DBD1; }


/* ===== phone widths: keep the nav on one tidy row and the pill on one
   line, and let the support card breathe less (founder 2026-08-13) ===== */

@media (max-width: 540px) {
  header.nav { padding: 14px 12px; gap: 8px; }
  header.nav nav { gap: 2px; }
  /* 44px minimum tap target on every touch width — the industry standard
     (Apple HIG, and WCAG 2.5.8 sets 24px as the floor). Done with min-height
     rather than vertical padding because the font size steps down at each
     breakpoint below, so a single padding value would land on a different
     height at each one. These links are flex items of header.nav nav, so
     they're blockified and min-height applies. Desktop is left alone. */
  header.nav nav a { font-size: 13px; min-height: 44px; display: flex; align-items: center; }
  /* `:not(.cta)` is REQUIRED here, not decorative. The max-width:860px block
     sets `header.nav nav a:not(.cta) { padding: 8px 10px }` — specificity
     0,2,3 — which outranks a plain `header.nav nav a` (0,1,3) no matter that
     this block comes later in the file, because specificity beats source
     order. Written without it, every padding line in these phone blocks is
     silently ignored (that's exactly what happened in 63d6ae1: the three
     plain links stayed at 8px/10px on every phone width while the .login
     and .cta pills moved, because those are class selectors that clear the
     bar). Keep this selector, and keep it ABOVE the .login/.cta rules so
     those still win on source order. */
  header.nav nav a:not(.cta) { padding: 7px 8px; }
  header.nav nav a.cta { white-space: nowrap; padding: 8px 12px; margin-left: 4px; }
  header.nav nav a.login { padding: 8px 10px; margin-left: 2px; }
  header.nav .brand img { width: 28px; height: 28px; }

  .support-card { padding: 12px 14px; border-radius: 17px; margin-top: 26px; margin-bottom: 26px; }
  .wrap.legal .support-card .sc-title { font-size: 13.5px; margin-bottom: 4px; }
  .wrap.legal .support-card .sc-body { font-size: 12px; }
}

/* Six items now that Log in is here, so the row has to tighten again to
   keep Get Taskly whole on a phone. */
@media (max-width: 440px) {
  header.nav { padding: 12px 8px; }
  header.nav nav a { font-size: 12px; }
  header.nav nav a:not(.cta) { padding: 6px 5px; }   /* :not(.cta) — see 540 block */
  header.nav nav a.login { padding: 7px 9px; margin-left: 2px; }
  header.nav nav a.cta { padding: 7px 10px; margin-left: 3px; }
  header.nav .brand img { width: 24px; height: 24px; }
  /* The wordmark shrinks WITH the icon. Added 2026-08-23 with the word
     itself: before that .brand held only an image, so these blocks had
     nothing to step the text down. Without this the nav ran past the
     viewport at 360 and 320 and the page slid sideways again. */
  header.nav .brand { margin-right: 3px; font-size: 17px; gap: 7px; }
}

/* Narrow Androids sit at 360, under the width the row above collapses to,
   which pushed the row off the left edge and let the whole page slide
   sideways. Squeeze once more so the six items still fit there. */
@media (max-width: 400px) {
  header.nav { padding: 11px 2px; }
  header.nav nav { gap: 0; }
  header.nav nav a { font-size: 11.5px; }
  header.nav nav a:not(.cta) { padding: 6px 4px; }   /* :not(.cta) — see 540 block */
  header.nav nav a.login { padding: 7px 7px; margin-left: 1px; }
  header.nav nav a.cta { padding: 7px 8px; margin-left: 2px; }
  header.nav .brand img { width: 22px; height: 22px; }
  header.nav .brand { margin-right: 2px; font-size: 15px; gap: 6px; }
}

/* The oldest small phones (320) need the last few pixels. */
@media (max-width: 340px) {
  header.nav { padding: 11px 0; }
  header.nav nav a { font-size: 11px; }
  header.nav nav a:not(.cta) { padding: 6px 3px; }   /* :not(.cta) — see 540 block */
  header.nav nav a.login { padding: 6px 6px; }
  header.nav nav a.cta { padding: 6px 7px; margin-left: 1px; }
  header.nav .brand img { width: 20px; height: 20px; }
  header.nav .brand { font-size: 13.5px; gap: 5px; }
}


/* ===== corner AI bubble (founder 2026-08-23: "i want this exact one of
   the website same proptions pls") =====

   The app's FloatingAIButton, reproduced at its REAL proportions rather than
   eyeballed. From FloatingAIButton.swift:
       diameter = 61   * 1.05 * 0.9 = 57.64pt
       glyph    = 32.8 * 1.05 * 0.9 = 31.00pt
   so the sparkle is 0.5377 of the circle. That ratio is the whole point —
   she has resized this thing three times (20% up, 5% up, 10% down) and each
   time BOTH numbers moved together so the sparkle-inside-circle proportion
   never changed. If this ever needs resizing, scale .ai-bubble and let the
   sparkle follow from the percentage; never set the glyph size directly.

   The sparkle is our own drawn path, not an SF Symbol file — Apple licenses
   those for apps on their platforms, not the web. Never paste an exported
   Apple glyph in here.

   Fixed Taskly purple, NOT the accent variable: the app's bubble follows the
   user's theme, but the website has no user and no theme, so it wears the
   brand colour like the paywall's Continue pill does.

   Decoration: pointer-events off and aria-hidden in the markup, so it can
   never eat a tap or be announced. */
.ai-bubble {
  /* Bottom-right corner of the window, floating over the page — the app's
     own resting corner for this bubble (founder 2026-08-23: "it should sit
     in the corner of the app"). FIXED, not absolute, so it stays put while
     the page scrolls, exactly like the app's does over the calendar.

     It was briefly in the purple strip at the top: a purple circle on a
     purple band nearly vanished, which is also why it belongs down here on
     the page rather than up there. */
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 57.64px;
  height: 57.64px;
  border-radius: 50%;
  background: var(--purple, #6C419E);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  pointer-events: none;
  z-index: 3;
}

/* 53.77% of the circle — the app's exact ratio, expressed as a percentage so
   the two can never drift apart.

   The glyph is APPLE'S OWN "sparkle" symbol (founder 2026-08-23: "this is
   not the same icon from the app jus use apples icon for now"), rendered
   from the system at 1024px and used as a MASK — so the shape comes from the
   PNG's alpha and the colour still comes from CSS, which keeps it crisp on
   any background and lets it recolour without a second asset. My hand-drawn
   four-pointer is gone; it had straight sides where Apple's sweep inward,
   which is exactly what she spotted. */
.ai-bubble .glyph {
  width: 53.77%;
  height: 53.77%;
  background: #fff;
  -webkit-mask: url("img/sparkle-apple.png") center / contain no-repeat;
          mask: url("img/sparkle-apple.png") center / contain no-repeat;
}

@media (max-width: 440px) {
  .ai-bubble { width: 44px; height: 44px; bottom: 16px; right: 16px; }
}



/* ===== Tiimo-style nav split (founder 2026-08-23) =====
   "they have the support, privacy, or whatever to the side a little
   bit. It's not exactly in the corner" — the brand icon sits on the
   left side where Tiimo's wordmark sits, the links and Get Taskly on
   the right, and both keep a comfortable inset from the window edge
   that scales with the viewport (Tiimo's own inset is ~7% of the
   window). The nav row goes full width; margin-right:auto on the
   brand is what pushes the two groups apart. */
/* 11.5vw -> 14vw (founder 2026-08-23: "Close that little space in the
   middle by maybe 10%") -> 16.5vw ("Another 10%") — each step moves
   both groups inward, shrinking the icon-to-links gap by about a
   tenth of what it was. */
/* Top padding 22px -> 10px (founder 2026-08-23: "bring those buttons
   closer to the purple bar by a little bit") — the whole page below
   rides up with it. Bottom stays 22px. */
header.nav { max-width: none; padding: 10px clamp(26px, 16.5vw, 330px) 22px; }
header.nav nav { width: 100%; gap: 14px; }
header.nav .brand { margin-right: auto; }
header.nav nav a.cta { margin-left: 14px; }
/* Founder 2026-08-23, from side-by-side 2000px screenshots of both
   sites: Tiimo's wordmark and CTA each sit ~11.5% of the window from
   the edge (ours were at 6-7%), and their nav items have a touch
   more air between them — hence 11.5vw insets, 14px gaps. */