/* Briefing's site: the app's own materials. Coral fields, Paper pages, the New York serif the
   app uses for its mastheads, the icon's coral rule over lines of text, and real screens.
   Dark mode follows the app's Night theme. */

:root {
  --coral: #AD4532;
  --coral-hover: #973A29;
  --on-coral: #FBFAF8;
  --on-coral-soft: #F7E3DD;
  --coral-text: #AD4532;
  --paper: #F3F2EF;
  --raised: #FBFAF8;
  --stage: #E9E7E1;
  --ink: #3B3A37;
  --strong: #24231F;
  --muted: #686662;
  --rule: #DAD7D0;
  --line: #8B8984;
  --shadow: rgb(36 35 31 / 0.5);

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --width: 1320px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral-text: #FF7D65;
    --paper: #1E1E1D;
    --raised: #2A2A28;
    --stage: #2A2A28;
    --ink: #C8C6C1;
    --strong: #EFEEEA;
    --muted: #A9A7A2;
    --rule: #3A3A37;
    --line: #8E8C87;
    --shadow: rgb(0 0 0 / 0.75);
  }
}

@media (prefers-contrast: more) {
  :root { --muted: #4C4B48; --coral: #803325; --coral-hover: #6E2B1F; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--coral); color: var(--on-coral); }
:focus-visible { outline: 3px solid var(--coral-text); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .coral-band :focus-visible, .page-head :focus-visible { outline-color: var(--on-coral); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 var(--gutter); }

/* Shared: the bar, the App Store button, the icon's motif */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--serif); text-decoration: none; }
.wordmark img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.topbar nav { display: flex; gap: 24px; font-size: 15px; }
.topbar nav a { text-decoration: none; opacity: 0.9; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { opacity: 1; text-decoration: underline; }

.soon {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  background: var(--on-coral); color: var(--coral);
  font: 600 16px/1 var(--sans);
}
.soon svg { width: 17px; height: 17px; }
.soon.on-paper { background: var(--coral); color: var(--on-coral); }

.motif { display: grid; gap: 9px; width: 84px; margin-bottom: 28px; }
.motif i { display: block; height: 8px; border-radius: 4px; background: var(--line); opacity: 0.5; }
.motif i:first-child { height: 10px; border-radius: 0; background: var(--coral); opacity: 1; }
.motif i:nth-child(3) { width: 84%; }
.motif i:nth-child(4) { width: 92%; }

.phone { border-radius: 13.5% / 6.2%; box-shadow: 0 40px 70px -30px var(--shadow); }

/* Hero: the icon and real screens on a coral field */

.hero { background: var(--coral); color: var(--on-coral); overflow: hidden; }
.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-top: clamp(8px, 2vw, 24px);
  min-height: 760px;
}
.hero-copy { padding-bottom: 96px; }
.app-icon { width: clamp(120px, 14vw, 196px); border-radius: 22.5%; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45); }
.hero h1 {
  margin: 44px 0 0;
  font: 700 clamp(52px, 6.2vw, 92px)/0.95 var(--serif);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero .lead { margin: 26px 0 0; max-width: 24em; font: 22px/1.45 var(--serif); color: var(--on-coral-soft); text-wrap: pretty; }
.hero .soon { margin-top: 34px; }
.hero small { display: block; margin-top: 14px; font-size: 14px; color: var(--on-coral-soft); }

.fan { position: relative; height: 760px; }
.fan .phone { position: absolute; width: 44%; max-width: 300px; }
.fan .a { left: 0; top: 120px; transform: rotate(-7deg); }
.fan .b { left: 28%; top: 30px; z-index: 2; }
.fan .c { left: 56%; top: 120px; transform: rotate(7deg); }

/* Features: a claim beside the screen that shows it */

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; padding: clamp(80px, 10vw, 140px) 0; }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature.flip .text { order: 2; }
h2 { margin: 0 0 18px; font: 700 clamp(40px, 5vw, 64px)/1 var(--serif); letter-spacing: -0.02em; color: var(--strong); text-wrap: balance; }
.text p { margin: 0; max-width: 24em; font: 22px/1.5 var(--serif); text-wrap: pretty; }
.facts { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.facts li { display: flex; gap: 12px; font-size: 16.5px; }
.facts li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 2px; background: var(--coral); }

.stage { position: relative; height: 620px; border-radius: 36px; background: var(--stage); overflow: hidden; }
.stage .phone { position: absolute; width: min(310px, 46%); left: 50%; top: 60px; transform: translateX(-50%); }
.stage.night { background: #1E1E1D; }
.stage.two .phone:first-child { left: 33%; }
.stage.two .phone:last-child { left: 67%; top: 120px; }

/* Everywhere: the rest of the app, as a dense, ruled list */

.everywhere { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--rule); }
.everywhere h2 { max-width: 14em; }
.everywhere .lead { margin: 0; max-width: 32em; font: 22px/1.5 var(--serif); text-wrap: pretty; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); margin: 56px 0 0; }
.grid div { padding: 22px 0 24px; border-top: 1px solid var(--rule); }
.grid dt { margin: 0 0 6px; font: 600 21px/1.3 var(--serif); color: var(--strong); }
.grid dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 12px 3px 0; border-radius: 2px; background: var(--coral); }
.grid dd { margin: 0; font-size: 16px; }

/* What's New, from the app's own list */

.changes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--rule); }
.changes .text p { margin-bottom: 24px; }
.feed-link { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-text); font-weight: 600; text-decoration: none; }
.feed-link:hover { text-decoration: underline; }
.feed-link svg { width: 18px; height: 18px; }
.entries { margin: 0; padding: 0; list-style: none; }
.entries li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--rule); }
.entries li:last-child { border-bottom: 1px solid var(--rule); }
.entries time { font-size: 14px; line-height: 1.75; color: var(--muted); }
.entries strong { display: block; font: 600 20px/1.3 var(--serif); color: var(--strong); }
.entries span { font-size: 16px; }

/* Privacy on coral */

.coral-band { background: var(--coral); color: var(--on-coral); padding: clamp(80px, 10vw, 120px) 0; }
.coral-band h2 { color: var(--on-coral); max-width: 12em; }
.coral-band .lead { margin: 0; max-width: 30em; font: 22px/1.5 var(--serif); color: var(--on-coral-soft); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 56px 0 0; padding: 0; list-style: none; }
.trio li { border-top: 2px solid rgb(251 250 248 / 0.5); padding-top: 18px; }
.trio strong { display: block; margin-bottom: 6px; font: 600 22px/1.3 var(--serif); }
.trio span { color: var(--on-coral-soft); font-size: 16px; }
.coral-band a { color: var(--on-coral); }
.coral-band .more { display: inline-block; margin-top: 40px; font-weight: 600; }

/* Close */

.end { text-align: center; padding: clamp(96px, 12vw, 150px) 0; }
.end .app-icon { width: 120px; margin: 0 auto 32px; box-shadow: 0 20px 40px -16px var(--shadow); }
.end h2 { margin: 0 auto 12px; }
.end p { margin: 0 0 30px; font: 20px/1.5 var(--serif); color: var(--muted); }

.site-footer { border-top: 1px solid var(--rule); padding: 28px 0 44px; font-size: 14px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--strong); text-decoration: underline; }

/* Support and Privacy */

.page-head { background: var(--coral); color: var(--on-coral); }
.page-head .title { display: flex; align-items: center; gap: 28px; padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.page-head .app-icon { width: clamp(72px, 8vw, 104px); }
.page-head h1 { margin: 0; font: 700 clamp(44px, 6vw, 80px)/0.98 var(--serif); letter-spacing: -0.02em; }

.doc { padding: clamp(48px, 7vw, 88px) 0 0; }
.doc .wrap { display: grid; grid-template-columns: 13em minmax(0, 44em); gap: clamp(28px, 6vw, 88px); }
.doc nav { position: sticky; top: 24px; align-self: start; font-size: 15px; }
.doc nav .motif { width: 64px; margin-bottom: 18px; }
.doc nav ul { margin: 0; padding: 0; list-style: none; }
.doc nav li { border-top: 1px solid var(--rule); }
.doc nav li:last-child { border-bottom: 1px solid var(--rule); }
.doc nav a { display: block; padding: 10px 0; text-decoration: none; }
.doc nav a:hover { color: var(--coral-text); }
.doc h2 { margin: 56px 0 12px; font-size: clamp(30px, 3.4vw, 38px); scroll-margin-top: 24px; }
.doc article > h2:first-child { margin-top: 0; }
.doc p, .doc li { font: 19px/1.6 var(--serif); }
.doc ul { padding-left: 1.1em; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--coral); }
.doc .updated { margin: 0 0 24px; font: 15px/1.4 var(--sans); color: var(--muted); }
/* Decisions still open in a draft page; none should be left when it's published. */
.doc .todo { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--coral); background: var(--raised); font: 600 15px/1.5 var(--sans); color: var(--strong); }

details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0;
  font: 600 20px/1.35 var(--serif); color: var(--strong);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--coral); transition: transform 0.2s ease; }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--coral-text); }
details > p { margin: 0 0 18px; }

/* Motion: the screens settle into their fan once. */

@media (prefers-reduced-motion: no-preference) {
  .fan .phone { animation: settle 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fan .a { animation-delay: 0.12s; }
  .fan .c { animation-delay: 0.24s; }
  @keyframes settle { from { translate: 0 60px; } }
  .soon, .feed-link { transition: background-color 0.15s ease, color 0.15s ease; }
  .soon.on-paper:hover { background: var(--coral-hover); }
}

/* Responsive */

@media (max-width: 1000px) {
  .hero-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding-bottom: 0; }
  .fan { height: clamp(380px, 92vw, 640px); margin-top: 24px; }
  .fan .phone { width: 40%; }
  .fan .a { top: 14%; }
  .fan .b { left: 30%; top: 0; }
  .fan .c { left: 56%; top: 14%; }
  .feature, .changes { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .text { order: 0; }
  .stage { height: clamp(420px, 100vw, 620px); }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc .wrap { grid-template-columns: minmax(0, 1fr); }
  .doc nav { position: static; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar nav { gap: 16px; font-size: 14px; }
  .hide-sm { display: none; }
  .hero h1 { margin-top: 32px; }
  .hero .lead, .text p, .coral-band .lead { font-size: 19px; }
  .stage .phone { width: 58%; top: 40px; }
  .stage.two .phone { width: 50%; }
  .stage.two .phone:first-child { left: 30%; }
  .stage.two .phone:last-child { left: 70%; top: 80px; }
  .entries li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .everywhere .lead { font-size: 19px; }
  .page-head .title { gap: 18px; }
}