/* The public website of postybuddy.com: Home (/), Features (/features),
   Help (/help) and Contact (/contact). Same colours and fonts as the rest of
   Postybuddy (see legal.css). Every page has the same top bar (app icon, menu,
   Log in) and the same footer with the legal links: TikTok's app review asks
   for a real multi-page website, the app icon at the top and the Terms and
   Privacy links in view without opening a menu. */
:root[data-theme="dark"] {
  --bg: #10131c; --surface: #171b28; --surface-2: #1e2333; --ink: #eef1fb; --muted: #9aa2bd;
  --accent: #7d93ec; --accent-ink: #10131c; --border: #2a2f42; --coral: #ff6f59;
  --top-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] {
  --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef1f8; --ink: #1a1f2b; --muted: #5b6275;
  --accent: #3d5ac9; --accent-ink: #ffffff; --border: #e2e6f0; --coral: #e5523c;
  --top-shadow: 0 6px 18px rgba(26, 31, 43, 0.07);
}
* { box-sizing: border-box; }
/* scroll-padding: a link to #something lands below the pinned top bar, not under it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.6;
}
a { color: var(--accent); }
img { max-width: 100%; }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Top bar: app icon + name, menu, theme switch, Log in. Pinned to the top of
   the screen while scrolling; a thin line and shadow appear under it once the
   page has scrolled (the is-scrolled class, set by each page's script). */
.site-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-top {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
}
.site-top.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--top-shadow); }
@media (prefers-reduced-motion: reduce) { .site-top { transition: none; } }
.top { display: flex; align-items: center; gap: 12px 28px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand img { width: 40px; height: 40px; flex: none; display: block; }
.site-nav { display: flex; gap: 4px 22px; flex-wrap: wrap; flex: 1; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15.5px; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.login-link { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; }
.login-link:hover { border-color: var(--accent); }

/* Buttons */
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; padding: 12px 22px; border-radius: 10px; }
.button:hover { filter: brightness(1.08); }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); padding: 11px 21px; }
.button.ghost:hover { border-color: var(--accent); filter: none; }
.cta-note { font-size: 14.5px; color: var(--muted); }

/* Home: hero */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-block: 40px 64px; }
.app-badge { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--muted); font-size: 14.5px; }
.app-badge img { width: 56px; height: 56px; flex: none; display: block; }
.app-badge strong { display: block; color: var(--ink); font-size: 17px; }
.hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 28px; max-width: 34em; }

/* Home: the week card, what a planned week looks like */
.week { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; min-width: 0; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.week-head strong { font-size: 15px; }
.week-head span { font-size: 12.5px; color: var(--muted); }
.slot { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }
.slot:first-of-type { border-top: none; }
.slot .day { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.slot .what { font-size: 15px; line-height: 1.35; min-width: 0; }
.slot .what small { display: block; color: var(--muted); font-size: 13px; }
.tag { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.tag.done { color: var(--coral); }

/* Inner pages: page title */
.page-head { padding-block: 40px 36px; max-width: 46em; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 14px; text-wrap: balance; }
.page-head .lead { margin: 0; }

/* Sections */
section { padding-block: 52px; border-top: 1px solid var(--border); }
.eyebrow { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 28px; text-wrap: balance; }
.section-intro { color: var(--muted); margin: -14px 0 28px; max-width: 40em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; min-width: 0; }
.steps li::before { content: counter(step); display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; margin-bottom: 12px; }
.steps h3, .cards h3 { font-size: 19px; margin: 0 0 6px; line-height: 1.3; }
.steps p, .cards p { margin: 0; color: var(--muted); font-size: 16px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; min-width: 0; }
.card p + p { margin-top: 10px; }
.card .more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 500; text-decoration: none; }
.card .more:hover { text-decoration: underline; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.facts li { padding-left: 22px; position: relative; color: var(--muted); }
.facts li strong { color: var(--ink); font-weight: 600; }
.facts li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.panel h2 { margin: 0 0 6px; font-size: 26px; }
.panel p { margin: 0; color: var(--muted); max-width: 40em; }

/* Help: questions and answers */
.faq > * { max-width: 46em; }
.faq h2 { margin-bottom: 18px; }
.faq details { border-top: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 600; font-size: 17.5px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 13px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 20px; color: var(--accent); }
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding: 0 0 18px; color: var(--muted); }
.faq details > div p { margin: 0 0 10px; }
.faq details > div p:last-child { margin-bottom: 0; }
.faq details > div strong { color: var(--ink); font-weight: 600; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.contact-list h3 { margin: 0 0 4px; font-size: 18px; }
.contact-list p { margin: 0; color: var(--muted); }
.contact-list .address { display: inline-block; margin-top: 8px; font-size: 16px; font-weight: 500; }
.about { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; max-width: 50em; }
.about img { width: 96px; height: 96px; display: block; }
.about p { margin: 0 0 12px; color: var(--muted); }
.about p:last-child { margin-bottom: 0; }

/* Footer: the legal links stay visible on every page, no menu to open */
footer { border-top: 1px solid var(--border); padding-block: 26px 40px; font-size: 14.5px; color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
footer nav a { color: var(--ink); text-decoration: none; }
footer nav a:hover { color: var(--accent); }
footer p { margin: 4px 0; }

/* Theme switch (same as the other pages) */
.theme-switch { position: relative; width: 52px; height: 28px; flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; padding: 0; }
.theme-switch:focus-visible, .button:focus-visible, .login-link:focus-visible, .site-nav a:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-switch-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; }
.theme-switch-icon.sun { left: 7px; color: var(--accent); }
.theme-switch-icon.moon { right: 7px; color: var(--ink); }
.theme-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s ease; }
:root[data-theme="light"] .theme-switch-knob { transform: translateX(24px); background: #4a4640; }
:root[data-theme="light"] .theme-switch-icon.sun { opacity: 0.35; }
:root[data-theme="dark"] .theme-switch-icon.moon { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .theme-switch-knob { transition: none; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-block: 24px 48px; }
  .steps, .cards, .cards.two { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
}
/* Phones: icon + Log in on the first row, the menu on its own row below,
   always visible (no menu button to open). Slimmer than on computers, since
   the bar stays pinned on a small screen. */
@media (max-width: 640px) {
  html { scroll-padding-top: 104px; }
  .top { gap: 4px 14px; padding-block: 8px 0; }
  .brand { font-size: 17px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .top-actions { gap: 10px; }
  .theme-switch { transform: scale(0.9); }
  .login-link { font-size: 14.5px; padding: 5px 12px; }
  .site-nav { order: 3; flex-basis: 100%; gap: 0 20px; }
  .site-nav a { font-size: 15px; padding: 6px 0 7px; }
  .page-head { padding-block: 24px 28px; }
  .about { grid-template-columns: 1fr; gap: 16px; }
  .about img { width: 72px; height: 72px; }
}

/* Tester guide (/beta): an unlisted page for beta testers, English and French
   on the same page (the language switch shows one at a time). */
.lang-bar { display: flex; justify-content: flex-end; padding-top: 24px; }
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lang-switch button { font: inherit; font-size: 14.5px; font-weight: 500; color: var(--muted); background: transparent; border: 0; border-radius: 7px; padding: 6px 14px; cursor: pointer; }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide { max-width: 46em; }
.guide .page-head { padding-top: 12px; }
.guide section { padding-block: 44px; }
.guide h2 { margin-bottom: 18px; }
.guide h3 { font-size: 19px; margin: 26px 0 8px; }
.guide p { margin: 0 0 14px; }
.guide ol, .guide ul { margin: 0 0 16px; padding-left: 24px; }
.guide li { margin: 8px 0; padding-left: 4px; }
.guide li::marker { color: var(--accent); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.92em; }
.guide li ul { margin: 6px 0 0; }
.guide strong { font-weight: 600; }
.guide a { overflow-wrap: anywhere; }
.guide .muted { color: var(--muted); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; margin: 22px 0 0 !important; }
.toc li { margin: 0; padding: 0; }
.toc li::marker { content: none; }
.toc a { display: inline-block; font-size: 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.toc a:hover { border-color: var(--accent); }
.summary { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px 10px; }
.summary h2 { font-size: 24px; margin: 0 0 14px; }
.callout { background: var(--surface-2); border-radius: 12px; padding: 16px 20px 4px; margin: 18px 0 0; }
.callout p:first-child { margin-bottom: 6px; font-weight: 600; }
.shot { margin: 24px 0 0; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.shot.narrow { max-width: 520px; }
.shot.phone { max-width: 300px; margin-top: 16px; }
.callout.tip { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); margin-top: 12px; padding: 14px 18px 2px; }
.callout.tip p { font-size: 16px; }
.shot figcaption { margin-top: 10px; font-size: 15.5px; }
.shot .shot-note { margin-top: 4px; font-size: 14px; font-style: italic; color: var(--muted); }
@media (max-width: 640px) {
  .lang-bar { padding-top: 16px; }
  .summary { padding: 20px 18px 6px; }
  .guide section { padding-block: 36px; }
}