/* mennula design system: the public website and the signed-in app share this file.
   Ink and tangerine come from the logo. Bricolage Grotesque sets the headings, Instrument Sans the text.
   Class names are kept from the earlier version so every template picks up the new look. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #17161a;
  --ink-2: #3a3840;
  --paper: #f6f5f1;
  --paper-2: #eeebe4;
  --white: #ffffff;
  --line: #e4e0d7;
  --line-2: #cdc8bc;
  --stone: #5f5c66;
  --tangerine: #ff6b2c;
  --tangerine-600: #e5531a;
  --tangerine-wash: #ffe9dd;
  --rust: #a8421a;
  --success-bg: #e2f3e8; --success-ink: #1d6b44;
  --warning-bg: #fcefcd; --warning-ink: #6f4a00;
  --danger: #b3261e; --danger-bg: #fbe5e2;
  --font: "Instrument Sans", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --control-min: 52px;
  --radius-field: 12px; --radius-row: 14px; --radius-card: 18px; --radius-pill: 999px;
  /* names the staff console and older screens still read */
  --charcoal: var(--ink); --cloud: var(--paper); --blush: var(--tangerine-wash); --neutral-100: var(--line);
  --neutral-200: var(--line-2); --neutral-300: #b8b3a7; --neutral-700: var(--ink-2); --focus-ring: var(--tangerine-600);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *:not(.meet):not(.meet *), *:not(.meet):not(.meet *)::before, *:not(.meet):not(.meet *)::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/28px var(--font); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--rust); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); color: var(--ink); padding: 12px 16px; z-index: 10; border-radius: 8px; }
main { display: block; }

/* Layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
section { margin: clamp(56px, 7vw, 104px) 0 0; }
.band { background: var(--white); padding: clamp(56px, 7vw, 104px) 0; margin-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band section { margin-top: 0; }
.band + section, .band + .band { margin-top: 0; }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
.grid.two, .grid.three { grid-template-columns: 1fr; }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 900px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.split { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
.split.wide-right { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split.wide-right { grid-template-columns: 0.85fr 1.15fr; } }
.two-col-words { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col-words { grid-template-columns: 1fr 1fr; } }
.row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.row-inline.between { justify-content: space-between; }
.stack > * + * { margin-top: var(--space-3); }
.flush > :first-child, .flush-top { margin-top: 0; }
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.mt { margin-top: var(--space-4); }
.mt-sm { margin-top: var(--space-2); }
.w-100 { width: 100%; }

/* Type */
h1, .h1, .display { font: 800 clamp(46px, 7vw, 100px)/0.96 var(--font-display); letter-spacing: -0.045em; margin: 0 0 var(--space-5); color: var(--ink); text-wrap: balance; }
h2, .h2 { font: 700 clamp(32px, 4.2vw, 56px)/1.04 var(--font-display); letter-spacing: -0.03em; margin: 0 0 var(--space-4); color: var(--ink); text-wrap: balance; }
h3, .h3 { font: 700 24px/30px var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--space-2); color: var(--ink); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
.small { font-size: 16px; line-height: 24px; color: var(--stone); margin: 0; }
.strong { font-weight: 600; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.plain li:last-child { border-bottom: 0; }
ul { padding-left: 22px; }
.quote { font-size: 16px; line-height: 24px; color: var(--stone); margin: var(--space-2) 0 0; }
.pre-wrap { white-space: pre-wrap; }
.lang-note, .toast-bar-note { font-size: 16px; color: var(--stone); }

/* Buttons: pills, a clear press, ink turns tangerine on hover */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-min); padding: 0 28px; border-radius: var(--radius-pill); border: 2px solid transparent; font: 600 18px/28px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; margin: 0 10px 10px 0; background: none; color: var(--ink); transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .08s ease; }
.btn:hover { color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--tangerine); color: var(--ink); }
.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--white); }
.btn-quiet { border-color: var(--line-2); background: var(--white); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink); background: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }
button.link { background: none; border: 0; padding: 0; min-height: 48px; color: var(--rust); font: 600 18px/28px var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-4); }
.actions .btn { margin: 0; }
/* Time slots in a card: two equal columns that stay inside the card, one column when it is too narrow for two */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); margin: var(--space-4) 0; }
.slots .btn { width: 100%; min-width: 0; margin: 0; padding: 0 12px; white-space: normal; }
.inline { display: inline; }
.inline-form { display: inline; }
form.inline { margin: 0; }

/* Header and footer */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-5); min-height: 84px; }
.logo img, .site-header > .wrap > a img { height: 40px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 8px 0; white-space: nowrap; }
.nav a:hover { color: var(--rust); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--tangerine); }
.nav form { margin: 0; }
.nav .btn { min-height: 48px; padding: 0 20px; margin: 0; }
.menu { display: none; }
.menu summary { list-style: none; min-height: 48px; display: inline-flex; align-items: center; padding: 0 20px; border: 2px solid var(--ink); border-radius: var(--radius-pill); font: 600 18px var(--font); cursor: pointer; background: var(--white); }
.menu summary::-webkit-details-marker { display: none; }
.menu .panel-links { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); padding: var(--space-4) clamp(20px, 4vw, 48px) var(--space-5); box-shadow: 0 24px 40px -28px rgba(23, 22, 26, 0.4); }
.menu .panel-links a { display: block; padding: 14px 0; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu .panel-links a:last-child { border-bottom: 0; }
.site-header { position: relative; }
@media (max-width: 1099px) {
  .nav .desktop-link { display: none; }
  .menu { display: block; }
}

.footer { background: var(--ink); color: var(--white); padding: clamp(56px, 7vw, 88px) 0 var(--space-5); margin-top: clamp(56px, 7vw, 104px); }
.footer img { height: 40px; width: auto; }
.footer h2 { font: 700 22px/30px var(--font-display); color: var(--white); margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
.footer a { color: #f1efe9; text-decoration: none; display: block; padding: 5px 0; font-size: 18px; }
.footer a:hover { color: var(--tangerine); }
.footer .small { color: #c9c5cc; }
.footer .strong { color: var(--white); }
.footer .cols { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-6); }
@media (min-width: 720px) { .footer .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer .base { border-top: 1px solid #3a3840; margin-top: var(--space-6); padding-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: 16px; color: #c9c5cc; }

/* Hero: a large headline, the morning card beside it */
.hero-band { background: var(--paper); }
.hero-band > .hero { padding-top: clamp(40px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); align-items: center; }
.hero { display: grid; gap: clamp(40px, 6vw, 80px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.02fr 0.98fr; } }
.hero-band h1 { font-size: clamp(54px, 8.2vw, 116px); line-height: 0.92; }
.hero-band p { color: var(--ink-2); font-size: 20px; line-height: 32px; max-width: 34ch; }
.hero-band .small { color: var(--stone); font-size: 16px; }
.hero-band .btn-primary { min-height: 60px; padding: 0 34px; font-size: 19px; }
.hero-band .demo { background: transparent; padding: 0; border-radius: 0; }
.hero-band .demo h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.12; margin-bottom: var(--space-3); }
.hero-band .demo p { color: var(--stone); font-size: 17px; line-height: 26px; }
.demo .stage { display: grid; gap: var(--space-3); }
.demo .card-shown { display: block; }
.demo .card-hidden { display: none; }
.demo-picture { display: none; }
.no-js .demo-picture { display: block; }
.no-js .demo-live { display: none; }

/* Cards, panels and the morning card */
.card, .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(22px, 3vw, 34px); }
.panel { background: var(--paper-2); border-color: transparent; }
.band .card { background: var(--paper); }
.card > :last-child, .panel > :last-child { margin-bottom: 0; }
.empty-state { background: var(--paper-2); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 44px); }
.approval { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(22px, 3vw, 30px); box-shadow: 0 34px 64px -40px rgba(23, 22, 26, 0.45); }
.approval .q { font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-3); color: var(--ink); }
.approval .time { font-size: 15px; line-height: 22px; color: var(--stone); float: right; margin-left: var(--space-3); }
.approval .actions { margin-top: var(--space-5); }
.picture-frame { background: var(--paper-2); border-radius: var(--radius-row); padding: clamp(16px, 2vw, 22px); display: grid; gap: var(--space-3); align-content: start; overflow: hidden; }
.picture-frame .toast { font-size: 16px; }
.toast { background: var(--ink); color: var(--white); border-radius: var(--radius-row); padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 52px; }
.toast a, .toast button { color: var(--tangerine); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; font: 600 17px var(--font); cursor: pointer; }
.tick { color: #7fd6a2; font-weight: 700; }
.person { display: flex; gap: var(--space-3); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-row); padding: 16px; background: var(--white); }
.person > div { min-width: 0; }
.avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--tangerine-wash); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 var(--font); letter-spacing: 0.01em; }
.avatar.big { width: 68px; height: 68px; flex-basis: 68px; font-size: 20px; }
.avatar-empty { background: transparent; border: 1.5px dashed var(--line-2); }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font: 700 18px/1 var(--font-display); margin-bottom: var(--space-3); }

/* Lists in one panel with hairline rows */
.list { list-style: none; padding: 0; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.list > li { padding: 16px 20px; border-bottom: 1px solid var(--line); margin: 0; }
.list > li:last-child { border-bottom: 0; }
.row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; padding: 22px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
@media (min-width: 720px) { .row { grid-template-columns: 260px 1fr; gap: var(--space-5); } }

/* Tags and status */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font: 600 15px/22px var(--font); background: var(--paper-2); color: var(--ink); white-space: nowrap; }
.tag-fit { background: var(--tangerine-wash); color: #8f3a12; }
.tag-success { background: var(--success-bg); color: var(--success-ink); }
.tag-warning { background: var(--warning-bg); color: var(--warning-ink); }
.tag-neutral { background: var(--paper-2); color: var(--stone); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.fit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.score { font: 700 22px/28px var(--font-display); color: var(--ink); }
.bar { flex: 1 1 120px; height: 10px; border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; min-width: 120px; }
.bar span { display: block; height: 100%; background: var(--tangerine); border-radius: var(--radius-pill); }
.w-74 { width: 74%; } .w-79 { width: 79%; } .w-81 { width: 81%; } .w-89 { width: 89%; } .w-96 { width: 96%; } .w-61 { width: 61%; } .w-64 { width: 64%; } .w-68 { width: 68%; }
.checklist-row { border-bottom: 1px solid var(--line); padding: 14px 0; }
.checklist-row:last-child { border-bottom: 0; }
.checklist-row .tag { margin-left: 6px; }
.checklist-row .quote { font-size: 16px; color: var(--stone); margin-top: 6px; }
progress.meter { display: block; width: 100%; height: 12px; margin: var(--space-2) 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; appearance: none; -webkit-appearance: none; }
progress.meter::-webkit-progress-bar { background: var(--paper-2); }
progress.meter::-webkit-progress-value { background: var(--ink); border-radius: var(--radius-pill); }
progress.meter::-moz-progress-bar { background: var(--ink); border-radius: var(--radius-pill); }

/* Tables: a tidy comparison that becomes stacked rows on phones */
.table-wrap { width: 100%; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; border-collapse: collapse; font-size: 18px; }
table.compare th, table.compare td { text-align: left; padding: 18px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.compare th { font: 600 14px/20px var(--font); letter-spacing: 0.02em; color: var(--stone); }
table.compare tbody td:first-child { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--ink); width: 26%; }
@media (max-width: 719px) {
  table.stack { display: block; }
  table.stack thead { display: none; }
  table.stack tr { display: block; border-bottom: 1px solid var(--line); padding: 16px 0; }
  table.stack td { display: block; border: 0; padding: 4px 0; width: auto; }
  table.stack td:first-child { font-size: 22px; line-height: 28px; margin-bottom: 4px; }
}

/* Questions: each one is a row that opens its answer */
details.faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-row); margin: 0 0 var(--space-3); }
details.faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 20px 24px; font: 600 19px/27px var(--font); color: var(--ink); }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; font: 400 30px/1 var(--font); color: var(--stone); flex: 0 0 auto; transition: transform .2s ease; }
details.faq[open] > summary::after { content: "–"; }
details.faq > p { margin: 0; padding: 0 24px 22px; color: var(--stone); }
details.faq > summary:focus-visible { outline-offset: -3px; border-radius: var(--radius-row); }
.grid:has(> details.faq), .two-col-words:has(> details.faq) { grid-template-columns: 1fr; gap: 0; }

/* Six or more short cards: three to a row so the grid fills evenly */
@media (min-width: 900px) {
  .grid.auto:has(> :nth-child(6)):not(:has(> details.faq)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Forms */
.field { display: block; margin: var(--space-5) 0 0; }
.field label { display: block; font: 600 17px/24px var(--font); margin-bottom: var(--space-2); color: var(--ink); }
.field input, .field textarea, .field select { width: 100%; min-height: 56px; border: 1.5px solid var(--line-2); border-radius: var(--radius-field); padding: 15px 16px; font: 400 18px/28px var(--font); background: var(--white); color: var(--ink); }
.field textarea { min-height: 200px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8c8892; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline: 3px solid var(--tangerine); outline-offset: 2px; }
.field.error input, .field.error textarea, .field.error select { border-color: var(--danger); }
.field .hint { font-size: 16px; line-height: 24px; color: var(--stone); margin-top: 8px; }
.field .error-text { color: var(--danger); font-weight: 600; font-size: 16px; margin-top: 8px; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
legend { font: 600 17px/24px var(--font); padding: 0; margin-bottom: var(--space-2); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--space-4); font-size: 17px; line-height: 26px; }
.check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ink); flex: 0 0 22px; }
.pill-radios { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.pill-radios label { position: relative; min-height: 50px; display: inline-flex; align-items: center; padding: 0 20px; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); font: 600 17px var(--font); cursor: pointer; background: var(--white); }
.pill-radios input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; margin: 0; }
.pill-radios label:has(input:checked) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pill-radios label:has(input:focus-visible) { outline: 3px solid var(--tangerine); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signup-grid { display: grid; gap: var(--space-5); }
.signup-grid .card h1 { margin-top: 0; }
.form-grid { display: grid; gap: 0 var(--space-4); }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .signup-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.forward { width: 100%; font: 600 18px var(--font); }

/* Tabs and segmented switches (the app's Team and Mine) */
nav[aria-label="Team or mine"] { display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); background: var(--white); width: fit-content; max-width: 100%; }
nav[aria-label="Team or mine"] a { padding: 9px 20px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; color: var(--ink); min-height: 42px; display: inline-flex; align-items: center; }
nav[aria-label="Team or mine"] a[aria-current="page"] { background: var(--ink); color: var(--white); }
.tab { font-weight: 600; }

/* Legal pages: a quiet index beside the document */
.legal { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .legal { grid-template-columns: 240px minmax(0, 760px); justify-content: start; } }
.legal-doc { max-width: 760px; padding: clamp(24px, 4vw, 56px); }
.legal-doc section { margin-top: var(--space-5); }
.legal-doc h2 { font-size: clamp(26px, 3vw, 34px); }
.legal-side h2 { font: 600 16px/24px var(--font); letter-spacing: 0.01em; color: var(--stone); margin: 0 0 var(--space-3); }
.legal-side h2 + .plain { margin-bottom: var(--space-5); }
.legal-side .plain a { color: var(--ink); text-decoration: none; display: block; padding: 6px 0; }
.legal-side .plain a:hover { color: var(--rust); text-decoration: underline; }
.legal-side .plain li { padding: 0; border: 0; }
.prose { max-width: 68ch; }
.prose p { font-size: 19px; line-height: 31px; }

/* Settings rows and misc app screens */
.h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--font-display); }
.console-meta { color: var(--stone); }
.w-89 { width: 89%; }
.empty { color: var(--stone); }
.errors { color: var(--danger); }
.hero-proof { color: var(--stone); }
.footer-note { color: #c9c5cc; }
.checkmark { color: var(--success-ink); font-weight: 700; }
.pill { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--paper-2); font: 600 15px/22px var(--font); }
.meter-label { font-size: 16px; color: var(--stone); }
.quiet { color: var(--stone); }
.hidden-print { display: none; }
.num { font-variant-numeric: tabular-nums; }

/* Mobile */
@media (max-width: 719px) {
  body { font-size: 18px; }
  .wrap { padding: 0 20px; }
  .btn { width: auto; }
  .actions .btn, .hero-band .btn { width: 100%; }
  .actions .btn { width: auto; }
  .hero-band .btn { width: auto; }
  .card, .panel { padding: 22px; }
  .list > li { padding: 14px 16px; }
}

/* Public site accents */
body.public .btn-primary:hover { background: var(--tangerine); }
body.public section { margin-top: clamp(56px, 7vw, 96px); }
body.public .band { margin-top: clamp(56px, 7vw, 96px); }
body.public .band + section { margin-top: 0; }
body.public .split { gap: clamp(28px, 5vw, 72px); }
body.public .split > .card, body.public .split > .panel { width: 100%; }
body.public .plan-input, body.public .plan-tabs { display: none; }
body.public .hero-band + .band { margin-top: 0; }

/* App screens */
body.app main#main { max-width: 980px; padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(64px, 8vw, 104px); }
body.app main > * + * { margin-top: var(--space-5); }
body.app main > .row-inline.between h1 { margin: 0; }
body.app h1 { font-size: clamp(38px, 5vw, 56px); margin: 0; }
body.app .btn-primary { background: var(--ink); color: var(--white); }
body.app .btn-primary:hover { background: var(--tangerine); color: var(--ink); }
body.app .site-header .wrap { min-height: 80px; }
body.app .footer { margin-top: clamp(40px, 6vw, 72px); }
body.app .footer .small { color: #c9c5cc; }
body.app .footer .small a { color: #f1efe9; display: inline; padding: 0; }
body.app .grid > .card { display: flex; flex-direction: column; }
body.app .grid > .card > :last-child { margin-top: auto; }

/* Buttons inside the header and the approval card keep their own colours and sizes */
.nav a.btn-primary { color: var(--white); box-shadow: none; }
.nav a.btn-primary:hover { color: var(--ink); }
.nav a.btn-secondary { color: var(--ink); }
.approval .btn { padding: 0 20px; min-height: 48px; font-size: 17px; margin: 0 8px 8px 0; }

/* Prices stay on one line inside their cards; the enterprise note reads as a note */
.card .h1, .card .h2, .card .price, .plan-price { font: 800 clamp(40px, 3.6vw, 54px)/1 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; }
.card p .small { white-space: nowrap; }
h2 .small { font: 500 17px/24px var(--font); letter-spacing: 0; color: var(--stone); white-space: normal; }

/* Phones: headings and table labels wrap at spaces, never inside a word */
h1, h2, h3, table.stack tbody td:first-child { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 719px) {
  table.stack tbody td:first-child { font-size: 21px; line-height: 27px; }
  h2 { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.08; }
}

/* App header: links and Log out sit apart on one row; section headings inside cards stay a normal size */
body.app .site-header nav { gap: 22px; }
body.app .site-header nav a { color: var(--ink); }
body.app .site-header nav a[aria-current="page"] { color: var(--rust); }
body.app .site-header nav .btn, body.app .site-header nav button.btn { margin: 0; }
body.app .card h2, body.app .panel h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; margin-bottom: var(--space-3); letter-spacing: -0.02em; }
body.app .empty-state h2 { font-size: clamp(24px, 2.6vw, 30px); }

/* Long button labels wrap on narrow phones instead of pushing the page sideways */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; padding: 12px 22px; line-height: 1.3; }
}

/* Names the staff console and older templates still use, mapped onto the new palette (replaces tokens.css) */
:root {
  --charcoal: var(--ink);
  --cloud: var(--paper);
  --blush: var(--tangerine-wash);
  --neutral-100: var(--line);
  --neutral-200: var(--line-2);
  --neutral-300: #b8b3a7;
  --neutral-700: var(--ink-2);
  --tangerine-50: #fff4ee;
  --tangerine-200: #ffc9af;
  --tangerine-400: #ff8a57;
  --success-100: var(--success-bg);
  --success-300: #7fd6a2;
  --success-700: var(--success-ink);
  --warning-100: var(--warning-bg);
  --warning-700: var(--warning-ink);
  --danger-100: var(--danger-bg);
  --danger-600: var(--danger);
  --info-100: #e5edfd;
  --info-700: #2051bb;
  --button-hover: var(--ink-2);
}

/* People list: rows sit inside one panel, without their own borders */
.list > li.person { border: 0; border-radius: 0; background: transparent; padding: 16px 20px; }
.list > li.person + li.person { border-top: 1px solid var(--line); }

/* Job status filters: small pills, the chosen one filled in ink */
.filter { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-2); color: var(--ink); font: 600 16px/24px var(--font); text-decoration: none; background: var(--white); }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Header buttons never break onto two lines; the header row stays tidy on phones */
.site-header .btn { white-space: nowrap; min-height: 44px; padding: 0 18px; }
@media (max-width: 480px) { .site-header .btn { white-space: nowrap; } }

/* App header on narrow phones: the links wrap onto a second line rather than pushing the page sideways */
@media (max-width: 480px) {
  body.app .site-header nav { flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; }
  body.app .site-header .wrap { row-gap: 12px; }
}

/* Contact page: the ways-to-reach-us card sits at the top of the left column, not centred against the form */
.split.wide-right > .stack { align-self: start; }

/* Two circles under the contact card: decoration only. Distances and timings are constants at the top of two-circles.js */
.meet { display: flex; justify-content: center; margin: 48px auto 0; pointer-events: none; }
.meet svg { display: block; width: 240px; height: 160px; overflow: visible; }
.meet .meet-breathe, .meet .meet-tilt, .meet .meet-almond-group { transform-box: view-box; transform-origin: 120px 80px; }
.meet .meet-tilt { transform: rotate(var(--meet-tilt, 20deg)); }
.meet .meet-circle { fill: none; stroke: var(--ink); stroke-width: 2; }
.meet .meet-a, .meet .meet-clip-a { transform: translateX(-64px); }
.meet .meet-b, .meet .meet-almond { transform: translateX(64px); }
.meet .meet-almond { fill: var(--blush); opacity: 0; }
.meet.is-sent .meet-almond { fill: var(--tangerine); transition: fill 300ms ease; }
.meet.is-sent .meet-almond-group { animation: meet-pulse var(--meet-pulse-ms, 600ms) ease-in-out 1; }
.meet.is-breathing .meet-breathe { animation: meet-breathe var(--meet-breath-ms, 4000ms) ease-in-out infinite; }
@keyframes meet-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes meet-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-width: 959px) { .meet { display: none; } }

/* Legal pages: tables scroll sideways inside their own box on phones, and the rest of the page stays put */
.legal > * { min-width: 0; }
.legal-doc .table-wrap { overflow-x: auto; max-width: 100%; margin: var(--space-4) 0; }
.legal-doc table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 18px; line-height: 26px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--line); }
.legal-doc th { font-weight: 600; background: var(--paper-2); }