/* gocara.ai · CARA, Care & Revenue Agent
   ink & paper DNA: dark ink ground, paper type, teal for Cara, amber for money */

:root {
  --ink: #0e1416;
  --ink-2: #16211f;
  --ink-3: #1c2a28;
  --paper: #f4f1ea;
  --paper-dim: rgba(244, 241, 234, .68);
  --paper-faint: rgba(244, 241, 234, .45);
  --teal: #22a7b5;
  --teal-deep: #157885;
  --amber: #e8b64c;
  --line: rgba(244, 241, 234, .14);
  --ink-line: rgba(14, 20, 22, .16);
  --display: 'Bricolage Grotesque', 'Avenir Next', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --body: 'Archivo', 'Helvetica Neue', sans-serif;
  --pad: clamp(96px, 13vw, 176px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }

::selection { background: var(--teal); color: #08282c; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 99;
  background: var(--teal); color: #08282c; padding: 10px 18px; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.skip:focus-visible { left: 8px; }

/* ---------- type ---------- */

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.lead {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--paper-dim);
  max-width: 40em;
  margin-top: 18px;
}
.kicker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
}
.am { color: var(--amber); }

/* ---------- grain ---------- */

.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .055;
  pointer-events: none;
  z-index: 3;
}

/* ---------- top bar ---------- */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transform: translateY(-100%);
  background: rgba(14, 20, 22, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.bar.on { transform: translateY(0); }
.bar-in {
  max-width: 1160px; margin: 0 auto; padding: 13px clamp(20px, 4vw, 32px);
  display: flex; justify-content: space-between; align-items: center;
}
.bar-mark { display: flex; align-items: center; }
.bar-mark svg { height: 33px; width: auto; display: block; }
.bar-cta {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--teal); text-decoration: none;
  border: 1px solid rgba(34, 167, 181, .45); border-radius: 8px; padding: 8px 16px;
  transition: background .2s, color .2s;
}
.bar-cta:hover { background: var(--teal); color: #08282c; }

/* ---------- hero ---------- */

.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  position: relative;
  overflow: clip;
}
.hero-portrait {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(46vw, 720px);
  z-index: 1;
}
.hero-portrait picture, .hero-portrait img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 18%;
}
.hero-portrait picture {
  -webkit-mask-image: linear-gradient(to left, black 58%, transparent 99%), linear-gradient(to top, transparent 1%, black 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, black 58%, transparent 99%), linear-gradient(to top, transparent 1%, black 30%);
  mask-composite: intersect;
}
.hero-portrait img { filter: saturate(.92) contrast(1.04) brightness(.96); }
.hero-in { position: relative; z-index: 2; width: 100%; padding-top: 8vh; padding-bottom: 10vh; }
.hero-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 1.0;
  letter-spacing: -.02em;
  margin-top: 22px;
  max-width: 10.5em;
}
.hero-h .line { display: block; }
.hero-h .dim { color: var(--paper-dim); }
.hero-sub {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--paper-dim);
  max-width: 30em;
  margin-top: 26px;
}
.hero-cta { margin-top: 40px; }
.cta-note {
  font-family: var(--mono); font-size: 12.5px; color: var(--paper-faint);
  margin-top: 16px; letter-spacing: .02em;
}
.btn {
  display: inline-block;
  background: var(--teal); color: #08282c;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  padding: 16px 32px; border: 0; border-radius: 10px;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover { background: #2cbccb; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ---------- receipt ---------- */

.money { padding-block: var(--pad); background: var(--ink); }
.money-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-areas: 'copy receipt' 'closers receipt';
  gap: 0 clamp(40px, 6vw, 96px);
  align-items: center;
}
.money-copy { grid-area: copy; align-self: end; }
.money-closers { grid-area: closers; align-self: start; }
.receipt-slot { grid-area: receipt; }
.money-after {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px);
  margin-top: clamp(36px, 5vw, 64px);
  color: var(--paper-dim);
}
.money-diy {
  display: block;
  font-family: var(--body); font-weight: 400;
  font-size: 16px; line-height: 1.6;
  color: var(--paper-faint);
  margin-top: 10px; max-width: 34em;
}
.money-close {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1; letter-spacing: -.015em;
  margin-top: 10px;
}

.receipt-slot { position: relative; z-index: 2; }
.receipt {
  background: var(--paper); color: var(--ink);
  font-family: var(--mono);
  padding: 34px 30px 30px;
  transform: rotate(-1.4deg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  clip-path: polygon(0 6px, 3% 0, 6% 6px, 9% 0, 12% 6px, 15% 0, 18% 6px, 21% 0, 24% 6px, 27% 0, 30% 6px, 33% 0, 36% 6px, 39% 0, 42% 6px, 45% 0, 48% 6px, 51% 0, 54% 6px, 57% 0, 60% 6px, 63% 0, 66% 6px, 69% 0, 72% 6px, 75% 0, 78% 6px, 81% 0, 84% 6px, 87% 0, 90% 6px, 93% 0, 96% 6px, 100% 0, 100% calc(100% - 6px), 97% 100%, 94% calc(100% - 6px), 91% 100%, 88% calc(100% - 6px), 85% 100%, 82% calc(100% - 6px), 79% 100%, 76% calc(100% - 6px), 73% 100%, 70% calc(100% - 6px), 67% 100%, 64% calc(100% - 6px), 61% 100%, 58% calc(100% - 6px), 55% 100%, 52% calc(100% - 6px), 49% 100%, 46% calc(100% - 6px), 43% 100%, 40% calc(100% - 6px), 37% 100%, 34% calc(100% - 6px), 31% 100%, 28% calc(100% - 6px), 25% 100%, 22% calc(100% - 6px), 19% 100%, 16% calc(100% - 6px), 13% 100%, 10% calc(100% - 6px), 7% 100%, 4% calc(100% - 6px), 1% 100%, 0 calc(100% - 6px));
}
.r-head {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 14px; border-bottom: 1px dashed rgba(14, 20, 22, .35);
}
.r-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 1px dashed rgba(14, 20, 22, .18);
  position: relative;
}
.r-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.r-row::after {
  content: '';
  position: absolute; left: -2px; right: -2px; top: 50%;
  height: 2px; background: var(--ink);
  transform: scaleX(var(--strike, 0));
  transform-origin: left center;
}
.r-total {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 0 4px;
  font-size: 14.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  border-top: 1px dashed rgba(14, 20, 22, .35);
  margin-top: 4px;
}
.r-total b { font-variant-numeric: tabular-nums; }
.r-year {
  font-size: clamp(24px, 3vw, 32px); font-weight: 600;
  padding: 6px 0 16px;
  letter-spacing: -.01em;
}
.r-year b { font-weight: 600; }
.r-cara {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.r-cara b { color: var(--teal-deep); font-weight: 600; }

/* ---------- what she is ---------- */

.is { padding-block: var(--pad); background: var(--ink-2); }
.is-lede { max-width: 36em; }
.pillars { list-style: none; margin-top: clamp(48px, 6vw, 80px); }
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 64px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.pillar h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -.015em; line-height: 1.15;
}
.pillar p { color: var(--paper-dim); max-width: 34em; }
.is-close {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px);
  margin-top: clamp(30px, 4vw, 48px);
  color: var(--paper);
}

/* ---------- the arc: hire to second brain ---------- */

.arc { padding-block: var(--pad); background: var(--ink-3); }
.arc-lede { max-width: 34em; }
.steps {
  list-style: none;
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  --arc: 0;
}
.steps::before, .steps::after {
  content: '';
  position: absolute; left: 5px; top: 14px;
  width: 2px; height: calc(100% - 28px);
}
.steps::before { background: var(--line); }
.steps::after {
  background: var(--teal);
  transform: scaleY(var(--arc, 0));
  transform-origin: top center;
}
.step {
  position: relative;
  padding: clamp(20px, 2.8vw, 30px) 0 clamp(20px, 2.8vw, 30px) clamp(34px, 5vw, 54px);
  max-width: 46em;
}
.step::before {
  content: '';
  position: absolute; left: 0; top: calc(clamp(20px, 2.8vw, 30px) + 3px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-3); border: 2px solid var(--teal-deep);
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
.step.lit::before { background: var(--teal); border-color: var(--teal); transform: scale(1.15); }
.step-k {
  display: block;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.step h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.9vw, 32px);
  letter-spacing: -.015em; line-height: 1.12;
}
.step p { color: var(--paper-dim); margin-top: 9px; font-size: 16px; max-width: 38em; }

/* ---------- the booked week ---------- */

.week {
  background: var(--paper); color: var(--ink);
  margin-top: clamp(36px, 5vw, 60px);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 24px);
  transform: rotate(-.5deg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.wk-head {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-deep);
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.wk-head span { color: rgba(14, 20, 22, .5); font-weight: 500; }
.wk-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.wk-day { padding: 14px 12px 16px; border-right: 1px dashed var(--ink-line); min-width: 0; }
.wk-day:last-child { border-right: 0; padding-right: 0; }
.wk-day:first-child { padding-left: 0; }
.wk-d {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(14, 20, 22, .5);
}
.slot {
  font-size: 13px; line-height: 1.35;
  border: 1px solid rgba(14, 20, 22, .16); border-radius: 7px;
  background: rgba(14, 20, 22, .028);
  padding: 8px 9px 9px; margin-top: 9px;
}
.slot .s-t {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; color: rgba(14, 20, 22, .55);
  margin-bottom: 2px;
}
.slot i {
  display: block; font-style: normal;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  margin-top: 5px;
}
.slot.np { border-color: rgba(21, 120, 133, .5); background: rgba(34, 167, 181, .12); }
.slot.np i { color: var(--teal-deep); }
.slot.np .s-t { color: rgba(21, 120, 133, .8); }
.slot.re { border-color: rgba(170, 122, 22, .45); background: rgba(232, 182, 76, .16); }
.slot.re i { color: #7d5c10; }
.slot.hot { border: 1.5px solid var(--teal-deep); }
.wk-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: rgba(14, 20, 22, .6);
  margin-top: 18px; padding-top: 13px;
  border-top: 1px dashed rgba(14, 20, 22, .35);
}
.lg { display: inline-flex; align-items: center; gap: 7px; }
.lg::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(14, 20, 22, .18);
}
.lg.np::before { background: var(--teal); }
.lg.re::before { background: var(--amber); }

/* ---------- one hire covers the stack ---------- */

.stack {
  position: relative;
  overflow: clip;
  min-height: min(78svh, 680px);
  display: flex; align-items: center;
}
.stack-bg { position: absolute; inset: 0; z-index: 0; }
.stack-bg picture, .stack-bg img {
  width: 110%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%;
  margin-left: 2.5%;
}
.stack-bg img { filter: saturate(.6) brightness(.62) contrast(1.05); }
.stack-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--ink), transparent 15%),
    linear-gradient(to top, var(--ink), transparent 15%),
    linear-gradient(to right, rgba(14, 20, 22, .96) 30%, rgba(14, 20, 22, .62) 55%, rgba(14, 20, 22, .12) 78%);
}
.stack-in { position: relative; z-index: 1; width: 100%; padding-block: clamp(88px, 12vw, 140px); }
.stack-list {
  font-family: var(--mono); font-size: clamp(12.5px, 1.5vw, 14.5px);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-dim);
  margin: 22px 0 38px;
}

/* ---------- day one ---------- */

.dayone { padding-block: var(--pad); }
.day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(48px, 6vw, 80px);
  align-items: start;
}
.job { padding: 22px 0; border-top: 1px solid var(--line); }
.job h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 24px);
  margin-bottom: 8px;
}
.job p { color: var(--paper-dim); font-size: 16px; max-width: 36em; }

.shift { position: sticky; top: 72px; }
.shift-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
}
.shift-head {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-faint);
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.msg { max-width: 88%; margin-top: 12px; }
.msg p {
  padding: 11px 15px; border-radius: 14px;
  font-size: 15px; line-height: 1.5;
}
.msg .t {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--paper-faint); margin-top: 5px; letter-spacing: .06em;
}
.msg.in p { background: rgba(244, 241, 234, .09); border-bottom-left-radius: 4px; }
.msg.out { margin-left: auto; text-align: right; }
.msg.out p { background: var(--teal-deep); color: #f2fbfc; border-bottom-right-radius: 4px; text-align: left; }
.typing { display: flex; gap: 5px; margin: 14px 0 0 auto; justify-content: flex-end; padding-right: 8px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(244, 241, 234, .5);
}
.shift-log {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--teal); text-transform: uppercase;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.brief { margin-top: 18px; padding: 0 6px; }
.brief-when {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-faint);
}
.brief-quote {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(17px, 2vw, 19px); line-height: 1.4;
  margin-top: 8px;
}
.hipaa {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--paper-faint);
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 52em;
}

/* ---------- she learns ---------- */

.learns { padding-block: var(--pad); background: var(--ink-2); }
.skills { list-style: none; margin-top: clamp(40px, 5vw, 64px); }
.skills li {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 5.6vw, 64px);
  line-height: 1.16; letter-spacing: -.02em;
  color: var(--paper);
  padding: 6px 0;
  transition: color .6s ease;
}
.skills li.wild { color: var(--amber); }
body.anim .skills li:not(.lit) { color: var(--paper-faint); }
body:not(.anim) .typing { display: none; }

/* ---------- proof: ink ground, paper report object ---------- */

.proof { padding-block: var(--pad); }
.proof-lede { max-width: 36em; }

.case-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
}
.case-arc { color: var(--paper-dim); font-size: 17px; }

.report {
  background: var(--paper); color: var(--ink);
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(20px, 2.6vw, 30px);
  transform: rotate(.8deg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.rep-head {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-deep);
  padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stat { padding: 20px 20px 22px 0; border-bottom: 1px solid var(--ink-line); }
.stat:nth-child(odd) { border-right: 1px solid var(--ink-line); }
.stat:nth-child(even) { padding-left: 20px; }
.stat:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 4px; }
.stat b {
  display: block;
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.s-l { display: block; font-size: 13.5px; color: rgba(14, 20, 22, .66); margin-top: 9px; line-height: 1.5; }

.pa { margin-top: clamp(56px, 7vw, 96px); }
.pa-lede { color: var(--paper-dim); font-size: 17px; max-width: 40em; }
.pa-row {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px);
  margin-top: 22px;
}
.pa-stat b {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pa-stat span { display: block; font-size: 13.5px; color: var(--paper-faint); margin-top: 2px; }

.team { margin-top: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 48px); }
.team-h {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.015em;
}
.team-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(28px, 3.6vw, 44px);
}
.p-name { font-family: var(--display); font-weight: 700; font-size: 21px; }
.p-line { color: var(--paper-dim); margin-top: 8px; font-size: 16px; }

/* ---------- waitlist ---------- */

.wait { padding-block: var(--pad); }
.wait-in { max-width: 720px; }
.form { margin-top: clamp(36px, 5vw, 56px); }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.f-field label {
  display: block;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 8px;
}
.f-field input {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--body); font-size: 16px;
  padding: 14px 16px;
  transition: border-color .2s;
}
.f-field input:focus { outline: none; border-color: var(--teal); }
.f-field input.bad { border-color: #d96b4f; }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-btn { width: 100%; margin-top: 26px; }
.f-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.f-note {
  font-family: var(--mono); font-size: 12.5px; color: var(--paper-faint);
  margin-top: 16px; line-height: 1.7;
}
.f-error { margin-top: 18px; color: #e8987f; font-size: 15px; }
.f-error a { color: var(--paper); }

.f-success { margin-top: clamp(36px, 5vw, 56px); }
.fs-h { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.015em; }
.fs-p { color: var(--paper-dim); margin-top: 12px; max-width: 34em; }
.fs-sig { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin-top: 18px; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--line); padding: 48px 0 56px; }
.foot-in { display: grid; gap: 10px; }
.foot-brand { font-size: 15px; }
.foot-brand a, .foot-contact a { color: var(--teal); text-decoration: none; }
.foot-brand a:hover, .foot-contact a:hover { text-decoration: underline; }
.foot-contact { font-size: 14px; color: var(--paper-dim); }
.foot-legal { font-size: 13px; color: var(--paper-faint); max-width: 52em; margin-top: 10px; }
.foot-tiny { font-family: var(--mono); font-size: 11.5px; color: var(--paper-faint); margin-top: 14px; letter-spacing: .06em; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .wk-grid { grid-template-columns: repeat(3, 1fr); }
  .wk-day { padding-inline: 12px; }
  .wk-day:first-child { padding-left: 0; }
  .wk-day:nth-child(3) { border-right: 0; }
  .wk-day:nth-child(n+4) { border-top: 1px dashed var(--ink-line); }
  .wk-day:nth-child(4) { padding-left: 0; }
  .money-grid { grid-template-columns: 1fr; grid-template-areas: 'copy' 'receipt' 'closers'; }
  .receipt-slot { max-width: 480px; margin-top: clamp(28px, 5vw, 48px); }
  .money-closers .money-after { margin-top: clamp(32px, 6vw, 48px); }
  .day-grid { grid-template-columns: 1fr; }
  .shift { position: static; max-width: 520px; }
  .case-grid { grid-template-columns: 1fr; }
  .report { max-width: 520px; }
}

@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; min-height: auto; }
  .hero-portrait {
    position: relative; width: 100%; height: min(92vw, 52svh); inset: auto;
  }
  .hero-portrait picture {
    -webkit-mask-image: linear-gradient(to top, transparent 4%, black 42%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to top, transparent 4%, black 42%);
    mask-composite: add;
  }
  .hero-portrait img { object-position: 50% 4%; }
  .hero-in { margin-top: -9vw; padding-top: 0; padding-bottom: 72px; }
  .hero-h { font-size: clamp(40px, 10.5vw, 64px); }
  .pillar { grid-template-columns: 1fr; gap: 10px; }
  .team-grid { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .week { transform: none; }
  .wk-grid { grid-template-columns: 1fr 1fr; }
  .wk-day { padding-inline: 0 12px; border-right: 1px dashed var(--ink-line) !important; }
  .wk-day:nth-child(even) { border-right: 0 !important; padding-inline: 12px 0; }
  .wk-day:nth-child(n+3) { border-top: 1px dashed var(--ink-line); }
  .stack { min-height: min(88svh, 640px); }
  .stack-bg picture, .stack-bg img { object-position: 60% 0%; }
  .stack-bg::after {
    background:
      linear-gradient(to bottom, var(--ink), transparent 16%),
      linear-gradient(to top, var(--ink), transparent 16%),
      rgba(14, 20, 22, .68);
  }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid var(--ink-line); }
  .stat:last-child { border-bottom: 0; }
  .receipt { transform: rotate(-.8deg); padding: 26px 20px 24px; }
  .report { transform: rotate(.5deg); }
  .r-row { font-size: 12px; }
  .btn { width: 100%; text-align: center; }
}

/* ---------- motion prefs ---------- */

@media (prefers-reduced-motion: reduce) {
  .bar { transition: none; }
  .btn { transition: none; }
  .typing { display: none; }
}