/* Nook's website. The tokens are the app's palette (docs/01-product-direction.md, NookTheme) and match the
   privacy and support pages the Worker serves (proxy/src/site.ts), so all three read as one place.
   A future web app under /app can import this file and look the same. */

:root {
  color-scheme: light dark;
  --bg: #F8F4EC;          /* ivory */
  --bg-deep: #F1EBDF;     /* ivoryDeep */
  --card: #FFFDF8;
  --ink: #1F2422;
  --soft: #5B615D;        /* inkSoft */
  --line: #E6DFD1;
  --sage: #7D9B86;
  --sage-deep: #5E7D67;
  --sage-soft: #E4ECE5;
  --peach: #F2B79E;
  --lavender: #C6BBE6;
  --honey: #E8C77A;
  --rose: #D98C8C;
  /* sage-deep is 4.2:1 on ivory, a little short of 4.5:1 for body-size text, so links and small sage
     words use this slightly darker shade, the way the app has …Text shades for its light colours. */
  --sage-text: #52705B;
  --on-sage: #FFFDF8;
  --shadow: 0 1px 2px rgba(31, 36, 34, .06), 0 8px 24px rgba(31, 36, 34, .08);

  /* Motion, after the app's springs: short, with a hint of overshoot and no bounce. The spring is a damped
     curve drawn with linear(); a browser without linear() falls back to its plain ease. */
  --spring: linear(0, 0.084, 0.266, 0.471, 0.657, 0.805, 0.911, 0.979, 1.017, 1.035, 1.038, 1.034, 1.027, 1.019, 1.012, 1.007, 1.003, 1.001, 0.999, 1);
  --ease-out: cubic-bezier(.22, .8, .3, 1);

  --radius-card: 20px;
  --radius-chip: 12px;
  --gutter: 16px;
  --max: 1040px;
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode keeps the same hues on warm charcoal, with the values the app and site.ts use. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1A17; --bg-deep: #211F1C; --card: #24231F; --ink: #EFE9DD; --soft: #B5AFA3; --line: #3A3832;
    --sage: #9DB8A4; --sage-deep: #9DB8A4; --sage-soft: #2C3530; --peach: #D99A80; --lavender: #A99FCB;
    --honey: #E8C77A; --rose: #D98C8C;
    --sage-text: #9DB8A4; --on-sage: #1B1A17;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.55 var(--text);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sage-text); text-underline-offset: 2px; }
p { margin: 0 0 12px; }

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

/* Keyboard users can jump past the header; it stays hidden until focused. */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 10; background: var(--card); padding: 10px 14px; border-radius: var(--radius-chip); }

:focus-visible { outline: 3px solid var(--sage-text); outline-offset: 2px; border-radius: 6px; }

/* Header */
.top { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 5; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.home { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.mark { width: 40px; height: 40px; border-radius: 10px; }
.name { font: 600 22px/1.2 var(--display); }

/* Small screens: the links fold into the Menu. Wide screens: they sit in the bar and the Menu goes away. */
.links { display: none; }
.menu summary {
  list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--card);
  font-weight: 600; color: var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu nav {
  position: absolute; right: var(--gutter); left: var(--gutter); top: calc(100% + 4px);
  display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 8px;
}
.menu nav a, .links a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-chip);
}
.menu nav a:hover, .links a:hover { background: var(--sage-soft); }

@media (min-width: 760px) {
  .links { display: flex; gap: 2px; }
  .menu { display: none; }
}

/* Hero */
.hero { padding-top: 40px; padding-bottom: 24px; display: grid; gap: 32px; }
.hero-mark { display: block; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow); }
.greeting { font: 600 19px/1.3 var(--display); color: var(--sage-text); margin: -4px 0 10px; }
/* In the evening the top of the page warms a touch towards peach, the way a lamp does. */
.evening main {
  background: radial-gradient(ellipse 90% 100% at 60% 0, color-mix(in srgb, var(--peach) 13%, transparent), transparent) top / 100% 860px no-repeat;
}
h1 { font: 700 34px/1.15 var(--display); margin: 0 0 14px; letter-spacing: -0.01em; }
h2 { font: 700 26px/1.2 var(--display); margin: 0 0 12px; }
.lede { font-size: 19px; color: var(--soft); max-width: 36em; margin-bottom: 24px; }

.store {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px;
  background: var(--sage-deep); color: var(--on-sage); border-radius: 999px; text-decoration: none;
  font: 600 17px/1.2 var(--display); text-align: center;
}
.store:hover { filter: brightness(1.05); }
.store.small { min-height: 44px; font-size: 15px; padding: 10px 18px; }

.hero-shots { display: flex; align-items: flex-end; gap: 16px; }
.shot { border-radius: var(--radius-card); box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--card); }
.hero-shots .phone { width: 30%; flex: none; border-radius: 24px; }
.hero-shots .tablet { width: calc(70% - 16px); flex: none; }

/* Feature sections */
.feature { padding-top: 48px; padding-bottom: 8px; display: grid; gap: 24px; align-items: center; }
.copy { max-width: 36em; }
.copy p { color: var(--ink); }

@media (min-width: 860px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .hero { grid-template-columns: 4fr 5fr; align-items: center; padding-top: 72px; }
  .feature { padding-top: 80px; }
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split.flip > .copy { order: 2; }
}

/* Ask Nook and Send to Nook: small pictures of the app drawn in HTML. They are shown, not used, so the
   "buttons" are plain spans that nothing can focus or press. */
.chat, .mail {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 20px; box-shadow: var(--shadow);
}
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; margin-bottom: 10px; }
.bubble.you { margin-left: auto; background: var(--sage-soft); color: var(--ink); border-bottom-right-radius: 6px; }
.bubble.nook { background: var(--bg-deep); color: var(--ink); border-bottom-left-radius: 6px; }
.change {
  border: 1px solid var(--line); border-left: 6px solid var(--sage); border-radius: var(--radius-chip);
  padding: 14px 16px; background: var(--bg);
}
.change-title { font: 600 15px/1.3 var(--display); color: var(--soft); margin-bottom: 6px; }
.change-row { display: flex; gap: 10px; align-items: baseline; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--peach); flex: none; transform: translateY(-1px); }
.change-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-chip);
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600;
}
.btn.primary { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--on-sage); }
.chat figcaption { margin-top: 12px; color: var(--soft); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The change card and what is left once it is applied share one place, so the picture keeps its height
   when one gives way to the other. Its last frame is the applied one. */
.ask-result { display: grid; }
.ask-result > * { grid-area: 1 / 1; }
.chat .change { visibility: hidden; opacity: 0; transform: scale(.97); }
.applied { display: grid; gap: 10px; justify-items: start; align-self: center; }
.toast {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 8px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
  font-weight: 600;
}
.toast::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sage); }
.undo { color: var(--sage-text); }
.strip {
  --strip-gap: 8px;
  justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: var(--strip-gap);
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--bg);
}
.day { min-width: 0; }
.day-name { display: block; font: 600 13px/1.4 var(--display); color: var(--soft); }
.chip {
  display: block; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: var(--card);
  border-left: 4px solid var(--peach); font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* The input the questions are typed into. A long line keeps its newest letters in view, like a real field. */
.ask-input {
  display: flex; align-items: center; min-height: 44px; margin: 14px 0 0; padding: 0 16px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); white-space: nowrap; font-size: 15px;
}
.ask-input.long { justify-content: flex-end; }
.placeholder { color: var(--soft); }
.ask-input.typing .placeholder { display: none; }
.ask-input.typing .typed::after {
  content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom;
  background: var(--sage-deep); animation: caret 1s steps(1) infinite;
}

.replay {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-chip);
  background: var(--card); color: var(--sage-text); font: 600 15px/1.2 var(--text); cursor: pointer;
}
.replay:hover { background: var(--sage-soft); }
.replay[hidden] { display: none; }
.scene-foot { margin: 0; display: flex; justify-content: flex-end; }
.scene-foot .replay { margin-top: 12px; }
/* The replay button arrives after the first run, so its room is kept from the start. */
.motion .scene-foot { min-height: 56px; }

.mail-row { color: var(--soft); font-size: 15px; margin-bottom: 6px; }
.mail-label { display: inline-block; min-width: 4.5em; font-weight: 600; }
.addr { font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--sage-soft); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
/* On a phone the address is too long to share a line with its label, so it gets a line of its own. */
/* As a block it takes the whole line before it wraps, where an inline-block wrapped beside the label. */
@media (max-width: 480px) { .mail-row:first-of-type .addr { display: block; width: fit-content; margin-top: 4px; } }
.mail-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mail { position: relative; overflow: hidden; }
/* The envelope only shows while the scene plays; its last frame is gone, delivered into the address. */
.envelope { position: absolute; top: 16px; right: 18px; color: var(--ink); opacity: 0; transform: translateX(-60px) scale(.4); }
.addr { position: relative; }
.addr::after { content: ""; position: absolute; inset: -3px; border-radius: 8px; box-shadow: 0 0 0 2px var(--sage); opacity: 0; }
.week { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.week-title { font: 600 15px/1.3 var(--display); color: var(--soft); margin-bottom: 4px; }
.week ul { list-style: none; margin: 0; padding: 0; }
.week li { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; }
.week .dot { transform: none; }

/* The grocery list, in its merged and sorted last frame. Rows have one fixed height so the scene can move
   them by whole rows with transforms alone. */
.groceries {
  --row: 2.5em;
  margin: 20px 0 0; max-width: 340px; padding: 10px 18px; font-size: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow);
}
.groceries ul { list-style: none; margin: 0; padding: 0; }
.groceries li { display: flex; align-items: center; gap: 10px; height: var(--row); white-space: nowrap; }
.groceries .aisle { font: 600 1em/1 var(--display); color: var(--soft); }
.groceries .onions { --from: -1; position: relative; }
.merged, .ghost { display: flex; align-items: center; gap: 10px; }
.ghost { position: absolute; left: 0; top: 0; height: var(--row); opacity: 0; background: var(--card); }
/* "1 onion" slides up under "2 onions", so the two names never overlap as text. */
.ghost.g2 { z-index: 1; padding-right: 8px; }
.ring { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--sage); flex: none; }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 10px 14px; border-radius: var(--radius-chip); background: var(--card); border: 1px solid var(--line);
  font-weight: 500;
}
.chips li:nth-child(3n+1) { border-left: 6px solid var(--sage); }
.chips li:nth-child(3n+2) { border-left: 6px solid var(--peach); }
.chips li:nth-child(3n) { border-left: 6px solid var(--lavender); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; }
.card.privacy { border-left: 6px solid var(--lavender); }
.card > :last-child { margin-bottom: 0; }

/* Footer */
.foot { margin-top: 80px; border-top: 1px solid var(--line); background: var(--bg-deep); color: var(--soft); font-size: 15px; }
.foot-inner { padding-top: 28px; padding-bottom: 36px; display: grid; gap: 14px; justify-items: start; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot p { margin: 0; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; }
}

/* Motion. The script at the end of index.html adds .motion to <html>, or .calm when Reduce Motion is on, so
   with no script nothing below applies and every picture rests on its last frame. Only transform and
   opacity move. A scene with .play starts from its first frame; each step class (.s1, .s2 …) the script
   adds lets one more piece reach its resting place, so the styles say what is hidden until which step. */

/* The mark gathers: the three circles drift in under the roof while the headline arrives phrase by phrase,
   the last one landing as the circles settle. It runs once and is done in about 1.5s. */
.motion .hero-mark .roof { animation: fade-in .4s ease-out both; }
.motion .hero-mark .c {
  transform-box: fill-box; transform-origin: center;
  animation: gather 1.1s var(--spring) both, fade-in .45s ease-out both;
}
.motion .hero-mark .c-sage { --dx: -80px; --dy: 26px; animation-delay: .1s; }
.motion .hero-mark .c-lavender { --dx: 80px; --dy: 26px; animation-delay: .16s; }
.motion .hero-mark .c-peach { --dx: 0px; --dy: -40px; animation-delay: .22s; }
.motion .ph { display: inline-block; animation: rise .55s var(--ease-out) both; }
.motion .ph:nth-child(1) { animation-delay: .3s; }
.motion .ph:nth-child(2) { animation-delay: .6s; }
.motion .ph:nth-child(3) { animation-delay: .9s; }
.motion .greeting { animation: rise .55s var(--ease-out) 1s both; }
/* The screenshots settle into place with a slight tilt, a few pixels and no more. */
.motion .hero-shots .phone { animation: settle-phone .9s var(--ease-out) .35s both; }
.motion .hero-shots .tablet { animation: settle-tablet .9s var(--ease-out) .5s both; }

@keyframes gather { from { transform: translate(var(--dx), var(--dy)) scale(.92); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes settle-phone { from { opacity: 0; transform: translateY(12px) rotate(-1.5deg); } }
@keyframes settle-tablet { from { opacity: 0; transform: translateY(16px) rotate(.8deg); } }
@keyframes caret { 50% { opacity: 0; } }

/* Sections below the fold rise 12px as they arrive, once. */
.motion .feature, .calm .feature { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.motion .feature.pre { opacity: 0; transform: translateY(12px); }

/* Ask Nook: a question typed and answered, a request turned into a change card, Apply, and the event moving
   from Tuesday to Thursday. */
.motion .chat .bubble, .motion .chat .change, .motion .applied {
  transition: opacity .3s ease-out, transform .35s var(--spring), visibility .3s;
}
.motion .chat .bubble.you { transform-origin: right bottom; }
.motion .chat .bubble.nook { transform-origin: left bottom; }
.chat.play:not(.s1) .q1, .chat.play:not(.s2) .a1, .chat.play:not(.s3) .q2 { opacity: 0; transform: translateY(8px) scale(.97); }
.chat.play:not(.s4) .change { transform: translateY(18px); }
.chat.play.s4:not(.s6) .change { visibility: visible; opacity: 1; transform: none; }
/* Once applied, the card folds away to one line of "Done. Undo". */
.motion .chat .change { transform-origin: center top; }
.chat.play:not(.s6) .applied { visibility: hidden; opacity: 0; transform: translateY(10px); }
.motion .chip { transition: transform .5s var(--spring); }
.chat.play:not(.s7) .chip { transform: translateX(calc(-100% - var(--strip-gap))); }

/* Apply presses itself: a small give, and a lighter sage that blooms from the middle, like a check-off. */
.motion .btn.primary { position: relative; overflow: hidden; isolation: isolate; }
.motion .btn.primary::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 140%; aspect-ratio: 1;
  border-radius: 50%; background: var(--sage); opacity: 0; transform: translate(-50%, -50%) scale(0);
}
.chat.play.s5 .btn.primary, .mail.play.s4 .btn.primary { animation: press .35s var(--ease-out); }
.chat.play.s5 .btn.primary::after, .mail.play.s4 .btn.primary::after { animation: bloom .6s ease-out; }
@keyframes press { 40% { transform: scale(.95); } }
@keyframes bloom { from { opacity: 1; transform: translate(-50%, -50%) scale(0); } 60% { opacity: .9; } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* Send to Nook: the envelope slides into the address, the event Nook found unfolds, Apply, and the line
   settles onto the week. */
.motion .envelope { transition: opacity .3s ease-out, transform .5s var(--spring); }
.mail.play:not(.s1) .envelope { transform: translateX(56px); }
.mail.play.s1:not(.s2) .envelope { opacity: 1; transform: none; }
.mail.play.s2 .addr::after { animation: ring .8s ease-out; }
@keyframes ring { 30% { opacity: 1; } }
.motion .found { transform-origin: center top; transition: opacity .35s ease-out, transform .55s var(--spring); }
.mail.play:not(.s3) .found { opacity: 0; transform: perspective(700px) rotateX(-70deg); }
.motion .week .new { transition: opacity .3s ease-out, transform .45s var(--spring); }
.mail.play:not(.s5) .week .new { opacity: 0; transform: translateY(-22px); }

/* Groceries: "1 onion" slides up into "2 onions" and they become "3 onions", then the rows find their aisles. */
.motion .groceries li { transition: transform .6s var(--spring), opacity .3s ease-out; }
.motion .groceries .ghost, .motion .groceries .merged { transition: transform .5s var(--spring), opacity .25s ease-out; }
.groceries.play:not(.s3) .item { transform: translateY(calc(var(--from, 0) * var(--row))); }
.groceries.play:not(.s3) .aisle { opacity: 0; }
.groceries.play:not(.s2) .ghost { opacity: 1; }
.groceries.play:not(.s1) .g1 { transform: translateY(calc(2 * var(--row))); }
.groceries.play:not(.s2) .merged { opacity: 0; }
.motion .groceries li:nth-child(3) { transition-delay: 40ms; }
.motion .groceries li:nth-child(5) { transition-delay: 80ms; }
.motion .groceries li:nth-child(6) { transition-delay: 120ms; }

/* Going back to a scene's first frame for a replay happens at once, without animating backwards. */
.scene.reset, .scene.reset * { transition: none !important; animation: none !important; }

/* With Reduce Motion nothing moves: the headline and sections crossfade in and the scenes stand still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.calm .feature.pre { opacity: 0; }
.calm .hero-text h1, .calm .greeting { animation: fade-in .6s ease-out both; }

/* Pricing (pricing.html). The plans sit side by side from tablet width and stack on a phone. */
.links a[aria-current="page"], .menu nav a[aria-current="page"] { font-weight: 600; background: var(--sage-soft); }
.pricing-head { padding-top: 40px; max-width: var(--max); }
.pricing-head > p { max-width: 36em; }
/* These sections are a column of short parts, so they flow as blocks rather than the feature grid's wide gaps. */
.pricing-section { display: block; }
.pricing-section > h2 { margin-bottom: 20px; }
.pricing-head h1 { margin-bottom: 10px; }

.plans { display: grid; gap: 16px; }
.plan {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px; box-shadow: var(--shadow); min-width: 0;
}
.plan.best { border: 2px solid var(--sage-deep); }
.plan > :last-child { margin-bottom: 0; }
.plan-name { font: 600 21px/1.3 var(--display); margin: 0 0 6px; }
.price { font-size: 17px; color: var(--soft); margin-bottom: 6px; }
.amount { font: 700 36px/1.15 var(--display); color: var(--ink); letter-spacing: -0.01em; margin-right: 4px; }
.plan-note { color: var(--ink); }
/* Honey is a light colour in both themes, so the tag's words stay dark ink on it (about 10:1). */
.tag {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--honey); color: #1F2422; font: 600 14px/1.3 var(--display);
}
.trial { font: 600 18px/1.4 var(--display); margin: 20px 0 16px; }
.plans-cta { margin-bottom: 16px; }
.fine { color: var(--soft); font-size: 15px; max-width: 42em; }

/* The table keeps its own scroll as a last resort at the very largest text sizes, so the page never scrolls
   sideways; at normal sizes it fits a phone. */
.compare-wrap { overflow-x: auto; margin-bottom: 16px; }
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; font-size: 16px;
}
.compare th, .compare td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; font: 600 15px/1.3 var(--display); color: var(--soft); background: var(--bg-deep); }
.compare tbody th { font-weight: 500; }
.compare td { width: 24%; }
.compare .plus-row td:last-child { font-weight: 600; color: var(--sage-text); }

.pricing-notes { display: grid; gap: 16px; margin-bottom: 16px; }
.card.note h2 { font-size: 21px; line-height: 1.3; margin-bottom: 8px; }
.card.note.sage { border-left: 6px solid var(--sage); }
.card.note.peach { border-left: 6px solid var(--peach); }
.card.note.lavender { border-left: 6px solid var(--lavender); }

@media (min-width: 640px) {
  .plans { grid-template-columns: 1fr 1fr; max-width: 760px; }
}
@media (min-width: 860px) {
  .pricing-head { padding-top: 72px; }
  .pricing-notes { grid-template-columns: repeat(3, 1fr); }
  .card.note h2 { font-size: 22px; }
}
@media (max-width: 480px) {
  .compare th, .compare td { padding: 10px; font-size: 15px; }
  .compare td { width: 28%; }
}

/* Help (/help): a list of guides, then the guides in a reading-width column. On wide screens the list sits
   beside the guides and stays in view while reading, so jumping between guides needs no scrolling back. */
.help-toc h2 { font-size: 21px; margin-bottom: 8px; }
.help-toc ol {
  margin: 0; padding: 18px 20px 18px 40px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); columns: 2 14em; column-gap: 24px;
}
.help-toc li { margin: 4px 0; break-inside: avoid; }
.help-toc a { color: var(--sage-text); }
.help { max-width: 760px; }
.help-section { padding-top: 40px; scroll-margin-top: 16px; }
.help-section h2 { margin-bottom: 10px; }
.help-section h3 { font: 600 19px/1.3 var(--display); margin: 22px 0 6px; }
.help-section p, .help-section li, .help-section dd { max-width: 40em; }
.help-section ul, .help-section ol { padding-left: 22px; }
.help-section li { margin: 6px 0; }
.help-section q { font-style: italic; }
.help-section .card { margin: 16px 0; padding: 16px 20px; }
.help-section dt { font-weight: 600; margin-top: 16px; }
.help-section dd { margin: 4px 0 0; }
.help-section code {
  font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--sage-soft);
  padding: 1px 5px; border-radius: 6px; overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
  .help-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 48px; align-items: start; }
  .help-toc { position: sticky; top: 16px; padding-top: 40px; }
  .help-toc ol { columns: 1; padding: 16px 16px 16px 36px; font-size: 15px; }
}