/* Kovata — marketing site styles
   Palette: ink navy #12172E · white · lilac-white #F7F5FA · dark surface #242038
   Confetti accents (small moments only): coral #FF6B5E · amber #FFC145 · teal #3DD6C4 · periwinkle #8B7CFF */

/* Self-hosted Figtree. Drop figtree-variable.woff2 (and the italic, if you want it) into
   assets/fonts/ — download from https://fonts.google.com/specimen/Figtree. Until the files
   are present the browser silently falls back to the system sans stack, so nothing breaks. */
@font-face {
  font-family: Figtree;
  src: url("fonts/figtree-variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #12172E;
  --white: #fff;
  --lilac: #F7F5FA;
  --dark-surface: #242038;
  --coral: #FF6B5E;
  --amber: #FFC145;
  --teal: #3DD6C4;
  --peri: #8B7CFF;
  --muted: #5A6076;
  --hair: #12172E14;
  --hair-strong: #12172E1A;
  --ring: conic-gradient(from 0deg, #FF6B5E 0deg 90deg, #FFC145 90deg 180deg, #3DD6C4 180deg 270deg, #8B7CFF 270deg 360deg);
  --shadow-sm: 0 8px 24px #12172E14;
  --shadow-card: 0 16px 36px #12172E17;
  --shadow-lg: 0 20px 54px #12172E17;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--coral); }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; display: block; }
::selection { background: #FFC14555; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* ---------- layout ---------- */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 900px; }
.wrap--column { max-width: 820px; }

main { flex: 1 1 auto; }

.section { padding: clamp(52px, 7vw, 96px) 0; }
.section--tight { padding: clamp(44px, 6vw, 80px) 0; }
.section--lilac { background: var(--lilac); }
.section--navy { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.section--hero { padding: clamp(44px, 6vw, 76px) 0 clamp(28px, 4vw, 44px); background: linear-gradient(180deg, var(--lilac), var(--white)); }

.grid { display: grid; gap: 18px; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.grid--guides { grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 16px; }
.grid--plans { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); align-items: start; }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.grid--hero { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(36px, 5vw, 64px); align-items: center; }
.stack { display: grid; gap: 12px; }

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

.h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.h1--page { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; letter-spacing: -.033em; font-weight: 800; }
.h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
.h2--sub { font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -.026em; font-weight: 800; }
.h2--row { font-size: clamp(23px, 2.9vw, 33px); line-height: 1.12; letter-spacing: -.024em; font-weight: 800; }
.h3 { font-size: 19px; font-weight: 750; letter-spacing: -.01em; }

.lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--muted); }
.body { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.body--sm { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.fine { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.measure { max-width: 34em; }

.eyebrow {
  font-size: 13px; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow--coral { color: var(--coral); }
.eyebrow--teal { color: var(--teal); }
.eyebrow--peri { color: var(--peri); }
.eyebrow--amber { color: #B98200; }
.label {
  font-size: 12.5px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- header ---------- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.header__inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
/* 🔴 THE REAL WORDMARK FILE, NOT A RECONSTRUCTION OF IT — AND THIS PROJECT HAS PAID FOR
   THIS LESSON ONCE ALREADY. The app's mark once rendered as "k oat" because it had been
   hand-reassembled from the SVG and a letterform group was dropped.

   This site was doing the same thing in a different costume: the logo was three HTML
   spans — <span>k</span>, a CSS ring, <span>vata</span> — so the letterforms were
   whatever font the page loaded at weight 800, and the "o" was ONE flat colour with a
   white hole. The real "o" is four confetti quadrants (purple, coral, teal, yellow), and
   they are the brand. Nobody had to drop a path for it to be wrong; it was never the
   wordmark, it was an impression of one.

   ⚠️ THE ASSETS ARE COPIED WHOLE from Graphics/Logos and verified byte-identical, and the
   markup REFERENCES them. There is deliberately nothing here that could drift from the
   original, because the only edit that can go wrong now is replacing the file.

   Two files, not one recoloured by CSS: the letterforms are baked fills (navy #12172E /
   white), so a dark-background footer needs its own file rather than a filter. */
/* inline-flex, NOT flex — measured, not styled by eye. As a block-level flex container
   the footer's <a> stretched to its column (259px against a 100px mark), so the whole
   width was a link to the home page with nothing visible in most of it. In the header it
   looked right only because a flex parent was shrinking it. */
.logo { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 1; }
.logo img { display: block; width: auto; height: 30px; }
.logo--reverse img { height: 29px; }

.nav {
  flex: 1 1 330px; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; padding: 2px 0;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__link {
  flex: 0 0 auto; padding: 8px 12px; border-radius: 8px;
  font-size: 15px; font-weight: 600; color: var(--navy);
  transition: background .15s; white-space: nowrap;
}
.nav__link:hover { background: var(--lilac); color: var(--navy); }
.nav__bar { display: block; height: 2.5px; border-radius: 2px; margin-top: 3px; }
.nav__bar--coral { background: var(--coral); }
.nav__bar--amber { background: var(--amber); }
.nav__bar--teal { background: var(--teal); }
.nav__bar--peri { background: var(--peri); }
.nav__bar--navy { background: var(--navy); }

.header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.link-quiet { padding: 10px 6px; font-size: 15px; font-weight: 600; color: var(--muted); transition: color .15s; }
.link-quiet:hover { color: var(--navy); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 3px 0 var(--navy); }
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px #12172E38; }
.btn--secondary { background: #fff; color: var(--navy); border: 1.5px solid #12172E24; font-weight: 650; }
.btn--secondary:hover { color: var(--navy); border-color: var(--navy); transform: translateY(-2px); }
.btn--onnavy { background: #fff; color: var(--navy); }
.btn--onnavy:hover { color: var(--navy); transform: translateY(-2px); }
.btn--ghostnavy { background: transparent; color: #fff; border: 1.5px solid #FFFFFF3D; font-weight: 650; }
.btn--ghostnavy:hover { color: #fff; border-color: #fff; transform: translateY(-2px); }
.btn--sm { padding: 13px 22px; font-size: 15.5px; }
.btn--lg { padding: 16px 28px; font-size: 16.5px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--peri);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- cards & bits ---------- */

.card {
  background: #fff; border: 1px solid #12172E12; border-radius: 18px; padding: 26px;
}
.card--hover { transition: transform .2s ease, box-shadow .2s ease; display: block; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: var(--navy); }
.card--metric { border-radius: 14px; padding: 16px; border-color: var(--hair); }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--hair-strong);
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.chip {
  padding: 11px 20px; border-radius: 999px; background: #fff;
  border: 1px solid var(--hair); font-size: 15.5px; font-weight: 600;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.dot--coral { background: var(--coral); }
.dot--amber { background: var(--amber); }
.dot--teal { background: var(--teal); }
.dot--peri { background: var(--peri); }
.dot--grey { background: #12172E33; }

.icon-tile { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 16px; }
.icon-tile--coral { background: var(--coral); }
.icon-tile--amber { background: var(--amber); }
.icon-tile--teal { background: var(--teal); }
.icon-tile--peri { background: var(--peri); }

.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.ticks li { display: flex; gap: 10px; }
.ticks li::before {
  content: ""; flex: 0 0 auto; margin-top: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.ticks--coral li::before { background: var(--coral); }
.ticks--amber li::before { background: var(--amber); }
.ticks--teal li::before { background: var(--teal); }
.ticks--peri li::before { background: var(--peri); }
.ticks--grey li::before { background: #12172E40; }
.ticks--lg { font-size: 16px; gap: 9px; }
.ticks--lg li::before { width: 7px; height: 7px; margin-top: 7px; }

/* decorative confetti ring wash — never above .18 opacity */
.ring-wash { position: absolute; border-radius: 50%; background: var(--ring); pointer-events: none; }
.ring-wash--corner { right: -70px; top: -70px; width: 220px; height: 220px; opacity: .18; }
.ring-wash--center {
  left: 50%; top: 50%; width: min(760px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: .10;
}
.ring-wash--hero { width: min(340px, 72%); aspect-ratio: 1; opacity: .16; filter: blur(2px); }

/* ---------- image placeholders ---------- */

.ph {
  border-radius: 18px; border: 1px dashed #12172E2E;
  background: var(--lilac);
  background-image: repeating-linear-gradient(135deg, #12172E0A 0 8px, transparent 8px 16px);
  display: grid; place-items: center; text-align: center; padding: 18px;
}
.ph span {
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em; text-transform: uppercase; color: #12172E85;
}
.ph--dark {
  background: var(--dark-surface); border-color: #FFFFFF3D;
  background-image: repeating-linear-gradient(135deg, #FFFFFF0F 0 8px, transparent 8px 16px);
}
.ph--dark span { color: #FFFFFFA6; }
.ph--43 { aspect-ratio: 4/3; }
.ph--54 { aspect-ratio: 5/4; }
.ph--1610 { aspect-ratio: 16/10; }
.ph--1611 { aspect-ratio: 16/11; border-radius: 12px; }
.ph--phone { aspect-ratio: 9/17; border-radius: 19px; padding: 10px; }
.ph--phone span { font-size: 10px; }
.ph--badge {
  border: 1px dashed #FFFFFF3D; border-radius: 11px; padding: 12px 14px;
  background: none; place-items: start;
}
.ph--badge span { font-size: 10.5px; color: #FFFFFF8F; }

/* ---------- home hero mock ---------- */

.hero-mock { position: relative; display: grid; place-items: center; min-height: 380px; }
.hero-mock__inner { position: relative; display: grid; gap: 14px; width: 100%; max-width: 420px; }
.hero-mock__screen {
  background: #fff; border: 1px solid var(--hair-strong); border-radius: 20px;
  box-shadow: 0 24px 60px #12172E1F; padding: 12px;
}
.hero-mock__row { display: flex; gap: 14px; align-items: flex-end; }
.hero-mock__phone {
  flex: 0 0 152px; background: var(--navy); border-radius: 26px; padding: 9px;
  box-shadow: 0 18px 44px #12172E33;
}
.hero-mock__stats { flex: 1 1 auto; display: grid; gap: 12px; }
.metric__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.metric__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.metric__value--sm { font-size: 20px; color: var(--coral); }
.meter { height: 6px; border-radius: 99px; background: var(--lilac); margin-top: 10px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--teal); }

/* ---------- problem / solution ---------- */

.compare { border-radius: 20px; padding: clamp(22px, 3vw, 32px); }
.compare--before { background: var(--lilac); border: 1px solid #12172E12; }
.compare--after { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.compare__body { position: relative; display: grid; gap: 10px; }
.compare__row {
  display: flex; align-items: center; gap: 12px;
  border-radius: 12px; padding: 13px 15px; font-size: 15.5px;
}
.compare--before .compare__row { background: #fff; border: 1px solid #12172E12; color: var(--muted); }
.compare--after .compare__row { background: var(--dark-surface); font-weight: 550; }
.marker-sq { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: #12172E33; }

/* ---------- steps ---------- */

.step-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.step-num {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
}
.step-num--coral { background: var(--coral); color: #fff; }
.step-num--amber { background: var(--amber); color: var(--navy); }
.step-num--teal { background: var(--teal); color: var(--navy); }
.step-num--peri { background: var(--peri); color: #fff; }

/* ---------- pricing ---------- */

.toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 999px; background: #fff; border: 1px solid var(--hair-strong);
  box-shadow: 0 4px 16px #12172E12;
}
.toggle__btn {
  position: relative; padding: 11px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted);
  font-size: 15.5px; font-weight: 650; transition: color .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.toggle__btn:hover { color: var(--navy); }
.toggle__btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.badge-save {
  padding: 4px 9px; border-radius: 999px; background: var(--teal);
  color: var(--navy); font-size: 12.5px; font-weight: 750;
}

.plan {
  background: #fff; border: 1px solid var(--hair-strong); border-radius: 22px;
  padding: 26px; display: flex; flex-direction: column; gap: 18px;
}
.plan--featured {
  background: var(--navy); color: #fff; border-color: var(--navy);
  position: relative; box-shadow: 0 20px 50px #12172E2B;
}
.plan__name { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 19px; font-weight: 750; }
.plan__name .dot { width: 11px; height: 11px; }
.plan__price { font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.plan__per { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.plan--featured .plan__per { color: #FFFFFF8F; }
.plan__desc { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.plan--featured .plan__desc { color: #FFFFFFB8; }
.plan__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid #12172E12; }
.plan--featured .plan__foot { border-top-color: #FFFFFF1F; }
.plan--featured .label { color: #FFFFFF80; }
.plan--featured .fine { color: #FFFFFFB8; }
.plan--featured .ticks { color: #FFFFFFDE; font-size: 14.8px; gap: 8px; }
.plan__badge {
  position: absolute; top: -13px; left: 26px; padding: 5px 13px; border-radius: 999px;
  background: var(--teal); color: var(--navy); font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
}

.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--hair); border-radius: 18px; }
table.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { padding: 14px; border-bottom: 1px solid #12172E0F; }
.compare-table thead th { padding: 18px 14px; font-weight: 750; border-bottom: 1px solid var(--hair); text-align: center; }
.compare-table th[scope="row"], .compare-table thead th:first-child { text-align: left; padding-left: 22px; padding-right: 22px; font-weight: 400; }
.compare-table thead th:first-child { font-size: 12.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.compare-table td { text-align: center; color: var(--muted); }
.compare-table .col-pro { background: #12172E08; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.yes { color: var(--teal); font-weight: 700; }
.no { color: #12172E33; }

.qa { background: var(--lilac); border-radius: 16px; padding: 22px 24px; }
.qa h3 { margin-bottom: 7px; font-size: 17.5px; font-weight: 700; }
.qa p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- FAQ accordion ---------- */

.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--hair); border-radius: 14px; background: #fff; overflow: hidden; }
.faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; cursor: pointer; font-size: 17px; font-weight: 650;
  list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { background: var(--lilac); }
.faq__sign { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--muted); }
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__sign { transition: transform .2s ease; }
.faq__answer { padding: 0 22px 20px; font-size: 16px; line-height: 1.65; color: var(--muted); }

.banner {
  padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.banner--lilac { background: var(--lilac); border: 0; padding: 26px; border-radius: 18px; }

/* ---------- forms ---------- */

.form-card {
  background: #fff; border: 1px solid var(--hair-strong); border-radius: 22px;
  padding: clamp(22px, 3vw, 32px); box-shadow: 0 18px 44px #12172E14;
}
.field { display: block; }
.field > span { display: block; font-size: 14.5px; font-weight: 650; margin-bottom: 7px; }
.input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid #12172E1F; font-size: 16px; color: var(--navy);
  background: #fff; outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--navy); }
textarea.input { line-height: 1.5; resize: vertical; }
.form-error {
  padding: 12px 15px; border-radius: 11px; background: #FF6B5E1A;
  border: 1px solid #FF6B5E4D; font-size: 14.5px; color: var(--navy);
}
.tick-circle {
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal);
  display: grid; place-items: center; font-size: 24px; font-weight: 800; color: var(--navy);
}

.auth-shell { padding: clamp(40px, 6vw, 80px) 0; background: var(--lilac); min-height: 70vh; display: grid; place-items: center; }
.auth-card {
  width: 100%; max-width: 520px;
  background: #fff; border: 1px solid var(--hair-strong); border-radius: 24px;
  padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-lg);
}
.segment { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--lilac); margin-bottom: 26px; }
.segment > a {
  flex: 1; text-align: center; padding: 11px; border-radius: 999px;
  font-size: 15.5px; font-weight: 700; color: var(--navy);
}
.segment > a[aria-current="page"] { background: #fff; box-shadow: 0 2px 8px #12172E1F; }
.segment > a:hover { color: var(--navy); }

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

.footer { background: var(--navy); color: #fff; padding: clamp(40px, 5vw, 64px) 0 28px; }
.footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid #FFFFFF1A;
}
.footer__head { font-size: 12.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #FFFFFF80; margin-bottom: 14px; }
.footer__links { display: grid; gap: 10px; font-size: 15.5px; justify-items: start; }
.footer__links a { color: #FFFFFFD6; transition: color .15s; }
.footer__links a:hover { color: var(--teal); }
.footer__blurb { font-size: 15px; line-height: 1.6; color: #FFFFFF9E; max-width: 24em; }
.footer__base {
  padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; font-size: 14px; color: #FFFFFF75;
}
.footer__base a { color: #FFFFFF9E; }
.footer__base a:hover { color: #fff; }

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

@keyframes kvUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: kvUp .6s ease both; }
.rise--late { animation: kvUp .75s .1s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}

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


/* Screenshots occupy the slots the .ph placeholders used to. The aspect ratio still
   comes from the ph--* class, so a capture shot at the wrong size is VISIBLE as a
   letterbox rather than silently cropping something nobody chose. */
/* 🔴 `.shot` MIRRORS `.ph--*` BUT WITHOUT THE PLACEHOLDER CHROME — and getting this
   wrong is what made the site "look bad". The first wiring kept the `.ph` class ON the
   <img>, so every screenshot sat inside `.ph`'s 18px padding, 1px dashed border and
   diagonal hatch: an image floating in the middle of a bigger dashed box. The
   placeholder's job was to be visibly empty; an image must reach the edges.
   ⚠️ SAME ASPECT RATIOS as the .ph--* classes above, so the holes do not move. */
.shot { display: block; width: 100%; height: auto; border-radius: 18px;
        object-fit: cover; object-position: top center; background: var(--lilac); }
.shot--43   { aspect-ratio: 4/3; }
.shot--54   { aspect-ratio: 5/4; }
.shot--1610 { aspect-ratio: 16/10; }
.shot--1611 { aspect-ratio: 16/11; border-radius: 12px; }
/* The navy phone wrapper IS the bezel, so the screen keeps its own inner radius. */
.shot--phone { aspect-ratio: 9/17; border-radius: 19px; }


/* 🔴 `hidden` LOSES TO AN INLINE `display`, AND THAT SHIPPED ON A PUBLIC PAGE. The
   contact form's success state carried BOTH `hidden` and `style="display:grid"`. The
   attribute works only through the UA stylesheet's `[hidden] { display: none }`, which
   an inline declaration outranks — so "Message sent. Thanks, we'll reply within a
   business day" was on screen before anyone typed anything, above a form they hadn't
   submitted.

   ⭐⭐ THE GENERAL FORM, THIRD INSTANCE, WRITTEN ONCE SO ALL THREE CAN POINT AT IT:
   AN ATTRIBUTE OR RULE WHOSE EFFECT COMES FROM A STYLESHEET YOU DIDN'T WRITE CAN BE
   DEFEATED BY AN INLINE DECLARATION, SILENTLY.
     1. `background:` shorthand clearing a stylesheet's `background-image`
     2. the same shorthand killing the cancelled-lesson hatch, which computed to `none`
     3. `hidden` — whose whole effect is the UA stylesheet's `[hidden]{display:none}` —
        defeated by `style="display:grid"`
   The tell is always the same: the source reads correctly, and the browser disagrees.
   THE CHECK IS THE COMPUTED VALUE, NEVER THE SOURCE. And where the rule comes from a
   stylesheet you don't control, restate it yourself with `!important` — which is what
   the `[hidden]` line below is doing.

   TWO FIXES, BOTH KEPT: the layout moves OUT of the style attribute, and `[hidden]`
   gets an explicit rule so no future inline `display` can defeat it again. */
[hidden] { display: none !important; }
.contact-ok { display: grid; gap: 16px; place-items: start; padding: 12px 0; }