:root {
  color-scheme: light;
  --surface-page: #f6f4ef;
  --surface-raised: #ffffff;
  --ink: #20242c;
  --ink-muted: #626872;
  --privacy: #397f79;
  --focus: #72a7db;
  --peach: #f6ded2;
  --sage: #dce9df;
  --error: #a23838;
  --kita-ink-950: #141720;
  --kita-ink-900: #1e2330;
  --kita-ink-700: #3f4655;
  --kita-paper-50: #fbfaf6;
  --kita-white: #ffffff;
  --kita-cobalt-500: #3568dc;
  --kita-success: #1c8c55;
  --calm-paper: #f6f4ef;
  --calm-card: #ffffff;
  --calm-ink: #20242c;
  --calm-ink-soft: #5d6571;
  --calm-line: #e6ddd1;
  --calm-peach: #f9b77c;
  --calm-sky: #93d7e8;
  --calm-mauve: #c8a9b7;
  --calm-sage: #95c9aa;
  --calm-teal: #397f79;
  --font-display: Rubik, "Arial Hebrew", sans-serif;
  --font-body: Assistant, "Arial Hebrew", sans-serif;
  --text-caption: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --graphic-border: var(--kita-ink-950);
  --graphic-shadow: 6px 6px 0 var(--kita-ink-950);
  --focus-ring: 0 0 0 3px var(--kita-paper-50), 0 0 0 6px var(--kita-cobalt-500);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --class-page-width: 34rem;
  font-family: Rubik, Inter, system-ui, sans-serif;
}

[data-class-theme="calm-bio"] {
  --class-page: var(--calm-paper);
  --class-row: var(--calm-card);
  --class-ink: var(--calm-ink);
  --class-ink-soft: var(--calm-ink-soft);
  --class-line: var(--calm-line);
  --class-accent: var(--calm-teal);
  --class-accent-text: var(--kita-white);
  --class-control-border: var(--kita-ink-950);
  --class-control-shadow: var(--graphic-shadow);
  --class-action-whatsapp: #59d681;
  --class-action-call: var(--kita-cobalt-500);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--surface-page);
  color: var(--ink);
}

html[dir="rtl"] {
  direction: rtl;
}

html[dir="ltr"] {
  direction: ltr;
}

body {
  margin: 0;
  min-block-size: 100vh;
}

.app-shell {
  inline-size: min(100% - 32px, 640px);
  margin-inline: auto;
  padding-block: 32px;
}

/* Kita.page product register — Bright outside, calm inside. */
.app-shell.marketing-shell {
  inline-size: 100%;
  margin: 0;
  padding: 0;
}

.skip-link {
  background: #ffffff;
  border-radius: 999px;
  color: #1e2330;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 10px 16px;
  position: fixed;
  transform: translateY(-160%);
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

.marketing-page {
  --marketing-ink: #1e2330;
  --marketing-paper: #f4f3ed;
  --marketing-lime: #d8f45b;
  --marketing-leaf: #27543a;
  --marketing-leaf-dark: #1f432e;
  --marketing-cobalt: #3568dc;
  --marketing-plum:rgba(116, 29, 70, 0.98);
  --marketing-lilac: #ecc9eb;
  --marketing-coral: #ff9e84;
  --marketing-mango: #ffc66e;
  --marketing-aqua: #92dfe5;
  --marketing-font-display: "Fredoka", "Rubik", sans-serif;
  --marketing-font-body: "Rubik", "Arial Hebrew", sans-serif;
  background: var(--marketing-paper);
  color: var(--marketing-ink);
  font-family: var(--marketing-font-body);
  overflow: hidden;
}

.marketing-container {
  inline-size: min(100% - 32px, 1280px);
  margin-inline: auto;
}

.marketing-hero {
  background: var(--marketing-lime);
  display: block;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 0 72px;
  position: relative;
}

.marketing-hero::after {
  border: 72px solid var(--marketing-lilac);
  border-radius: 50%;
  block-size: 360px;
  content: "";
  inline-size: 360px;
  inset-block-end: -250px;
  inset-inline-start: -180px;
  opacity: 0.9;
  position: absolute;
  z-index: -1;
}

.marketing-nav {
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 16px 36px rgb(30 35 48 / 12%);
  display: flex;
  justify-content: space-between;
  min-block-size: 58px;
  padding: 7px 8px 7px 16px;
  position: relative;
  z-index: 4;
}

.marketing-nav-main {
  align-items: center;
  display: flex;
  gap: 18px;
  min-block-size: 44px;
}

.marketing-brand {
  align-items: center;
  color: var(--marketing-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--marketing-font-display);
  line-height: 1;
  text-decoration: none;
}

.marketing-brand-word {
  display: block;
  font-size: 1.34rem;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.marketing-nav-links {
  align-items: center;
  display: none;
  min-block-size: 44px;
}

.marketing-nav-links a,
.marketing-sign-in {
  color: var(--marketing-ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.marketing-nav-links a {
  align-items: center;
  display: inline-flex;
  min-block-size: 44px;
}

.marketing-nav-links a:hover,
.marketing-sign-in:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.marketing-nav-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.marketing-sign-in {
  align-items: center;
  display: none;
  min-block-size: 44px;
  padding: 10px 12px;
}

.marketing-nav-cta {
  align-items: center;
  background: var(--marketing-ink);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: 17px;
  text-decoration: none;
}

.marketing-hero-grid {
  align-items: center;
  display: grid;
  gap: 56px;
  padding-block-start: 74px;
}

.marketing-hero-copy {
  animation: marketing-reveal 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  max-inline-size: 720px;
}

.marketing-eyebrow {
  align-items: center;
  color: var(--marketing-leaf);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 9px;
  letter-spacing: 0;
  margin: 0 0 18px;
}

.marketing-eyebrow > span {
  background: currentcolor;
  block-size: 3px;
  border-radius: 99px;
  inline-size: 24px;
}

.marketing-hero h1,
.marketing-value h2,
.marketing-section-heading h2,
.marketing-privacy h2,
.marketing-final h2 {
  font-family: var(--marketing-font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.marketing-heading-stop {
  display: inline-block;
  font-size: 0.48em;
  font-weight: 700;
  line-height: 1;
  margin-inline-start: 0.04em;
  vertical-align: 0.06em;
}

.marketing-hero h1 {
  color: var(--marketing-leaf-dark);
  font-size: clamp(3.2rem, 14vw, 6.9rem);
  line-height: 0.94;
  margin: 0 0 28px;
}

.marketing-hero h1 em {
  color: var(--marketing-ink);
  font-style: normal;
}

.marketing-hero-lede {
  color: var(--marketing-ink);
  font-size: clamp(1.08rem, 2.5vw, 1.3rem);
  line-height: 1.55;
  margin: 0;
  max-inline-size: 550px;
}

.marketing-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-block-start: 32px;
}

.marketing-action {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 800;
  gap: 18px;
  justify-content: center;
  min-block-size: 56px;
  padding-inline: 30px;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.marketing-action:hover {
  transform: translateY(-3px);
}

.marketing-action:active {
  transform: scale(0.98);
}

.marketing-action-dark {
  background: var(--marketing-ink);
  box-shadow: 0 8px 0 rgb(39 84 58 / 28%);
  color: #ffffff;
}

.marketing-text-link {
  color: var(--marketing-ink);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.marketing-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.marketing-trust-list li {
  align-items: center;
  display: flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 6px;
}

.marketing-trust-list span {
  align-items: center;
  background: var(--marketing-leaf);
  block-size: 18px;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.66rem;
  inline-size: 18px;
  justify-content: center;
}

.marketing-preview-scene {
  animation: marketing-reveal 620ms 100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgb(255 255 255 / 6%) 15px 16px),
    var(--marketing-cobalt);
  border-radius: 34px 34px 96px 34px;
  box-shadow: 0 30px 74px rgb(30 35 48 / 22%);
  display: grid;
  isolation: isolate;
  min-block-size: 520px;
  padding: 34px 20px 28px;
  place-items: center;
  position: relative;
}

.marketing-class-preview {
  background: #f6f4ef;
  border-radius: 28px;
  box-shadow: 0 24px 52px rgb(18 31 81 / 28%);
  color: #20242c;
  inline-size: min(88%, 360px);
  padding: 16px;
  position: relative;
  transform: rotate(-2.2deg);
  z-index: 2;
}

.marketing-preview-header {
  background: linear-gradient(155deg, #93d7e8, #c8a9b7 44%, #f9b77c);
  border-radius: 17px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 18px;
}

.marketing-preview-header p {
  font-family: var(--marketing-font-body);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
}

.marketing-preview-header div > span {
  color: #4e555f;
  font-size: 0.7rem;
}

.marketing-private-chip {
  align-self: flex-start;
  background: #397f79;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 5px 8px;
  white-space: nowrap;
}

.marketing-preview-search {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e6ddd1;
  border-radius: 8px;
  color: #72777f;
  display: flex;
  font-size: 0.72rem;
  justify-content: space-between;
  margin-block: 10px;
  min-block-size: 40px;
  padding-inline: 11px;
}

.marketing-preview-search span {
  color: #397f79;
  font-size: 1.1rem;
}

.marketing-preview-list {
  display: grid;
  gap: 7px;
}

.marketing-preview-row {
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgb(54 45 36 / 10%);
  display: flex;
  gap: 9px;
  min-block-size: 52px;
  padding: 7px 9px;
}

.marketing-row-avatar {
  align-items: center;
  block-size: 34px;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 0.8rem;
  font-weight: 800;
  inline-size: 34px;
  justify-content: center;
}

.marketing-row-avatar.avatar-peach { background: #f9b77c; }
.marketing-row-avatar.avatar-sky { background: #93d7e8; }
.marketing-row-avatar.avatar-sage { background: #95c9aa; }

.marketing-preview-row strong,
.marketing-preview-row small {
  display: block;
}

.marketing-preview-row strong {
  font-size: 0.78rem;
}

.marketing-preview-row small {
  color: #69707a;
  font-size: 0.62rem;
}

.marketing-row-arrow {
  color: #397f79;
  font-size: 1.25rem;
  margin-inline-start: auto;
}

.marketing-preview-note {
  align-items: center;
  color: #5d6571;
  display: flex;
  font-size: 0.64rem;
  gap: 5px;
  margin: 11px 4px 0;
}

.marketing-preview-note span {
  align-items: center;
  background: #dce9df;
  block-size: 17px;
  border-radius: 50%;
  color: #397f79;
  display: inline-flex;
  inline-size: 17px;
  justify-content: center;
}

.marketing-preview-caption {
  background: var(--marketing-ink);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  inset-block-end: 18px;
  inset-inline-end: 20px;
  padding: 6px 10px;
  position: absolute;
  transform: rotate(3deg);
  z-index: 3;
}

.marketing-doodle {
  position: absolute;
  z-index: 3;
}

.marketing-doodle-star {
  background: var(--marketing-mango);
  block-size: 74px;
  clip-path: polygon(50% 0, 61% 34%, 98% 30%, 69% 53%, 82% 90%, 50% 69%, 18% 90%, 31% 53%, 2% 30%, 39% 34%);
  inline-size: 74px;
  inset-block-start: 28px;
  inset-inline-end: -14px;
  transform: rotate(12deg);
}

.marketing-doodle-flower {
  align-items: center;
  background: var(--marketing-coral);
  block-size: 78px;
  border-radius: 38% 62% 40% 60% / 56% 40% 60% 44%;
  display: flex;
  inline-size: 78px;
  inset-block-end: 18px;
  inset-inline-start: -20px;
  justify-content: center;
  transform: rotate(-12deg);
}

.marketing-doodle-flower span {
  align-items: center;
  background: var(--marketing-lime);
  block-size: 42px;
  border-radius: 50%;
  color: var(--marketing-leaf-dark);
  display: flex;
  font-size: 0.68rem;
  font-weight: 800;
  inline-size: 42px;
  justify-content: center;
  transform: rotate(12deg);
}

.marketing-doodle-line {
  block-size: 42px;
  border-block-start: 5px solid #ffffff;
  border-radius: 50%;
  inline-size: 100px;
  inset-block-start: 92px;
  inset-inline-start: -20px;
  opacity: 0.75;
  transform: rotate(-28deg);
}

.marketing-value {
  background: var(--marketing-ink);
  color: #ffffff;
  padding-block: 68px;
}

.marketing-eyebrow-light {
  color: var(--marketing-lime);
}

.marketing-value h2 {
  font-size: clamp(2.7rem, 8vw, 5.6rem);
  font-weight: 700;
  line-height: 0.96;
  margin: 0 0 36px;
  max-inline-size: 760px;
}

.marketing-value-grid {
  display: grid;
  gap: 16px;
}

.marketing-value-card {
  border-radius: 28px;
  color: var(--marketing-ink);
  display: flex;
  flex-direction: column;
  min-block-size: 360px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.marketing-value-lilac {
  background: var(--marketing-lilac);
}

.marketing-value-lime {
  background: var(--marketing-lime);
}

.marketing-value-coral {
  background: var(--marketing-coral);
}

.marketing-card-number {
  align-items: center;
  block-size: 36px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  inline-size: 36px;
  justify-content: center;
}

.marketing-value-card h3 {
  font-family: var(--marketing-font-display);
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  margin: auto 0 10px;
}

.marketing-value-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  max-inline-size: 39ch;
}

.marketing-card-visual {
  margin: 30px auto 24px;
}

.marketing-faces {
  display: flex;
  direction: ltr;
}

.marketing-faces span {
  align-items: center;
  background: var(--marketing-aqua);
  block-size: 76px;
  border: 5px solid var(--marketing-lilac);
  border-radius: 50%;
  color: var(--marketing-ink);
  display: inline-flex;
  font-size: 1.45rem;
  font-weight: 800;
  inline-size: 76px;
  justify-content: center;
  margin-inline-start: -14px;
}

.marketing-faces span:nth-child(2) {
  background: var(--marketing-mango);
}

.marketing-faces span:nth-child(3) {
  background: var(--marketing-coral);
}

.marketing-message {
  background: #ffffff;
  border-radius: 24px 24px 6px 24px;
  box-shadow: 0 12px 0 rgb(39 84 58 / 18%);
  font-weight: 800;
  max-inline-size: 260px;
  padding: 22px;
  transform: rotate(-3deg);
}

.marketing-choice {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgb(116 29 70 / 16%);
  display: grid;
  gap: 9px;
  inline-size: min(100%, 300px);
  padding: 14px;
  transform: rotate(2deg);
}

.marketing-choice span {
  align-items: center;
  display: flex;
  font-size: 0.78rem;
  justify-content: space-between;
}

.marketing-choice b {
  background: #def5e8;
  border-radius: 999px;
  color: #12653d;
  font-size: 0.65rem;
  padding: 5px 8px;
}

.marketing-choice span:last-child b {
  background: #e9e8e3;
  color: #5d6571;
}

.marketing-how {
  background: var(--marketing-paper);
  padding-block: 68px;
}

.marketing-section-heading {
  display: grid;
  gap: 28px;
  margin-block-end: 36px;
}

.marketing-section-heading h2 {
  font-size: clamp(2.8rem, 11vw, 6.2rem);
  line-height: 0.94;
  margin: 0;
}

.marketing-section-heading > p {
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0;
  max-inline-size: 520px;
}

.marketing-steps {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marketing-steps li {
  align-items: flex-start;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgb(30 35 48 / 8%);
  display: grid;
  gap: 18px;
  grid-template-columns: 54px 1fr;
  min-block-size: 148px;
  padding: 22px;
}

.marketing-steps li > span {
  align-items: center;
  background: var(--marketing-lime);
  block-size: 50px;
  border-radius: 50%;
  color: var(--marketing-leaf-dark);
  display: inline-flex;
  font-family: var(--marketing-font-display);
  font-weight: 700;
  inline-size: 50px;
  justify-content: center;
}

.marketing-steps h3 {
  font-family: var(--marketing-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  margin: 2px 0 8px;
}

.marketing-steps p {
  color: #4f5662;
  line-height: 1.5;
  margin: 0;
}

.marketing-privacy {
  background: var(--marketing-plum);
  color: #ffffff;
  padding-block: 86px;
}

.marketing-privacy-grid {
  display: grid;
  gap: 52px;
}

.marketing-eyebrow-pink {
  color: var(--marketing-lilac);
}

.marketing-privacy h2 {
  color: var(--marketing-lilac);
  font-size: clamp(2.8rem, 11vw, 6rem);
  line-height: 0.96;
  margin: 0 0 28px;
}

.marketing-privacy-copy > p:not(.marketing-eyebrow) {
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.6;
  max-inline-size: 560px;
}

.marketing-privacy-copy ul {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding-inline-start: 22px;
}

.marketing-privacy-preview {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 28px 68px rgb(40 4 24 / 30%);
  color: var(--marketing-ink);
  padding: 24px;
  transform: rotate(-1.5deg);
}

.marketing-family-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-block-end: 22px;
}

.marketing-family-avatar {
  align-items: center;
  background: var(--marketing-coral);
  block-size: 50px;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 50px;
  font-weight: 800;
  inline-size: 50px;
  justify-content: center;
}

.marketing-family-heading strong,
.marketing-family-heading small {
  display: block;
}

.marketing-family-heading small {
  color: #6c7380;
  font-size: 0.75rem;
  margin-block-start: 3px;
}

.marketing-sharing-row {
  align-items: center;
  border-block-start: 1px solid #e9e6e0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-block-size: 58px;
}

.marketing-sharing-on,
.marketing-sharing-off {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 9px;
}

.marketing-sharing-on {
  background: #def5e8;
  color: #12653d;
}

.marketing-sharing-off {
  background: #e9e8e3;
  color: #5d6571;
}

.marketing-privacy-help {
  background: #f4f3ed;
  border-radius: 12px;
  color: #565d68;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 14px 0 0;
  padding: 12px;
}

.marketing-final {
  background: var(--marketing-lime);
  color: var(--marketing-leaf-dark);
  padding-block: 80px;
}

.marketing-final-inner {
  align-items: center;
  display: grid;
  gap: 30px;
  text-align: center;
}

.marketing-final-flower {
  align-items: center;
  background: var(--marketing-coral);
  block-size: 86px;
  border-radius: 38% 62% 40% 60% / 56% 40% 60% 44%;
  display: inline-flex;
  font-family: var(--marketing-font-display);
  font-size: 2rem;
  font-weight: 800;
  inline-size: 86px;
  justify-content: center;
  justify-self: center;
  transform: rotate(-8deg);
}

.marketing-final p {
  font-weight: 800;
  margin: 0 0 12px;
}

.marketing-final h2 {
  font-size: clamp(3rem, 13vw, 7rem);
  line-height: 0.92;
  margin: 0;
}

.marketing-final .marketing-action {
  justify-self: center;
}

.marketing-footer {
  background: #141720;
  border: 0;
  color: rgb(255 255 255 / 70%);
  display: block;
  font-size: 0.82rem;
  padding: 42px 0;
}

.marketing-footer-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.marketing-brand-footer {
  color: #ffffff;
}


.marketing-footer p {
  margin: 0;
}

.marketing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.marketing-legal-page {
  min-block-size: 100vh;
}

.marketing-legal-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-block: 24px;
}

.marketing-legal-top > a:last-child {
  color: var(--marketing-ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-underline-offset: 4px;
}

.marketing-legal-hero {
  background:
    radial-gradient(circle at 14% 20%, rgb(255 158 132 / 82%) 0 7%, transparent 7.2%),
    var(--marketing-lime);
  color: var(--marketing-leaf-dark);
  padding-block: 72px;
}

.marketing-legal-hero h1 {
  font-family: var(--marketing-font-display);
  font-size: clamp(3.4rem, 12vw, 7.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 24px 0 18px;
}

.marketing-legal-hero > div > p:last-child {
  font-weight: 700;
  margin: 0;
}

.marketing-legal-content {
  display: grid;
  gap: 14px;
  padding-block: 48px 80px;
}

.marketing-legal-content section {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(30 35 48 / 8%);
  display: grid;
  gap: 18px;
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 22px;
}

.marketing-legal-content section > span {
  align-items: center;
  background: var(--marketing-lilac);
  block-size: 42px;
  border-radius: 50%;
  color: var(--marketing-ink);
  display: flex;
  font-family: var(--marketing-font-display);
  font-weight: 700;
  inline-size: 42px;
  justify-content: center;
}

.marketing-legal-content h2 {
  font-family: var(--marketing-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 6px 0 12px;
}

.marketing-legal-content p,
.marketing-legal-content li {
  color: #4f5662;
  line-height: 1.75;
}

.marketing-legal-content p {
  margin: 0 0 12px;
}

.marketing-legal-content p:last-child {
  margin-block-end: 0;
}

.marketing-legal-content ul {
  margin: 8px 0 14px;
  padding-inline-start: 22px;
}

.marketing-legal-content a {
  color: #2458c4;
  font-weight: 700;
}

.marketing-footer > .marketing-container a:not(.marketing-brand),
.marketing-footer-inner > a:not(.marketing-brand) {
  color: #ffffff;
}

@keyframes marketing-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 620px) {
  .marketing-sign-in {
    display: inline-flex;
  }

  .marketing-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-value-coral {
    grid-column: 1 / -1;
    min-block-size: 360px;
  }

  .marketing-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-steps li {
    display: flex;
    flex-direction: column;
    min-block-size: 220px;
  }

  .marketing-steps li div {
    margin-block-start: 32px;
  }
}

@media (min-width: 900px) {
  .marketing-container {
    inline-size: min(100% - 64px, 1280px);
  }

  .marketing-hero {
    padding: 28px 0 94px;
  }

  .marketing-nav {
    padding: 7px 20px;
  }

  .marketing-nav-main {
    gap: 40px;
  }

  .marketing-nav-links {
    display: flex;
    gap: 28px;
    margin: 0;
  }

  .marketing-hero-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.86fr);
    gap: 72px;
    min-block-size: 700px;
    padding-block-start: 86px;
  }

  .marketing-preview-scene {
    min-block-size: 590px;
  }

  .marketing-value {
    padding-block: 84px;
  }

  .marketing-privacy {
    padding-block: 128px;
  }

  .marketing-how {
    padding-block: 88px;
  }

  .marketing-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-value-coral {
    grid-column: auto;
    min-block-size: 380px;
  }

  .marketing-section-heading {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
    gap: 64px;
  }

  .marketing-privacy-grid {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 90px;
  }

  .marketing-final-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    text-align: start;
  }

  .marketing-final-flower,
  .marketing-final .marketing-action {
    justify-self: auto;
  }

  .marketing-footer-inner {
    align-items: baseline;
    flex-direction: row;
    justify-content: space-between;
  }

  .marketing-legal-hero {
    padding-block: 96px;
  }

  .marketing-legal-content {
    gap: 18px;
    padding-block: 72px 112px;
  }

  .marketing-legal-content section {
    gap: 28px;
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-hero-copy,
  .marketing-preview-scene {
    animation: none;
  }
}

.welcome-card {
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 24px;
}

.class-create-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--peach) 58%, white), transparent 42%)
      top right / 100% 132px no-repeat,
    var(--surface-raised);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(32 36 44 / 8%);
  padding: 24px;
}

.class-create-card h1 {
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.08;
  margin-block: 18px 10px;
}

.privacy-chip {
  background: color-mix(in srgb, var(--privacy) 14%, white);
  border-radius: 999px;
  color: var(--privacy);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 6px 10px;
}

.class-create-card form:first-of-type {
  margin-block-start: 24px;
}

.form-field {
  margin-block: 18px;
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-block-end: 7px;
}

.form-field input {
  appearance: none;
  background: #fff;
  border: 1px solid #d8d9d7;
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  inline-size: 100%;
  padding: 11px 12px;
}

.form-field input[aria-invalid="true"] {
  border-color: var(--error);
}

.field-error {
  color: var(--error);
  font-size: 0.875rem;
  margin-block: 6px 0;
}

.error-summary {
  background: #fff4f2;
  border-inline-start: 4px solid var(--error);
  border-radius: 4px;
  color: var(--ink);
  margin-block: 20px;
  padding: 12px 14px;
}

.error-summary ul {
  margin-block: 8px 0;
  padding-inline-start: 22px;
}

.quiet-action {
  margin-block-start: 12px;
}

.draft-details {
  display: grid;
  gap: 12px;
  margin-block: 24px;
}

.draft-details div {
  background: color-mix(in srgb, var(--sage) 45%, white);
  border-radius: 6px;
  padding: 12px 14px;
}

.draft-details dt {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.draft-details dd {
  font-weight: 700;
  margin: 4px 0 0;
}

.configuration-surface {
  border-block-start: 1px solid #e5e3de;
  display: grid;
  gap: 28px;
  margin-block-start: 28px;
  padding-block-start: 28px;
}

.configuration-copy h2,
.class-preview h2 {
  margin-block: 12px 8px;
}

.fixed-configuration {
  display: grid;
  gap: 10px;
  margin-block: 20px;
}

.fixed-configuration > div {
  background: var(--surface-page);
  border-radius: 6px;
  padding: 12px;
}

.fixed-configuration p,
.preset-option small,
.sample-family small {
  display: block;
  font-size: 0.875rem;
  margin: 4px 0 0;
}

.preset-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.preset-fieldset legend {
  font-weight: 700;
  margin-block-end: 10px;
}

.preset-option {
  align-items: flex-start;
  border: 1px solid #d8d9d7;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  margin-block: 10px;
  min-block-size: 58px;
  padding: 12px;
}

.preset-option:has(input:checked) {
  background: color-mix(in srgb, var(--sage) 45%, white);
  border-color: var(--privacy);
  box-shadow: inset 0 0 0 1px var(--privacy);
}

.preset-option input {
  accent-color: var(--privacy);
  block-size: 22px;
  flex: 0 0 22px;
  inline-size: 22px;
  margin: 1px 0 0;
}

.saved-summary {
  background: color-mix(in srgb, var(--sage) 65%, white);
  border-inline-start: 4px solid var(--privacy);
  border-radius: 4px;
  color: var(--ink);
  padding: 12px 14px;
}

.class-preview {
  background: var(--surface-page);
  border-radius: 8px;
  padding: 18px;
}

.preview-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.preview-badge {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.preview-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(32 36 44 / 8%);
  padding: 18px;
}

.preview-card h3 {
  font-size: 1.5rem;
  margin-block: 16px 4px;
}

.sample-family {
  align-items: center;
  background: color-mix(in srgb, var(--peach) 35%, white);
  border-radius: 6px;
  display: flex;
  gap: 12px;
  margin-block: 18px;
  padding: 12px;
}

.sample-avatar {
  align-items: center;
  background: var(--sage);
  border-radius: 50%;
  display: inline-flex;
  block-size: 44px;
  inline-size: 44px;
  justify-content: center;
}

.default-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.default-chips li {
  background: color-mix(in srgb, var(--privacy) 12%, white);
  border-radius: 999px;
  color: var(--privacy);
  font-size: 0.8125rem;
  padding: 5px 9px;
}

.default-chips li.is-off {
  background: #f1f0ed;
  color: var(--ink-muted);
  opacity: 0.7;
}

.auth-card form {
  margin-block: 24px;
}

.primary-action,
.secondary-action {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  inline-size: 100%;
  padding: 12px 18px;
}

.primary-action {
  background: var(--privacy);
  color: #ffffff;
}

.class-create-card .primary-action {
  margin-block-start: 8px;
}

.secondary-action {
  background: var(--surface-page);
  color: var(--ink);
}

.privacy-note {
  font-size: 0.875rem;
  margin-block-end: 0;
}

h1,
p {
  margin-block-start: 0;
}

p {
  color: var(--ink-muted);
  line-height: 1.5;
}

button,
a,
input,
select,
textarea {
  min-block-size: 44px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.share-surface {
  background: var(--surface-page);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-block-start: 24px;
  padding: 24px;
}

.share-surface h2 {
  margin-block: 12px 8px;
}

.share-link-row,
.share-actions {
  display: grid;
  gap: 10px;
  margin-block: 16px;
}

.share-link {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  overflow-wrap: anywhere;
  padding: 12px;
  user-select: all;
}

.share-message {
  background: var(--surface-card);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  white-space: normal;
}

.share-status {
  color: var(--privacy);
  min-block-size: 1.5em;
}

.share-refresh {
  margin-block-start: 12px;
}

.quiet-button {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  min-block-size: 44px;
  padding: 8px 0;
  text-decoration: underline;
}

.button-link {
  align-items: center;
  display: flex;
  justify-content: center;
  text-decoration: none;
}

.join-card {
  margin-inline: auto;
  max-inline-size: 640px;
}

.join-choice-actions {
  display: grid;
  gap: 12px;
  margin-block: 24px;
}

.join-choice-actions form {
  margin: 0;
}

.join-status {
  min-block-size: 1.5em;
}

.family-card,
.family-flow .admin-preview-card {
  display: grid;
  gap: 18px;
}

.family-card form,
.family-card fieldset,
.review-actions form,
.expected-size-form {
  display: grid;
  gap: 10px;
}

.family-card fieldset {
  border: 1px solid var(--line, #e4e1dc);
  border-radius: 8px;
  padding: 16px;
}

.family-card input,
.expected-size-form input,
.review-actions input {
  border: 1px solid #c8c5bf;
  border-radius: 6px;
  font: inherit;
  min-block-size: 44px;
  padding: 8px 10px;
}

.check-row {
  align-items: center;
  display: flex;
  gap: 8px;
  min-block-size: 44px;
}

.check-row input {
  min-block-size: auto;
}

.consent-row {
  background: var(--sage);
  border-radius: 8px;
  padding: 8px 12px;
}

.roster-stats,
.approved-profile-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.roster-stats > span,
.approved-profile-card,
.review-row {
  background: #f7f5f1;
  border-radius: 8px;
  padding: 12px;
}

.review-list,
.review-facts,
.review-actions,
.profile-actions {
  display: grid;
  gap: 12px;
}

.review-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.review-row div {
  display: grid;
  gap: 4px;
}

.review-row span {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.approved-profile-card h2 {
  margin-block: 8px;
}

.profile-avatar {
  align-items: center;
  background: var(--sage);
  border-radius: 50%;
  display: inline-flex;
  font-weight: 800;
  block-size: 52px;
  inline-size: 52px;
  justify-content: center;
}

.profile-photo {
  object-fit: cover;
}

.htmx-indicator {
  opacity: 0;
  visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-in;
}

.clipboard-fallback {
  position: fixed;
  inset-inline-start: -10000px;
  opacity: 0;
  pointer-events: none;
}

.preview-link-row {
  margin-block: 20px;
  text-align: center;
}

.class-preview-page {
  max-inline-size: 760px;
}

.admin-preview-card {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line, #e4e1dc);
  border-radius: 28px;
  background: #fff;
  padding: clamp(24px, 6vw, 48px);
  box-shadow: 0 20px 60px rgb(58 45 35 / 8%);
}

.admin-preview-card h1 {
  margin: 0;
  color: #20232d;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.05;
}

.class-preview-meta,
.class-preview-policy {
  margin: 0;
  color: #686c75;
  font-size: 1.05rem;
}

.class-preview-identity {
  display: grid;
  gap: 12px;
  margin: 0;
}

.class-preview-identity div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-block-end: 1px solid #efede9;
  padding-block: 10px;
}

.class-preview-identity dt { color: #74777f; }
.class-preview-identity dd { margin: 0; font-weight: 700; }

.empty-collection {
  border-radius: 20px;
  background: #f5f7f4;
  padding: 28px 22px;
  text-align: center;
}

.empty-collection h2 { margin: 8px 0; color: #20232d; }
.empty-collection p { margin: 0; color: #60656c; }
.empty-collection-icon { color: #3f8b83; font-size: 2.5rem; }

.preview-actions {
  display: grid;
  gap: 12px;
}

.preview-actions a { text-align: center; text-decoration: none; }

.published-directory {
  background: var(--class-page);
  color: var(--class-ink);
  display: grid;
  gap: 20px;
}

.app-shell.published-flow {
  inline-size: min(100% - 32px, var(--class-page-width));
  padding-block: 24px;
}

.published-flow {
  font-family: var(--font-body);
}

.published-header {
  display: grid;
  gap: 12px;
  padding-block: 12px 4px;
  padding-inline: 6px 4px;
}

.published-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 10vw, 4rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 8px 0 0;
}

.published-header p {
  color: var(--class-ink-soft);
  margin: 0;
}

.status-indicator {
  background: var(--class-row);
  border: 2px solid var(--graphic-border);
  border-radius: var(--radius-lg);
  color: var(--class-ink);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  inline-size: 100%;
  min-block-size: 72px;
  overflow: hidden;
}

.status-indicator-private {
  box-shadow: var(--graphic-shadow);
}

.status-indicator-icon {
  align-items: center;
  background: var(--class-accent);
  color: var(--class-accent-text);
  display: flex;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  justify-content: center;
}

.status-indicator-icon svg {
  block-size: 25px;
  inline-size: 25px;
}

.status-indicator-copy {
  align-content: center;
  display: grid;
  min-inline-size: 0;
  padding: 10px 13px;
}

.status-indicator-copy strong,
.status-indicator-copy small {
  display: block;
}

.status-indicator-copy strong {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

.status-indicator-copy small {
  color: var(--class-ink-soft);
  font-size: var(--text-caption);
  line-height: 1.35;
  margin-block-start: 4px;
}

.status-indicator-compact {
  border-radius: var(--radius-sm);
  box-shadow: none;
  grid-template-columns: 38px minmax(0, 1fr);
  inline-size: fit-content;
  min-block-size: 44px;
}

.status-indicator-compact .status-indicator-copy {
  padding: 7px 10px;
}

.status-indicator-approved .status-indicator-icon {
  background: var(--kita-success);
  color: var(--kita-white);
}

.directory-search {
  background: var(--class-row);
  border: 1px solid var(--class-line);
  border-radius: 16px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.directory-search label { font-size: 0.82rem; font-weight: 700; }

.directory-search input {
  border: 1px solid #d8d4ce;
  border-radius: 10px;
  font: inherit;
  min-block-size: 48px;
  padding-inline: 14px;
}

.directory-list { display: grid; gap: 10px; }

.directory-row {
  background: var(--class-row);
  border: 1px solid var(--class-line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgb(58 45 35 / 5%);
}

.directory-row-link {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 12px;
  min-block-size: 76px;
  padding: 12px 16px;
  text-decoration: none;
}

.directory-row-copy { display: grid; gap: 3px; }
.directory-row-copy small { color: var(--class-ink-soft); }
.row-arrow { color: var(--class-accent); font-size: 1.3rem; margin-inline-start: auto; }
.avatar-peach { background: var(--peach); }
.avatar-sky { background: #d7edf1; }
.avatar-sage { background: var(--sage); }
.avatar-mauve { background: #e8dce8; }
.avatar-apricot { background: #f7e2c5; }

.profile-sheet-target:empty { display: none; }

.profile-sheet {
  background: var(--class-row);
  border: 1px solid var(--class-line);
  border-radius: 22px;
  box-shadow: 0 20px 55px rgb(58 45 35 / 12%);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.profile-sheet-head { align-items: center; display: flex; gap: 12px; }
.profile-sheet-head h2 { margin: 0; }
.profile-sheet-title { display: grid; flex: 1; gap: 8px; min-inline-size: 0; }
.profile-guardians,
.profile-contacts { border-block-start: 1px solid var(--class-line); padding-block-start: 14px; }
.profile-guardians h3,
.profile-contacts h3 { font-size: 1rem; margin: 0 0 10px; }
.profile-guardians p { display: flex; gap: 8px; margin: 8px 0; }
.profile-guardians span { color: var(--class-ink-soft); }
.profile-contacts { display: grid; gap: 14px; }

.published-flow .contact-action {
  align-items: center;
  border: 2px solid var(--class-control-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--class-control-shadow);
  color: var(--class-ink);
  display: grid;
  gap: 14px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  inline-size: 100%;
  min-block-size: 88px;
  padding: 14px;
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.published-flow .contact-action:visited {
  color: var(--class-ink);
}

.published-flow .contact-action-whatsapp {
  background: var(--class-action-whatsapp);
}

.published-flow .contact-action-call,
.published-flow .contact-action-sms {
  background: var(--class-action-call);
  color: var(--kita-white);
}

.published-flow .contact-action-call:visited,
.published-flow .contact-action-sms:visited,
.published-flow .contact-action-email:visited {
  color: var(--kita-white);
}

.published-flow .contact-action-email {
  background: var(--kita-ink-900);
  color: var(--kita-white);
}

.contact-action-icon {
  align-items: center;
  block-size: 52px;
  border: 2px solid currentcolor;
  border-radius: 50%;
  display: flex;
  inline-size: 52px;
  justify-content: center;
}

.contact-action-icon svg {
  block-size: 27px;
  inline-size: 27px;
}

.contact-action-copy {
  display: grid;
  min-inline-size: 0;
}

.contact-action-copy strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
}

.contact-action-copy small {
  color: inherit;
  direction: ltr;
  margin-block-start: 5px;
  opacity: 0.78;
  overflow-wrap: anywhere;
  text-align: start;
}

.contact-action-cue {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .published-flow .contact-action:hover {
    box-shadow: 3px 3px 0 var(--class-control-border);
    transform: translate(3px, 3px);
  }
}

.published-flow .contact-action:active {
  box-shadow: none;
  transform: translate(6px, 6px);
}

.published-flow :focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

.published-flow .contact-action:focus-visible {
  box-shadow: var(--class-control-shadow), var(--focus-ring);
}

.directory-empty {
  background: var(--class-row);
  border: 1px solid var(--class-line);
  color: var(--class-ink);
  margin-block: 12px;
}
.published-flow .directory-empty p { color: var(--class-ink-soft); }
.class-links { border-block-start: 1px solid var(--border); margin-block-start: 24px; padding-block-start: 18px; }
.class-links h2 { color: var(--ink-muted); font-size: 1rem; margin-block: 0 10px; }
.class-link-list { display: grid; gap: 8px; }
.class-link-row { align-items: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); display: flex; justify-content: space-between; min-block-size: 48px; padding: 10px 14px; text-decoration: none; }
.quiet-referral { color: var(--ink-muted); font-size: .85rem; margin-block: 28px 0; text-align: center; }
.quiet-referral a { color: inherit; }
.review-comparison { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-comparison article { background: var(--surface-alt); border-radius: 8px; padding: 14px; }
.review-comparison h2 { font-size: 1rem; margin-block-start: 0; }
.theme-calm_sage { --surface-alt: #edf4ee; --sage: #dfece1; }
.theme-calm_peach { --surface-alt: #fbefea; --sage: #f4e2d9; }

@media (min-width: 600px) {
  .preview-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .app-shell {
    inline-size: min(100% - 96px, 720px);
    padding-block: 48px;
  }

  .app-shell.published-flow {
    inline-size: min(100% - 96px, var(--class-page-width));
    padding-block: 48px;
  }

  .class-create-card {
    padding: 40px;
  }

  .share-link-row {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 160px;
  }

  .share-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .published-flow *,
  .published-flow *::before,
  .published-flow *::after {
    transition-duration: 0ms !important;
  }
}