/* hebrew */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/home/assistant.v24.hebrew.4889f1d1e6c8.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/home/assistant.v24.latin-ext.312b029354b9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/home/assistant.v24.latin.93ba70e47226.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* blue */
  --blue-50: #F0F4FE;
  --blue-100: #E1EAFD;
  --blue-200: #C3D4FB;
  --blue-300: #8FAFF6;
  --blue-400: #5A85EF;
  --blue-500: #3265DB;
  --blue-600: #2A54BC;
  --blue-700: #234190;
  --blue-800: #1C3470;
  --blue-900: #152650;
  /* supporting coral accent */
  --coral-50: #FFF6F2;
  --coral-100: #FDE7DF;
  --coral-200: #F8C7B7;
  --coral-500: #E76F51;
  --coral-700: #A43E2B;
  /* grey */
  --grey-0: #FFFFFF;
  --grey-25: #FBFCFD;
  --grey-50: #F6F8FB;
  --grey-100: #EDF0F5;
  --grey-200: #E1E6EE;
  --grey-300: #CBD2DE;
  --grey-400: #9BA3B0;
  --grey-500: #6B7480;
  --grey-600: #4E5663;
  --grey-700: #383F4A;
  --grey-800: #232833;
  --grey-900: #12141A;

  /* semantic state */
  --success: #1E8A5F;
  --success-soft: #E8F4EF;
  --warning: #B4762C;
  --warning-soft: #FBF1E3;
  --danger: #C0392B;
  --danger-soft: #FBEBE9;

  /* spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s24: 96px;

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;
  --r-paper: 4px;

  /* elevation */
  --sh-xs: 0 1px 2px rgba(30, 35, 48, .05);
  --sh-sm: 0 2px 8px rgba(30, 35, 48, .06);
  --sh-md: 0 8px 24px rgba(30, 35, 48, .08);
  --sh-lg: 0 16px 48px rgba(30, 35, 48, .10);
  --sh-focus: 0 0 0 3px rgba(50, 101, 219, .28);

  /* motion */
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font: "Assistant", "Heebo", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shell: 1160px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  background: var(--grey-0);
  color: var(--grey-900);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

/* numerals stay LTR inside Hebrew runs */
.n {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* type scale */
.t-display {
  font-size: clamp(2.75rem, 8vw, 5rem);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.t-question {
  font-size: clamp(1.85rem, 5.5vw, 3.25rem);
  font-weight: 250;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
}

/*
 * Keeps a phrase on one line. "text-wrap: balance" evens out line lengths but
 * has no idea which words belong together, so on a narrow phone it happily
 * splits לכיתה - ₪49 across two lines. Wrapping the units the copy was
 * written in says where a break is allowed, and balance handles the rest.
 */
.nb {
  white-space: nowrap;
}

.t-title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.t-subtitle {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.5;
  text-wrap: pretty;
}

.t-body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
}

.t-small {
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

.t-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
}

.muted {
  color: var(--grey-500);
}

.strong-muted {
  color: var(--grey-600);
}

/* layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s5);
}

@media (min-width: 768px) {
  .shell {
    padding-inline: var(--s10);
  }
}

section {
  padding-block: var(--s16);
}

@media (min-width: 900px) {
  section {
    padding-block: var(--s24);
  }
}

.band-tint {
  background: var(--grey-50);
}

.stack {
  display: flex;
  flex-direction: column;
}

.g1 { gap: var(--s1); }
.g2 { gap: var(--s2); }
.g3 { gap: var(--s3); }
.g4 { gap: var(--s4); }
.g5 { gap: var(--s5); }
.g6 { gap: var(--s6); }
.g8 { gap: var(--s8); }
.g10 { gap: var(--s10); }
.g12 { gap: var(--s12); }
.g16 { gap: var(--s16); }

.measure {
  max-width: 34rem;
}

.prose {
  max-width: 60ch;
  text-wrap: pretty;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  color: var(--grey-400);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding-inline: var(--s6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--blue-500);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform 100ms var(--ease);
}

.btn:hover {
  background: var(--blue-600);
}

.btn:active {
  transform: scale(.97);
}

.ghost {
  color: var(--grey-500);
  text-decoration: none;
  font-size: 1rem;
  padding-block: var(--s2);
}

.ghost:hover {
  text-decoration: underline;
}

/* nav */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-block-end: 1px solid var(--grey-100);
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 64px;
}

.brand {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--grey-900);
}

.brand-dim {
  color: var(--grey-400);
}

.nav-links {
  display: none;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-links a {
  color: var(--grey-500);
  text-decoration: none;
  font-size: .9375rem;
}

.nav-links a:hover {
  color: var(--grey-900);
}

.nav-cta {
  font-weight: 500;
  color: var(--grey-900);
}

/* hero */
/*
 * The bottom padding is deliberately smaller than the top. A tinted band used to sit directly
 * under the hero and absorb the seam; without it the hero's bottom padding and the next
 * section's top padding stack against plain white and read as a hole in the page.
 */
.hero {
  padding-block: var(--s16) var(--s10);
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--s20) var(--s12);
  }
}

/* The other half of that seam. Sections further down keep the full rhythm between them. */
.hero + section {
  padding-block-start: var(--s10);
}

@media (min-width: 900px) {
  .hero + section {
    padding-block-start: var(--s12);
  }
}

.hero-grid {
  display: grid;
  gap: var(--s16);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s12);
  }

  .fan figure {
    width: 82%;
  }
}

.hero h1 {
  font-size: clamp(2.75rem, 8.5vw, 4.75rem);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.hero h1 .price {
  font-weight: 450;
  letter-spacing: -.03em;
}

.hero-sub {
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  color: var(--grey-600);
  max-width: 36ch;
  line-height: 1.5;
  font-weight: 400;
  text-wrap: pretty;
}

.hero-note {
  color: var(--grey-400);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}

/* the fanned deliverable */
.fan {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5;
  isolation: isolate;
}

.fan figure {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 88%;
  margin: 0;
  border-radius: var(--r-paper);
  overflow: hidden;
  background: var(--grey-0);
  box-shadow: var(--sh-md);
  transform-origin: center;
}

.fan img {
  border-radius: var(--r-paper);
}

.fan .f1 {
  transform: translate(50%, -50%) rotate(-12deg) translate(-9%, -11%) scale(.92);
  opacity: .78;
  filter: saturate(.82);
  z-index: 1;
}

.fan .f2 {
  transform: translate(50%, -50%) rotate(-7.5deg) translate(-5%, -7%) scale(.95);
  opacity: .86;
  filter: saturate(.88);
  z-index: 2;
}

.fan .f3 {
  transform: translate(50%, -50%) rotate(-3.5deg) translate(-2%, -3%) scale(.98);
  opacity: .93;
  z-index: 3;
}

.fan .f4 {
  transform: translate(50%, -50%) rotate(1.8deg) translate(3%, 5%);
  box-shadow: var(--sh-lg);
  z-index: 4;
}

/* one-line band - the sheet filling itself */
.oneline {
  padding-block: var(--s16);
  text-align: center;
}

.fill-lead {
  max-width: 34ch;
  margin-inline: auto;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  font-weight: 250;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--grey-900);
  text-wrap: balance;
}

.fill-sub {
  margin: var(--s3) auto 0;
  max-width: 36ch;
  font-size: 1rem;
  color: var(--grey-500);
  text-wrap: pretty;
}

/*
 * The two-actor split, stated as a diagram: families type, you approve, the
 * sheet comes out. This is the page's core claim, so it gets a shape rather
 * than another sentence.
 */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2) var(--s3);
  margin: var(--s8) auto 0;
  /* Wide enough that the three pills sit on one row on a desktop; flex-wrap
     folds them onto separate lines on a phone. */
  max-width: 46rem;
}

.flow li {
  display: inline-flex;
  align-items: center;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  background: var(--grey-0);
  border: 1px solid var(--grey-200);
  box-shadow: var(--sh-xs);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--grey-700);
  white-space: nowrap;
}

.flow li.flow-out {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

.flow li.arrow {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: var(--grey-300);
  font-size: 1.15rem;
  font-weight: 400;
}

.fill-stage {
  width: min(100%, 420px);
  margin: var(--s10) auto 0;
  aspect-ratio: 1 / 1.32;
  border-radius: 6px;
  background: var(--grey-0);
  box-shadow: 0 10px 40px rgb(30 35 48 / 10%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fill-band {
  flex: 0 0 auto;
  padding: var(--s4) var(--s4) var(--s3);
  background: linear-gradient(115deg, #ffe9d6, #ffd9e4 46%, #e2d9fb);
  text-align: center;
}

.fill-band b {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: #3d3a4a;
  letter-spacing: -.01em;
}

.fill-band span {
  display: block;
  margin-block-start: 2px;
  font-size: .7rem;
  color: #6d687d;
}

.fill-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3) var(--s2);
  padding: var(--s4) var(--s3);
  align-content: start;
}

.fill-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.fill-dot {
  width: clamp(30px, 9.5vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed var(--grey-300);
  background: transparent;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: transparent;
  transition:
    background-color .32s ease,
    border-color .32s ease,
    color .32s ease;
}

.fill-name {
  height: 6px;
  width: 76%;
  border-radius: 3px;
  background: var(--grey-100);
  transition: background-color .32s ease;
}

.fill-cell.on .fill-dot {
  border-style: solid;
  border-color: transparent;
  color: #4a4356;
}

.fill-cell.on .fill-name {
  background: var(--grey-300);
}

.fill-count {
  margin-block-start: var(--s5);
  font-size: 1rem;
  color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}

.fill-count b {
  color: var(--grey-900);
  font-weight: 600;
  unicode-bidi: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .fill-dot,
  .fill-name {
    transition: none;
  }
}

/* steps */
.steps {
  display: grid;
  gap: var(--s5);
}

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

@media (min-width: 1040px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4);
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--grey-0);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: var(--s6);
}

@media (min-width: 1040px) {
  .step {
    padding: var(--s8) var(--s6);
  }
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  font-size: .875rem;
  font-weight: 600;
  color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.step p {
  color: var(--grey-500);
  font-size: .9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.tag {
  align-self: flex-start;
  margin-block-start: auto;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--grey-600);
}

.tag-pay {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

/* designs */
.designs {
  padding-block: var(--s20);
}

@media (min-width: 900px) {
  .designs {
    padding-block: var(--s24);
  }
}

/*
 * Designs carousel. A scroll-snapping rail rather than a JS slider: with
 * scripting off it degrades to an ordinary horizontal scroller that still
 * reaches all eight designs, and the browser keeps the RTL scrolling correct
 * for free. The arrows below just call scrollIntoView on the next card.
 */
.design-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.design-rail {
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the cards' drop shadow, which a clipped overflow would cut off. */
  padding-block: var(--s2);
  padding-inline: var(--s1);
  margin-inline: calc(var(--s1) * -1);
  scrollbar-width: none;
}

.design-rail::-webkit-scrollbar {
  display: none;
}

.design-rail:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-md);
}

.design-rail > .design {
  flex: 0 0 82%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .design-rail > .design {
    flex-basis: calc((100% - var(--s5)) / 2);
  }
}

@media (min-width: 960px) {
  .design-rail {
    gap: var(--s6);
  }

  .design-rail > .design {
    flex-basis: calc((100% - var(--s6) * 2) / 3);
  }
}

.design-nav {
  display: flex;
  gap: var(--s3);
  justify-content: center;
}

.design-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-full);
  background: var(--grey-0);
  color: var(--grey-700);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.design-arrow svg {
  width: 20px;
  height: 20px;
}

.design-arrow:hover:not(:disabled) {
  border-color: var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-700);
}

.design-arrow:disabled {
  opacity: .35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .design-rail {
    scroll-behavior: auto;
  }
}

.design {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
  text-align: start;
  border-radius: var(--r-md);
}

/*
 * Fixed to the sheet's own aspect ratio. The artwork sources are not all cut to
 * the same shape, and without this the grid rows would step up and down as the
 * illustrations changed proportion.
 */
.design .paper {
  position: relative;
  aspect-ratio: 1.414;
  border-radius: var(--r-paper);
  overflow: hidden;
  background: var(--grey-0);
  box-shadow: var(--sh-md);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.design .paper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design:hover .paper {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.design figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding-block-start: var(--s3);
}

/*
 * Watermark over the artwork-only renders. A CSS overlay rather than pixels
 * baked into the JPEG: the published image stays clean for any other use, and
 * the wordmark can change without regenerating eight assets. It is a deterrent,
 * not a protection - anyone determined can screenshot around it.
 *
 * "direction: ltr" is required. The page is RTL, and a bare Latin run with a
 * dot in it gets its punctuation reordered by the bidi algorithm.
 */
.wm {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Grid centring rather than inset + translate: a physical translate does not
     mirror, so on an RTL page the offset maths would land off-centre. */
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.wm i,
.wm::before,
.wm::after {
  direction: ltr;
  unicode-bidi: isolate;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  /* Tight 1px halo, not a soft glow - a blurred shadow reads as blurred text. */
  text-shadow: 0 1px 1px rgba(18, 20, 26, .45);
  -webkit-font-smoothing: antialiased;
  transform: rotate(-20deg);
}

.wm i {
  font-size: clamp(1.05rem, 3.1vw, 1.9rem);
}

.wm::before,
.wm::after {
  content: "kita.page";
  position: absolute;
  font-size: clamp(.65rem, 1.7vw, 1rem);
  color: rgba(255, 255, 255, .55);
}

.wm::before {
  inset-inline-start: 12%;
  inset-block-start: 14%;
}

.wm::after {
  inset-inline-end: 12%;
  inset-block-end: 14%;
}

.design figcaption b {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
}

/* families */
.facts {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 720px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
  }
}

.fact {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s6);
  background: var(--grey-0);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.fact svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--grey-400);
  margin-block-start: 2px;
}

.fact p {
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Search-intent answers stay visible and editorial: useful reading, not an SEO
   accordion or another field of cards competing with the product story. */
.search-answers {
  border-block: 1px solid var(--grey-100);
}

.answer-grid {
  display: grid;
  border-block-start: 1px solid var(--grey-200);
}

.answer {
  padding-block: var(--s6);
  border-block-end: 1px solid var(--grey-200);
}

.answer dt {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  text-wrap: balance;
}

.answer dd {
  max-inline-size: 48ch;
  margin-block-start: var(--s2);
  color: var(--grey-500);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (min-width: 780px) {
  .answer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s12);
  }

  .answer {
    padding-block: var(--s8);
  }
}

.answer-guide-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: none;
  border-block-end: 1px solid var(--blue-200);
}

.answer-guide-link a:hover {
  border-block-end-color: var(--blue-500);
}

/* pricing */
.plans {
  display: grid;
  gap: var(--s5);
  align-items: start;
}

@media (min-width: 820px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  background: var(--grey-0);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: var(--s6);
}

@media (min-width: 820px) {
  .plan {
    padding: var(--s8);
  }
}

.plan-accent {
  border-color: var(--blue-200);
  box-shadow: var(--sh-sm);
}

.plan-price {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: 1;
  text-align: start;
}

.plan-meta {
  color: var(--grey-500);
  font-size: .9375rem;
}

.plan h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.plan ul {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.plan li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  color: var(--grey-700);
  font-size: 1rem;
  line-height: 1.5;
}

.plan li svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--grey-400);
  margin-block-start: 4px;
}

.plan-accent li svg {
  color: var(--blue-500);
}

.plan-rule {
  height: 1px;
  background: var(--grey-100);
}

/* quiet upsell line */
/*
 * The quiet cross-sell for the live class page. It used to be a sentence with a
 * link inside it, which read as body copy and invited nothing. As a card the
 * whole row is the target, and it is legible as something to press without
 * competing with the primary create-class button.
 */
.upsell {
  display: flex;
  align-items: center;
  gap: var(--s4);
  max-width: 44rem;
  margin: var(--s12) auto;
  padding: var(--s5) var(--s6);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: var(--grey-25);
  color: var(--grey-700);
  text-decoration: none;
  text-align: start;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.upsell:hover {
  border-color: var(--blue-200);
  background: var(--blue-50);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.upsell-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--blue-100);
  /* An emoji, so line-height has to be pinned or the glyph sits off-centre. */
  font-size: 2.0rem;
  line-height: 1;
}

.upsell-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.upsell-text b {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--grey-900);
}

.upsell-text span {
  font-size: .875rem;
  color: var(--grey-500);
  text-wrap: pretty;
}

.upsell-go {
  flex: none;
  margin-inline-start: auto;
  color: var(--blue-700);
  font-size: 1.1rem;
  transition: transform var(--t-fast) var(--ease);
}

/* Negative X: the page is RTL and the arrow points ←, so "forward" is left. */
.upsell:hover .upsell-go {
  transform: translateX(-4px);
}

/* final */
.final {
  text-align: center;
}

.final .stack {
  align-items: center;
}

/* footer */
footer {
  border-block-start: 1px solid var(--grey-100);
  padding-block: var(--s10);
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  align-items: center;
  justify-content: space-between;
}

.foot-brand {
  font-weight: 600;
  letter-spacing: -.02em;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.foot-links a {
  color: var(--grey-500);
  text-decoration: none;
  font-size: .875rem;
}

.foot-links a:hover {
  color: var(--grey-900);
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  background: rgba(18, 20, 26, .72);
  backdrop-filter: blur(4px);
}

.lightbox[open] {
  display: flex;
}

/* Wraps the image so the watermark can sit over it and clip to its corners. */
.lb-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: var(--r-paper);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.lightbox img {
  max-width: min(1400px, 96vw);
  max-height: 88vh;
  width: auto;
  border-radius: var(--r-paper);
  background: #fff;
}

.wm-lb i {
  font-size: clamp(1.5rem, 4.5vw, 3.2rem);
  color: rgba(255, 255, 255, .72);
}

.wm-lb::before,
.wm-lb::after {
  font-size: clamp(.85rem, 2vw, 1.4rem);
}

.lb-close {
  position: absolute;
  inset-block-start: var(--s5);
  inset-inline-end: var(--s5);
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--grey-900);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-cap {
  position: absolute;
  inset-block-end: var(--s6);
  inset-inline: 0;
  text-align: center;
  color: rgba(255, 255, 255, .86);
  font-size: .9375rem;
}

/* ── live class page (/live-page) ──────────────────────────────────────────
   The secondary page reuses every token and nearly every component above.
   Only what follows is specific to it, which is why it ships inside this same
   stylesheet instead of a second request. */

/* back to the homepage. The chevron points along the reading direction, so
   under dir="rtl" it renders as a left-pointing "back". */
.back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  align-self: flex-start;
  padding-block: var(--s1);
  color: var(--grey-500);
  text-decoration: none;
  font-size: .9375rem;
}

.back:hover {
  color: var(--grey-900);
}

.back svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* "included in the ₪49" badge */
.chip {
  align-self: flex-start;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-700);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.005em;
}

/*
 * The phone page's transition is a real second beat, not a padded caption.
 * Its oversized promise carries the eye out of the product hero while the
 * adjacent sentence explains the everyday job before the feature grid begins.
 */
.live-payoff {
  padding-block: var(--s12);
}

.live-payoff-grid {
  display: grid;
  align-items: end;
  gap: var(--s6);
}

.live-payoff h2 {
  max-inline-size: 12ch;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 250;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.live-payoff-copy {
  max-inline-size: 44ch;
  color: var(--grey-600);
  font-size: 1.125rem;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (min-width: 800px) {
  .live-payoff {
    padding-block: var(--s16);
  }

  .live-payoff-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: var(--s12);
  }

  .live-payoff-copy {
    padding-inline-start: var(--s6);
    border-inline-start: 1px solid var(--blue-200);
  }
}

/* The hero's second column is a portrait phone capture, so it is sized by its
   own content rather than sharing the homepage's balanced split. */
@media (min-width: 900px) {
  .hero-grid-shot {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s12);
  }
}

/* Real product screenshot. It already reads as a phone, so there is no drawn
   bezel - a radius and a soft shadow only. Height is the binding constraint,
   which both keeps the portrait capture off the whole fold on desktop and,
   because the ratio is preserved, holds the painted width near 265px so 375px
   viewports never overflow. */
.shot {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  max-inline-size: 100%;
  margin-inline: auto;
}

.shot picture {
  display: contents;
}

.shot img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: min(72vh, 560px);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(30, 35, 48, .16), 0 2px 8px rgba(30, 35, 48, .08);
}

.shot figcaption {
  max-inline-size: 26ch;
  color: var(--grey-500);
  font-size: .9375rem;
  line-height: 1.5;
  text-align: center;
}

/* This page's feature cards carry a heading above the copy, so the icon sits
   above the text block rather than beside it. */
.fact-stacked {
  flex-direction: column;
  gap: var(--s4);
}

.fact-stacked h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.fact-stacked p {
  color: var(--grey-500);
  font-size: 1rem;
  line-height: 1.55;
}

/* plain checked list (what stays private) */
.plain {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 52ch;
}

.plain li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--grey-700);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.plain li svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-block-start: 5px;
  color: var(--blue-500);
}

/* ── legal pages (/terms, /privacy) ────────────────────────────────────────
   Terms and privacy dropped the application sheet and joined this one, so a
   visitor arriving from the marketing footer keeps the same nav, type scale
   and blue instead of crossing into the application surface. Only the
   numbered clause body below is specific to them. */

.legal-hero {
  padding-block: var(--s12) var(--s10);
}

@media (min-width: 900px) {
  .legal-hero {
    padding-block: var(--s16) var(--s12);
  }
}

/* One step down from the homepage's display size: this is a document title,
   not a sales headline. */
.legal-hero h1 {
  font-size: clamp(2.25rem, 6.5vw, 3.5rem);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.legal {
  padding-block: 0 var(--s16);
}

/* The clauses run the full shell width rather than sitting in a reading column
   - a legal document read in scans, not prose read line by line. The ch cap
   only bites past ~1400px, where the shell itself stops growing. */
.legal-body {
  display: flex;
  flex-direction: column;
  max-width: 150ch;
}

/* The bare section rule carries this sheet's page-level rhythm, so the clauses
   - which are sections nested inside one - opt out of it and set their own,
   separated by a hairline rather than by whitespace alone. */
.legal-body > section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s8);
  border-block-start: 1px solid var(--grey-100);
}

.legal-body > section:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

/* clause number */
.legal-body > section > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-block-start: 2px;
  border-radius: var(--r-full);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-700);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  direction: ltr;
}

.legal-body > section > div {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.legal-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.legal-body p {
  color: var(--grey-600);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* the reset drops list markers, so the bullet is drawn back on the inline
   start edge and follows the reading direction. */
.legal-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.legal-body li {
  position: relative;
  padding-inline-start: var(--s5);
  color: var(--grey-600);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.legal-body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .68em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--blue-300);
}

.legal-body strong {
  color: var(--grey-800);
  font-weight: 600;
}

.legal-body a {
  color: var(--blue-700);
  text-decoration: none;
  border-block-end: 1px solid var(--blue-200);
}

.legal-body a:hover {
  border-block-end-color: var(--blue-500);
}

@media (max-width: 599px) {
  .legal-body > section {
    gap: var(--s3);
  }

  .legal-body > section > span {
    width: 28px;
    height: 28px;
  }
}

/* ── Guides (/guides, /guides/daf-kesher) ──────────────────────────────────
   A compact editorial layer on the existing marketing system. The article
   keeps the homepage's type, colour and shell, then adds one paper metaphor
   for the copy-ready WhatsApp messages. */
.guides-hero {
  padding-block: var(--s20) var(--s12);
  border-block-end: 1px solid var(--grey-100);
}

.guides-hero h1 {
  max-inline-size: 16ch;
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 200;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.guides-list {
  padding-block: var(--s16) var(--s24);
}

.guide-card {
  max-inline-size: 56rem;
}

.guide-card > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  padding: var(--s8);
  color: inherit;
  background: var(--grey-25);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.guide-card > a:hover {
  border-color: var(--blue-200);
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}

.guide-card-index {
  align-self: start;
  color: var(--blue-500);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  direction: ltr;
}

.guide-card h3 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.guide-card p:last-child {
  max-inline-size: 48ch;
  color: var(--grey-600);
  line-height: 1.65;
}

.guide-card-arrow {
  color: var(--blue-700);
  font-size: 1.4rem;
  transition: transform var(--t-fast) var(--ease);
}

.guide-card > a:hover .guide-card-arrow {
  transform: translateX(-4px);
}

.guide-hero {
  padding-block: var(--s10) var(--s16);
  overflow: clip;
}

.guide-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s12);
  color: var(--grey-500);
  font-size: .875rem;
}

.guide-breadcrumbs a {
  text-decoration: none;
}

.guide-breadcrumbs a:hover {
  color: var(--grey-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.guide-hero-grid {
  display: grid;
  align-items: center;
  gap: var(--s12);
}

.guide-hero h1 {
  max-inline-size: 12ch;
  font-size: clamp(3.1rem, 8.5vw, 5.8rem);
  font-weight: 200;
  letter-spacing: -.05em;
  line-height: .98;
  text-wrap: balance;
}

.guide-lede {
  max-inline-size: 44rem;
  margin-block-start: var(--s6);
  color: var(--grey-600);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.guide-meta {
  margin-block-start: var(--s5);
  color: var(--grey-400);
  font-size: .875rem;
}

.guide-contents {
  position: relative;
  padding: var(--s6);
  background: #fffaf0;
  border: 1px solid #f0e4d0;
  border-radius: var(--r-paper);
  box-shadow: var(--sh-md);
  transform: rotate(1deg);
}

.guide-contents::before {
  content: "";
  position: absolute;
  inset: var(--s2) calc(var(--s2) * -1) calc(var(--s2) * -1) var(--s2);
  z-index: -1;
  background: var(--grey-0);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-paper);
}

.guide-contents > p {
  padding-block-end: var(--s4);
  color: var(--grey-500);
  border-block-end: 1px solid #e7dac5;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.guide-contents ol {
  counter-reset: guide-contents;
}

.guide-contents li {
  counter-increment: guide-contents;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s4);
  border-block-end: 1px solid #eadfce;
}

.guide-contents li:last-child {
  border-block-end: 0;
}

.guide-contents li::before {
  content: "0" counter(guide-contents);
  color: var(--blue-500);
  font-size: .75rem;
  font-weight: 700;
  direction: ltr;
}

.guide-contents a {
  color: var(--grey-800);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.guide-contents a:hover {
  color: var(--blue-700);
}

@media (min-width: 880px) {
  .guide-hero-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .55fr);
  }
}

.guide-intro {
  padding-block: var(--s12);
  color: var(--grey-0);
  background: var(--blue-900);
}

.guide-intro-grid {
  display: grid;
  gap: var(--s5);
}

.guide-kicker {
  color: var(--blue-200);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.guide-intro-grid > p:last-child {
  max-inline-size: 52rem;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  font-weight: 250;
  line-height: 1.35;
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .guide-intro-grid {
    grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr);
    gap: var(--s12);
  }
}

.guide-body {
  max-inline-size: var(--shell);
}

.guide-section {
  display: grid;
  gap: var(--s8);
  padding-block: var(--s20);
  border-block-end: 1px solid var(--grey-200);
  scroll-margin-block-start: 6rem;
}

.guide-rail {
  align-self: start;
}

.guide-rail > span {
  display: block;
  color: var(--blue-500);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  direction: ltr;
}

.guide-rail p {
  margin-block-start: var(--s3);
  color: var(--grey-500);
  font-size: .875rem;
}

.guide-section-body {
  max-inline-size: 43rem;
}

.guide-section-body h2 {
  font-size: clamp(2.35rem, 6vw, 4rem);
  font-weight: 250;
  letter-spacing: -.04em;
  line-height: 1.03;
  text-wrap: balance;
}

.guide-deck {
  margin-block-start: var(--s5);
  margin-block-end: var(--s10);
  color: var(--grey-600);
  font-size: 1.125rem;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .guide-section {
    grid-template-columns: 9rem minmax(0, 43rem);
    justify-content: space-between;
    gap: var(--s12);
  }

  .guide-rail {
    position: sticky;
    inset-block-start: 6rem;
  }
}

.guide-check-group + .guide-check-group {
  margin-block-start: var(--s10);
}

.guide-check-group h3 {
  margin-block-end: var(--s3);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.guide-check-list {
  border-block-start: 1px solid var(--grey-200);
}

.guide-check-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s4);
  border-block-end: 1px solid var(--grey-200);
}

.guide-check-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-block-start: 2px;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
}

.guide-check-list strong {
  display: block;
  color: var(--grey-800);
  font-weight: 600;
}

.guide-check-list small {
  display: block;
  margin-block-start: 2px;
  color: var(--grey-500);
  font-size: .9375rem;
  line-height: 1.55;
}

.guide-note {
  margin-block-start: var(--s8);
  padding: var(--s5) var(--s6);
  color: var(--grey-600);
  background: var(--blue-50);
  border-inline-start: 3px solid var(--blue-500);
  line-height: 1.65;
}

.guide-note strong {
  color: var(--blue-800);
}

.guide-message {
  position: relative;
  margin-block-start: var(--s8);
  padding: var(--s8);
  background: linear-gradient(transparent 37px, rgba(21, 38, 80, .065) 38px), #fffaf0;
  background-size: 100% 38px;
  border: 1px solid #f0e4d0;
  border-radius: var(--r-paper);
  box-shadow: var(--sh-sm);
}

.guide-message blockquote {
  white-space: pre-line;
  font-size: 1.0625rem;
  line-height: 2.1;
}

.guide-copy {
  position: absolute;
  inset-block-start: -15px;
  inset-inline-end: var(--s5);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-inline: var(--s4);
  color: var(--blue-900);
  background: #f6cda6;
  border: 1px solid rgba(21, 38, 80, .08);
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.guide-copy:hover {
  background: #f2bf8e;
  transform: translateY(-1px);
}

.guide-copy[data-state="copied"] {
  color: var(--grey-0);
  background: var(--blue-500);
}

.guide-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.guide-message-note {
  margin-block-start: var(--s5);
  color: var(--grey-500);
  font-size: .875rem;
}

.guide-privacy {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s4);
  margin-block-start: var(--s10);
  padding-block-start: var(--s6);
}

.guide-privacy > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--blue-700);
  background: var(--blue-50);
  border-radius: var(--r-full);
}

.guide-privacy h3 {
  margin-block-end: var(--s1);
  font-size: 1.0625rem;
  font-weight: 600;
}

.guide-privacy p {
  color: var(--grey-600);
  line-height: 1.65;
}

.guide-cta-wrap {
  padding-block: var(--s20);
}

.guide-cta {
  position: relative;
  display: grid;
  gap: var(--s10);
  align-items: end;
  padding: var(--s10);
  overflow: hidden;
  color: var(--grey-0);
  background: var(--blue-900);
  border-radius: var(--r-xl);
}

.guide-cta::after {
  content: "K";
  position: absolute;
  inset-block-start: calc(var(--s12) * -1);
  inset-inline-start: var(--s5);
  color: rgba(255, 255, 255, .045);
  font-size: 18rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.guide-cta .eyebrow {
  color: var(--blue-200);
}

.guide-cta h2 {
  max-inline-size: 12ch;
  font-size: clamp(2.35rem, 6vw, 4rem);
  font-weight: 250;
  letter-spacing: -.04em;
  line-height: 1.04;
  text-wrap: balance;
}

.guide-cta p:last-child {
  max-inline-size: 42rem;
  color: var(--blue-100);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.guide-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.guide-cta .btn {
  color: var(--blue-900);
  background: var(--grey-0);
}

.guide-secondary {
  display: inline-flex;
  justify-content: center;
  padding-block: var(--s3);
  color: var(--grey-0);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-md);
  text-decoration: none;
}

.guide-secondary:hover {
  background: rgba(255, 255, 255, .07);
}

@media (min-width: 820px) {
  .guide-cta {
    grid-template-columns: minmax(0, 1fr) 13rem;
    padding: var(--s12);
  }
}

@media (max-width: 639px) {
  .guides-hero {
    padding-block: var(--s16) var(--s10);
  }

  .guide-card > a {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s4);
    padding: var(--s5);
  }

  .guide-card-arrow {
    display: none;
  }

  .guide-hero {
    padding-block: var(--s8) var(--s12);
  }

  .guide-breadcrumbs {
    margin-block-end: var(--s8);
  }

  .guide-contents {
    transform: rotate(.5deg);
  }

  .guide-section {
    padding-block: var(--s16);
  }

  .guide-rail {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .guide-rail p {
    margin-block-start: 0;
    padding-inline-start: var(--s3);
    border-inline-start: 1px solid var(--grey-200);
  }

  .guide-message {
    padding: var(--s8) var(--s5) var(--s6);
  }

  .guide-message blockquote {
    font-size: 1rem;
  }

  .guide-cta-wrap {
    padding-block: var(--s16);
  }

  .guide-cta {
    padding: var(--s8) var(--s6);
    border-radius: var(--r-lg);
  }
}

@media print {
  .nav,
  footer,
  .guide-copy,
  .guide-cta-wrap {
    display: none;
  }

  .guide-hero,
  .guide-intro,
  .guide-section {
    padding-block: 1.5rem;
  }

  .guide-intro {
    color: var(--grey-900);
    background: transparent;
    border-block: 1px solid var(--grey-300);
  }

  .guide-contents,
  .guide-message {
    box-shadow: none;
  }
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .reveal {
    transform: none;
  }

  .design:hover .paper {
    transform: none;
  }
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  z-index: 200;
  inset-inline-start: var(--s5);
  inset-block-start: var(--s5);
  width: auto;
  height: auto;
  clip-path: none;
  overflow: visible;
  background: #fff;
  padding: var(--s3) var(--s5);
  color: var(--grey-900);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  text-decoration: none;
}