/* The font is served from here, not Google Fonts: no visitor's address goes to Google. */
@font-face { font-family: 'Rethink Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/RethinkSans_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Rethink Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/RethinkSans_500Medium.ttf') format('truetype'); }
@font-face { font-family: 'Rethink Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/RethinkSans_600SemiBold.ttf') format('truetype'); }
/*
 * The home page (Figma "Website — Desktop 1440", Website page). Colours are
 * Stoic Planner's tokens (packages/tokens/tokens.css; this site has no build
 * step to import them, so they're copied: keep in step). Flat: white page,
 * ink, grey for what's secondary, the blue square only for what's current,
 * one black square button per screen.
 */
:root {
  --bg-card: #FFFFFF;
  --bg-sunken: #EFEDE9;
  --ink: #0B0B0B;
  --ink-2: #8A867F;
  --ink-3: #B5B0A8;
  --ink-inverse: #FFFFFF;
  --line: #E6E3DE;
  --brand: #0048F8;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-card: #121211;
    --bg-sunken: #1E1D1B;
    --ink: #F2F0EC;
    --ink-2: #9A968E;
    --ink-3: #5E5B55;
    --ink-inverse: #0B0B0B;
    --line: #34322E;
    --brand: #5C86FF;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.home {
  margin: 0;
  background: var(--bg-card);
  color: var(--ink);
  font: 400 17px/22px 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.home a { color: inherit; }
.home img { max-width: 100%; height: auto; display: block; }
.home h1, .home h2, .home h3, .home p { margin: 0; }
.home h1, .home h2 { font-weight: 600; text-wrap: balance; }

/* One column of 1120px, as the frame's 160px sides at 1440. */
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); box-sizing: content-box; }
.band { padding-block: 112px; }
.sunken { background: var(--bg-sunken); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.eyebrow { font-size: 13px; line-height: 18px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.mark { width: 8px; height: 8px; background: var(--brand); flex: none; }
.muted { color: var(--ink-2); }
.fine { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.title { font-size: 44px; line-height: 50px; letter-spacing: -1.2px; }

/* The one action: Flat/Button, square, 46pt, a 15pt label. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 13px 18px;
  background: var(--ink); color: var(--ink-inverse) !important;
  font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.1px;
  text-decoration: none;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.button:hover { opacity: 0.86; }
.button:active { transform: scale(0.97); }
.button:focus-visible, .nav a:focus-visible, .footer a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.2px; text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; font-size: 15px; line-height: 20px; }
.nav ul a { color: var(--ink-2); text-decoration: none; }
.nav ul a:hover { color: var(--ink); }
.nav ul a.strong { color: var(--ink); font-weight: 500; }

/* Hero: the words left, the phone right. */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; padding-block: 96px; }
.hero-text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero h1 { font-size: 64px; line-height: 68px; letter-spacing: -2px; max-width: 640px; }
.hero .lede { color: var(--ink-2); max-width: 560px; }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-phone { width: 396px; }

/* Today's line */
.line { display: flex; flex-direction: column; gap: 16px; padding-block: 72px; }
.line blockquote { margin: 0; font-size: 36px; line-height: 44px; letter-spacing: -0.8px; max-width: 900px; }
.line cite { font-style: normal; font-size: 13px; line-height: 18px; color: var(--ink-3); }

/* Features: a hairline grid, three by two. */
.features h2 { font-size: 60px; line-height: 64px; letter-spacing: -2px; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cell { padding: 36px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.cell svg { width: 24px; height: 24px; margin-bottom: 8px; color: var(--ink); transition: color 160ms ease-out; }
/* Pointing at a feature turns its icon the logo blue. */
@media (hover: hover) {
  .cell:hover svg { color: var(--brand); }
}
.cell h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.4px; font-weight: 600; }
.cell p { font-size: 15px; line-height: 20px; letter-spacing: -0.1px; color: var(--ink-2); }

/* How a day goes */
.day .head { display: flex; flex-direction: column; gap: 12px; }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.phones figure { margin: 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.phones img { width: 100%; max-width: 334px; }
.phones h3 { font-size: 17px; line-height: 22px; letter-spacing: -0.2px; font-weight: 500; }
.phones p { font-size: 15px; line-height: 20px; letter-spacing: -0.1px; color: var(--ink-2); }

/* The closing call to action, centred. */
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 160px; }
.closing img { width: 72px; height: 72px; }
.closing h2 { font-size: 88px; line-height: 92px; letter-spacing: -3.2px; margin-top: 28px; }
.closing p.body { color: var(--ink-2); max-width: 520px; margin-top: 20px; }
.closing .button { margin-top: 36px; }
.closing .fine { margin-top: 14px; }

/* Footer */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 48px; font-size: 13px; line-height: 18px; color: var(--ink-2); flex-wrap: wrap; }
.footer .brand { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); }
.footer .brand img { width: 24px; height: 24px; }
.footer ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; flex-wrap: wrap; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* Narrower screens: one column, smaller type, the same order. */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 56px; padding-block: 56px; }
  .hero-phone { width: min(396px, 100%); margin-inline: auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .phones { grid-template-columns: 1fr; gap: 64px; justify-items: center; }
  .phones figure { max-width: 334px; }
  .closing h2 { font-size: 64px; line-height: 68px; letter-spacing: -2.4px; }
}
@media (max-width: 640px) {
  .band { padding-block: 72px; }
  .nav ul li:not(:last-child) { display: none; }
  .hero h1 { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
  .title { font-size: 32px; line-height: 38px; letter-spacing: -0.8px; }
  .features h2 { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .line { padding-block: 56px; }
  .line blockquote { font-size: 26px; line-height: 32px; letter-spacing: -0.5px; }
  .grid { grid-template-columns: 1fr; margin-top: 40px; }
  .closing { padding-block: 96px; }
  .closing h2 { font-size: 44px; line-height: 48px; letter-spacing: -1.4px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .cell svg { transition: none; }
  .button:active { transform: none; }
}