/*
  Bloom marketing site.

  Recreated from design_handoff_landing. The references were written with inline
  styles and canvas-runtime attributes (style-hover, style-active, sc-for,
  sc-if); those are translated here into real CSS rules. The preview runtime
  support.js is NOT shipped.

  Tokens below are verbatim from the handoff README and are the spec. Change one
  here rather than in a page.
*/

:root {
  --bg: #faf8fc;
  --ink: #2a2438;
  --ink-2: #6b6480;
  --muted: #9a93a8;
  --accent: #5b4bd6;
  --accent-hover: #6d5ee6;
  --brand: #8f83e3;
  --line: #e9e5f0;
  --line-strong: #d6d0e2;
  --soft: #f3f0f8;
  --success: #2f7d63;

  --petal-1: #b7a6f4;
  --petal-2: #f8aac9;
  --petal-3: #ffd39a;
  --petal-4: #96ddc1;
  --petal-5: #a9bcf7;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
}

/* --- Keyframes ----------------------------------------------------------- */

@keyframes acc-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes acc-pop {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes acc-turn {
  from { transform: rotate(-100deg); }
  to { transform: rotate(0deg); }
}
@keyframes acc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/*
  The nav mark's hover flourish: a full turn, then a damped settle rather than a
  hard stop. The overshoot values are authored, not derived.
*/
@keyframes acc-mark-turn {
  0% { transform: rotate(0deg); }
  78% { transform: rotate(360deg); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  84% { transform: rotate(366deg); }
  89% { transform: rotate(356.5deg); }
  93% { transform: rotate(362deg); }
  96% { transform: rotate(358.8deg); }
  98% { transform: rotate(360.6deg); }
  100% { transform: rotate(360deg); }
}
@keyframes acc-center-pop {
  0% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.34, 0.8, 0.4, 1); }
  45% { opacity: 1; transform: scale(1.35); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  72% { transform: scale(0.92); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  88% { transform: scale(1.05); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes acc-bloom-in {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 0.55; transform: scale(1); }
}
@keyframes acc-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(3%, -2.5%, 0) scale(1.05); }
  66% { transform: translate3d(-2.5%, 2%, 0) scale(0.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes acc-bg-shift {
  0% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
@keyframes acc-mote {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(2.8vw, -9vh, 0); }
  50% { transform: translate3d(-1.6vw, -17vh, 0); }
  75% { transform: translate3d(2vw, -26vh, 0); }
  100% { transform: translate3d(0, -34vh, 0); }
}
@keyframes acc-mote-breathe {
  0%, 100% { opacity: 0.28; scale: 1; }
  50% { opacity: 0.6; scale: 1.18; }
}
@keyframes acc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Layout -------------------------------------------------------------- */

.wrap-1120 { max-width: 1120px; margin: 0 auto; }
.wrap-1080 { max-width: 1080px; margin: 0 auto; }
.wrap-1020 { max-width: 1020px; margin: 0 auto; }
.wrap-880 { max-width: 880px; margin: 0 auto; }
.wrap-760 { max-width: 760px; margin: 0 auto; }
.wrap-720 { max-width: 720px; margin: 0 auto; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  transition:
    background 220ms var(--ease),
    border-color 220ms var(--ease),
    transform 220ms var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  box-shadow: 0 4px 12px -2px rgba(91, 75, 214, 0.35);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

.btn--primary:active {
  transform: scale(0.98);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 26px;
  border: 1px solid var(--line);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.btn--sm {
  font-size: 14.5px;
  padding: 12px 24px;
}

.btn--sm.btn--secondary {
  background: transparent;
  padding: 11px 22px;
}

.btn--lg {
  padding: 14px 32px;
}

/* --- Nav ----------------------------------------------------------------- */

.nav {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: acc-fade-in 900ms ease 400ms both;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav__wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 220ms var(--ease);
}

.nav__link:hover {
  color: var(--accent);
}

.nav__pill {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 220ms var(--ease);
}

.nav__pill:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* The petals turn on hover of the brand group; the centre stays put. */
.mark__petals--turning {
  animation: acc-mark-turn 2800ms var(--ease);
  transform-origin: 32px 32px;
  transform-box: view-box;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, #f4efff 0%, #fdf3f7 30%, #faf6ee 55%, #eff7f3 80%, #f0f2fd 100%);
  background-size: 280% 280%;
  animation: acc-bg-shift 46s ease-in-out infinite;
}

.hero__blobs {
  position: absolute;
  inset: -8%;
}

.hero__blob {
  position: absolute;
}

.hero__blob > div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  animation: acc-bloom-in 900ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.hero__blob--1 { left: 36%; top: -6%; width: 520px; height: 520px; animation: acc-drift 28s ease-in-out 2280ms infinite reverse; }
.hero__blob--1 > div { background: #ffe7cf; filter: blur(100px); animation-delay: 700ms; }
.hero__blob--2 { left: -4%; bottom: -2%; width: 640px; height: 640px; animation: acc-drift 26s ease-in-out 1200ms infinite; }
.hero__blob--2 > div { background: #d9dfff; filter: blur(90px); animation-delay: 100ms; }
.hero__blob--3 { right: -2%; top: -4%; width: 660px; height: 660px; animation: acc-drift 30s ease-in-out 1560ms infinite reverse; }
.hero__blob--3 > div { background: #ffd9e8; filter: blur(110px); animation-delay: 300ms; }
.hero__blob--4 { right: 10%; bottom: -10%; width: 540px; height: 540px; animation: acc-drift 22s ease-in-out 1920ms infinite; }
.hero__blob--4 > div { background: #d2f2e6; filter: blur(80px); animation-delay: 500ms; }

.hero__motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: acc-fade-in 2000ms ease 1800ms both;
}

.mote {
  position: absolute;
}

.mote > div {
  border-radius: 50%;
}

.hero__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 96px;
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  max-width: 760px;
}

.hero__title {
  margin: 0;
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ink);
  animation: acc-enter 700ms var(--ease-out) 1650ms both;
}

.hero__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
  animation: acc-enter 700ms var(--ease-out) 1850ms both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
  animation: acc-enter 700ms var(--ease-out) 2050ms both;
}

.hero__note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  animation: acc-enter 700ms var(--ease-out) 2200ms both;
}

/* Hero mark choreography: petals pop in sequence under a turning group. */
.heromark__spin {
  transform-origin: 32px 32px;
  transform-box: view-box;
  animation: acc-spin 36s linear 1950ms infinite;
}
.heromark__turn {
  transform-origin: 32px 32px;
  transform-box: view-box;
  animation: acc-turn 1550ms cubic-bezier(0.22, 1, 0.36, 1) 400ms both;
}
.heromark__petal {
  transform-origin: 32px 32px;
  transform-box: view-box;
  animation: acc-pop 640ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
.heromark__petal--1 { animation-delay: 400ms; }
.heromark__petal--2 { animation-delay: 540ms; }
.heromark__petal--3 { animation-delay: 680ms; }
.heromark__petal--4 { animation-delay: 820ms; }
.heromark__petal--5 { animation-delay: 960ms; }
.heromark__centre {
  transform-origin: 32px 32px;
  transform-box: view-box;
  animation: acc-center-pop 950ms linear 1270ms both;
}

/* --- Board preview ------------------------------------------------------- */

.board {
  position: relative;
  max-width: 1080px;
  margin: -60px auto 0;
  padding: 0 32px;
  z-index: 2;
}

.board__frame {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(60, 45, 130, 0.25);
  padding: 14px 14px 0;
  overflow: hidden;
}

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  box-shadow: 0 4px 12px -2px rgba(42, 36, 56, 0.1);
}

.chrome__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chrome__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chrome__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.chrome__menus {
  display: inline-flex;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}

.chrome__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 4px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff;
  flex: 1;
  max-width: 300px;
}

.chrome__search span {
  font-size: 11.5px;
  color: var(--muted);
  flex: 1;
  white-space: nowrap;
}

.chrome__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chrome__clock {
  border-left: 1px solid var(--line);
  padding-left: 10px;
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--ink);
}

.panel {
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  margin-top: 12px;
  padding: 12px 14px 16px;
  box-shadow: 0 4px 12px -2px rgba(42, 36, 56, 0.08);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.toolbar__count {
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.toolbar__spacer { flex: 1; }

.lane {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.lane + .lane { margin-top: 10px; }

.lane__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.lane__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.plan {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.plan--iep { background: #e8eeff; color: #3d5bbf; }
.plan--504 { background: #f0e9fd; color: #6b4bb8; }

.lane__meta {
  font-size: 10.5px;
  color: var(--ink-2);
}

.lane__meta--num { font-variant-numeric: tabular-nums; }

.lane__absent {
  margin-left: auto;
}

.absent {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 500;
}

.lane__body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.col {
  background: var(--soft);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 4px;
}

.col--unassigned .col__head { box-shadow: inset 0 2px 0 #f2eff7; }
.col--used .col__head { box-shadow: inset 0 2px 0 #e4f4ed; }
.col--detail .col__head { box-shadow: inset 0 2px 0 #eeebfd; }
.col--refused .col__head { box-shadow: inset 0 2px 0 #e8f0f4; }
.col--notes .col__head { box-shadow: inset 0 2px 0 #f2eff7; }

.col__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.col__count {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.col__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px 10px;
  flex: 1;
  min-height: 56px;
}

.card {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(42, 36, 56, 0.06);
}

.card--counted { padding-bottom: 18px; }

.card__grip {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 5px 0 var(--muted), 0 10px 0 var(--muted);
  opacity: 0.5;
  margin: 4px 2px 0 0;
  flex: none;
}

.card__body { flex: 1; min-width: 0; }

.card__label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.chip-default {
  display: inline-block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--soft);
  border: 1px dashed var(--line-strong);
  padding: 1px 6px;
  border-radius: 4px;
}

.chip-detail {
  display: inline-block;
  margin-top: 4px;
  max-width: 100%;
  font-size: 9px;
  font-weight: 500;
  color: var(--accent);
  background: #eeebfd;
  padding: 1px 5px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__times {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--success);
  background: #e4f4ed;
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.addacc {
  border: 1.5px dashed #c9c0f2;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 10px;
  color: var(--brand);
  text-align: center;
}

.notes-placeholder {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
  padding: 2px;
}

/* --- Sections ------------------------------------------------------------ */

.section { padding-left: 32px; padding-right: 32px; }

.problem { padding-top: 110px; }

.problem p {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.problem .quiet { color: var(--muted); }

.how { padding-top: 110px; }

.how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.step { border-top: 2px solid var(--ink); padding-top: 18px; }
.step__num { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.step__title { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.reports { padding-top: 96px; }

.reports__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}

.h2 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.reports p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

.reports p:last-child { margin-bottom: 0; }

.report {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 20px 50px -25px rgba(60, 45, 130, 0.3);
  padding: 28px 30px;
  font-size: 12px;
  color: var(--ink-2);
}

.report__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.report__title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.report__sub { color: var(--muted); }
.report__gen { font-size: 10.5px; color: var(--muted); text-align: right; }

.report__rows { display: flex; flex-direction: column; gap: 8px; }
.report__row { display: flex; justify-content: space-between; }
.report__full { color: var(--success); font-weight: 500; }

.report__sign {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 24px;
}

.report__rule { border-bottom: 1px solid var(--line-strong); height: 20px; }
.report__caption { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* --- Pricing, district first --------------------------------------------- */

.pricing { padding-top: 110px; }

.pricing__card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 24px 60px -35px rgba(60, 45, 130, 0.3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  overflow: hidden;
}

.pricing__lead {
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.pricing__title {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.pricing__body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.pricing__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pricing__teacher {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.pricing__list {
  background: var(--soft);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.tick {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

.tick__mark { color: var(--success); font-weight: 600; }

/* --- Privacy ------------------------------------------------------------- */

.privacy { padding-top: 96px; }

.privacy__card {
  background: linear-gradient(135deg, #f4efff 0%, #fdf3f7 60%, #eff7f3 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
}

.privacy__card h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.privacy__card p {
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.chips span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 8px 16px;
}

/* --- Closer and footer --------------------------------------------------- */

.closer { padding-top: 130px; text-align: center; }

.closer h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.closer__lede {
  margin: 0 auto 28px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.closer__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.closer__link { margin: 20px 0 0; font-size: 13.5px; }
.closer__link a { color: var(--ink-2); text-decoration: none; }
.closer__link a:hover { color: var(--accent); }

.footer {
  max-width: 1020px;
  margin: 96px auto 0;
  padding: 36px 32px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__left { display: flex; align-items: center; gap: 8px; }
.footer__note { font-size: 13px; color: var(--muted); }
.footer__links { display: flex; gap: 18px; font-size: 13px; }
.footer__links a { color: var(--ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--accent); }

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

.faq { padding: 40px 32px 0; }

.faq h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.faq__list { margin-top: 34px; display: flex; flex-direction: column; gap: 28px; }

.faq__item { border-top: 1px solid var(--line); padding-top: 18px; }
.faq__q { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.faq__a { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }

.faq__foot {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq__foot p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 46ch; }

/* --- Scroll reveal ------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/*
  Reduced motion collapses everything, and app.js skips the reveal observer
  entirely, so nothing depends on it having run.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}