/* The site in the app's colours: its ground, its ink and its saffron, with
   the mark's aubergine for the panel the mark stands on.

   The block between the markers is not written here. It is the app's own
   palette, read off by `src/theme/palette.ts` and copied in by `npm run brand`,
   and a test fails when it falls behind, so a change to the colours or the
   typefaces is made there and reaches the share page and the emails too. The
   lid is the mark's saffron and only the mark's: too light to read as text on
   the ground, so links and eyebrows take the accent. */
/* brand:start */
:root { color-scheme: light dark; --ground: #efe7d8; --paper: #faf7f0; --ink: #281a27; --muted: #735471; --line: #cfc0a4; --accent: #7e5612; --lid: #b37a10; --button: #281a27; --on-button: #ffffff; --card: #3a2838; --on-card: #f5f0e6; --on-card-muted: #c9bcc4; --card-lid: #e0a63a; --good: #2f7d4a; --error: #8c3428; --serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --ground: #1d121c; --paper: #382737; --ink: #f0e9f0; --muted: #c7b2c5; --line: #886085; --accent: #efb249; --lid: #e0a63a; --button: #f0e9f0; --on-button: #382737; --card: #382737; --on-card: #f0e9f0; --on-card-muted: #c7b2c5; --card-lid: #e0a63a; --good: #5aac74; --error: #e0796c; } }
/* brand:end */

/* What only the website needs, mixed from the shared colours so it follows
   them into the dark. */
:root {
  --button-hover: color-mix(in srgb, var(--button) 85%, var(--muted));
  --good-surface: color-mix(in srgb, var(--good) 10%, var(--paper));
  --good-line: color-mix(in srgb, var(--good) 30%, var(--paper));
  color: var(--ink);
  background: var(--ground);
  font-family: var(--sans);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--ground); }
a { color: var(--accent); text-underline-offset: 3px; }
.page { min-height: 100vh; padding: 0 24px; display: flex; flex-direction: column; }
nav, main, footer { width: 100%; max-width: 1120px; margin: 0 auto; }
nav { min-height: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; }
.brand img { display: block; width: 184px; height: auto; }
a.brand { color: inherit; text-decoration: none; }
.availability, footer { color: var(--muted); font-size: 13px; }
main { flex: 1; display: flex; align-items: center; gap: 72px; padding: 64px 0 88px; }
.introduction { flex: 1; max-width: 620px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(46px, 7vw, 76px); line-height: 1.02; letter-spacing: -.025em; font-weight: 400; }
.lede { max-width: 570px; margin: 26px 0 0; color: var(--ink); font-size: 19px; line-height: 1.6; }

/* The card beside the introduction: the page's promise, told in three lines
   under the mark, on the aubergine the icon stands on. */
.preview { width: 100%; max-width: 400px; padding: 36px 34px 30px; border-radius: 28px; background: var(--card); color: var(--on-card); box-shadow: 0 24px 48px rgba(58, 40, 56, .18); }
.preview-mark { display: block; width: 56px; height: auto; margin: 0 0 22px; overflow: visible; }
.preview-mark .lid { fill: var(--card-lid); animation: lid 3.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.preview-mark .bowl { fill: var(--on-card); }
@keyframes lid { 0%, 18% { transform: translateY(0); } 42%, 58% { transform: translateY(-15px); } 82%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .preview-mark .lid { animation: none; } }
.preview-label { color: var(--on-card-muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
h2 { margin: 0 0 24px; font-family: var(--serif); font-size: 32px; line-height: 1.15; font-weight: 400; }
.preview h2 { margin: 10px 0 22px; }
ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
li { min-height: 56px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; font-size: 15px; counter-increment: steps; }
li::before { content: "0" counter(steps); color: var(--accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.preview li { border-top-color: rgba(245, 240, 230, .16); }
.preview li::before { color: var(--card-lid); }
footer { padding: 28px 0 36px; border-top: 1px solid var(--line); line-height: 1.7; }
footer a { color: var(--accent); }

.mail-form { margin: 36px 0 0; max-width: 520px; }
.mail-form label { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.mail-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mail-form input[type="email"], .mail-form .field { min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 26px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.mail-form input[type="email"] { flex: 1 1 240px; }
.mail-form .field { display: block; width: 100%; margin: 0 0 16px; }
.mail-form input:focus-visible, .mail-form button:focus-visible { outline: 2px solid var(--lid); outline-offset: 2px; }
.mail-form button { min-height: 52px; padding: 0 26px; border: 0; border-radius: 26px; background: var(--button); color: var(--on-button); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.mail-form button:hover { background: var(--button-hover); }
.mail-form-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.mail-form-note a { color: inherit; }
.mail-form-status:empty { display: none; }
.mail-form-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.mail-form-status[data-outcome="good"] { color: var(--good); }
.mail-form-status[data-outcome="error"] { color: var(--error); }
.mail-form button:disabled { opacity: .6; cursor: default; }
/* A form that went through: its fields give way to a check mark, what
   happened, and a way to go again. Drawn inside the form so a link to it
   still lands. */
.mail-form.is-done > :not(.form-done) { display: none; }
.form-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 18px 20px; border: 1px solid var(--good-line); border-radius: 18px; background: var(--good-surface); }
.form-done-check { flex: none; width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: var(--good); color: var(--good-surface); }
.form-done-message { flex: 1 1 220px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.mail-form .form-again { min-height: 0; padding: 0; background: none; color: var(--good); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mail-form .form-again:hover { background: none; }
/* Out of sight for people, still in the form for bots that fill every field. */
.mail-form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.features { width: 100%; max-width: 1120px; margin: 0 auto; padding: 64px 0 80px; border-top: 1px solid var(--line); }
.features h2 { max-width: 640px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px 48px; }
.feature { padding-top: 18px; border-top: 2px solid var(--lid); }
.feature h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.feature p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; }

@media (max-width: 760px) {
  main { flex-direction: column; align-items: stretch; gap: 48px; padding: 40px 0 64px; }
  .preview { max-width: none; }
}

.legal { display: block; max-width: 720px; padding: 48px 0 72px; }
.legal h1 { font-size: clamp(38px, 6vw, 56px); }
.legal .updated { margin: 14px 0 32px; color: var(--muted); font-size: 14px; }
.legal h2 { margin: 44px 0 14px; font-size: 26px; }
.legal h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 600; }
.legal p, .legal li { color: var(--ink); font-size: 16px; line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legal li { min-height: 0; border-top: 0; display: list-item; margin: 0 0 8px; }
.legal li::before { content: none; }
.guide-intro { max-width: 680px; margin: -8px 0 28px; color: var(--ink); font-size: 16px; line-height: 1.6; }
/* Apple's badge, at the height Apple's guidelines ask for on a page and
   no smaller, with nothing drawn over or around it but space. */
.get-app { margin: 36px 0 0; }
.features .get-app { margin: 0; }
.app-store { display: inline-block; border-radius: 8px; }
.app-store img { display: block; height: 48px; width: auto; }
.app-store:focus-visible { outline: 2px solid var(--lid); outline-offset: 3px; }
/* The homepage's way to try Scappi without an iPhone: under the badge, and
   quieter than it, so the two never compete. */
.try { max-width: 520px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.6; }
.try a { font-weight: 600; }

/* A landing page's quick-reference chart: what a cook who only needs one
   number came for, next to the form that does the whole recipe. */
.chart { width: 100%; max-width: 680px; border-collapse: collapse; font-size: 15px; }
.chart th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.chart td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.chart tr:last-child td { border-bottom: 0; }
.chart-note { max-width: 680px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.tools a { margin-left: 12px; }

/* The page that is not there: the mark with its lid off and nothing in it. */
.lost { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.lost-mark { display: block; width: 88px; height: auto; margin: 0 0 28px; overflow: visible; }
.lost-mark .lid { fill: var(--lid); transform: translateY(-14px) rotate(-6deg); transform-origin: 10% 30%; }
.lost-mark .bowl { fill: var(--ink); }

/* The about page: its one-sentence summary reads as the page's lede, and its
   key facts are a real table, so a crawler reads each fact beside its name. */
.legal .about-lede { margin: 0; color: var(--ink); font-size: 19px; line-height: 1.6; }
.legal .get-app { margin: 24px 0 8px; }
.facts { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.facts th, .facts td { padding: 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.facts th { width: 34%; padding-right: 16px; color: var(--ink); font-weight: 600; }
.facts td { color: var(--ink); }

/* The homepage's "sound familiar?" section: the moments every cook has had,
   each in the cook's own words, and Scappi's answer under it in one line. It
   comes before the features, so a visitor recognises the problem before
   reading what solves it (`marketing/IDEAS.md`). */
.problems { width: 100%; max-width: 1120px; margin: 0 auto; padding: 64px 0 72px; border-top: 1px solid var(--line); }
.problems h2 { max-width: 640px; }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px 48px; }
.problem { padding-left: 18px; border-left: 2px solid var(--line); }
.problem p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; }
.problem .problem-quote { margin: 0 0 10px; color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.4; }

/* The way back to the top: a round button in the colours of the site's
   other buttons, once the visitor is a screen down. Until then it is out of
   sight, and out of the keyboard's reach with it. It sits at the middle of the
   window's foot, or, where `site.js` finds room, in the margin beside the
   page's column (`is-beside`, at the left it measures). */
.to-top { position: fixed; left: 50%; bottom: 20px; margin-left: -24px; z-index: 10; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%; background: var(--button); color: var(--on-button); box-shadow: 0 10px 24px rgba(29, 18, 28, .24); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.to-top.is-beside { margin-left: 0; }
.to-top:hover { background: var(--button-hover); }
.to-top:focus-visible { outline: 2px solid var(--lid); outline-offset: 3px; }
.to-top svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-shown { transition: none; } }
@media print { .to-top { display: none; } }
/* The first screen of the page, which the button waits for the visitor to
   leave. Placed against the page itself, not anything on it. */
.to-top-fold { position: absolute; top: 0; left: 0; width: 1px; height: 100vh; pointer-events: none; }
/* Where the button sends the keyboard: the top of the page, which is not
   itself a control and draws no ring. */
nav[tabindex="-1"]:focus { outline: none; }