/* ============================================================================
   VAKOZA — DESIGN SYSTEM
   Single source of truth for the marketing site (landing, /audit, /for-agencies).
   Every colour, type ramp and spacing step is derived from the tokens in :root.
   No raw hex values below the token block.
   ========================================================================== */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────────
     amber is reserved EXCLUSIVELY for primary CTAs. Not icons, not links,
     not underlines. On a green-dominant page a green button disappears; one
     warm accent used nowhere else makes every CTA survive the squint test. */
  --ink:        #0B2E24;   /* deep green-black — body text, dark bands */
  --green:      #157A5A;   /* brand primary */
  --green-deep: #0F5C43;   /* hover, dark surfaces */
  --mint:       #E6F2ED;   /* soft tint for alternating bands */
  --paper:      #F7F9F8;   /* page background — cool off-white */
  --slate:      #5A6B65;   /* muted / secondary text */
  --amber:      #E08A2E;   /* CTA ONLY */
  --amber-deep: #C4741F;   /* CTA hover */

  --white:      #FFFFFF;
  --line:       #DCE7E2;   /* hairline rules, card borders */
  --line-soft:  #EAF1EE;
  /* The one alarming colour. Reserved for a figure that is a problem — an
     overdue count, an empty chair. Never for decoration, never twice in a row. */
  --flag:       #B4462F;

  /* On-dark variants, derived so dark bands stay in the same family */
  --on-dark:        rgba(255,255,255,.92);
  --on-dark-muted:  rgba(255,255,255,.58);
  --on-dark-faint:  rgba(255,255,255,.38);
  --on-dark-line:   rgba(255,255,255,.12);
  --on-dark-panel:  rgba(255,255,255,.04);
  --green-bright:   #4FCFA0;  /* readable green on --ink */

  /* ── Type ──────────────────────────────────────────────────────────────
     Fraunces = display only. Inter = everything else. Mukta = Devanagari.
     Deliberately NOT Playfair/Poppins/Montserrat — that trio reads templated. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-deva:    'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif;

  /* Body floor is 16px. Nothing on the site goes below 14px, fine print
     included — this is read on a mid-range Android between patients. */
  --fs-base:  16px;
  --fs-sm:    14px;
  --fs-lg:    18px;
  --lh-body:  1.6;

  /* ── Space / shape ──────────────────────────────────────────────────── */
  --wrap:    1120px;
  --wrap-nr:  760px;   /* narrow column: FAQ, founder, legal */
  --pad-x:     22px;
  --r-sm:       8px;
  --r-md:      14px;
  --r-lg:      20px;
  --r-pill:    99px;
  --shadow-sm: 0 1px 3px rgba(11,46,36,.06);
  --shadow-md: 0 4px 16px rgba(11,46,36,.08);
  --shadow-lg: 0 20px 44px -18px rgba(11,46,36,.22);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
input, select, button, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-deep); }

/* Every rupee figure and calculator readout aligns on the decimal. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Devanagari needs its own stack or Android falls back to something ugly. */
[lang="hi"], .deva { font-family: var(--font-deva); }

/* ── Accessibility ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 3px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: 8px; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap   { max-width: var(--wrap);    margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-nr{ max-width: var(--wrap-nr); margin: 0 auto; padding: 0 var(--pad-x); }
.section      { padding: 84px 0; }
.section--sm  { padding: 64px 0; }
.section--mint{ background: var(--mint); }
.section--white{ background: var(--white); }
.section--dark{ background: var(--ink); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: var(--on-dark-muted); }

.eyebrow {
  display: inline-block; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--green-bright); }

.h1   { font-size: clamp(2.05rem, 4.4vw, 3.35rem); }
.h2   { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.h3   { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.lede { font-size: var(--fs-lg); line-height: 1.66; color: var(--slate); }
.section--dark .lede { color: var(--on-dark-muted); }
.muted{ color: var(--slate); }
.small{ font-size: var(--fs-sm); }

.grid      { display: grid; gap: 18px; }
.grid-3    { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stack-16  { display: flex; flex-direction: column; gap: 16px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 8px; }
.card p  { color: var(--slate); }
.card--dark {
  background: var(--on-dark-panel); border-color: var(--on-dark-line);
  box-shadow: none;
}
.card--dark p { color: var(--on-dark-muted); }

/* ── Buttons — amber is CTA-only ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base);
  padding: 15px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; text-align: center; transition: background .16s, border-color .16s, transform .16s;
}
.btn--cta {
  background: var(--amber); color: var(--ink);
  box-shadow: 0 6px 18px rgba(224,138,46,.28);
}
.btn--cta:hover { background: var(--amber-deep); color: var(--ink); transform: translateY(-1px); }
.btn--cta:disabled { opacity: .6; cursor: default; transform: none; }
.btn--ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn--ghost:hover { background: var(--mint); color: var(--green-deep); }
.btn--ghost-dark { background: transparent; color: var(--white); border-color: var(--on-dark-line); }
.btn--ghost-dark:hover { background: var(--on-dark-panel); border-color: var(--green-bright); color: var(--white); }
.btn--sm { padding: 11px 20px; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,249,248,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 30px; height: 66px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.02em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
/* The mark must never be squeezed when the nav runs out of room. */
.brand svg { flex: none; }
.nav__links { display: flex; gap: 26px; font-size: 15px; }
.nav__links a { color: var(--slate); white-space: nowrap; }
.nav__links a:hover { color: var(--green); }
.nav__spacer { flex: 1; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--mint); border: 1px solid var(--line);
}
.icon-btn:hover { border-color: var(--green); }

/* ── Trust row (hero) ────────────────────────────────────────────────────── */
.trustrow {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: var(--fs-sm); color: var(--slate);
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
}

/* ── Chat mock ───────────────────────────────────────────────────────────── */
.phone {
  position: relative; width: 100%; max-width: 330px;
  background: linear-gradient(160deg, #2A2A3E, #15151F 60%, #1E1E2E);
  border-radius: 44px; padding: 10px; box-shadow: var(--shadow-lg);
}
.phone__screen { background: #EFE7DD; border-radius: 35px; overflow: hidden; }
.phone__bar { background: #075E54; padding: 10px 12px 12px; display: flex; align-items: center; gap: 9px; }
.phone__body {
  padding: 12px 11px 16px;
  background:
    radial-gradient(rgba(7,94,84,.05) 1px, transparent 1.5px) 0 0/18px 18px,
    radial-gradient(rgba(7,94,84,.035) 1px, transparent 1.5px) 9px 9px/18px 18px,
    #EFE7DD;
  min-height: 430px;
}
.chat-pane { display: none; flex-direction: column; gap: 8px; }
.chat-pane.on { display: flex; }
.chat-pane.on .bub { animation: vkBubble .4s both; }
@keyframes vkBubble { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
.bub { font-size: 13.5px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.bub--them { max-width: 88%; align-self: flex-end; background: #D9FDD3; border-radius: 10px 0 10px 10px; padding: 8px 10px 5px; }
.bub--us   { max-width: 90%; align-self: flex-start; background: var(--white); border-radius: 0 10px 10px 10px; padding: 8px 10px 5px; }
.bub__t { font-size: 11px; color: #8696a0; text-align: right; margin-top: 2px; }
.bub--day { align-self: center; background: var(--white); color: #6b7c85; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-sm); }

/* Illustrative-example label — required on every mockup, never hidden. */
.illus {
  display: inline-block; margin-top: 12px;
  font-size: var(--fs-sm); color: var(--slate);
  background: var(--white); border: 1px dashed var(--line);
  padding: 4px 10px; border-radius: var(--r-sm);
}

/* ── The Missed Revenue Audit — the signature element ────────────────────
   Styled as a clinical readout: hairline rules, tabular figures, findings
   stacked like a diagnostic report. Everything else stays quiet so this lands. */
.audit {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.audit__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-bottom: 2px solid var(--ink);
}
.audit__head h3 { font-size: 17px; }
.audit__grid { display: grid; grid-template-columns: 1fr 1fr; }
.audit__inputs { padding: 24px; border-right: 1px solid var(--line); }
.audit__out    { padding: 24px; background: var(--mint); }

.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.field label { font-size: 15px; color: var(--ink); font-weight: 500; }
.field__num {
  width: 108px; padding: 7px 10px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.field__num:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(21,122,90,.16); }
.field__hint { font-size: var(--fs-sm); color: var(--slate); margin-top: 6px; }

input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: var(--r-pill); outline: none; margin: 0;
  background: linear-gradient(90deg, var(--green) var(--f, 40%), var(--line) var(--f, 40%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); border: 3px solid var(--white);
  box-shadow: 0 1px 5px rgba(11,46,36,.35); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); border: 3px solid var(--white);
  box-shadow: 0 1px 5px rgba(11,46,36,.35); cursor: pointer;
}

.finding { padding: 14px 0; border-bottom: 1px solid var(--line); }
.finding__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.finding__label { font-size: 15px; font-weight: 600; }
.finding__val { font-family: var(--font-display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The arithmetic is printed next to every figure it produces. A dentist will
   not trust a black box telling him he loses ₹80,000 a month. */
.finding__why { font-size: var(--fs-sm); color: var(--slate); margin-top: 4px; max-width: 46ch; }

.audit__total { padding: 18px 0 6px; border-top: 2px solid var(--ink); margin-top: 6px; }
.audit__total .finding__label { font-size: 16px; }
.audit__total .finding__val { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--green-deep); letter-spacing: -.02em; }
.audit__cost {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 15px;
}
.audit__cost b { font-family: var(--font-display); font-size: 19px; font-variant-numeric: tabular-nums; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.step__n {
  width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}

/* ── Trust / never-do lists ──────────────────────────────────────────────── */
.tick { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.tick__m { color: var(--green); font-weight: 700; flex: none; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; }
.plan--rec { border: 2px solid var(--green); position: relative; box-shadow: var(--shadow-md); }
.plan__tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: var(--white); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .04em; padding: 4px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.plan__price { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -.02em; margin: 12px 0 2px; font-variant-numeric: tabular-nums; }
.plan__price span { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--slate); }
.plan__feats { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 24px; font-size: 15px; }

/* ── FAQ (native details/summary) ────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }
.faq summary::after {
  content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mint); border: 1px solid var(--line); color: var(--green);
  font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 42px 20px 0; color: var(--slate); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; }
.input {
  width: 100%; padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid var(--on-dark-line); background: rgba(255,255,255,.07);
  color: var(--white); outline: none; transition: border-color .16s;
}
.input::placeholder { color: var(--on-dark-faint); }
.input:focus { border-color: var(--green-bright); }
.form__note { font-size: var(--fs-sm); color: var(--on-dark-faint); }
.form__err {
  display: none; font-size: var(--fs-sm); color: #FFC7C7;
  background: rgba(220,80,80,.14); border: 1px solid rgba(220,80,80,.3);
  border-radius: var(--r-sm); padding: 10px 12px; text-align: left;
}

/* ── Founder ─────────────────────────────────────────────────────────────── */
.founder { display: flex; gap: 24px; align-items: flex-start; }
.founder__img {
  width: 92px; height: 92px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--mint); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 30px; color: var(--green); font-weight: 600;
}

/* ── Sticky mobile bar ───────────────────────────────────────────────────── */
.mobar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(11,46,36,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--on-dark-line);
  padding: 10px 14px; gap: 10px; align-items: center;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--on-dark-muted); padding: 40px 0 32px; }
.foot a { color: var(--on-dark-muted); }
.foot a:hover { color: var(--white); }
.foot__links { display: flex; flex-wrap: wrap; gap: 14px 24px; font-size: 15px; }
.foot__legal { width: 100%; text-align: center; font-size: var(--fs-sm); color: var(--on-dark-faint); margin-top: 8px; }

/* ── Stat stack — the overdue list, stated as three numbers ──────────────
   Three figures in a column beat any chart here: the argument is that the
   third number is zero, and a zero only lands when it is set in the same
   type as the two above it. */
.stats {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 6px 28px; box-shadow: var(--shadow-md);
}
.stat { padding: 22px 0; border-bottom: 1px solid var(--line); }
.stat:last-child { border-bottom: 0; }
.stat__l { font-size: var(--fs-sm); color: var(--slate); }
.stat__n {
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(2.4rem, 6vw, 3.4rem); letter-spacing: -.025em;
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.stat--good .stat__n { color: var(--green); }
.stat--flag .stat__n { color: var(--flag); }

/* ── Ink card — one dark card inside a light band ────────────────────────
   Used for the last item in a sequence, where the sequence ends badly. */
.card--ink { background: var(--ink); border-color: var(--ink); }
.card--ink h3 { color: var(--white); }
.card--ink p  { color: var(--on-dark-muted); }

/* Clock face on the "one person, four jobs" cards. */
.clock__t {
  font-family: var(--font-display); font-weight: 600; font-size: 30px;
  letter-spacing: -.02em; color: var(--green); margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.card--ink .clock__t { color: var(--green-bright); }

/* ── Recall queue table ──────────────────────────────────────────────────
   Scrolls inside its own box rather than shrinking to unreadable columns —
   a queue with five columns cannot fit 360px and should not pretend to. */
.tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.rq { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 15px; }
.rq th {
  text-align: left; padding: 14px 18px; background: var(--mint);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); white-space: nowrap;
}
.rq td { padding: 15px 18px; border-top: 1px solid var(--line-soft); color: var(--slate); }
.rq td:first-child { color: var(--ink); font-weight: 600; }
.rq .od { color: var(--flag); font-weight: 600; }
.rq .val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* ── Day sheet mock ──────────────────────────────────────────────────────── */
.day {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-md);
}
.day__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.day__h b { font-family: var(--font-display); font-size: 19px; }
.day__row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
  padding: 13px 15px; border-radius: var(--r-md); background: var(--mint); font-size: 15px;
}
.day__row:last-child { margin-bottom: 0; }
.day__t   { flex: none; width: 62px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day__who { flex: 1; min-width: 0; }
.day__s   { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--green); }
/* The empty chair is the only thing on this mock the doctor is meant to see. */
.day__row--gap { background: transparent; border: 1px dashed var(--flag); color: var(--flag); }
.day__row--gap .day__s { color: var(--flag); }

/* ── Responsive — must hold to 360px ─────────────────────────────────────── */
@media (max-width: 1040px) {
  .nav__links { display: none; }
}
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .audit__grid { grid-template-columns: 1fr; }
  .audit__inputs { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .section, .section--sm { padding: 52px 0; }
  .mobar { display: flex; }
  .foot { padding-bottom: 96px; }
  .nav__login { display: none; }
  /* The sticky bar already carries "Get free setup" — a second copy in the nav
     is redundant and wraps to two lines at 360px. */
  .nav__cta { display: none; }
  .founder { flex-direction: column; gap: 16px; }
  .audit__head { flex-direction: column; gap: 4px; }
}
@media (max-width: 380px) {
  :root { --pad-x: 16px; }
  .btn { padding: 14px 18px; }
  .field__num { width: 92px; }
  .stats { padding: 4px 20px; }
  .day { padding: 14px; }
  .day__row { gap: 10px; padding: 11px 12px; font-size: var(--fs-sm); }
  .day__t { width: 54px; }
}