/* Shared Paper-ish chrome for static marketing + legal pages. */
:root {
  --canvas: #F3EEE4;
  --ink: #2A241C;
  --mute: #7A7166;
  --rule: #D8D0C4;
  --ochre: #C4A06A;
  --clay: #8C4A32;
  --entry: #F6F1E9;
  --mist: #E8E1D4;
  /* Card colours, as the timesheet (lib/widgets/card_type.dart; checked by
     test/card_contrast_test.dart): groups on --entry, item cards on --chip,
     category and duration in --card-mute (AA on --chip), description in
     --card-ink. */
  --chip: #EFE6D8;
  --card-mute: #645C51;
  --card-ink: var(--ink);
  --shadow: #3D3428;
  --radius: 14px;
  --max: 45rem;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--ochre); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 3rem;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.topnav .brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
  flex: 1;
}

.topnav img.mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.topnav .links { display: flex; gap: 0.25rem; flex-wrap: wrap; }

.topnav a.nav {
  text-decoration: none;
  color: var(--mute);
  font-size: 0.95rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
}

.topnav a.nav:hover { background: var(--mist); color: var(--ink); }

.hero {
  text-align: center;
  padding-top: 0.5rem;
}

/* Bear sits in the smile bowl: arc ends at mark top, middle clears below the icon.
   The SVG viewBox stops just under the lowest glyphs, so no empty band follows. */
.hero-crest {
  position: relative;
  width: min(100%, 38rem);
  margin: 0 auto 0.5rem;
}

.hero-crest .hero-mark {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  /* Scales with the title (70px at full width) so it never covers the words. */
  width: 11.5%;
  height: auto;
  border-radius: 20%;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-title {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
}

.hero-title-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ink);
}

.hero-title-text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero .sub {
  color: var(--mute);
  font-size: 1.1rem;
  margin: 0 auto 1rem;
  max-width: 36rem;
  text-wrap: balance;
}

/* Factual caption: a different job from the joke above, so smaller, ink, balanced. */
.hero .sub-plain { margin: 0 auto 0; max-width: 32rem; font-size: 0.95rem; text-wrap: balance; }
.hero .sub-plain::before { content: ""; display: block; width: 40px; height: 1px; margin: 0 auto 1rem; background: var(--rule); }

/* Try-a-day toy: a small copy of the app's day pane (theme.dart, layout.dart,
   entries.dart, day_progress.dart). App fonts come from the Flutter build. */
@font-face { font-family: Fraunces; src: url("/assets/assets/fonts/Fraunces-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
.try-day {
  margin: 1.25rem auto 1.25rem; /* rule to toy = toy to rule = text to rule */
  max-width: 36rem;
  padding: 1.5rem 1rem 1rem;
  /* A faint tint one step down from the page, so the demo sits apart
     without a frame shouting about it. */
  background: color-mix(in srgb, var(--canvas) 82%, var(--rule));
  border: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
  border-radius: 20px;
  text-align: left;
}
.try-day [hidden] { display: none; }
.try-day-screen { position: relative; padding: 12px 16px 16px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow) 8%, transparent); }
.try-day-pill { position: absolute; top: -10px; left: 14px; padding: 2px 10px; border-radius: 999px; background: var(--ochre); color: var(--ink); font: 600 0.75rem/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.01em; }
.try-day-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
.try-day-date { font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.15; }
.try-day-score { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.try-day-btn { font: 600 14px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--canvas); background: var(--clay); border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer; }
.try-day-btn:hover { background: color-mix(in srgb, var(--clay) 90%, var(--canvas)); }
.try-day-bar { position: relative; height: 8px; margin: 10px 0 12px; border-radius: 4px; background: color-mix(in srgb, var(--rule) 70%, transparent); }
.try-day-bar::after { content: ""; position: absolute; inset: 0; --tick: linear-gradient(color-mix(in srgb, var(--shadow) 18%, transparent), color-mix(in srgb, var(--shadow) 18%, transparent)); background: var(--tick) 25% 0 / 1.5px 100% no-repeat, var(--tick) 50% 0 / 1.5px 100% no-repeat, var(--tick) 75% 0 / 1.5px 100% no-repeat; }
.try-day-bar span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--ochre); box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 12%, transparent); transition: width 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.try-day-bar span.is-done { background: #5A8F66; }
/* No panel round the logged day: the cards sit on the screen, as in the app. */
.try-day-well { padding: 0; }
.try-day-empty { margin: 0; padding-top: 8px; font-size: 16px; color: var(--mute); }
.try-day-group { padding: 10px 10px 8px; margin-bottom: 10px; background: var(--entry); border: 1px solid color-mix(in srgb, var(--rule) 90%, transparent); border-radius: 12px; animation: try-in 240ms ease-out; }
/* Group header matches the app (16 / 1.45; name 900, total 700); system-ui. */
.try-day-project { display: flex; gap: 8px; margin-bottom: 8px; font: 900 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
/* Name in the project's colour (--edge, from the app palette: AA as text). */
.try-day-project span:first-child { flex: 1; color: var(--edge, var(--ink)); text-transform: uppercase; letter-spacing: 0.04em; }
.try-day-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Tiles copy the app's logged entry cards (lib/screens/timesheet/entries.dart):
   chip face, solid 2px project-colour border, emoji over duration, then category and two
   lines of description. Type as the app, family system-ui. No copy/delete.
   Three to a row on wide screens, one on phones. */
.try-day-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.try-day-tile { position: relative; box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px; width: calc((100% - 16px) / 3); padding: 7px 3px 7px 9px; overflow: hidden; font: 400 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--card-ink); background: var(--chip); border: 2px solid var(--edge, var(--rule)); border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 16%, transparent); animation: try-in 220ms ease-out; }
.try-day-lead { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.try-day-lead > span { font-size: 16px; line-height: 1.1; }
.try-day-time { font: 700 13px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--card-mute); }
.try-day-text { flex: 1; min-width: 0; }
.try-day-text > b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--card-mute); letter-spacing: 0; }
.try-day-desc { display: block; overflow: hidden; font: 300 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--card-ink); height: calc(2 * 1.45em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; }
/* Phones: give the cards the room they have in the app. */
@media (max-width: 520px) {
  .try-day { padding: 1.25rem 0.25rem 0.75rem; }
  .try-day-screen { padding: 12px 8px 12px; }
  .try-day-group { padding: 8px 6px 6px; }
  .try-day-tile { width: 100%; }
}
.try-day-result { margin: 0; color: var(--mute); text-align: center; }
.try-day-result:not(:empty) { margin-top: 0.75rem; animation: try-in 600ms ease-out; }
@keyframes try-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .try-day *, .try-day-result:not(:empty) { animation: none !important; transition: none !important; }
}

.cta {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  min-width: 16rem;
  border: 1px solid var(--ochre);
  border-radius: var(--radius);
  background: var(--ochre);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow) 18%, transparent);
}

.cta:hover { filter: brightness(0.97); color: var(--ink); }

.stack { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }

.card {
  background: var(--entry);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow) 6%, transparent);
}

.card h2 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink);
  line-height: 1.6;
}

/* Managers note: literally small print vs neighbouring cards. */
#marketing-managers-note h2 {
  font-size: 0.85rem;
  color: var(--mute);
}

#marketing-managers-note p {
  font-size: 0.85rem;
  color: var(--mute);
  line-height: 1.45;
}



.footnote {
  text-align: center;
  color: var(--mute);
  font-size: 0.9rem;
  margin: 1.5rem 0 1rem;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin-top: 2.5rem;
  font-size: 0.7rem;
  color: var(--mute);
}

.footer a {
  color: var(--mute);
  text-decoration: none;
  font-weight: 400;
  padding: 0.2rem 0.45rem;
}

.footer a:hover { color: var(--ink); }
.footer .dot { padding: 0.2rem 0; }
.footer-note { flex-basis: 100%; margin: 0; text-align: center; opacity: 0.8; }
.footer .footer-note a { padding: 0; text-decoration: underline; }

/* Legal pages */
.legal h3 { font-size: 0.98rem; font-weight: 600; margin: 1rem 0 0.35rem; }
.legal h1 {
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  font-weight: 600;
  margin: 0.5rem 0 1.25rem;
}

.legal h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.35rem 0 0.45rem;
}

.legal p {
  margin: 0 0 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}

.legal-nav {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.legal-nav a {
  color: var(--mute);
  text-decoration: none;
  font-size: 0.95rem;
}

.legal-nav a:hover { color: var(--ink); }

/* Phones: thumb-sized tap targets. */
@media (max-width: 520px) {
  .topnav { gap: 0.25rem; }
  .topnav .brand { min-width: 0; }
  .topnav a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer { font-size: 0.8rem; gap: 0 0.25rem; }
  .footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer .dot { display: inline-flex; align-items: center; }
  .footer .footer-note a { min-height: 0; display: inline; }
  .legal-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .try-day-btn { min-height: 44px; }
}
@media (max-width: 360px) {
  .topnav .brand { font-size: 0.95rem; gap: 0.4rem; }
}

/* ---------------------------------------------------------------------------
   Home page layout (body.home only; legal pages keep the rules above).
   Layout, sizes and colours after the 2026 homepage concept. The demo's own
   rules and shared card colours (--chip, --card-*, --mute) are untouched;
   the page uses its own --home-* greys so the toy still matches the app.
   ------------------------------------------------------------------------ */
body.home {
  --home-paper: #FFFDF8;
  --home-secondary: #64594D;
  --home-rust: #8E4B34;
  --home-rust-dark: #733A28;
  --home-honey: #C4A06A;
  --home-rule: #DBD0C0;
  --home-band: #E9E1D4;
  --home-pad: 52px;
  font-size: 16px;
  line-height: 1.6;
}
body.home .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--home-pad); }
body.home main { display: block; }

/* One size per job. A step of 2px or less is the same size. */
body.home .home-hero .sub-plain,
body.home .home-demo-hint,
body.home #marketing-pricing-card p,
body.home .home-close .footnote {
  font-size: 17px;
  line-height: 1.65;
  color: var(--home-secondary);
}
body.home .home-fine,
body.home #marketing-managers-note p,
body.home .home-footer {
  font-size: 13px;
  line-height: 1.65;
  color: var(--home-secondary);
}

/* Nav: brand left, Sign in as a quiet outlined button. */
body.home .home-nav { min-height: 90px; margin: 0 auto; gap: 24px; }
body.home .home-nav .brand { font-size: 19px; font-weight: 700; line-height: 1.15; gap: 11px; }
body.home .home-nav img.mark { width: 38px; height: 38px; }
body.home .home-nav a.nav { font-size: 13px; color: var(--ink); border: 1px solid #BBAB98; border-radius: 6px; padding: 8px 15px; }
body.home .home-nav a.nav:hover { background: var(--mist); }

/* Hero: words left, the bear and its smile right. */
body.home .home-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 18px; padding-top: 30px; padding-bottom: 66px; text-align: left; }
body.home .home-hero .sub { margin: 0; max-width: none; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -1.2px; font-weight: 700; color: var(--ink); text-wrap: balance; }
body.home .home-hero .sub-accent { color: var(--home-rust); }
body.home .home-hero .sub-plain { margin: 23px 0 0; max-width: 430px; text-wrap: pretty; }
body.home .home-hero .sub-plain::before { display: none; }
body.home .home-hero .sub-plain strong { display: inline-block; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) { body.home .home-hero .sub-plain strong { animation: free-pulse 2.6s ease-in-out infinite; } }
@keyframes free-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
body.home .home-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 29px; }
body.home .cta { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 14px 21px; border: 0; border-radius: 6px; background: var(--home-rust); color: var(--home-paper); font-size: 14px; font-weight: 700; box-shadow: none; }
body.home .cta:hover { background: var(--home-rust-dark); color: var(--home-paper); filter: none; }
body.home .cta.cta-quiet { background: transparent; color: var(--home-rust); box-shadow: inset 0 0 0 1.5px var(--home-rust); }
body.home .cta.cta-quiet:hover { background: color-mix(in srgb, var(--home-rust) 8%, transparent); color: var(--home-rust-dark); }
body.home #demo { scroll-margin-top: 16px; }
body.home .home-fine { margin: 13px 0 0; }
@media (prefers-reduced-motion: no-preference) { html:has(body.home) { scroll-behavior: smooth; } }
/* The pun line as the eyebrow over the headline (reference .bt-eyebrow).
   The curved SVG copy stays in the markup, hidden, until the bear is decided. */
body.home .home-eyebrow { margin: 0 0 19px; line-height: 1.4; }
body.home .home-eyebrow .hero-title-svg { display: none; }
body.home .home-eyebrow-text { display: block; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--home-rust); }
/* Bear alone on the right, sized as the reference's bear stage (capped at the icon's 192px).
   The speech bubble stacks every line, hidden, in one grid cell, so the bubble
   is sized for the longest in any font; the reveal is opacity/transform only. */
body.home .home-hero .hero-crest { display: flex; flex-direction: column; align-items: center; gap: 18px; width: auto; max-width: none; margin: 0; align-self: center; text-align: center; }
body.home .home-hero .hero-crest .hero-mark { position: static; transform: none; display: block; width: clamp(150px, 18vw, 192px); height: auto; margin: 0 auto; border-radius: 20%; }
body.home .bear-bubble { position: relative; box-sizing: border-box; display: grid; place-items: center; width: min(100%, 290px); margin: 0; padding: 15px 20px; background: var(--home-paper); border: 1px solid var(--home-honey); border-radius: 14px; box-shadow: 0 2px 10px color-mix(in srgb, var(--shadow) 8%, transparent); color: var(--ink); font-size: 16px; line-height: 1.45; font-weight: 600; text-align: center; text-wrap: balance; opacity: 0; transform: scale(0.96); transform-origin: 50% 100%; animation: bear-bubble-in 2.8s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards; }
body.home .bear-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--home-paper); border-right: 1px solid var(--home-honey); border-bottom: 1px solid var(--home-honey); transform: translateX(-50%) rotate(45deg); }
body.home .bear-bubble > span { grid-area: 1 / 1; }
body.home .bear-bubble-sizer { visibility: hidden; }
/* Cycling (script, not under reduced motion): only the words fade, the
   bubble stays put. Out 1.2s ease-in, in 1.5s ease-out. */
body.home .bear-bubble-line { transition: opacity 1.5s ease-out; }
body.home .bear-bubble.is-out .bear-bubble-line { opacity: 0; transition: opacity 1.2s ease-in; }
body.home .bear-bubble:focus-visible { outline: 2px solid var(--home-rust); outline-offset: 3px; }
@keyframes bear-bubble-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.home .bear-bubble { animation: none; opacity: 1; transform: none; }
}

/* Demo band: full-width tint, copy left, the toy right. */
body.home .home-band { background: var(--home-band); }
body.home .home-demo { display: grid; grid-template-columns: 0.83fr 1.17fr; gap: 42px; align-items: start; padding-top: 48px; padding-bottom: 48px; }
body.home .home-demo .try-day { margin: 0; justify-self: center; width: 100%; }
body.home .card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
body.home .home-demo-copy .card p,
body.home #marketing-managers-note h2,
body.home #marketing-pricing-card h2 { font-size: 28px; line-height: 1.25; letter-spacing: -0.6px; color: var(--ink); }
body.home .home-demo-copy .card p { text-wrap: balance; }
body.home #marketing-managers-note h2,
body.home #marketing-pricing-card h2 { font-weight: 400; }
body.home .home-demo-hint,
body.home #marketing-pricing-card p { padding: 4px 0 4px 18px; border-left: 4px solid var(--home-honey); }
body.home .home-demo-toy { justify-self: center; width: 100%; max-width: 36rem; }
body.home .home-demo-hint { margin: 0 0 16px; }

/* Two plain rows: the managers' note, then the free line. Same measure as the demo. */
body.home .stack { margin-top: 0; padding-top: 51px; padding-bottom: 51px; gap: 0; }
body.home #marketing-managers-note,
body.home #marketing-pricing-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; }
body.home #marketing-managers-note { margin-bottom: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
body.home #marketing-managers-note h2,
body.home #marketing-pricing-card h2 { margin: 0; }
body.home #marketing-pricing-card p { margin: 0; }
body.home #marketing-pricing-card { align-items: center; padding: 48px 0; }

/* Managers: eyebrow, heading with a side note, three numbered steps. */
body.home .home-managers { padding-top: 51px; }
body.home .home-managers .home-eyebrow-text { margin: 0 0 14px; }
body.home .home-managers-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: end; }
body.home .home-managers-head h2 { margin: 0; font-size: 28px; line-height: 1.25; letter-spacing: -0.6px; font-weight: 400; color: var(--ink); }
body.home .home-managers-head p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--home-secondary); }
body.home .home-steps { --step-gap: 44px; --step-dot: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--step-gap); margin: 36px 0 0; padding: 0 0 51px; list-style: none; border-bottom: 1px solid var(--home-rule); }
body.home .home-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; }
body.home .home-steps li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--step-dot) / 2 - 0.5px); left: calc(var(--step-dot) + 10px); right: calc(10px - var(--step-gap)); height: 1px; background: var(--home-rule); }
body.home .home-step-num { display: flex; align-items: center; justify-content: center; width: var(--step-dot); height: var(--step-dot); margin-bottom: 10px; border-radius: 50%; background: var(--home-honey); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
body.home .home-step-title { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink); }
body.home .home-step-line { font-size: 15px; line-height: 1.55; color: var(--home-secondary); }

/* Close: the line on the left, the button and its note on the right. */
body.home .home-close { display: flex; align-items: center; justify-content: space-between; gap: 24px 42px; flex-wrap: wrap; padding-top: 38px; padding-bottom: 42px; }
body.home .home-close .footnote { margin: 0; text-wrap: balance; }
body.home .home-close-cta { display: flex; flex-direction: column; align-items: flex-start; }
body.home .home-close-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* A step quieter than the rust CTAs: secondary ink, a hairline rule. */
body.home button.cta { font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
body.home .cta.cta-share { gap: 7px; background: transparent; color: var(--home-secondary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--home-rule); }
body.home .cta.cta-share:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); filter: none; }
body.home .cta-share-mark { font-size: 1em; line-height: 1; }
body.home .home-toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; max-width: min(480px, calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--canvas); font-size: 15px; line-height: 1.4; box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow) 22%, transparent); }

/* Footer: notes left, links right. The rule stops at the text edge. */
body.home .home-footer { justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 0; padding-top: 21px; padding-bottom: 25px; background: linear-gradient(var(--home-rule), var(--home-rule)) no-repeat center top; background-size: calc(100% - 2 * var(--home-pad)) 1px; }
body.home .home-footer a { color: var(--home-secondary); }
body.home .home-footer a:hover { color: var(--ink); }
body.home .home-footer-notes { display: flex; flex-direction: column; gap: 2px; }
body.home .home-footer .footer-note { text-align: left; opacity: 1; }
body.home .home-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
body.home .home-footer-links a { padding: 0.2rem 0.45rem; }

@media (max-width: 760px) {
  body.home { --home-pad: 30px; }
  body.home .home-hero { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding-top: 26px; padding-bottom: 45px; gap: 5px; }
  body.home .home-hero .hero-crest .hero-mark { width: 150px; }
  body.home .bear-bubble { padding: 12px 14px; }
  body.home .home-demo { grid-template-columns: 1fr; gap: 25px; }
  body.home #marketing-managers-note, body.home #marketing-pricing-card { gap: 25px; }
  body.home .home-managers-head { gap: 25px; }
  body.home .home-steps { --step-gap: 25px; }
}
@media (max-width: 560px) {
  body.home { --home-pad: 23px; }
  body.home .home-nav { min-height: 74px; gap: 12px; }
  body.home .home-nav .brand { gap: 8px; }
  body.home .home-nav img.mark { width: 31px; height: 31px; }
  body.home .home-nav a.nav { min-height: 44px; padding: 8px 13px; }
  body.home .home-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 27px; padding-bottom: 34px; gap: 25px; }
  /* Phones: bear left, bubble right, tail pointing back at the bear. */
  body.home .home-hero .hero-crest { order: -1; flex-direction: row; justify-content: center; gap: 16px; }
  body.home .home-hero .hero-crest .hero-mark { order: -1; width: 80px; margin: 0; flex: none; }
  body.home .bear-bubble { flex: 1 1 auto; width: auto; max-width: 240px; min-height: 80px; padding: 10px 14px; transform-origin: 0 50%; }
  body.home .bear-bubble::after { left: -8px; top: 50%; bottom: auto; border-right: 0; border-left: 1px solid var(--home-honey); transform: translateY(-50%) rotate(45deg); }
  body.home .home-eyebrow { margin-bottom: 14px; }
  body.home .home-eyebrow-text { letter-spacing: 1.4px; }
  body.home .home-hero .sub-plain { margin-top: 18px; }
  body.home .home-actions { margin-top: 23px; }
  body.home .cta { padding: 13px 17px; }
  body.home .home-demo { padding-top: 35px; padding-bottom: 35px; }
  body.home .home-demo-copy .card p,
  body.home #marketing-managers-note h2,
  body.home #marketing-pricing-card h2 { font-size: 24px; }
  body.home .stack { padding-top: 35px; padding-bottom: 35px; }
  body.home #marketing-managers-note, body.home #marketing-pricing-card { grid-template-columns: 1fr; gap: 14px; }
  body.home #marketing-managers-note { margin-bottom: 0; }
  body.home #marketing-pricing-card { padding: 35px 0; }
  body.home .home-managers { padding-top: 35px; }
  body.home .home-managers-head { grid-template-columns: 1fr; gap: 14px; }
  body.home .home-managers-head h2 { font-size: 24px; }
  body.home .home-steps { --step-gap: 22px; grid-template-columns: 1fr; margin-top: 25px; padding-bottom: 35px; }
  body.home .home-steps li { display: grid; grid-template-columns: var(--step-dot) minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
  body.home .home-step-num { grid-row: 1 / span 2; margin-bottom: 0; }
  body.home .home-step-title { padding-top: 4px; }
  body.home .home-steps li:not(:last-child)::after { top: calc(var(--step-dot) + 6px); bottom: calc(6px - var(--step-gap)); left: calc(var(--step-dot) / 2 - 0.5px); right: auto; width: 1px; height: auto; }
  body.home .home-close { flex-direction: column; align-items: flex-start; padding-top: 32px; padding-bottom: 34px; }
  body.home .home-footer { flex-direction: column; align-items: flex-start; }
  body.home .home-footer-links { margin-left: -0.45rem; }
}