/* =============================================================================
   The site's one stylesheet.

   Ported from src/app/(marketing)/landing.module.css and src/app/globals.css. The landing's
   markup, classes, copy and renders are unchanged; every colour it wrote as a literal is a token
   here, whose light value is that same literal, so the light site is the landing as it is drawn
   today. A dark set follows under prefers-color-scheme, taken from the app's own dark tokens
   (globals.css), because the owner asked for both schemes by system preference and the site ships
   no theme toggle and no script.

   DECISIONS, each noted where it applies:
   - The CSS for the two landing directions that were deleted with the concept pages (continuity,
     clarity) is not ported: nothing draws it, and it carried most of the sub-12px type the
     owner's sizing pass removed from the site.
   - ScrollThumb's rules are not ported either. They hide the browser's own scrollbar on a mouse
     and let a script draw the thumb; with no script that would leave a page with no scrollbar at
     all, so the native thin bar stays.
   - The dark scheme's two grounds climb the app's own ladder: the page is --shell (#111417), the
     pale shape one step up at --surface (#191d21), the ink shape two further at #2a3136. Their
     relationship (the ink shape is the louder of the two) is what the mark's drawing needs, and
     both read on the page.
   ============================================================================= */

/* =============================================================================
   Manrope, from Google Fonts.

   DECISION: the @font-face rules are written here rather than pulled in with a
   <link> to fonts.googleapis.com. A stylesheet from another origin blocks the
   first paint until a whole extra round trip finishes, and no script is allowed
   to unblock it (the usual media="print" trick is an inline event handler).
   Measured on the landing at 390 with mobile throttling: first paint 2.4s and
   Lighthouse performance 94 with the link, 0.8s and 100 without it. The font
   files still come from Google (the same URLs that stylesheet points at, the
   variable face covering 400 to 800 in one file), so nothing about the type
   changes; only the hop that fetched three lines of CSS is gone. The system
   stack below stands in until the file lands, and font-display: swap means text
   is readable from the first paint.
   ============================================================================= */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --bg: #ffffff;
  --card: #ffffff;
  --ink: #1a1d1f;
  --muted: #565a5e;
  --line: #e4e5e6;
  --line-strong: #d5d8da;
  /* The big pale shape: the mark's pill. */
  --pale: #eeeff1;
  /* Small filled things: chips, the reporting strip, the pale plan card. */
  --fill: #eeeff1;
  /* A form control's own fill (the app's --soft). */
  --field: #f3f4f5;
  /* The instrument list's ground. */
  --instrument: #f5f6f7;
  /* A raised pill sitting on --fill. */
  --raised: #ffffff;
  --on-raised: #1a1d1f;
  --primary: #1e2326;
  --on-primary: #ffffff;
  /* The mark's bubble, the closing band and the ink plan card. Their text is the same in both
     schemes, because the shape is dark in both. */
  --ink-surface: #111417;
  --on-ink-surface: #eaf0f0;
  --ink-surface-muted: #a9b5ba;
  --ink-surface-line: rgba(255, 255, 255, 0.2);
  --focus: #565a5e;
  --header-bg: rgba(255, 255, 255, 0.86);
  --header-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --scrollbar: #a9aeb3;
  --r-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #111417;
    --card: #191d21;
    --ink: #eaf0f0;
    --muted: #a9b5ba;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --pale: #191d21;
    --fill: #22272b;
    --field: #22272b;
    --instrument: #191d21;
    --raised: #e6eaee;
    --on-raised: #0f1215;
    --primary: #e6eaee;
    --on-primary: #0f1215;
    /* The loudest shape needs one rung past the app's own ladder (#111417, #191d21, #22272b),
       or the ink plan card and the pale one beside it read as the same card. Same step again. */
    --ink-surface: #2a3136;
    --focus: #cfd7da;
    --header-bg: rgba(25, 29, 33, 0.86);
    --header-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --scrollbar: rgba(255, 255, 255, 0.24);
  }
}

/* ---------- Reset. The app runs Tailwind's preflight; this is the part of it the landing's
   rules assume: no default margins, headings that take their size from their own rule. -------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}
small {
  font-size: 12px;
  line-height: 1.5;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
  background: none;
  cursor: pointer;
}
body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- The site frame ---------- */
.site {
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
}
.site a {
  color: inherit;
  text-decoration: none;
}
.wrap {
  max-width: 1400px;
  margin: auto;
  padding: 0 5%;
}
.wrap main {
  padding-top: 72px;
}
.site section[id] {
  scroll-margin-top: 92px;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
}
input:focus-visible,
textarea:focus-visible {
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 100;
  font-size: 13px;
}

/* ---------- Header: the floating pill ---------- */
.header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(1120px, calc(100% - 48px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 8px 22px;
  gap: 28px;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--header-shadow);
  white-space: nowrap;
}
@media (prefers-reduced-transparency: reduce) {
  .header {
    background: var(--bg);
  }
}
/* The home link is a target like any other, so it takes the 44px minimum the design system asks
   for on anything interactive, desktop included. Everything else in the header already has it, and
   the header is 62px tall, so nothing moves. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 800;
}
.header .logo {
  font-size: 22px;
  letter-spacing: -1.2px;
}
.headerNav,
.headerActions {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 12px;
}
.headerNav a,
.headerActions a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.headerNav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* `.site a` sets colour on every link inside the site, and it out-specifies a bare `.button`, so
   a filled button was drawn with its label the colour of the fill. The landing's own stylesheet
   answers that with !important; one more class does the same job without one. */
.button,
.site .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 600;
}
.header .button {
  padding: 10px 16px;
  border-radius: 999px;
  min-height: 44px;
}

/* The menu: the four links under 640, with no script (see chrome.mjs). */
.menu {
  display: none;
  position: relative;
}
.menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menuBars,
.menuBars::before,
.menuBars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.menuBars {
  position: relative;
}
.menuBars::before,
.menuBars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menuBars::before {
  top: -6px;
}
.menuBars::after {
  top: 6px;
}
.menuPanel {
  position: absolute;
  top: calc(100% + 14px);
  right: -4px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--header-shadow);
  font-size: 13px;
}
.menuPanel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
}
.menuPanel a.button {
  justify-content: center;
  font-size: 12px;
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px 0;
  font-size: 12px;
  flex-wrap: wrap;
}
.footer .logo {
  font-size: 22px;
  letter-spacing: -1.2px;
}
.footer p {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}
.footer small {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
}
.footerLinks {
  display: flex;
  gap: 25px;
  align-items: center;
}
.footerLinks a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 55px;
}
.heroCopy {
  max-width: 780px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--muted);
}
.hero h1 {
  font-size: clamp(45px, 5.1vw, 74px);
  letter-spacing: -3.5px;
  line-height: 1.08;
  font-weight: 500;
  margin: 25px 0;
}
.heroCopy > p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 500px;
}
.actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin: 27px 0 15px;
  font-size: 12px;
  flex-wrap: wrap;
}
.actions > a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.heroProduct {
  margin-top: 55px;
}

/* The strip under the hero: three outlined chips. */
.benefits {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 28px;
}
.benefits > span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Sections ---------- */
.sectionTitle h2,
.details h2,
.why h2,
.instruments h2 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1.7px;
  line-height: 1.2;
  margin: 22px 0;
}
.why h2 {
  font-size: 46px;
  letter-spacing: -2px;
}
.howItWorks {
  padding: 90px 0;
}
.howGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 65px;
  margin-top: 50px;
}
.howGrid h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 20px 0 12px;
}
.howGrid p,
.details > div > p,
.why p,
.instruments p,
.pricing .sectionTitle > p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 380px;
}
.why p,
.instruments p,
.pricing .sectionTitle > p {
  max-width: none;
  margin: 0;
}
.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  align-items: center;
  padding: 70px 0;
  border-top: 1px solid var(--line);
}
.reverse > div:first-child {
  order: 2;
}

.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  padding: 75px 0;
}
.whyPoints {
  display: grid;
  gap: 0;
}
.whyPoints article {
  padding: 25px 0;
  border-bottom: 1px solid var(--line-strong);
}
.whyPoints article:first-child {
  padding-top: 0;
}
.whyPoints article:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.why h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 9px;
}

/* ---------- Instruments ---------- */
.instruments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 65px;
  padding: 70px 0;
  border-top: 1px solid var(--line);
}
.instruments > div > p {
  margin-bottom: 15px;
  max-width: 460px;
}
.instrumentList {
  background: var(--instrument);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 25px;
  align-self: center;
}
.instrumentList > div {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.instrumentList strong {
  font-size: 13px;
  font-weight: 600;
}
.instrumentList span,
.instrumentList small {
  color: var(--muted);
}
.instrumentList > p {
  font-size: 12px;
  margin: 18px 0 4px;
  color: var(--muted);
}

/* The reporting note: a pale strip, the sentence on the left and its link on the right. */
.reportingNote {
  grid-column: 1 / -1;
  background: var(--fill);
  border-radius: 28px;
  padding: 26px 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  row-gap: 6px;
  align-items: center;
}
/* `.instruments > div > p` also matches this paragraph, and it carries two type selectors, so a
   `.reportingNote > p` of its own loses to it: the sentence was capped at 460px and wrapped into
   four lines where the landing sets two. Naming the section is what wins it back. */
.instruments > .reportingNote > strong,
.instruments > .reportingNote > p {
  grid-column: 1;
  margin: 0;
}
.instruments > .reportingNote > strong {
  font-size: 12px;
  font-weight: 600;
}
.instruments > .reportingNote > p {
  font-size: 12px;
  color: var(--muted);
  max-width: 850px;
}
.reportingNote > a {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--on-raised);
  font-weight: 600;
}

/* ---------- Plans ---------- */
.pricing {
  border-top: 1px solid var(--line);
  padding: 70px 0;
}
.pricingPage {
  border-top: 0;
  padding: 40px 0 70px;
}
.pricingPage h1 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1.7px;
  line-height: 1.2;
  margin: 22px 0;
}
.planGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 35px;
}
.planGrid article {
  border-radius: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.planGrid h2,
.planGrid h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 25px;
}
.price {
  font-size: 40px;
  letter-spacing: -1.5px;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.price span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.planGrid .planCap {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 26px 0 6px;
}
.planFacts {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.planGrid .button {
  margin-top: 34px;
  border-radius: 999px;
  min-height: 48px;
}
.planInk {
  background: var(--ink-surface);
  color: var(--on-ink-surface);
  color-scheme: dark;
}
.planInk .price span,
.planInk .planFacts {
  color: var(--ink-surface-muted);
}
.planInk .button {
  background: #eaf0f0;
  color: #111417;
}
.planInk a:focus-visible {
  outline-color: #eaf0f0;
}
.planPale {
  background: var(--pale);
}
.planPlain {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.planPlain .button {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.included {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}
.includedLabel {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- The closing band ---------- */
/* The band is the ink shape full width, so it takes the ink shape's own ground: #111417 in light,
   as the landing draws it, and the lighter one in dark, where a band the colour of the page would
   not be a band at all. */
.cta {
  --band-shell: var(--ink-surface);
  --band-ink: #eaf0f0;
  --band-muted: #a9b5ba;
  background: var(--band-shell);
  color: var(--band-ink);
  color-scheme: dark;
  box-shadow: 0 0 0 100vmax var(--band-shell);
  clip-path: inset(0 -100vmax);
  padding: 75px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.cta h2 {
  font-size: 33px;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 16px 0 0;
}
.cta .eyebrow {
  color: var(--band-muted);
}
.cta .button {
  background: #e6eaee;
  color: #0f1215;
}
.cta .button:hover {
  background: #fff;
}
.cta a:focus-visible {
  outline-color: #eaf0f0;
}

/* =============================================================================
   The mark (owner, 2026-09-17). Two sections sit inside the logo stretched sideways: "why" in the
   pill, "how it works" in the chat bubble. The rules, in the owner's words:
   - The mark is magnified until it runs off both sides of the window. --mark-over is how far each
     shape passes the window's edge. Everything else keeps the page margins: a section never
     moves, only its shape (a span behind the content) runs past them. The site wrapper clips
     sideways overflow, so the page never scrolls sideways.
   - Pill to bubble is the logo's 14 to 18. The app's MarkFit script measures the pill and sets
     --pill-h; this site ships no script, so --mark-b, the unit that gives the same answer to
     within a few pixels, is what the bubble's floor is built from.
   - Gap to tail is the logo's 6 to 12 (4 inside the bubble, 8 hanging), from its own smaller
     unit, --mark-g, a quarter of what the full ratio would make it.
   - Sideways the tail keeps the logo's rule at every size: it starts two thirds of the way across
     the mark and is a quarter of the mark wide. Only its height follows the gap.
   ============================================================================= */
.site {
  --mark-over: clamp(24px, 5.5vw, 90px);
  --mark-b: 32px;
  --mark-g: 8px;
}
@media (max-width: 1300px) {
  .site {
    --mark-b: 35px;
  }
}
@media (max-width: 1000px) {
  .site {
    --mark-b: 39px;
  }
}
@media (max-width: 750px) {
  .site {
    --mark-b: 55.5px;
    --mark-g: 7px;
  }
}

.markPill,
.markBubble {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  box-shadow: none;
}
.markPill > *:not(.markShape),
.markBubble > *:not(.markShape) {
  position: relative;
  z-index: 1;
}
.markShape {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw - var(--mark-over));
  right: calc(50% - 50vw - var(--mark-over));
  border-radius: 9999px;
}
.markPill .markShape {
  background: var(--pale);
}
.markBubble .markShape {
  background: var(--ink-surface);
}
/* The tail, with no script (owner, 2026-09-19: "the bubble tail is broken again").
   4 of its 12 units sit inside the bubble and 8 hang below. Its far corner has to sit ON the
   bubble's round end, so the slope runs off the curve: with an end this large, a corner left at
   the logo's own height sticks out under the curve, and one parked safely inside the bubble makes
   a steep, narrow tail. The app's landing measures the curve in a script (MarkFit); this is the
   same sum in CSS, checked against the app at nine widths from 1920 to 390 (within 0.03px).
   The shape is a size container, so its own width and height are 100cqw and 100cqh here.
     r     the round end's real radius: half the height for a true pill, 22vw on a phone
     dx    how far the tail's right edge is past the start of the curve: r - W/12
     lift  how far the curve is above the tail's top edge there:
           r * (1 - sqrt(1 - (dx/r)^2)) - inside, never under 0
   tan(atan2(a, b)) is a / b as a plain number, the one thing calc() cannot divide out itself.
   The element is taller than the tail by --cap so the lifted corner has room inside its own box;
   the polygon is what is seen. */
.markBubble .markShape {
  container-type: size;
}
.markTail {
  --inside: calc(var(--mark-g) * 4);
  /* A browser without the functions below keeps the app's own first paint: the corner well
     inside the bubble, which can never leave a spur beside the curve. */
  --lift: calc(var(--mark-g) * 14);
  --cap: 50cqh;
  position: absolute;
  display: block;
  left: 66.67%;
  width: 25%;
  top: calc(100% - var(--inside) - var(--cap));
  height: calc(var(--mark-g) * 12 + var(--cap));
  background: var(--ink-surface);
  clip-path: polygon(0 calc(var(--cap) - var(--lift)), 100% calc(var(--cap) - var(--lift)), 0 100%);
}
@supports (width: calc(1px * sqrt(tan(atan2(1px, 2px))))) {
  .markTail {
    --r: min(var(--mark-radius, 9999px), 50cqh, 50cqw);
    --k: max(0, 1 - tan(atan2(100cqw, var(--r))) / 12);
    --lift: max(0px, var(--r) * (1 - sqrt(1 - var(--k) * var(--k))) - var(--inside));
  }
}

.markPill {
  margin-top: 64px;
  padding: 36px 0;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  min-height: calc(var(--mark-b) * 14);
}
@media (min-width: 751px) {
  .markPill {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.markBubble {
  margin-top: calc(var(--mark-g) * 6);
  margin-bottom: calc(var(--mark-g) * 8 - 16px);
  padding: 48px 0;
  color: var(--on-ink-surface);
  color-scheme: dark;
  min-height: calc(var(--mark-b) * 14 * 18 / 14);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.markBubble h2,
.markBubble h3 {
  color: var(--on-ink-surface);
}
/* Secondary text (owner, 2026-09-18): on the black bubble it is #a9b5ba, 8.8:1. */
.markBubble p,
.markBubble .eyebrow {
  color: var(--ink-surface-muted);
}
.markBubble .howGrid h3 {
  margin-top: 0;
}
.markBubble .howGrid article {
  border-color: var(--ink-surface-line);
}
.markBubble a:focus-visible {
  outline-color: #eaf0f0;
}
/* The hairline above the next section would run under the tail; the mark is divider enough. */
.afterMark {
  border-top-color: transparent;
}

/* A phone's sections are far taller than wide, so the ends cannot be full half circles: the
   corner eases to a softer curve, and the shapes still run off both edges. */
@media (max-width: 750px) {
  .markShape {
    border-radius: 22vw;
  }
  /* The tail's sum reads the same radius (see ".markTail"). */
  .markTail {
    --mark-radius: 22vw;
  }
  .markPill {
    margin-top: 40px;
    padding: 56px 0 60px;
  }
  .markBubble {
    padding: 60px 0 72px;
  }
  .markBubble h2 br {
    display: none;
  }
  .markBubble .howGrid article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* They arrive the way texts do: the pill settles, then the bubble pops from its tail. The app
   plays this once, when the section is in view; with no script it plays on load. */
@media (prefers-reduced-motion: no-preference) {
  .markPill {
    animation: mark-settle 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .markBubble {
    transform-origin: 72% 118%;
    animation: mark-pop 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 0.12s both;
  }
}
@keyframes mark-settle {
  from {
    transform: translateY(26px) scale(0.99);
  }
  to {
    transform: none;
  }
}
@keyframes mark-pop {
  from {
    transform: scale(0.94) translateY(16px);
  }
  to {
    transform: none;
  }
}

/* =============================================================================
   Product renders. The app's dark tokens are declared on each render, so the site's own set does
   not reach in and the renders are the product's dark theme in both schemes.
   ============================================================================= */
.rApp,
.rSched,
.rReport {
  --ink: #eaf0f0;
  --muted: #8c9aa0;
  --line: rgba(255, 255, 255, 0.08);
  --soft: #22272b;
  --surface: #191d21;
  --rail: #0f1214;
  --primary: #e6eaee;
  --on-primary: #0f1215;
  --coral: #f08a7e;
  --coral-text: #ffb1a7;
  --amber: #d9b65a;
  --tint-hot: rgba(240, 138, 126, 0.1);
  --tint-look: rgba(217, 182, 90, 0.1);
  --edge: rgba(255, 255, 255, 0.14);
  --bar: rgba(255, 255, 255, 0.12);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  color-scheme: dark;
}
.rSched,
.rReport {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
}
.rMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rMini {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.rMini svg {
  margin-bottom: 10px;
}
.rMini i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
}
.rMini i.on {
  background: var(--ink);
}
.rFrame {
  display: grid;
  grid-template-columns: 220px 320px minmax(0, 1fr);
  min-height: 600px;
}
.rRail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rBrand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  padding: 0 6px 14px;
}
.rNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
}
.rNav.on {
  background: var(--soft);
  color: var(--ink);
}
.rNavBar::before {
  content: "";
  display: block;
  height: 8px;
  width: 58%;
  border-radius: 999px;
  background: var(--bar);
}
.rNavBar:nth-of-type(odd)::before {
  width: 46%;
}
.rBadge {
  font-style: normal;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}
.rCenter {
  margin-top: auto;
  padding: 12px 6px 0;
  border-top: 1px solid var(--line);
}
.rCenter b {
  display: block;
}
.rList {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rListHead {
  padding: 16px 16px 10px;
}
.rListHead b {
  font-size: 17px;
  font-weight: 800;
}
.rChips {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}
.rChips span {
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.rChips .on {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}
.rRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  position: relative;
}
.rRow b {
  font-weight: 700;
}
.rRow p {
  margin: 0;
  color: var(--muted);
  grid-column: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rRow small {
  font-size: 12px;
  color: var(--muted);
}
.rLine {
  grid-column: 1;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--bar);
  margin: 4px 0;
}
/* The tone bars' widths. Classes, not inline styles: the site's CSP allows no inline style. */
.w44 {
  width: 44%;
}
.w47 {
  width: 47%;
}
.w52 {
  width: 52%;
}
.w56 {
  width: 56%;
}
.w58 {
  width: 58%;
}
.w61 {
  width: 61%;
}
.w66 {
  width: 66%;
}
.rRow.hot {
  background: var(--tint-hot);
}
.rRow.hot p {
  color: var(--coral-text);
  font-weight: 600;
}
.rRow.look {
  background: var(--tint-look);
}
.rDot {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}
.rDot.hot {
  background: var(--coral);
}
.rDot.look {
  background: var(--amber);
}
.rThread {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rThreadHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.rThreadHead b {
  font-size: 15px;
  font-weight: 700;
}
.rBtn {
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.rBtn.p {
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
}
.rStrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--tint-hot);
  flex-wrap: wrap;
}
.rStrip b {
  color: var(--coral-text);
  font-weight: 700;
}
.rStrip > span {
  color: var(--muted);
}
.rStrip .rBtn {
  color: var(--ink);
}
.rStrip .rBtn:first-of-type {
  margin-left: auto;
}
.rStrip .rBtn.p {
  color: var(--on-primary);
}
.rBubbles {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 22px 24px;
  flex: 1;
  font-size: 14px;
}
.rOut {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  padding: 9px 12px;
  max-width: 78%;
}
.rIn {
  align-self: flex-start;
  background: var(--soft);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 8px 12px;
}
.rStamp {
  align-self: flex-end;
  font-size: 12px;
  color: var(--muted);
}
.rGap {
  margin-bottom: 18px;
}
.rCompose {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
.rCompose > span:first-child {
  flex: 1;
  background: var(--soft);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.rHead b {
  font-size: 15px;
  font-weight: 800;
}
.rHead > div b {
  display: block;
}
.rHead small {
  font-size: 12px;
  color: var(--muted);
}
.rSeg {
  display: inline-flex;
  background: var(--soft);
  border-radius: 10px;
  padding: 3px;
}
.rSeg span {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rSeg .on {
  background: var(--ink);
  color: var(--surface);
}
.rSchedBody {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  flex: 1;
}
.rSteps {
  border-right: 1px solid var(--line);
  padding: 8px;
}
.rStep {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
}
.rStep.on {
  background: var(--soft);
}
.rStep .d {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rStep b {
  font-weight: 600;
}
.rStep small {
  font-size: 12px;
  color: var(--muted);
}
.rEditor {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rStepTitle {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.rLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rPreview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rTableWrap {
  overflow-x: auto;
}
.rTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}
.rTable th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.rTable td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
  white-space: nowrap;
}
.rTable tr:last-child td {
  border-bottom: 0;
}
.rTable td.hot {
  color: var(--coral-text);
  font-weight: 600;
}
.rTable tr.mut td {
  color: var(--muted);
}
@media (min-width: 1001px) {
  .rFrame {
    min-height: clamp(600px, 56vw, 800px);
  }
}
@media (max-width: 1000px) {
  .rWide {
    display: none;
  }
  .rFrame {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .rRail {
    display: none;
  }
  .rSchedBody {
    grid-template-columns: minmax(0, 1fr);
  }
  .rSteps {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 700px) {
  .rFrame {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .rList {
    display: none;
  }
  .rStrip .rBtn:first-of-type {
    margin-left: 0;
  }
  .rOut {
    max-width: 90%;
  }
  .rSched,
  .rReport {
    grid-template-columns: minmax(0, 1fr);
  }
  .rMini {
    display: none;
  }
}

/* =============================================================================
   The reading pages: /about, /privacy, /terms
   ============================================================================= */
.prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 0 64px;
}
.proseHead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prose h1 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1.7px;
  line-height: 1.2;
}
.proseSummary {
  font-size: 13px;
  color: var(--muted);
  max-width: 70ch;
}
.proseCard {
  max-width: 70ch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.proseSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proseSection h2 {
  font-size: 15px;
  font-weight: 700;
}
.proseSection p {
  font-size: 14px;
  line-height: 1.7;
}
/* Named twice for the same reason as .button: `.site a` removes the underline from every link
   inside the site, and a link in a sentence needs one. */
.proseLink,
.site .proseLink {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blank {
  color: var(--muted);
  border-bottom: 1px dotted var(--muted);
}
.signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.7;
}
.teamList {
  display: grid;
  gap: 16px;
}
.teamPerson strong {
  font-size: 14px;
  font-weight: 700;
}
.teamPerson span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.teamPerson p {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 4px;
}

/* =============================================================================
   Forms: /contact and /login. The field recipe is the app's own (design/proto/index.html
   `.field`): the label 12/600 muted above, the control 38px tall (44 on a phone) on --field with
   a 1px --line border and a 10px radius.
   ============================================================================= */
.contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 0 64px;
  max-width: 560px;
}
.contactHead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact h1 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1.7px;
  line-height: 1.2;
}
.contactHead p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 10px;
  background: var(--field);
  color: var(--ink);
}
.field textarea {
  height: auto;
  min-height: 120px;
  padding: 10px;
  /* With no script the box cannot grow by itself everywhere, so a vertical handle is the way to
     make room for a long message. Where the browser can size a field to its content, it grows
     with the text the way the app's own text boxes do, and the handle goes (owner, 2026-09-19). */
  resize: vertical;
  line-height: 1.6;
}
@supports (field-sizing: content) {
  .field textarea {
    field-sizing: content;
    max-height: 420px;
    resize: none;
  }
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--ink);
}
.fieldError {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.formNotice,
.formError {
  background: var(--fill);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
/* The box and the sentence are one row at every width: as a wrapping flex row the sentence went
   to a line of its own at 390 and left the box orphaned above it. The link sits inside the label,
   where clicking it navigates and does not tick the box (a label's activation is suppressed for
   an interactive descendant), so the sentence and its link read as one statement. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.consent input {
  width: 18px;
  height: 18px;
  margin-top: 13px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.consent label {
  padding: 12px 0;
  line-height: 1.5;
  cursor: pointer;
}
.formActions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.formActions .button {
  min-height: 44px;
}
.button.secondary {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
/* The honeypot: out of sight, out of the accessibility tree and out of the tab order. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sent {
  background: var(--fill);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.sent h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.5;
}
.sent .button {
  min-height: 44px;
}

/* ---------- /login: the signed-out frame ---------- */
.auth {
  min-height: 100dvh;
  background: var(--card);
  display: grid;
  grid-template-columns: minmax(360px, 40%) minmax(0, 1fr);
}
.authPanel {
  background: #111417;
  color: #eaf0f0;
  color-scheme: dark;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 12%;
  min-height: 100dvh;
}
.authBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  align-self: flex-start;
}
.authLines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  gap: 20px;
  padding-bottom: 10vh;
}
.authTagline {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.authSub {
  font-size: 15px;
  line-height: 1.7;
  color: #b7c1c6;
}
.authSide {
  display: flex;
  min-height: 100dvh;
  padding: 32px 40px;
  border-left: 1px solid var(--line);
}
.authColumn {
  width: 100%;
  max-width: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.authMain {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.authHeading {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.authForm {
  gap: 14px;
}
.authSubmit {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
}
.authFooter {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.authFooter a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.authLegal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}
.authLegal a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 16px;
}
.authLegal a:hover {
  color: var(--ink);
}

/* ---------- 404 ---------- */
.notFound {
  padding: 80px 0 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.notFound h1 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1.7px;
  line-height: 1.2;
}
.notFound p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

/* =============================================================================
   Widths
   ============================================================================= */
@media (max-width: 1000px) {
  .details {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 50px 0;
  }
  .reverse > div:first-child {
    order: 0;
  }
  .howGrid {
    gap: 30px;
  }
}
@media (max-width: 750px) {
  .why,
  .instruments {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 45px 0;
  }
  .why h2,
  .instruments h2 {
    font-size: 34px;
    letter-spacing: -1.2px;
  }
  .instruments h2 {
    font-size: 31px;
    letter-spacing: -1px;
  }
  .planGrid {
    grid-template-columns: 1fr;
  }
  .pricing {
    padding: 45px 0;
  }
  .instrumentList {
    padding: 10px 18px;
  }
  .instrumentList > div {
    grid-template-columns: 60px 1fr auto;
    gap: 10px;
  }
  .reportingNote {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
  .reportingNote > a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 10px;
  }
}
@media (max-width: 700px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer p {
    margin-right: 0;
  }
  .footerLinks {
    gap: 22px;
  }
}
@media (max-width: 650px) {
  .wrap {
    padding: 0 16px;
  }
  .hero {
    padding-top: 50px;
  }
  .hero h1 {
    font-size: 44px;
    letter-spacing: -2px;
  }
  .heroCopy > p {
    font-size: 14px;
  }
  .actions {
    gap: 18px;
    font-size: 12px;
  }
  .button {
    padding: 14px 17px;
    font-size: 12px;
  }
  .heroProduct {
    padding: 10px 10px 0;
    margin-top: 35px;
  }
  .benefits {
    gap: 10px;
    padding-bottom: 30px;
  }
  .howItWorks {
    padding: 55px 0;
  }
  .sectionTitle h2,
  .details h2 {
    font-size: 31px;
    letter-spacing: -1px;
  }
  .howGrid {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
  }
  .howGrid article {
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
  }
  .howGrid h3 {
    margin-top: 15px;
  }
  .details {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 45px 0;
  }
  .cta {
    display: block;
    padding: 50px 0;
  }
  .cta h2 {
    font-size: 28px;
    margin-bottom: 25px;
  }
  .prose h1,
  .contact h1,
  .notFound h1,
  .pricingPage h1 {
    font-size: 31px;
    letter-spacing: -1px;
  }
  .proseCard {
    padding: 20px;
  }
}
@media (max-width: 640px) {
  .header {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    padding: 8px 8px 8px 16px;
    gap: 12px;
  }
  .headerNav,
  .headerActions {
    display: none;
  }
  .menu {
    display: block;
  }
}

/* A phone's controls are 44px (the app's own rule under md). */
@media (max-width: 767px) {
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"] {
    height: 44px;
  }
  .auth {
    display: block;
  }
  .authPanel {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 20px;
    gap: 16px;
  }
  .authLines {
    display: none;
  }
  .authSide {
    min-height: calc(100dvh - 56px);
    padding: 32px 20px;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}