/* Toll's site, the relaunch (2026-10-10): light "Dawn light", the app's own palette (DESIGN.md v7).
   Fog page, white cards, ink words, the icon's peach as the one warm ground, an ink pill for the
   main action, ember only for state. SF Pro, the app's one typeface. No gradients anywhere. */

:root {
  --fog: #F3F4F6;
  --card: #FFFFFF;
  --ink: #111214;
  --ink-2: #5E6470;          /* 5.4:1 on the fog */
  --hair: #E3E5EA;
  --peach: #FFBE8C;
  --peach-ink-2: #644E3E;    /* the second line on peach: ink at 65%, flattened, 4.8:1 */
  --ember: #D9581F;          /* state: a check, the unlocked lock */
  --ember-text: #B84A18;     /* words in the accent: 4.7:1 on the fog */
  --action: #0A0A0B;

  --wrap: 1120px;
  --gutter: 20px;
  --radius: 28px;
  --gap: clamp(80px, 11vw, 140px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 0 0 .5px rgb(17 18 20 / .06), 0 1px 2px rgb(17 18 20 / .04), 0 18px 40px -24px rgb(17 18 20 / .22);
  color-scheme: light;
}
@media (max-width: 380px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--fog); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--fog); color: var(--ink);
  font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--action); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { --wrap: 760px; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* Type */
.display { font-size: clamp(42px, 6.6vw, 80px); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; }
.title { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em; }
.two-tone > span { display: block; }
.two-tone > span + span { color: var(--ink-2); }
.on-peach .two-tone > span + span { color: var(--peach-ink-2); }
h3 { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); letter-spacing: -0.005em; }
.on-peach .lede { color: var(--ink); }
.quiet { color: var(--ink-2); }
.small { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.link { color: var(--ember-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: 600 17px/1 var(--font); text-decoration: none; letter-spacing: -0.01em;
  transition: transform .16s var(--ease), opacity .16s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { opacity: .86; }
.btn-secondary { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.btn-secondary:hover { opacity: .8; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Header: a glass bar that floats over the page */
.top { position: sticky; top: 0; z-index: 20; padding: 12px 0 0; }
.top-bar {
  width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgb(255 255 255 / .78); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgb(17 18 20 / .08), 0 10px 28px -16px rgb(17 18 20 / .25);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top-bar { background: #fff; } }
@media (prefers-reduced-transparency: reduce) { .top-bar { background: #fff; } }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { width: 84px; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink); transition: opacity .16s var(--ease); }
.nav a:hover { opacity: .65; }
.nav a[aria-current="page"] { background: var(--fog); }
.nav .get-pill { background: var(--action); color: #fff; padding: 12px 18px; font-weight: 600; }
.nav .get-pill:hover { opacity: .86; }
@media (max-width: 760px) { .nav .wide { display: none; } }
@media (max-width: 420px) { .nav .narrow-hide { display: none; } .brand img { width: 74px; } .top-bar { padding-left: 16px; } }

/* Sections */
.section { padding-block: var(--gap) 0; }
.head { max-width: 720px; display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Phones: the app's own captures in a black frame with a transparent outside */
.phone { width: var(--pw, 280px); filter: drop-shadow(0 26px 30px rgb(17 18 20 / .18)) drop-shadow(0 4px 8px rgb(17 18 20 / .08)); }

/* Hero: the icon's peach as a solid ground, like the store page */
.hero { padding: 12px var(--gutter) 0; margin-top: -72px; }
.hero-band {
  max-width: 1400px; margin-inline: auto; border-radius: 0 0 40px 40px; background: var(--peach);
  padding: 140px 0 72px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-copy .lede { max-width: 34em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; color: var(--peach-ink-2); }
.meta li + li::before { content: "·"; margin-right: 14px; }
@media (max-width: 520px) { .meta { gap: 4px 12px; } .meta li + li::before { content: none; } }
.hero-phones { display: flex; justify-content: center; align-items: flex-end; gap: 20px; }
.hero-phones .phone { --pw: min(300px, 40vw); }
@media (max-width: 899px) {
  .hero-band { padding: 120px 0 48px; border-radius: 0 0 32px 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-phones .phone { --pw: min(280px, 72vw); }
}
@media (max-width: 520px) { .hero { padding-inline: 0; } .hero-band { border-radius: 0 0 28px 28px; } }

/* The no-ignore band */
.versus { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(32px, 6vw, 80px); padding: clamp(28px, 4vw, 56px); }
.versus .phone { --pw: min(280px, 64vw); }
.versus-copy { display: grid; gap: 20px; max-width: 520px; }
.compare { display: grid; gap: 12px; margin-top: 4px; }
.compare li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.compare svg { width: 22px; height: 22px; margin-top: 3px; }
.compare .no svg { color: var(--ink-2); }
.compare .yes svg { color: var(--ember); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; justify-items: center; text-align: left; } }

/* How it works: three steps, each a phone over its words */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { display: grid; justify-items: center; gap: 24px; padding: 32px 24px 28px; }
.step .phone { --pw: min(240px, 66vw); }
.step-text { display: grid; gap: 8px; width: 100%; }
.step-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--fog); font-size: 15px; font-weight: 700; }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* Your rules */
.rules-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 80px); align-items: center; }
.rules-grid .phone { --pw: min(270px, 66vw); }
.rule-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.rule { padding: 22px 22px 24px; display: grid; gap: 6px; }
.rule .big { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.rule p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 899px) { .rules-grid { grid-template-columns: 1fr; justify-items: center; } .rules-grid > div { width: 100%; } }
@media (max-width: 520px) { .rule-list { grid-template-columns: 1fr; } }

/* Why I built it */
.founder { padding: clamp(32px, 5vw, 56px); display: grid; gap: 20px; max-width: 820px; margin-inline: auto; }
.founder blockquote { margin: 0; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.founder figcaption { color: var(--ink-2); font-size: 16px; }

/* Features */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature { display: grid; grid-template-rows: auto 1fr; gap: 22px; padding: 28px 22px 26px; }
.feature .phone { --pw: min(210px, 60vw); justify-self: center; }
.feature-text { display: grid; gap: 8px; align-content: start; }
.feature-text p { font-size: 16px; color: var(--ink-2); }
.figures { display: grid; gap: 6px; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.figures b { color: var(--ink); font-weight: 650; margin-right: 6px; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.note { padding: 26px 24px; display: grid; gap: 8px; align-content: start; }
.note p { font-size: 16px; color: var(--ink-2); }
.note .off { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
@media (max-width: 1060px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 899px) { .notes { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } .feature .phone { --pw: min(240px, 66vw); } }

/* Plans */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.plan { padding: clamp(28px, 4vw, 40px); display: grid; gap: 18px; align-content: start; }
.plan > .small:last-child { align-self: end; }
.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.checks svg { width: 20px; height: 20px; margin-top: 4px; color: var(--ember); }
.prices { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.price { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.price b { font-size: 19px; font-weight: 650; }
.price .amount { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.price > span { font-size: 15px; color: var(--ink-2); grid-column: 1 / -1; }
.chip { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #FFE8D6; color: var(--ember-text); font-size: 13px; font-weight: 650; vertical-align: 2px; }
@media (max-width: 899px) { .plans { grid-template-columns: 1fr; } }

/* Private */
.private { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.private .card { padding: 26px 24px; display: grid; gap: 8px; align-content: start; }
.private .card p { font-size: 16px; color: var(--ink-2); }
.never { margin-top: 20px; padding: clamp(26px, 4vw, 36px); display: grid; grid-template-columns: auto 1fr; gap: 16px 40px; align-items: start; }
.never ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.never li { font-size: 16px; color: var(--ink-2); }
.never li b { color: var(--ink); font-weight: 600; }
@media (max-width: 899px) { .private { grid-template-columns: 1fr; } .never { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .never ul { grid-template-columns: 1fr; } }

/* The last call: peach again */
.get { padding: var(--gap) var(--gutter) 0; }
.get-band { max-width: 1400px; margin-inline: auto; background: var(--peach); border-radius: 40px; padding: clamp(48px, 7vw, 88px) 0; }
.get-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.app-icon { width: clamp(112px, 14vw, 168px); border-radius: 22.37%; box-shadow: 0 0 0 .5px rgb(17 18 20 / .12), 0 18px 34px -18px rgb(17 18 20 / .35); }
.get-copy { display: grid; gap: 20px; justify-items: start; }
@media (max-width: 640px) { .get-grid { grid-template-columns: 1fr; } .get { padding-inline: 0; } .get-band { border-radius: 28px; } }

/* Footer */
.foot { padding: 56px 0 48px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--ink-2); }
.foot .sign { display: inline-flex; align-items: center; gap: 14px; }
.foot .sign img { width: 64px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }

/* Inner pages: support, privacy, 404 */
.page-head { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 48px); display: grid; gap: 18px; }
.page-head .lede { max-width: 38em; }
.contact { padding: 26px 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-bottom: 48px; }
.contact img { width: 64px; border-radius: 22.37%; box-shadow: 0 0 0 .5px rgb(17 18 20 / .12); }
.contact p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 640px) { .contact { grid-template-columns: auto 1fr; } .contact .btn { grid-column: 1 / -1; } }
.faq-group { margin-bottom: 40px; }
.faq-group > h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.faq { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); }
.faq details { border-top: 1px solid var(--hair); }
.faq details:first-child { border-top: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center;
  padding: 20px 22px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { width: 28px; height: 28px; border-radius: 999px; background: var(--fog); display: grid; place-items: center; transition: transform .32s var(--ease); }
.faq .plus svg { width: 14px; height: 14px; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details > div { padding: 0 22px 22px; color: var(--ink-2); display: grid; gap: 12px; max-width: 46em; }
.faq details[open] summary { padding-bottom: 10px; }
.prose { display: grid; gap: 16px; padding-bottom: 24px; }
.prose h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 28px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.toc { padding: 22px 24px; margin-bottom: 8px; }
.toc ol { columns: 2; column-gap: 32px; list-style: decimal; padding-left: 20px; color: var(--ink-2); }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.lost { padding: clamp(80px, 12vw, 140px) 0 40px; text-align: center; }
.lost .wrap { display: grid; justify-items: center; gap: 22px; }
.lost img { width: 120px; border-radius: 22.37%; }
.lost .actions { justify-content: center; }
.prose section { display: grid; gap: 12px; }
.prose section > h2 { margin: 20px 0 0; }