/* =====================================================================
   Shop Pilot public site: one stylesheet for every public page
   (landing, features, free trial, pricing, blog, about, support, Etsy
   permissions, privacy, terms, log in, sign up and the other account pages).
   Tokens, type, buttons, the floating nav, the footer, forms, prose.
   Page-specific CSS stays inline in its page. Built from the round-7
   "studio" landing (2026-10-03); nav and footer markup come from
   services/site_chrome.py, never copied by hand.
   ===================================================================== */
:root {
  --page: #F2F2F7;
  --paper: #FFFFFF;
  --ink: #0C0C0E;
  --ink-2: #36363C;
  --ink-3: #64646C;
  --ink-4: #8D8D95;
  --line: rgba(12, 12, 20, 0.08);
  --line-2: rgba(12, 12, 20, 0.13);
  --fill: rgba(118, 118, 128, 0.11);
  --accent: #F1641E;
  --accent-hover: #E65A17;
  --accent-press: #D85510;
  --accent-text: #C24A0D;
  --accent-soft: rgba(241, 100, 30, 0.08);
  --green: #34C759;
  --green-text: #1C7C43;
  --green-soft: rgba(52, 199, 89, 0.10);
  --red: #E5484D;
  --red-text: #B42318;
  --red-soft: rgba(229, 72, 77, 0.08);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --gutter: 32px;
  --wrap: 1200px;
  --sec: 132px;
  --r-tile: 26px;
  --r-canvas: 32px;
  --shadow-card: 0 0 0 1px rgba(12, 12, 20, 0.06), 0 1px 2px rgba(12, 12, 20, 0.04), 0 10px 28px -18px rgba(12, 12, 20, 0.22);
  --shadow-lift: 0 0 0 1px rgba(12, 12, 20, 0.06), 0 2px 4px rgba(12, 12, 20, 0.04), 0 56px 110px -48px rgba(74, 36, 8, 0.42);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.wrap-narrow { width: min(760px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- reveal on scroll (html.rv is set only when JS runs and this is not a review shot) ---------- */
.rv .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rv .reveal.in { opacity: 1; transform: none; }
.rv .reveal.d1 { transition-delay: 0.08s; }
.rv .reveal.d2 { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { .rv .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- buttons (the server's auth markup uses .btn .btn-primary .btn-ghost .btn-sm) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  font: 600 15.5px/1 var(--font); letter-spacing: -0.006em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(120, 40, 0, 0.28), 0 10px 22px -10px rgba(241, 100, 30, 0.7);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(12, 12, 20, 0.05); }
.btn-ghost:hover { background: #F8F8FA; box-shadow: 0 0 0 1px rgba(12, 12, 20, 0.2), 0 1px 2px rgba(12, 12, 20, 0.06); }
.btn-sm { height: 38px; padding: 0 15px; border-radius: 10px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-text { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1.2 var(--font); color: var(--ink); text-decoration: none; }
.btn-text svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.btn-text:hover svg { transform: translateX(3px); }
.link { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(194, 74, 13, 0.35); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- section scaffolding ---------- */
.sec { padding: var(--sec) 0; }
.head { max-width: 820px; }
.head.center { margin-inline: auto; text-align: center; }
.label {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px;
  background: var(--fill); color: #3C3C43; font: 500 13.5px/1 var(--font); letter-spacing: -0.003em;
}
.h2 {
  margin-top: 20px;
  font: 600 clamp(34px, 3.6vw, 52px)/1.07 var(--display);
  letter-spacing: -0.026em; color: var(--ink); text-wrap: balance;
}
.h2 .q, .h1 .q { color: var(--ink-4); }
.sub { margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--ink-3); letter-spacing: -0.006em; text-wrap: balance; }
.head.center .sub { margin-inline: auto; max-width: 640px; }
.line { display: block; }

/* =====================================================================
   NAV: a floating bar that frosts once the page scrolls (dark over [data-nav-dark])
   ===================================================================== */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; padding: 12px 12px 0; pointer-events: none; }
.nav-bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 26px;
  max-width: 1264px; height: 64px; margin: 0 auto; padding: 0 12px 0 22px;
  border-radius: 18px; background: rgba(255, 255, 255, 0);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.is-scrolled .nav-bar, .nav.is-open .nav-bar, .nav.is-solid .nav-bar {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 1px rgba(12, 12, 20, 0.06), 0 14px 34px -18px rgba(12, 12, 20, 0.3);
}
.nav.is-dark .nav-bar { background: rgba(26, 26, 30, 0.76); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 34px -18px rgba(0, 0, 0, 0.7); }
.brand { display: flex; align-items: center; flex: none; border-radius: 8px; }
.brand img { width: 138px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
.nav-links a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 9px;
  font: 500 14.5px/1 var(--font); letter-spacing: -0.005em; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(118, 118, 128, 0.1); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(118, 118, 128, 0.12); }
.nav.is-dark .nav-links a { color: rgba(255, 255, 255, 0.78); }
.nav.is-dark .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-right { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-right form { display: inline-flex; margin: 0; }
.nav.is-dark .nav-right .btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.nav-menu { display: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; place-items: center; }
.nav-menu svg { width: 22px; height: 22px; }
.nav-menu .i-close { display: none; }
.nav.is-open .nav-menu .i-open { display: none; }
.nav.is-open .nav-menu .i-close { display: block; }
.nav.is-dark .nav-menu { color: #fff; }
.nav-quiet { font: 500 14.5px/1 var(--font); color: var(--ink-3); white-space: nowrap; }
.nav-quiet a { color: var(--ink); font-weight: 600; text-decoration: none; }
.nav-quiet a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* "Free trial" and an offer link do not both fit a narrow desktop; the footer keeps the trial link. */
@media (max-width: 1100px) {
  .nav-links:has(a[href$="/discount"]) .nav-trial { display: none; }
}

/* =====================================================================
   PAGE HERO for the inner pages: the landing's inset canvas, shorter
   ===================================================================== */
.page-top { padding: 12px 12px 0; }
.page-canvas {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-canvas);
  padding: 148px var(--gutter) 76px;
  background:
    radial-gradient(56% 50% at 50% 100%, rgba(241, 100, 30, 0.13), rgba(241, 100, 30, 0.04) 55%, rgba(241, 100, 30, 0) 80%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #FFF8F3 100%);
  box-shadow: inset 0 0 0 1px rgba(12, 12, 20, 0.04);
}
.page-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(12, 12, 20, 0.03) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 50%, #000 100%);
}
.page-canvas.plain { background: #fff; padding-bottom: 64px; }
.page-canvas.plain::before { display: none; }
.page-canvas .label { margin-bottom: 22px; }
.h1 {
  font: 600 clamp(40px, 4.6vw, 66px)/1.03 var(--display);
  letter-spacing: -0.03em; color: var(--ink); text-wrap: balance;
}
.h1 em { font-style: normal; color: var(--accent); }
.page-lead { margin-top: 22px; max-width: 640px; font-size: 19.5px; line-height: 1.5; color: var(--ink-3); letter-spacing: -0.008em; text-wrap: pretty; }
.page-canvas.center { text-align: center; }
.page-canvas.center .page-lead { margin-inline: auto; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-canvas.center .page-actions { justify-content: center; }
.page-meta { margin-top: 18px; font-size: 14px; color: var(--ink-4); }

/* ---------- cards ---------- */
.card { position: relative; border-radius: var(--r-tile); background: var(--paper); box-shadow: var(--shadow-card); padding: 32px; }
.card h2, .card h3 { font: 600 22px/1.2 var(--display); letter-spacing: -0.014em; color: var(--ink); }
.card p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-3); }
.card .kicker { display: block; margin-bottom: 8px; font: 500 14px/1.3 var(--font); color: var(--ink-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.note { font-size: 14px; line-height: 1.55; color: var(--ink-4); }
.note a { color: var(--ink-3); text-underline-offset: 3px; }

/* =====================================================================
   PROSE: legal pages, blog posts, long help text
   ===================================================================== */
.prose { font-size: 17px; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.1em; font: 600 27px/1.2 var(--display); letter-spacing: -0.018em; color: var(--ink); scroll-margin-top: 104px; }
.prose h3 { margin-top: 1.7em; font: 600 20px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 104px; }
.prose h4 { margin-top: 1.4em; font: 600 17px/1.4 var(--font); color: var(--ink); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.6em; }
.prose p, .prose li { text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(194, 74, 13, 0.35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
/* A button inside the text (e.g. Cookie settings on /cookies) keeps its button colours, not the link ones. */
.prose a.btn { text-decoration: none; }
.prose a.btn-primary, .prose a.btn-primary:hover { color: #fff; }
.prose a.btn-ghost, .prose a.btn-ghost:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--ink-4); }
.prose code { padding: 0.12em 0.4em; border-radius: 6px; background: var(--fill); font: 500 0.88em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
.prose blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--line-2); color: var(--ink-3); }
.prose hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--line-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); background: rgba(118, 118, 128, 0.05); }
.prose .table-scroll { overflow-x: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.prose .table-scroll table { min-width: 560px; }
.prose-card { border-radius: var(--r-tile); background: var(--paper); box-shadow: var(--shadow-card); padding: 56px 64px 64px; }

/* =====================================================================
   FORMS: account pages (log in, sign up, reset, verify) and small forms
   ===================================================================== */
.field { display: block; }
.field + .field { margin-top: 18px; }
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 600 14.5px/1.3 var(--font); color: var(--ink); }
.field-label .opt { font-weight: 400; color: var(--ink-4); }
.field-label a { font-weight: 500; font-size: 14px; color: var(--accent-text); text-decoration: none; }
.field-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.input {
  display: block; width: 100%; height: 50px; padding: 0 16px;
  border: 0; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(12, 12, 20, 0.04);
  font: 400 16px/1.2 var(--font); color: var(--ink);
  transition: box-shadow 0.15s ease;
}
.input::placeholder { color: var(--ink-4); }
.input:hover { box-shadow: 0 0 0 1px rgba(12, 12, 20, 0.22), 0 1px 2px rgba(12, 12, 20, 0.04); }
.input:focus { outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(241, 100, 30, 0.16); }
.input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--red), 0 0 0 4px var(--red-soft); }
textarea.input { height: auto; min-height: 120px; padding: 13px 16px; line-height: 1.5; resize: vertical; }
.field-hint { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-4); }
.field-error { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--red-text); }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.check a { color: var(--accent-text); text-underline-offset: 3px; }
.check + .check { margin-top: 14px; }
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert-error { background: var(--red-soft); color: var(--red-text); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.18); }
.alert-ok { background: var(--green-soft); color: var(--green-text); box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.22); }
.alert-info { background: rgba(118, 118, 128, 0.08); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }

/* =====================================================================
   FOOTER: one inset white canvas, closing the page the way the hero opens it
   ===================================================================== */
.site-footer { padding: 12px; }
.footer-canvas {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-canvas); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(12, 12, 20, 0.05);
  padding: 76px 0 0;
}
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
.footer-brand .brand img { width: 138px; height: auto; }
.footer-brand p { margin-top: 18px; max-width: 32ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
/* "Every review is 5 stars on Trustpilot" (2026-10-06) is longer than the old "Great 4.2": the stars and the line
   wrap inside the brand column instead of running into the next one. */
.footer-tp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 100%; margin-top: 22px; min-height: 34px; padding: 8px 13px 8px 10px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2); color: var(--ink-3); font: 500 13px/1.35 var(--font); text-decoration: none; transition: box-shadow 0.15s ease; }
.footer-tp:hover { box-shadow: 0 0 0 1px rgba(12, 12, 20, 0.24); }
.footer-tp b { color: var(--ink); font-weight: 600; }
.footer-tp .stars { display: inline-flex; gap: 2px; }
.footer-tp .stars svg { width: 15px; height: 15px; }
.footer-col h2 { font: 600 12px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-4); }
.footer-col ul { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.footer-col a, .footer-col button { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: 400 14.5px/1.3 var(--font); color: var(--ink-2); text-decoration: none; cursor: pointer; }
.footer-col a:hover, .footer-col button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-col form { margin: 0; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  margin-top: 64px; padding: 24px 0 30px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--ink-4);
}
.footer-bottom a { color: var(--ink-3); text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom .sep { margin: 0 8px; color: var(--line-2); }

/* review shots: final states only */
.shoot *, .shoot *::before, .shoot *::after { animation: none !important; transition: none !important; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  :root { --sec: 104px; }
  .nav-bar { gap: 14px; }
  .nav-links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: #fff;
    border-radius: 18px; box-shadow: 0 0 0 1px rgba(12, 12, 20, 0.07), 0 24px 48px -20px rgba(12, 12, 20, 0.35);
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { height: 48px; padding: 0 14px; border-radius: 12px; font-size: 16px; color: var(--ink); }
  .nav.is-dark .nav-links { background: #1A1A1E; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -20px rgba(0, 0, 0, 0.7); }
  .nav-right { margin-left: auto; }
  .nav-menu { display: inline-grid; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .prose-card { padding: 44px 40px 48px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --sec: 80px; --r-canvas: 24px; --r-tile: 22px; }
  body { font-size: 16px; }
  .nav { padding: 8px 8px 0; }
  .nav-bar { height: 56px; padding: 0 6px 0 14px; border-radius: 16px; }
  .brand img { width: 112px; }
  .nav-right { gap: 6px; }
  .nav-right .btn-sm { height: 40px; padding: 0 12px; font-size: 14px; }
  .nav-quiet .q-text { display: none; }
  .h2 { margin-top: 16px; font-size: clamp(31px, 8.4vw, 36px); line-height: 1.08; letter-spacing: -0.03em; }
  .sub { margin-top: 14px; font-size: 17px; }
  .line { display: inline; }
  .page-top { padding: 8px 8px 0; }
  .page-canvas { padding: 112px 16px 48px; }
  .h1 { font-size: clamp(36px, 9.6vw, 42px); line-height: 1.04; letter-spacing: -0.034em; }
  .page-lead { margin-top: 18px; font-size: 17px; }
  .page-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
  .page-actions .btn { width: 100%; height: 50px; }
  .card { padding: 24px 22px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 23px; }
  .prose h3 { font-size: 18.5px; }
  .prose-card { padding: 30px 20px 34px; border-radius: 22px; }
  .site-footer { padding: 8px; }
  .footer-canvas { padding-top: 52px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 48px; padding: 22px 0 26px; }
}

@media (max-width: 380px) {
  .nav-right .btn-ghost { display: none; }
}

/* Phone menu, narrowest phones: the bar keeps the brand, the primary button and the menu button;
   Log In, or Account and Log Out, move into the menu (site_chrome._menu_account). */
.nav-acct { display: none; }
.footer-col li:has(> a[hidden]) { display: none; }
@media (max-width: 480px) {
  .nav-right .btn-ghost, .nav-right form { display: none; }
  .nav.is-open .nav-links .nav-acct { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .nav-acct form { display: block; margin: 0; }
  .nav-acct button { display: flex; align-items: center; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font: 500 16px/1 var(--font); color: var(--ink); text-align: left; cursor: pointer; }
  .nav-acct button:hover { background: rgba(118, 118, 128, 0.1); }
  .nav.is-dark .nav-acct { border-top-color: rgba(255, 255, 255, 0.12); }
  .nav.is-dark .nav-acct button { color: rgba(255, 255, 255, 0.78); }
}