@font-face {
  font-family: Inter;
  src: url(assets/kale/Inter-Regular-kale.woff) format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(assets/kale/Inter-Medium-kale.woff) format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(assets/kale/Inter-SemiBold-kale.woff) format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(assets/kale/Inter-Bold-kale.woff) format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Vend Sans";
  src: url(assets/kale/vend-sans-400.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vend Sans";
  src: url(assets/kale/vend-sans-600.ttf) format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Vend Sans";
  src: url(assets/kale/vend-sans-700.ttf) format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: KASS;
  src: url(assets/kale/kass-variable.ttf) format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  /* Kale Design System: brand colors */
  --brand-white:#ffffff;
  --brand-offwhite:#f8f6f0;
  --brand-black:#201b14;
  --brand-lime:#c7dc5b;
  --brand-kiwi:#009a17;
  --brand-broccoli:#035f1d;
  --brand-peach:#ffc56e;
  --brand-tangerine:#ff6022;
  --brand-cherry:#8a1538;
  --brand-mint:#94ddc4;
  --brand-aqua:#00ccb8;
  --brand-kale:#004638;
  --brand-lavender:#a6b3f0;
  --brand-grape:#5864e3;
  --brand-blueberry:#003087;
  --brand-banana:#fdd757;
  --brand-lemon:#febc00;
  --brand-walnut:#9b461b;
  /* Kale Design System: UI ramp steps used on the site */
  --ui-grey-100:#eeebe3;
  --ui-grey-200:#d9d3c7;
  --ui-grey-300:#c0b8a9;
  --ui-grey-500:#7c705e;
  --ui-grey-600:#62584a;
  --ui-grey-700:#4e463a;
  --ui-grey-800:#353027;
  --ui-orange-50:#ffeeda;
  --ui-orange-100:#ffe4c0;
  --ui-orange-500:#d03d00;
  --ui-yellow-100:#ffe9b5;
  --ui-teal-50:#e1fdf2;
  --ui-teal-100:#c4f6e3;
  --ui-blue-100:#e3e7ff;
  --ui-blue-200:#c8d0f7;
  --ui-red-200:#ffbeca;
  --ui-green-600:#035f1d;
  --ui-green-700:#024e16;
  /* Kale Design System: semantic roles */
  --background:var(--brand-offwhite);
  --background-raised:var(--brand-white);
  --background-subtle:var(--ui-grey-100);
  --background-warm:var(--ui-orange-50);
  --background-primary:var(--ui-orange-500);
  --text:var(--brand-black);
  --text-muted:var(--ui-grey-600);
  --text-faint:var(--ui-grey-500);
  --border:var(--ui-grey-200);
  --border-strong:var(--ui-grey-300);
  --font-display:"Vend Sans","Trebuchet MS",sans-serif;
  --font-body:Inter,"Trebuchet MS",sans-serif;
  --font-accent:KASS,"Vend Sans",sans-serif;
  /* Site aliases */
  --ink:var(--text);
  --navy:var(--brand-grape);
  --orange:var(--brand-tangerine);
  --teal:var(--brand-aqua);
  --teal-action:var(--brand-broccoli);
  --mint:var(--brand-mint);
  --cream:var(--ui-orange-100);
  --peach:var(--brand-peach);
  --charcoal:var(--ui-grey-700);
  --gray-light:var(--background-subtle);
  --blue:var(--brand-lavender);
  --sky-blue:var(--ui-blue-200);
  --paper:var(--background);
  --pink:var(--ui-red-200);
  --yellow:var(--brand-banana);
  --purple:var(--brand-lavender);
  --line:var(--border);
  --font:var(--font-body);
  --heading-font:var(--font-display);
  --desk-green:var(--brand-mint);
  --orange-text:var(--ui-orange-500);
  --teal-action-hover:var(--ui-green-700);
  --content-width:1400px;
  --page-gutter:24px;
  --header-height:76px;
  --header-top:24px;
  --feature-height:660px;
  --feature-visual-height:660px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-top) + var(--header-height) + 24px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 5px;
}
button[hidden],
[hidden] {
  display: none !important;
}
h1,
h2,
h3 {
  font-family: var(--heading-font);
  font-weight: 600;
  text-wrap: balance;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
p {
  text-wrap: pretty;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  background: white;
  padding: 12px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.grid-wrap {
  padding: calc(var(--header-top) + var(--header-height) + 24px) 36px 36px;
  background-color: var(--blue);
  background-image:
    linear-gradient(#ffffffc7 1px, transparent 1px),
    linear-gradient(
      90deg,
      #ffffffc7 1px,
      transparent 1px);
  background-size: 24px 24px;
}
.site-header {
  position: fixed;
  inset: var(--header-top) max(var(--page-gutter), calc((100% - var(--content-width)) / 2)) auto;
  z-index: 10;
  background: white;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
  box-shadow: 0 4px 20px #201b140d;
  gap: 20px;
}
.brand {
  display: inline-block;
  flex-shrink: 0;
}
.brand img {
  width: 76px;
  height: auto;
}
.desktop-nav {
  display: flex;
  gap: 34px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
}
.desktop-nav a {
  padding: 7px 0;
}
.desktop-nav a:hover {
  color: var(--orange-text);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px 22px;
  border: 0;
  border-radius: 2px;
  font-weight: 600;
  line-height: 1.25;
  transition: background .15s, transform .15s;

  font-size: 18px;
}
.button-green {
  background: var(--teal-action);
  color: #fff;
}
.button-green:hover {
  background: var(--teal-action-hover);
}
.button-charcoal {
  background: var(--charcoal);
  color: #fff;
}
.button-charcoal:hover {
  background: var(--ui-grey-800);
}
.button:active {
  transform: translateY(1px);
}
.menu-toggle,
.mobile-nav {
  display: none;
}
.hero {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 24px;
  min-height: 620px;
}
.hero-copy {
  background: var(--navy);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 36px 34px;
  text-align: center;
}
.hero-copy p {
  max-width: 370px;
  font-size: 20px;
  line-height: 1.42;
  margin-top: 30px;
}
.hero-cta {
  margin-top: 22px;
}
.hero-body { display: flex; flex-direction: column; align-items: center; }
.hero-product {
  position: relative;
  min-width: 0;
  isolation: isolate;
}
.product-landscape {
  position: absolute;
  inset: 0;
  background: #81c5ed url(assets/kale/landscape.png) center/cover;
}
.product-stage {
  position: absolute;
  inset: -16px;
  z-index: 2;
  --control-space: 0px;
}
.device-render,
.product-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
}
.device-render {
  object-fit: contain;
  pointer-events: none;
}
.product-stage canvas {
  touch-action: pan-y !important;
  cursor: grab;
}
.product-stage[data-dragging] canvas { cursor: grabbing; }
.product-stage[data-ready] .device-render { display: none; }















.section-pad {
  padding: 88px 72px;
}
.display {
  font: 600 clamp(44px, 4.9vw, 72px)/1.08 var(--heading-font);
  letter-spacing: -.035em;
}
.intro-section {
  text-align: center;
  padding-top: 116px;
  padding-bottom: 90px;
}
.intro-section p {
  margin: 27px auto 42px;
  font-size: 20px;
  line-height: 1.6;
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 24px;
  min-height: var(--feature-height);
}
.feature-copy {
  padding: 72px 55px;
  align-self: center;
}
.feature-copy .display {
  font-size: clamp(42px, 4.4vw, 64px);
  margin-bottom: 27px;
}
.feature-copy > p {
  font-size: 20px;
  line-height: 1.6;
  max-width: 460px;
}
.feature-copy > p + p {
  margin-top: 16px;
}
.feature-copy > .feature-copy-mobile { display: none; }
.ask-section {
  background: var(--brand-peach);
}
.ask-visual {
  background: var(--pink);
  position: relative;
  min-height: var(--feature-visual-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 42px 36px 24px;
  overflow: hidden;

  gap: 28px;
}
.question-bubble {
  align-self: flex-end;
  background: var(--paper);
  padding: 18px 20px;
  font-size: 17px;
  border-radius: 18px 18px 0 18px;
  transform: rotate(3deg);
  box-shadow: 4px 5px 0 #31224b10;
  z-index: 1;
}
.question-bubble > span {
  color: #b27ce0;
  margin-left: 14px;
  font-size: 23px;
}
.answer-bubble {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--paper);
  border-radius: 18px 18px 18px 0;
  padding: 17px;
  transform: rotate(-3deg);
  font-size: 16px;
  align-self: flex-start;
  z-index: 1;
}
.mini-kale {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink);
  font-weight: 700;
  font-size: 27px;
}
.snail-art {
  position: relative;
  width: 260px;
  height: 210px;
  flex-shrink: 0;
  margin: -5px 0;
}
.snail-shell {
  position: absolute;
  width: 155px;
  height: 155px;
  background: #faaa48;
  border: 3px solid #f5ab53;
  border-radius: 50%;
  top: 10px;
  left: 44px;
  box-shadow: inset -14px -10px 0 #e98a34, inset 8px 6px 0 #ffd572;
  transform: rotate(-25deg);
}
.snail-shell i {
  position: absolute;
  inset: 24px;
  border: 10px solid #b76029;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.snail-shell i:after {
  content: "";
  position: absolute;
  width: 27px;
  height: 30px;
  border: 7px solid #b76029;
  border-right-color: transparent;
  border-radius: 50%;
  left: 14px;
  top: 9px;
}
.snail-body {
  position: absolute;
  bottom: 27px;
  left: 30px;
  width: 218px;
  height: 44px;
  background: #52b4a5;
  border-radius: 60% 70% 40% 35%;
  box-shadow: inset 0 -9px 0 #6c8335;
  transform: rotate(-3deg);
}
.snail-body:before,
.snail-body:after {
  content: "";
  position: absolute;
  right: 19px;
  top: -43px;
  width: 8px;
  height: 52px;
  background: #52b4a5;
  border-radius: 4px;
  transform: rotate(8deg);
}
.snail-body:after {
  right: 41px;
  transform: rotate(-10deg);
  height: 43px;
  top: -34px;
}
.snail-body i,
.snail-body b {
  position: absolute;
  right: 16px;
  top: -49px;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  background: #52b4a5;
  z-index: 2;
}
.snail-body b {
  right: 43px;
  top: -40px;
}
.snail-body i:after,
.snail-body b:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #282b20;
  right: 2px;
  top: 5px;
  border-radius: 50%;
}
.leaf {
  position: absolute;
  background: #52b4a5;
  width: 60px;
  height: 28px;
  border-radius: 0 100% 0 100%;
  transform: rotate(-20deg);
  left: -20px;
  bottom: 26px;
}
.leaf-two {
  transform: rotate(35deg);
  left: -6px;
  bottom: 6px;
  background: #79bc51;
}
.explore-section {
  background: var(--ui-blue-100);
  padding: 88px var(--page-gutter) 96px;
}
.explore-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 48px;
  max-width: var(--content-width);
  margin: 0 auto 42px;
}
.explore-intro .display {
  max-width: 670px;
}
.explore-intro .display em {
  white-space: nowrap;
}
.explore-intro > div {
  max-width: 510px;
  justify-self: end;
}
.explore-intro p {
  font-size: 20px;
  line-height: 1.55;
}
.explore-intro p + p {
  margin-top: 12px;
}
.product-home-demo {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 22px clamp(28px, 4.7vw, 64px) 20px;
  background: var(--background);
  border: 2px solid var(--text);
  border-radius: 30px;
  color: var(--text);
  box-shadow: 0 22px 44px #1d28391a;
}
.product-home-topbar {
  position: relative;
  display: flex;
  justify-content: center;
  height: 86px;
}
.product-home-avatar {
  position: absolute;
  top: 0;
  left: -40px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px #201b1424;
}
.product-home-tabs {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  font: 600 24px/1.2 var(--heading-font);
}
.product-home-tabs a {
  position: relative;
  color: var(--text-muted);
  padding: 7px 0 14px;
}
.product-home-tabs a:hover,
.product-home-tabs a[aria-current] {
  color: var(--text);
}
.product-home-tabs a[aria-current]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.product-question-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.product-question-card {
  position: relative;
  aspect-ratio: 1.015;
  min-width: 0;
  padding: 16px 24px 24px;
  overflow: hidden;
  border-radius: 30px;
}
.product-card-open {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.product-card-open:hover { background: #ffffff18; }
.product-card-open:active { transform: scale(.98); }
.product-card-open:focus-visible { outline: 3px solid var(--text); outline-offset: -5px; }
.card-leaves { background: var(--brand-mint); }
.card-rainbow { background: var(--ui-blue-200); }
.card-sloth { background: var(--brand-peach); }
.card-medal { background: var(--brand-lime); }
.card-octopus { background: var(--brand-banana); }
.card-pyramids { background: var(--brand-mint); }
.card-story { background: var(--ui-red-200); }
.card-lightbulb { background: var(--ui-blue-200); }
.product-card-category {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 7px 13px;
  border-radius: 99px;
  background: #ffffffb8;
  font: 600 15px/1.1 var(--heading-font);
}
.product-question-card > img {
  position: absolute;
  top: 14px;
  right: 8px;
  width: 50%;
  height: 53%;
  object-fit: contain;
}
.product-question-card:has(.product-card-progress) > img { top: 16px; right: 10px; width: 43%; height: 43%; }
.product-question-card h3 {
  position: absolute;
  inset: auto 18px 24px 24px;
  font: 600 clamp(17px, 1.75vw, 25px)/1.12 var(--heading-font);
  letter-spacing: -.05em;
  text-wrap: initial;
}
.product-question-card h3 em {
  display: block;
  margin-top: 2px;
  font: 600 1.04em/1.05 var(--font-accent);
  font-style: normal;
  font-synthesis: none;
  letter-spacing: -.04em;
}
.product-card-progress {
  position: absolute;
  top: 61%;
  left: 24px;
  display: flex;
  gap: 5px;
}
.product-card-progress i {
  display: block;
  width: 16px;
  height: 6px;
  border-radius: 5px;
  background: var(--border-strong);
}
.product-card-progress i:first-child { background: var(--text); }
.card-rainbow .product-card-progress i:nth-child(-n+3) { background: var(--text); }
.product-home-ask-slot {
  display: flex;
  justify-content: center;
  min-height: 56px;
  margin-top: 50px;
}
.product-home-ask {
  display: flex;
  align-items: center;
  gap: 13px;
  width: max-content;
  min-height: 56px;
  margin: 0;
  padding: 0 25px;
  border-radius: 100px;
  background: white;
  box-shadow: 0 2px 10px #201b142a;
  color: var(--text-muted);
  font: 400 16px/1 var(--font-body);
}
.product-home-ask:hover { box-shadow: 0 4px 14px #201b1438; }
.product-home-ask svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-home-ask .ask-divider {
  width: 1px;
  height: 28px;
  background: var(--background-subtle);
}
.product-home-demo.is-thread-open { min-height: 800px; }
.product-home-demo.is-thread-open .product-home-view { opacity: 0; pointer-events: none; }
.product-home-demo.is-returning .product-home-view { opacity: 1; }
.product-home-demo.is-returning .product-thread-view { opacity: 0; pointer-events: none; }
.product-thread-view { position: absolute; inset: 0; }
.product-thread-back {
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--background-subtle);
  color: var(--text);
  cursor: pointer;
}
.product-thread-back svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.product-thread-back:hover { background: var(--ui-grey-200); }
.product-thread-back:focus-visible, .product-thread-suggestion:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.product-thread-hero {
  position: absolute;
  z-index: 1;
  top: 12%;
  left: 3.125%;
  display: flex;
  flex-direction: column;
  width: 36.72%;
  height: 75%;
  min-height: 0;
  padding: 28px 32px 30px;
  border-radius: 40px;
  background: var(--topic-tint, var(--brand-lime));
  overflow: hidden;
}
.product-thread-category { align-self: flex-start; z-index: 1; padding: 8px 14px; border-radius: 99px; background: #ffffffb8; font: 600 15px/1 var(--heading-font); }
.product-thread-art { position: absolute; top: 31px; right: 25px; width: min(50%, 234px); height: min(39%, 234px); object-fit: contain; }
.product-thread-title { z-index: 1; margin-top: auto; margin-bottom: 16px; font: 600 clamp(26px, 3.2vw, 40px)/1.12 var(--heading-font); letter-spacing: -.055em; }
.product-thread-title em { display: block; font: 600 1.04em/1.05 var(--font-accent); font-style: normal; font-synthesis: none; letter-spacing: -.035em; }
.product-thread-trail { z-index: 1; padding: 15px 16px 16px; border-radius: 20px; background: #ffffffa8; }
.product-thread-trail-label, .product-thread-keep-label { display: block; color: var(--text-muted); font: 600 13px/1.2 var(--heading-font); letter-spacing: .035em; }
.product-thread-trail ol { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.product-thread-trail li { display: flex; align-items: center; gap: 10px; min-height: 23px; font: 600 16px/1.2 var(--heading-font); }
.product-trail-mark { display: grid; flex: 0 0 18px; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--text); color: white; font: 600 12px/1 var(--heading-font); }
.product-trail-mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.product-thread-trail li.empty .product-trail-mark { border: 2px dashed var(--border-strong); background: transparent; }
.product-thread-trail li.empty span:last-child { display: block; width: 38%; height: 9px; border-radius: 8px; background: var(--ui-grey-200); }
.product-thread-trail li.empty:nth-child(4) span:last-child { width: 42%; }
.product-thread-trail li.empty:nth-child(5) span:last-child { width: 45%; }
.product-thread-chat { position: absolute; z-index: 1; top: 12%; right: 4%; bottom: 9%; left: 43%; display: flex; flex-direction: column; min-width: 0; }
.product-thread-messages { display: flex; flex: 0 1 auto; flex-direction: column; gap: 7px; min-height: 0; max-height: 350px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding: 0 2px 0 0; }
.product-thread-messages.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 68px); mask-image: linear-gradient(to bottom, transparent, #000 68px); }
.product-thread-messages::-webkit-scrollbar { display: none; }
.product-thread-bubble { align-self: flex-start; max-width: 86%; padding: 14px 18px; border-radius: 22px 22px 22px 5px; background: var(--background-subtle); font: 400 clamp(15px, 1.55vw, 20px)/1.25 var(--font-body); }
.product-thread-bubble.kid { align-self: flex-end; max-width: 76%; border-radius: 22px 22px 5px 22px; background: var(--text); color: white; font-weight: 600; }
.product-thread-media { display: flex; align-self: stretch; gap: 8px; min-height: 130px; max-width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.product-thread-media::-webkit-scrollbar { display: none; }
.product-thread-media[data-scroll-position="start"] { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent); }
.product-thread-media[data-scroll-position="middle"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.product-thread-media[data-scroll-position="end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px); mask-image: linear-gradient(to right, transparent, #000 44px); }
.product-thread-media:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.product-thread-media img { display: block; flex: 0 0 265px; width: 265px; height: 130px; border-radius: 18px; object-fit: cover; scroll-snap-align: start; }
.product-thread-typing { display: flex; gap: 5px; align-items: center; min-height: 50px; }
.product-thread-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); animation: kale-typing .8s ease-in-out infinite alternate; }
.product-thread-typing i:nth-child(2) { animation-delay: .15s; }
.product-thread-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kale-typing { from { opacity: .35; transform: translateY(0); } to { opacity: 1; transform: translateY(-4px); } }
.product-thread-keep { flex: 0 0 auto; padding-top: 16px; }
.product-thread-keep-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 13px; }
.product-thread-suggestion { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 124px; padding: 14px 15px; border: 0; border-radius: 24px; color: var(--text); text-align: left; cursor: pointer; }
.product-thread-suggestion .product-suggestion-icon { display: block; width: 29px; height: 29px; background: currentColor; -webkit-mask: var(--suggestion-icon) center / contain no-repeat; mask: var(--suggestion-icon) center / contain no-repeat; }
.product-thread-suggestion.suggestion-0 { --suggestion-icon: url('assets/kale/hugeicons/pencil.svg'); }
.product-thread-suggestion.suggestion-1 { --suggestion-icon: url('assets/kale/hugeicons/quiz.svg'); }
.product-thread-suggestion.suggestion-2, .product-thread-suggestion.suggestion-3 { --suggestion-icon: url('assets/kale/hugeicons/question.svg'); }
.product-thread-suggestion svg { display: block; width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.product-thread-suggestion strong { font: 600 clamp(13px, 1.25vw, 17px)/1.15 var(--heading-font); letter-spacing: -.03em; }
.product-thread-suggestion:hover { filter: brightness(.97); }
.suggestion-0 { background: var(--brand-tangerine); color: var(--text); }
.suggestion-1 { background: var(--brand-banana); }
.suggestion-2 { background: var(--brand-lavender); }
.suggestion-3 { background: var(--ui-blue-200); }
.product-thread-ask-slot { position: absolute; z-index: 1; right: 4%; bottom: 8px; left: 43%; display: flex; justify-content: center; min-height: 56px; }
.product-thread-ask-slot .product-home-ask { margin: 0; }
.product-thread-view [data-unrevealed] { opacity: 0; pointer-events: none; }
.product-home-demo.is-morphing .product-thread-hero { background: transparent; }
.product-home-demo.is-morphing .product-thread-art { opacity: 0; }
.product-home-demo.is-morphing .product-thread-category, .product-home-demo.is-morphing .product-thread-title, .product-home-demo.is-morphing .product-thread-trail { opacity: 0; }
.product-shared-overlay { object-fit: contain; will-change: transform; }
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.play-section { background: var(--ui-yellow-100); }

.play-preview {
  position: relative;
  min-height: var(--feature-visual-height);
  margin: 0;
  background: var(--brand-banana);
  pointer-events: none;
  overflow: hidden;
}
.play-device-stage {
  position: absolute;
  inset: 0 -12px;
  --control-space: 0px;
}
.play-device-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.play-device-stage[data-ready] .device-render {
  display: none;
}
.desk-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ui-teal-100);
  margin: 0 24px 24px;
  min-height: var(--feature-height);
}
.desk-art {
  background: var(--desk-green);
  position: relative;
  min-height: var(--feature-visual-height);
}
.desk-note {
  position: absolute;
  width: clamp(156px, 31%, 220px);
  height: auto;
  background: var(--background);
  box-shadow: 6px 7px 0 #526c3922;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.desk-note > img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
}
.desk-note > figcaption {
  font-size: 16px;
  font-weight: 600;

  line-height: 1.3;

  text-align: center;
}
.note-one {
  top: calc(50% - 225px);
  left: 9%;
  transform: rotate(-11deg);
  z-index: 2;
}
.note-two {
  top: calc(50% - 170px);
  right: 9%;
  transform: rotate(10deg);
}

.note-three {
  left: 28%;
  top: calc(50% + 25px);
  transform: rotate(-2deg);
  z-index: 3;
}

.session-section {
  background: var(--navy);
  color: white;
  text-align: center;
  margin: 24px;
}
.session-section .display {
  font-size: clamp(38px, 4.2vw, 60px);
}
.session-intro {
  max-width: 640px;
  margin: 24px auto 0;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
  color: #ffffff;
}
.session-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 50px;
  text-align: left;
}
.session-steps > div {
  min-width: 0;
}
.session-visual {
  height: 300px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  color: var(--ink);
}
.session-setting { background: var(--ui-red-200); }
.session-wrapping { background: var(--brand-banana); }
.session-ending { background: var(--brand-lime); }
.session-phone {
  width: 158px;
  height: 260px;
  padding: 33px 12px 18px;
  border: 6px solid var(--ink);
  border-radius: 25px;
  background: var(--paper);
  position: relative;
  transform: rotate(-5deg);
  font-size: 13px;
  line-height: 1.35;
}
.session-phone-island {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 44px;
  height: 12px;
  border-radius: 12px;
  background: var(--ink);
  transform: translateX(-50%);
}
.session-phone > img { display: block; width: 48px; height: auto; }
.session-phone-title { display: block; margin-top: 14px; font-weight: 600; }
.session-chat { margin: 10px 0; padding: 9px; background: var(--ui-blue-100); border-radius: 10px 10px 2px 10px; }
.session-confirmation { position: relative; padding: 9px 9px 9px 30px; background: var(--brand-lime); border-radius: 10px; }
.session-confirmation svg { position: absolute; width: 18px; height: 18px; left: 8px; top: 10px; }
.session-confirmation strong, .session-confirmation span { display: block; }
.session-phone-home { position: absolute; bottom: 7px; left: 34%; width: 32%; height: 3px; border-radius: 3px; background: var(--ink); }
.session-tablet {
  position: relative;
  width: min(90%, 330px);
  aspect-ratio: 1.35;
  padding: 9px 9px 36px;
  border-radius: 20px 20px 24px 24px;
  background: var(--background-subtle);
  transform: rotate(-5deg);
}
.session-screen {
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 9px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
}
.session-drawing { width: 100%; height: 100%; object-fit: cover; display: block; }
.session-reminder { position: absolute; inset: auto 10px 10px; padding: 9px 12px; border-radius: 10px; background: var(--navy); color: white; line-height: 1.35; font-size: 14px; }
.session-reminder strong, .session-reminder span { display: block; }
.session-reminder span { font-size: 12px; margin-top: 3px; }
.session-ending .session-tablet { transform: rotate(5deg); }
.session-saved { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--navy); color: white; line-height: 1.35; }
.session-saved svg { width: 44px; height: 44px; margin-bottom: 10px; color: var(--brand-lime); }
.session-saved strong { font: 600 23px var(--heading-font); }
.session-saved span { font-size: 14px; margin-top: 4px; }
.session-section h2, .session-steps h3 { text-wrap: balance; }
.session-section p { text-wrap: pretty; }
.session-steps h3 {
  font-family: var(--heading-font);
}
.step-number {
  font: 600 16px/1 var(--font);
  display: inline;
  margin-right: 6px;
  color: var(--brand-lime);
  font-variant-numeric: tabular-nums;
}
.session-steps h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 18px 0 10px;
}
.session-steps p {
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
}
.parent-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 24px;
  background: var(--ui-orange-100);
}
.parent-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.parent-list > li {
  display: flex;
  gap: 16px;
}
.parent-list > li > span {
  font-size: 16px;
  padding-top: 3px;
  color: var(--text-muted);
}
.parent-list h3 {
  font: 600 20px var(--heading-font);
  margin-bottom: 6px;
}
.parent-list p {
  font-size: 18px;
  max-width: 380px;
  line-height: 1.5;
}
/* Translucent ink lets the section tint show through; 5.7:1 on ui-orange-100. */
.parent-section .feature-copy > p,
.parent-list p {
  color: rgb(32 27 20 / 70%);
}
.parent-visual {
  display: grid;
  place-items: center;
  position: relative;
  padding: 55px 32px;
  background: var(--brand-lavender);
  overflow: hidden;
  min-height: 610px;
}
.parent-phone {
  background: var(--background);
  width: 320px;
  border: 7px solid var(--text);
  aspect-ratio: auto;
  border-radius: 42px;
  padding: 38px 17px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: rotate(7deg);
  box-shadow: 15px 20px 0 #82719840;
  position: relative;

  min-height: 620px;

  max-width: 100%;
}
.parent-phone::after {
  content: "";
  position: absolute;
  width: 32%;
  height: 4px;
  border-radius: 4px;
  background: var(--text);
  bottom: 9px;
  left: 34%;
}
.phone-island {
  width: 78px;
  height: 21px;
  background: var(--text);
  border-radius: 20px;
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
}
.phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 18px;
}
.phone-greeting {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.035em;
  padding-bottom: 18px;
}
.phone-greeting strong {
  font-weight: 600;
}
.phone-card {
  background: var(--background-subtle);
  border-radius: 10px;
  padding: 13px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.phone-card-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  display: flex;
  justify-content: space-between;

  gap: 8px;

  line-height: 1.35;
}
.ui-arrow, .phone-card-label .ui-arrow { display: inline-block; flex: none; width: 17px; height: 17px; vertical-align: middle; }
.phone-card > p {
  font-size: 22px;
  line-height: 1.25;
  margin: 10px 0;
}
.phone-muted {
  font-size: 16px;
  display: block;
  color: var(--text-muted);

  line-height: 1.4;
}
.yellow-card {
  background: var(--brand-banana);
  position: relative;
  min-height: 123px;

  padding-bottom: 20px;
}
.yellow-card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  margin: 16px 0 10px;
}
.phone-butterfly {
  position: absolute;
  right: 8px;
  top: 40px;
  width: 54px;
  height: 54px;
  transform: rotate(-16deg);
}
.phone-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 10px 1px 0;
  margin-top: auto;

  gap: 10px;

  padding-top: 18px;
}
.phone-bottom > span:first-child {
  font-weight: 700;
  color: var(--ui-green-600);
}
.parent-sticker {
  position: absolute;
  bottom: 52px;
  left: 24px;
  background: var(--brand-banana);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(-15deg);
  font: 700 22px/1.05 var(--font);
}
.hardware-section.section-pad {
  position: relative;
  padding-top: 88px;
  padding-bottom: 64px;
}
.hardware-heading { text-align: center; margin: 0 auto 32px; }
.hardware-heading p { max-width: 1100px; margin: 24px auto 0; font-size: clamp(20px, 1.4vw, 24px); line-height: 1.5; }
.hardware-intro-mobile { display: none; }
.hardware-layout {
  position: relative;
  height: clamp(560px, 48vw, 700px);
  min-height: 560px;
  isolation: isolate;
  padding: 0;
  border-radius: 0;
  background: var(--hardware-background, #eee0e5);
  color: var(--hardware-text, #563443);
  overflow: hidden;
}
.hardware-color-fade { position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: opacity; }
.hardware-copy { position: relative; z-index: 1; width: 43%; max-width: 550px; padding: clamp(28px, 4vw, 56px); transition: opacity 300ms ease; }
.hardware-detail { max-width: 480px; }
.hardware-detail h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -.03em; }
.hardware-detail p { max-width: 420px; margin-top: 22px; font-size: 18px; line-height: 1.65; color: inherit; }
.hardware-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 24px auto 0; }
.hardware-tabs button { background: transparent; border: 1px solid var(--border-strong); padding: 10px 14px; border-radius: 3px; font-size: 16px; min-height: 44px; }
.hardware-tabs button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: white; }
.hardware-tabs button:hover:not([aria-pressed=true]) { background: var(--background-subtle); }
.hardware-showcase { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; min-height: 0; border: 0; }
@media (max-width: 760px) {
  .hardware-section.section-pad { padding-top: 52px; padding-bottom: 40px; }
  .hardware-heading { margin-bottom: 32px; }
  .hardware-heading .display { font-size: 36px; }
  .hardware-heading p { font-size: 18px; }
  .hardware-detail { min-height: 0; }
  .hardware-detail h3 { font-size: 28px; }
  .hardware-detail p { margin-top: 16px; font-size: 16px; line-height: 1.5; }
  .hardware-tabs { margin: 20px auto 0; }
  .hardware-tabs button { font-size: 16px; padding: 8px 12px; }

}
.faq-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 65px;
}
.faq-section .display {
  font-size: clamp(40px, 4.1vw, 58px);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  font-weight: 600;
  padding: 21px 0;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform .15s;
}
.faq-list summary > span svg { width: 22px; height: 22px; }
.faq-list details[open] summary > span {
  transform: rotate(45deg);
}
.faq-list details > p {
  font-size: 18px;
  line-height: 1.65;
  padding: 0 28px 23px 0;
  color: var(--text-muted);
}
.faq-list a {
  text-decoration: underline;
}
.beta-section {
  text-align: center;
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.beta-section .display {
  font-size: clamp(48px, 5.8vw, 82px);
}
.beta-section > p {
  font-size: 20px;
  line-height: 1.6;
  margin: 26px 0;
}
.beta-form {
  max-width: 500px;
  margin: 30px auto 0;
  position: relative;
  z-index: 1;
}
.email-row {
  display: flex;
  background: var(--paper);
  padding: 5px;
  border: 1px solid var(--ink);
  border-radius: 4px;
}
.email-row > input {
  width: 0;
  flex: 1;
  border: 0;
  min-width: 0;
  padding: 11px 14px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  border-radius: 3px;
}
.email-row > input:focus {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}
.email-row .button {
  font-size: 16px;
  white-space: nowrap;
  gap: 15px;
}
.beta-form .button-charcoal {
  background: var(--ui-grey-800);
}
.beta-form .button-charcoal:hover {
  background: var(--ink);
}
.form-status {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 13px;
}
.form-status:empty {
  display: none;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.beta-spark {
  position: absolute;
  width: 104px;
  height: 104px;
  opacity: 1;
}
.spark-one {
  left: 7%;
  top: 80px;
  transform: rotate(14deg);
}
.spark-two {
  right: 8%;
  bottom: 76px;
  transform: rotate(-12deg);
  width: 72px;
  height: 72px;
}
.site-footer {
  padding: 56px 48px 30px;
  display: grid;
  grid-template-columns: 1fr minmax(160px, .35fr) minmax(110px, .25fr);
  gap: 40px;
}
.footer-brand img {
  width: 84px;
}
.footer-identity p {
  margin-top: 18px;
  font-size: 16px;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.footer-social svg {
  width: 22px;
  height: 22px;
}
.footer-social a:hover {
  color: var(--orange-text);
}
.footer-column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
}
.footer-column h2 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.site-footer nav a:hover {
  text-decoration: underline;
}
.copyright {
  grid-column: 1 / -1;
  font-size: 16px;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 8px;
}
@media (min-width: 1600px) {
  .hero {
    min-height: 680px;
  }
  .hero-copy {
    padding: 54px 48px 38px;
  }
  .hero-copy p {
    font-size: 20px;
    max-width: 420px;
  }
}
@media (max-width: 1100px) {
  .grid-wrap {
    padding: calc(var(--header-top) + var(--header-height) + 24px) 24px 24px;
  }
  .site-header {
    padding: 16px 20px;
  }
  .desktop-nav {
    gap: 21px;
    font-size: 16px;
  }
  .header-cta {
    font-size: 16px;
    padding: 11px 15px;
    gap: 12px;
  }
  .hero {
    gap: 20px;
    min-height: 520px;
  }
  .hero-copy {
    padding: 34px 22px;
  }
  .hero-copy p {
    font-size: 18px;
  }


  .section-pad {
    padding: 65px 42px;
  }
  .feature-copy {
    padding: 48px 35px;
  }
  .feature-copy .display {
    font-size: 44px;
  }
  .feature-row {
    min-height: var(--feature-height);
    margin: 20px;
  }
  .ask-visual {
    padding: 32px 22px;
    min-height: var(--feature-visual-height);
  }
  .question-bubble {
    font-size: 16px;
  }
  .play-preview {
    padding: 24px;
  }

  .desk-section,
  .session-section,
  .parent-section {
    margin: 20px;
  }
  .desk-note {
    width: clamp(156px, 31%, 220px);
    height: auto;
  }
  
  .parent-visual {
    padding: 40px 25px;
  }
  .parent-sticker {
    left: 9px;
    bottom: 28px;
    width: 100px;
    height: 100px;
    font-size: 22px;
  }
  .faq-section {
    gap: 40px;
  }
  .beta-spark {
    width: 72px;
    height: 72px;
  }
  .spark-one {
    left: 4%;
  }
  .spark-two {
    right: 4%;
    width: 54px;
    height: 54px;
  }
  .site-footer {
    padding: 35px;
  }
}
@media (max-width: 760px) {
  :root {
    --header-height: 65px;
  }
  html {
    scroll-padding-top: calc(var(--header-top) + var(--header-height) + 16px);
  }
  .grid-wrap {
    padding: calc(var(--header-top) + var(--header-height) + 16px) 16px 16px;
    background-size: 20px 20px;
  }
  .site-header {
    min-height: 65px;
    padding: 12px 15px;
    gap: 14px;
  }
  .brand img {
    width: 64px;
  }
  .desktop-nav {
    display: none;
  }
  .header-cta {
    margin-left: auto;
    font-size: 16px;
    padding: 10px 13px;
    gap: 8px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    width: 30px;
    height: 38px;
    padding: 4px;
    border: 0;
    background: none;
  }
  .menu-toggle span {
    height: 2px;
    width: 22px;
    background: var(--ink);
    transition: transform .2s;
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
  .mobile-nav {
    display: flex;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    background: white;
    z-index: 8;
    padding: 15px;
    flex-direction: column;
    box-shadow: 0 6px 12px #12242115;
  }
  .mobile-nav a {
    padding: 11px;
    font-size: 16px;
  }
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    height: 100%;
    min-height: 0;
  }
  .grid-wrap { height: 100svh; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .grid-wrap #main { height: 100%; }
  .hero-copy {
    display: contents;
    background: transparent;
    color: var(--navy);
    padding: 0;
    min-height: 0;
  }
  .hero .hero-heading { grid-row: 1; text-align: center; font-size: clamp(36px, 12vw, 72px); line-height: 1.1; }
  .hero .hero-heading-lead { font-size: clamp(24px, 7vw, 32px); }
  .hero .hero-heading em { margin-top: 4px; white-space: nowrap; }
  .hero .hero-heading em br { display: none; }
  .hero-body { grid-row: 3; padding-inline: 4px; text-align: center; }
  .hero-copy p {
    font-size: clamp(16px, 2.25svh, 18px);
    line-height: 1.4;
    max-width: 350px;
    margin: 0;
  }
  .hero-cta {
    margin-top: 16px;
    min-height: 48px;
  }
  .hero-product {
    grid-row: 2;
    min-height: 0;
  }
  .hero-product .product-landscape { display: none; }
  .hero-product .product-stage { inset: 0; }



  .section-pad {
    padding: 52px 26px;
  }
  .display {
    font-size: 40px;
  }
  .intro-section {
    padding-top: 64px;
    padding-bottom: 40px;
  }
  .intro-section .display {
    font-size: clamp(31px, 7.5vw, 50px);
  }
  .intro-section p {
    font-size: 18px;
    margin: 22px auto 28px;
  }
  .desktop-break {
    display: none;
  }
  .feature-row {
    grid-template-columns: 1fr;
    margin: 16px;
  }
  .feature-copy {
    padding: 40px 28px;
  }
  .feature-copy .display {
    font-size: 40px;
    margin-bottom: 23px;
  }
  .feature-copy > p {
    font-size: 18px;
  }
  .ask-visual {
    min-height: var(--feature-visual-height);
    padding: 28px 24px 20px;
  }
  .question-bubble {
    font-size: 16px;
  }
  .snail-art {
    margin: 12px 0;
  }
  .answer-bubble {
    font-size: 16px;
  }
  .section-heading {
    display: block;
  }
  .section-heading .display {
    font-size: 40px;
  }

  .play-preview {
    padding: 0;
    min-height: var(--feature-visual-height);
  }
  .play-device-stage {
    inset: 0 -12px;
  }
  .desk-section {
    grid-template-columns: 1fr;
    margin: 16px;
  }
  .desk-art {
    min-height: var(--feature-visual-height);
  }
  .desk-note {
    width: clamp(156px, 31%, 220px);
    height: auto;
  }
  .note-one {
    top: calc(50% - 225px);
    left: 9%;
  }
  .note-two {
    top: calc(50% - 170px);
    right: 9%;
  }
  .note-three {
    top: calc(50% + 25px);
    left: 34%;
  }
  .session-section {
    margin: 16px;
    padding: 42px 23px;
  }
  .session-section .display {
    font-size: 34px;
  }
  .session-steps {
    grid-template-columns: 1fr;
    margin-top: 30px;
    gap: 26px;
  }
  .session-steps > div {
    padding: 0;
  }
  .session-steps > div + div {
    border-left: 0;
    border-top: 0;
    padding-top: 0;
  }
  .step-number {
    font-size: 16px;
  }
  .session-steps h3 {
    margin-top: 12px;
  }
  .parent-section {
    grid-template-columns: 1fr;
    margin: 16px;
  }
  .parent-visual {
    min-height: 540px;
    padding: 45px 25px;
  }
  .parent-phone {
    transform: rotate(5deg);
  }
  .parent-sticker {
    left: 18px;
    bottom: 28px;
  }
  .faq-section {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .faq-section .display {
    font-size: 40px;
  }
  .faq-list summary {
    font-size: 18px;
    gap: 12px;
    padding: 19px 0;
  }
  .faq-list details > p {
    font-size: 18px;
  }
  .beta-section {
    padding: 52px 23px;
  }
  .beta-section .display {
    font-size: 48px;
    position: relative;
    z-index: 1;
  }
  .beta-section > p {
    font-size: 18px;
  }
  .beta-form {
    margin-top: 25px;
  }
  .email-row {
    flex-direction: column;
    gap: 4px;
    padding: 5px;
  }
  .email-row > input {
    width: 100%;
    padding: 14px 11px;
  }
  .email-row .button {
    padding: 13px 18px;
  }
  .beta-spark {
    width: 47px;
    height: 47px;
  }
  .spark-one {
    left: 8px;
    top: 92px;
  }
  .spark-two {
    right: 9px;
    bottom: 233px;
    width: 38px;
    height: 38px;
  }
  .site-footer {
    padding: 30px 25px 22px;
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  .footer-brand img {
    width: 72px;
  }
  .footer-identity {
    grid-column: 1 / -1;
  }
  .copyright {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    transition: none !important;
  }
}
@media (max-width: 760px) {
  .parent-phone {
    max-width: 100%;
  }
}
@media (max-width: 380px) {
  .site-header {
    gap: 10px;
    padding: 12px;
  }
  .brand img {
    width: 56px;
  }
  .header-cta {
    font-size: 16px;
    padding: 10px 9px;
    gap: 6px;
  }
  .menu-toggle {
    width: 26px;
  }
  .feature-copy .display {
    font-size: 32px;
  }
  .feature-copy {
    padding: 35px 24px;
  }
  .section-pad {
    padding-left: 22px;
    padding-right: 22px;
  }
  .session-section .display {
    font-size: 30px;
  }
  .section-heading .display {
    font-size: 34px;
  }
  .parent-visual {
    padding: 45px 18px;
  }
  .parent-phone {
    width: 320px;
  }
  .parent-sticker {
    width: 86px;
    height: 86px;
    font-size: 20px;
  }
  .beta-section .display {
    font-size: 43px;
  }
  .snail-art {
    transform: scale(.9);
  }
  .question-bubble {
    font-size: 16px;
    padding: 14px;
  }
  .answer-bubble {
    font-size: 16px;
    padding: 13px;
  }
}
.play-preview {
  min-width: 0;
}

.ask-visual { padding: 0; display: block; }
.ask-camera-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.ask-camera-answer { position: absolute; top: clamp(20px, 4vw, 50px); right: clamp(20px, 4vw, 50px); width: min(42%, 280px); padding: 20px 22px; border-radius: 18px; background: var(--background); box-shadow: 0 12px 32px #4c305629; transform: rotate(3deg); color: var(--ink); }
.ask-camera-answer-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.ask-camera-answer .mini-kale { width: 26px; height: 26px; font-size: 19px; }
.ask-camera-answer strong { display: block; margin-top: 12px; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; }
.ask-camera-answer p { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.play-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.play-tools button { min-width: 92px; min-height: 44px; padding: 9px 17px; border: 1px solid var(--text); border-radius: 100px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.play-tools button[aria-pressed="true"] { background: var(--ink); color: white; }
.play-tools button:hover:not([aria-pressed="true"]) { background: var(--background); }
@media (max-width: 760px) {
  .ask-camera-answer { width: min(44%, 230px); top: 18px; right: 18px; padding: 14px 16px; }
  .ask-camera-answer p { font-size: 13px; }
}

/* KASS is reserved for short emphasis within otherwise quiet headings. */
.hero-heading {
  font: 600 clamp(44px, 5.1vw, 72px)/1.06 var(--heading-font);
  letter-spacing: -.05em;
}
.hero-heading-lead {
  display: block;
  font-size: clamp(24px, 2.8vw, 40px);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.hero-heading em { display: block; margin-top: 16px; }
.hero-heading em,
.display em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: -.025em;
}
.site-shell {
  width: 100%;
  margin: 0;
  background: var(--paper);
  overflow: clip;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-heading { font-size: clamp(36px, 4.8vw, 52px); }
}
@media (max-width: 760px) {
  .hero-heading { font-size: clamp(34px, 10vw, 52px); }
}

/* Keep content centered while section backgrounds span the viewport. */
.grid-wrap,
.section-pad,
.site-footer {
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
}
.feature-row,
.desk-section,
.parent-section {
  padding-inline: max(0px, calc((100% - var(--content-width)) / 2));
}
.feature-row,
.desk-section,
.session-section,
.parent-section {
  margin-inline: 0;
}
@media (min-width: 761px) {
  .play-section { background: linear-gradient(90deg, var(--brand-banana) 50%, var(--ui-yellow-100) 50%); }
  .desk-section { background: linear-gradient(90deg, var(--ui-teal-100) 50%, var(--desk-green) 50%); }
  .ask-section {
    background: linear-gradient(90deg, var(--ui-orange-100) 50%, var(--pink) 50%);
  }
  .parent-section {
    background: linear-gradient(90deg, var(--ui-orange-100) 50%, var(--brand-lavender) 50%);
  }
}
@media (max-width: 760px) {
  :root { --page-gutter:16px; --header-top:16px; }
}

.hardware-colors, .hardware-attachments { margin-top: 28px; }
.hardware-copy fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hardware-copy fieldset:disabled { opacity: .45; }
.hardware-copy legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hardware-copy label { position: relative; cursor: pointer; }
.hardware-copy input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hardware-colors .swatches { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); width: min(100%, 300px); }
.hardware-colors label { display: grid; grid-column: span 2; place-items: center; width: 100%; height: 52px; }
.hardware-colors label:nth-child(6) { grid-column: 2 / span 2; }
.hardware-colors label:nth-child(7) { grid-column: 4 / span 2; }
.hardware-colors label:nth-child(8) { grid-column: 6 / span 2; }
.hardware-colors label:nth-child(9) { grid-column: 8 / span 2; }
.hardware-colors span { width: min(48px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #00000012; }
.hardware-colors input:checked + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.hardware-copy input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 4px; }
.hardware-attachments fieldset { display: flex; flex-wrap: wrap; gap: 8px; }
.hardware-attachments span { display: block; padding: 11px 15px; min-height: 44px; background: white; border: 1px solid transparent; border-radius: 99px; font-size: 16px; }
.hardware-attachments input:checked + span { border-color: var(--text); }
[data-hardware-status] { margin-top: 10px; color: inherit; font-size: 16px; }

/* Shared feature dimensions and readable typography across screen sizes. */
@media (min-width: 761px) {
  .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .parent-phone { width: min(320px, calc(50vw - 100px)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --feature-height:700px; --feature-visual-height:700px; }
  .feature-copy > p { font-size: 18px; }
  .desktop-nav { gap: 16px; }
}
@media (max-width: 760px) {
  :root { --feature-height:auto; --feature-visual-height:480px; }
  .feature-row { grid-template-rows: 480px auto; }
  .feature-row { margin: 0 var(--page-gutter) 24px; padding-inline: 0; border: 0; border-radius: 0; overflow: hidden; }
  .feature-row > :not(.feature-copy) { grid-row: 1; }
  .feature-row > .feature-copy { grid-row: 2; padding: 20px; align-self: stretch; }
  .feature-copy > .feature-copy-desktop { display: none; }
  .feature-copy > .feature-copy-mobile { display: block; margin-top: 0; }
  .phone-butterfly { display: none; }
  .feature-row .feature-copy .display { font-size: 42px; }
  .intro-section p, .feature-copy > p, .beta-section > p { font-size: 18px; }
  .desk-note { width: 156px; }
  .note-one { top: 35px; left: 7%; }
  .note-two { top: 65px; right: 7%; }
  .note-three { top: 270px; left: calc(50% - 78px); }
  .site-header { gap: 10px; padding-inline: 14px; }
  .header-cta { padding-inline: 10px; white-space: nowrap; }
  .menu-toggle { flex-shrink: 0; }
  .parent-phone { width: min(320px, calc(100vw - 80px)); min-height: 650px; }
  .parent-sticker { bottom: 14px; left: 12px; }
}
@media (max-width: 380px) {
  :root { --page-gutter:16px; }
  .feature-row .feature-copy .display { font-size: 36px; }
  .header-cta { gap: 0; padding-inline: 8px; }
  .header-cta > .ui-arrow { display: none; }
  .site-header { gap: 8px; padding-inline: 10px; }
  .desk-note { width: 148px; }
  .note-one { left: 6%; }
  .note-two { right: 6%; }
  .note-three { left: calc(50% - 74px); }
  .parent-phone { padding-inline: 13px; }
  .phone-bottom { gap: 8px; }
  .phone-butterfly { width: 42px; height: 42px; right: 6px; top: 68px; }
}

@media (min-width: 761px) {
  .hardware-section[data-hardware-view="portable"] .hardware-copy { width: 39%; }
  .hardware-section[data-hardware-view="privacy"] .hardware-copy { width: 38%; margin-left: auto; }
  .hardware-section[data-hardware-view="pen"] .hardware-copy { width: 39%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hardware-layout { height: 680px; min-height: 680px; }
}
@media (max-width: 900px) {
  .hardware-section { overflow-anchor: none; }
  .hardware-layout { display: grid; grid-template-rows: clamp(250px, 72vw, 360px) 240px; height: auto; min-height: 0; }
  .hardware-section[data-hardware-view] .hardware-copy { display: flex; flex-direction: column; justify-content: flex-end; grid-row: 2; width: 100%; max-width: none; height: 240px; margin-left: 0; padding: 20px; }
  .hardware-intro-desktop { display: none; }
  .hardware-intro-mobile { display: block; }
  .hardware-showcase { margin: 0; padding: 0; }
  .hardware-colors, .hardware-attachments { margin-top: 20px; }
  .hardware-colors .swatches { grid-template-columns: repeat(9, minmax(0, 1fr)); width: min(100%, 360px); }
  .hardware-colors .swatches label:nth-child(n) { grid-column: auto; height: 44px; }
  .hardware-colors .swatches span { width: min(24px, calc(100% - 8px)); }
  .hardware-colors input:checked + span { outline-offset: 2px; }
  .hardware-attachments fieldset { flex-wrap: nowrap; gap: 4px; }
  .hardware-attachments label { flex: 1 1 auto; min-width: 0; }
  .hardware-attachments span { display: flex; align-items: center; justify-content: center; padding: 10px 6px; font-size: clamp(12px, 3vw, 14px); line-height: 1.2; white-space: nowrap; }
}
@media (max-width: 360px) {
  .hardware-layout { grid-template-rows: clamp(250px, 72vw, 360px) 285px; }
  .hardware-section[data-hardware-view] .hardware-copy { height: 285px; }
}

@media (max-width: 1100px) {
  .product-home-demo { padding-inline: 28px; }
  .product-home-avatar { left: 0; }
  .product-question-grid { gap: 14px; }
  .product-question-card { padding: 12px 15px; border-radius: 24px; }
  .product-question-card h3 { left: 15px; right: 12px; bottom: 16px; font-size: clamp(15px, 1.9vw, 20px); }
  .product-card-progress { left: 15px; }
  .product-card-progress i { width: 12px; height: 5px; }
  .product-card-category { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 760px) {
  .explore-section { padding: 52px var(--page-gutter) 64px; }
  .explore-intro { display: block; margin-bottom: 28px; }
  .explore-intro .display { font-size: clamp(36px, 9vw, 48px); }
  .explore-intro > div { max-width: 540px; margin-top: 18px; }
  .explore-intro p { font-size: 18px; }
  .explore-intro p + p { display: none; }
  .product-home-demo { padding: 16px 16px 20px; border-radius: 22px; }
  .product-home-topbar { height: 66px; }
  .product-home-avatar { width: 36px; height: 36px; }
  .product-home-tabs { gap: 20px; font-size: 18px; }
  .product-home-tabs a { padding-top: 5px; padding-bottom: 9px; }
  .product-home-tabs a[aria-current]:after { width: 38px; height: 2px; }
  .product-question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-question-card { aspect-ratio: 1.02; padding: 12px; border-radius: 20px; }
  .product-question-card > img { top: 18px; right: 0; width: 57%; height: 47%; }
  .product-question-card:has(.product-card-progress) > img { top: 18px; right: 5px; width: 45%; height: 43%; }
  .product-question-card h3 { left: 12px; right: 10px; bottom: 12px; font-size: clamp(13px, 3.75vw, 17px); line-height: 1.08; }
  .product-card-category { padding: 5px 9px; font-size: 11px; }
  .product-card-progress { top: 56%; left: 12px; gap: 3px; }
  .product-card-progress i { width: 9px; height: 4px; }
  .product-home-ask-slot { min-height: 50px; margin-top: 28px; }
  .product-home-ask { min-height: 50px; padding-inline: 20px; font-size: 14px; }
  .product-home-demo.is-thread-open { min-height: 1130px; }
  .product-home-demo.is-thread-open .product-home-view { position: absolute; inset: 0; }
  .product-thread-back { top: 14px; left: 14px; width: 44px; height: 44px; }
  .product-thread-hero { top: 70px; right: 14px; left: 14px; width: auto; height: 400px; padding: 20px; border-radius: 28px; }
  .product-thread-art { top: 20px; right: 16px; width: 45%; height: 44%; }
  .product-thread-title { font-size: 30px; margin-bottom: 12px; }
  .product-thread-trail { padding: 10px 12px; border-radius: 16px; }
  .product-thread-trail ol { gap: 4px; margin-top: 5px; }
  .product-thread-trail li { min-height: 18px; font-size: 12px; }
  .product-trail-mark { flex-basis: 15px; width: 15px; height: 15px; font-size: 10px; }
  .product-thread-chat { top: 490px; right: 14px; bottom: 84px; left: 14px; }
  .product-thread-bubble { font-size: 14px; padding: 10px 12px; }
  .product-thread-keep-grid { gap: 6px; margin-top: 8px; }
  .product-thread-suggestion { height: 110px; padding: 8px; border-radius: 14px; }
  .product-thread-suggestion .product-suggestion-icon { width: 24px; height: 24px; }
  .product-thread-suggestion svg { width: 24px; height: 24px; }
  .product-thread-suggestion strong { font-size: 11px; }
  .product-thread-ask-slot { right: 0; bottom: 16px; left: 0; min-height: 50px; }
}

/* The four product-story sections: homepage, chat thread, apps, and Desk. */
.feature-eyebrow { display: block; margin-bottom: 22px; font: 600 14px/1.2 var(--heading-font); letter-spacing: .07em; }
.explore-section { padding-block: 0; padding-inline: max(0px, calc((100% - var(--content-width)) / 2)); }
.explore-screen-visual { display: grid; place-items: center; min-width: 0; min-height: var(--feature-visual-height); padding: clamp(24px, 3vw, 48px); background: var(--brand-lavender); overflow: hidden; }
.explore-preview-trigger { display: grid; justify-items: start; gap: 18px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.explore-preview-trigger img { display: block; width: 100%; height: auto; border: 2px solid var(--text); border-radius: 18px; box-shadow: 0 18px 32px #382d5d28; }
.explore-preview-trigger > span { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 18px; border-radius: 99px; background: var(--background); font: 600 16px/1 var(--heading-font); }
.explore-preview-trigger:hover img { transform: translateY(-3px); box-shadow: 0 22px 40px #382d5d32; }
.explore-preview-trigger:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.explore-copy { background: var(--ui-blue-100); }
.product-demo-panel { grid-column: 1 / -1; padding: 34px max(24px, var(--page-gutter)) 70px; background: var(--ui-blue-100); }
.product-demo-panel-bar { display: flex; align-items: center; justify-content: space-between; max-width: var(--content-width); margin: 0 auto 18px; font: 600 20px/1.2 var(--heading-font); }
.product-demo-close { min-height: 42px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 99px; background: transparent; color: var(--ink); font: 600 15px/1 var(--heading-font); cursor: pointer; }
.product-demo-close span { display: inline-block; margin-left: 8px; vertical-align: -3px; }
.product-demo-close span svg { width: 18px; height: 18px; }
.product-demo-close:hover { background: var(--background); }
.thread-screen-visual { display: grid; place-items: center; padding: 32px; background: var(--ui-red-200); }
.thread-screen-visual > img { position: relative; display: block; width: min(120%, 900px); max-width: none; height: auto; border: 2px solid var(--text); border-radius: 20px; box-shadow: 0 20px 38px #5d2e4730; }
@media (min-width: 761px) {
  .explore-section { background: linear-gradient(90deg, var(--brand-lavender) 50%, var(--ui-blue-100) 50%); }
  .ask-section { background: linear-gradient(90deg, var(--ui-orange-100) 50%, var(--background-warm) 50%); }
}
@media (max-width: 760px) {
  .explore-section { grid-template-rows: 340px auto auto; margin: 0 var(--page-gutter) 24px; padding: 0; background: var(--ui-blue-100); }
  .explore-screen-visual { grid-row: 1; min-height: 340px; padding: 20px; }
  .explore-preview-trigger { gap: 12px; }
  .explore-preview-trigger img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 0; }
  .explore-preview-trigger > span { min-height: 40px; font-size: 14px; }
  .explore-section > .explore-copy { grid-row: 2; }
  .explore-section > .product-demo-panel { grid-row: 3; padding: 20px 0 30px; }
  .product-demo-panel-bar { padding-inline: 16px; font-size: 16px; }
  .ask-section { grid-template-rows: 320px auto; }
  .thread-screen-visual { min-height: 320px; height: 320px; padding: 0; }
  .thread-screen-visual > img { width: 140%; border-radius: 0; }
  .feature-eyebrow { margin-bottom: 16px; font-size: 12px; }
  .desk-section { grid-template-rows: 480px auto; }
}

/* The Explore story uses cards and an open chat instead of app-like previews. */
.explore-card-stack { position: relative; min-width: 0; min-height: var(--feature-visual-height); overflow: hidden; background: var(--brand-lavender); }
.story-question-card { position: absolute; display: flex; flex-direction: column; width: min(36%, 255px); height: 320px; padding: 20px; border-radius: 28px; color: var(--text); box-shadow: 0 15px 20px #41326120; transform: rotate(var(--card-angle)); }
.story-card-fast { top: 11%; left: 4%; z-index: 4; --card-angle: -9deg; background: var(--brand-peach); }
.story-card-rainbow { top: 7%; left: 46%; z-index: 3; --card-angle: 8deg; background: var(--ui-blue-200); }
.story-card-leaf { top: 46%; left: 16%; z-index: 2; --card-angle: 7deg; background: var(--brand-mint); }
.story-card-medal { top: 45%; left: 56%; z-index: 1; --card-angle: -8deg; background: var(--brand-lime); }
.story-card-category { align-self: flex-start; z-index: 1; padding: 7px 12px; border-radius: 99px; background: #ffffffb8; font: 600 14px/1 var(--heading-font); }
.story-question-card img { position: absolute; top: 18px; right: 10px; width: 54%; height: 48%; object-fit: contain; }
.story-question-card h3 { position: relative; z-index: 1; margin: auto 0 0; font: 600 22px/1.1 var(--heading-font); letter-spacing: -.04em; }
.story-question-card h3 em { display: block; font: 600 1.02em/1.1 var(--font-accent); font-style: normal; font-synthesis: none; letter-spacing: -.025em; }
.story-card-progress { display: flex; gap: 4px; margin-top: auto; margin-bottom: 10px; }
.story-card-progress i { width: 15px; height: 5px; border-radius: 9px; background: #201b143a; }
.story-card-progress i:first-child { background: var(--text); }
.story-card-progress + h3 { margin-top: 0; }
.story-chat-visual { display: grid; place-items: center; padding: 32px 38px; background: var(--background-warm); }
.story-chat { display: flex; flex-direction: column; gap: 11px; width: min(100%, 650px); color: var(--text); }
.story-chat p { margin: 0; font: 500 18px/1.32 var(--heading-font); }
.story-chat-kid { align-self: flex-end; max-width: 82%; padding: 15px 18px; border-radius: 22px 22px 6px 22px; background: var(--text); color: white; }
.story-chat-answer { align-self: flex-start; max-width: 87%; padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: var(--background-subtle); }
.story-chat-media { display: flex; gap: 8px; width: 100%; min-height: 170px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
.story-chat-media[data-scroll-position="start"] { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%); }
.story-chat-media[data-scroll-position="middle"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.story-chat-media[data-scroll-position="end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
.story-chat-media:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.story-media-tile { position: relative; flex: 0 0 260px; height: 160px; margin: 0; border-radius: 20px; overflow: hidden; scroll-snap-align: start; background: var(--ui-orange-100); }
.story-media-video { background: var(--ui-teal-50); }
.story-media-falcon { background: var(--ui-blue-200); }
.story-media-tile > img, .story-media-tile > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-media-play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: #fff9edf2; box-shadow: 0 3px 10px #201b1426; cursor: pointer; }
.story-media-play img { display: block; width: 22px; height: 22px; }
.story-media-play.is-playing img { display: none; }
.story-media-play.is-playing::before, .story-media-play.is-playing::after { content: ''; width: 3px; height: 16px; border-radius: 2px; background: var(--text); }
.story-media-play.is-playing { grid-template-columns: repeat(2, 3px); gap: 4px; }
.story-media-play:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.story-chat-more { margin-top: 8px; }
.story-chat-more > span { display: block; margin-bottom: 12px; color: var(--text-muted); font: 600 13px/1 var(--heading-font); letter-spacing: .08em; }
.story-chat-suggestions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.story-chat-suggestions > div { display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; padding: 14px; border-radius: 22px; background: var(--brand-tangerine); color: var(--text); }
.story-chat-suggestions > div:nth-child(2) { background: var(--brand-banana); color: var(--text); }
.story-chat-suggestions > div:nth-child(3) { background: var(--brand-lavender); color: var(--text); }
.story-chat-suggestions > div:nth-child(4) { background: var(--ui-blue-200); color: var(--text); }
.story-chat-suggestions strong { font: 600 16px/1.13 var(--heading-font); letter-spacing: -.035em; }
.story-suggestion-icon { display: block; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--story-icon) center / contain no-repeat; mask: var(--story-icon) center / contain no-repeat; }
.icon-pencil { --story-icon: url('assets/kale/hugeicons/pencil.svg'); }
.icon-quiz { --story-icon: url('assets/kale/hugeicons/quiz.svg'); }
.icon-question { --story-icon: url('assets/kale/hugeicons/question.svg'); }
@media (max-width: 760px) {
  .explore-section { grid-template-rows: 380px auto; }
  .explore-card-stack { min-height: 380px; }
  .story-question-card { width: 49%; height: 205px; padding: 13px; border-radius: 18px; }
  .story-card-fast { top: 7%; left: 4%; }
  .story-card-rainbow { top: 5%; left: 48%; }
  .story-card-leaf { top: 42%; left: 8%; }
  .story-card-medal { top: 43%; left: 49%; }
  .story-card-category { padding: 5px 8px; font-size: 10px; }
  .story-question-card img { top: 12px; right: 7px; width: 52%; height: 50%; }
  .story-question-card h3 { font-size: 16px; }
  .story-card-progress { gap: 3px; margin-bottom: 5px; }
  .story-card-progress i { width: 9px; height: 3px; }
  .ask-section { grid-template-rows: auto auto; }
  .story-chat-visual { min-height: 0; height: auto; padding: 28px 16px; }
  .story-chat { gap: 8px; }
  .story-chat p { font-size: 14px; }
  .story-chat-kid, .story-chat-answer { padding: 10px 12px; border-radius: 15px; }
  .story-chat-media { min-height: 124px; }
  .story-media-tile { flex-basis: 185px; height: 115px; border-radius: 15px; }
  .story-chat-more { margin-top: 4px; }
  .story-chat-more > span { margin-bottom: 7px; font-size: 10px; }
  .story-chat-suggestions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .story-chat-suggestions > div { min-height: 80px; padding: 9px; border-radius: 14px; }
  .story-chat-suggestions strong { font-size: 13px; }
  .story-suggestion-icon { width: 20px; height: 20px; }
}

/* Paginated product story: Explore and chat screens inside the 3D device. */
.device-story { display: none; }
html[data-story-version="device"] { --story-grid-size: 24px; }
html[data-story-version="device"] .story-grid { background-color: var(--blue); background-image: linear-gradient(#ffffff80 1px, transparent 1px), linear-gradient(90deg, #ffffff80 1px, transparent 1px); background-size: var(--story-grid-size) var(--story-grid-size); }
html[data-story-version="device"] .intro-section { padding-top: 120px; padding-bottom: 120px; }
html[data-story-version="device"] .intro-section .display { margin: 0; line-height: 96px; }
html[data-story-version="device"] .intro-section p { display: none; }
html[data-story-version="device"] .device-story { display: block; min-height: 100svh; margin-top: calc(-96px - max(0px, calc(50svh - 630px))); }
html[data-story-version="device"] #explore,
html[data-story-version="device"] #ask { display: none; }
.device-story-scroll { touch-action: pan-y; user-select: none; cursor: grab; }
.device-story-scroll:active { cursor: grabbing; }
.device-story-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.device-story-frame { height: 100svh; }
.device-story-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: min(100%, var(--content-width)); height: 100%; margin: 0 auto; padding: 96px 32px 64px; box-sizing: border-box; }
.device-story-copy { display: grid; order: 1; width: min(100%, 800px); flex: 0 0 auto; min-height: 0; margin-top: 16px; text-align: center; color: var(--ink); }
.device-story-copy-home, .device-story-copy-thread, .device-story-copy-followup, .device-story-copy-camera { grid-area: 1 / 1; width: 100%; transition: opacity 220ms ease; }
.device-story-copy-thread, .device-story-copy-followup, .device-story-copy-camera { opacity: 0; }
.device-story-copy .display { margin: 0 0 16px; font-size: clamp(38px, 3.6vw, 56px); line-height: 64px; }
.device-story-copy p { max-width: 660px; margin: 0 auto; font-size: 20px; line-height: 32px; }
.device-story-device { position: relative; order: 0; flex: 0 0 min(790px, calc(100svh - 430px)); width: 100%; margin: 0; }
.device-story-stage { position: absolute; inset: 0; --control-space: 0px; }
.device-story-stage canvas, .device-story-stage .device-render { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.device-story-stage canvas { pointer-events: auto; }
.device-story-stage[data-ready] .device-render { display: none; }
.device-story-pagination { display: flex; align-items: center; order: 2; flex: 0 0 auto; gap: 8px; width: min(220px, calc(100vw - 40px)); margin-top: 40px; }
.device-story-pagination button { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.device-story-pagination button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.device-story-pagination .device-story-page { flex: 1 1 0; height: 32px; }
.device-story-pagination .device-story-autoplay-toggle { flex: 0 0 32px; width: 32px; height: 32px; }
.device-story-autoplay-toggle svg { display: block; width: 17px; height: 17px; }
.device-story-page i { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 4px; background: #0003; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.device-story-page i::after { content: ''; display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--ink); }
.device-story-page[data-complete] i::after { transform: scaleX(1); }
.device-story-page[aria-current="step"] i::after { transform: scaleX(var(--story-progress, 0)); }
@media (prefers-reduced-motion: reduce) { .device-story-autoplay-toggle { display: none !important; } .device-story-copy-home, .device-story-copy-thread, .device-story-copy-followup, .device-story-copy-camera { transition: none; } }
@media (min-width: 761px) and (max-height: 950px) {
  .device-story-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: 32px; padding: 100px 40px 40px; }
  .device-story-device { grid-area: 1 / 1 / 5 / 2; height: min(64svh, 580px); }
  .device-story-copy { grid-area: 2 / 2; width: 100%; margin: 0; text-align: left; }
  .device-story-copy p { margin-left: 0; }
  .device-story-pagination { grid-area: 3 / 2; justify-self: start; }
}
@media (max-width: 760px) {
  html[data-story-version="device"] .device-story { margin-top: 0; }
  html[data-story-version="device"] .intro-section { padding: 72px 8px 0; }
  html[data-story-version="device"] .intro-section .display { font-size: clamp(24px, 7.1vw, 32px); line-height: 48px; }
  .device-story-frame { height: auto; min-height: 100svh; }
  .device-story-inner { height: auto; min-height: 100svh; justify-content: flex-start; gap: 0; padding: 40px 0 24px; }
  .device-story-device { flex: 0 0 48svh; width: 100%; margin-top: 0; }
  .device-story-copy { width: 100%; margin-top: -24px; padding: 24px 24px 0; box-sizing: border-box; }
  .device-story-copy .display { margin-bottom: 12px; font-size: clamp(32px, 8vw, 42px); line-height: 48px; }
  .device-story-copy p { font-size: 16px; line-height: 24px; }
}

/* The first impression is a real moment with Kale; the checker continues in the product story. */
.benefit-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(calc(100% - 48px), 1400px); margin: 24px auto; }
.benefit-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--background-warm); }
.benefit-visual { position: relative; display: grid; place-items: center; height: clamp(280px, 24vw, 350px); overflow: hidden; }
.benefit-create .benefit-visual { background: var(--brand-banana); }
.benefit-activities { display: block; }
.benefit-activities img { position: absolute; display: block; width: min(24%, 88px); aspect-ratio: 1; height: auto; object-fit: contain; }
.benefit-activities img:nth-child(1) { left: 17%; top: 31%; transform: translate(-50%, -50%) rotate(-13deg); }
.benefit-activities img:nth-child(2) { left: 50%; top: 18%; transform: translate(-50%, -50%) rotate(9deg); }
.benefit-activities img:nth-child(3) { left: 83%; top: 31%; transform: translate(-50%, -50%) rotate(-8deg); }
.benefit-activities img:nth-child(4) { left: 17%; top: 71%; width: min(23%, 84px); transform: translate(-50%, -50%) rotate(12deg); }
.benefit-activities img:nth-child(5) { left: 50%; top: 51%; width: min(25%, 90px); transform: translate(-50%, -50%) rotate(-7deg); }
.benefit-activities img:nth-child(6) { left: 83%; top: 71%; width: min(23%, 84px); transform: translate(-50%, -50%) rotate(10deg); }
.benefit-activities img:nth-child(7) { left: 50%; top: 83%; width: min(21%, 78px); transform: translate(-50%, -50%) rotate(-9deg); }
.session-start-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--background-primary); color: #fff; }
.session-start-logo { display: block; width: 96px; height: auto; filter: brightness(0) invert(1); }
.session-start-slide { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; width: min(210px, 90%); padding: 5px; border-radius: 999px; background: var(--brand-peach); color: var(--ink); font: 600 13px/1 var(--heading-font); transform: translateY(12px); }
.session-start-arrow { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; }
.session-start-arrow img { display: block; width: 21px; height: auto; }
.session-start-label { min-width: 0; text-align: center; white-space: nowrap; }
.benefit-keep .benefit-visual { background: var(--brand-lime); }
.benefit-keepsakes > img { position: absolute; display: block; width: 43%; aspect-ratio: 1; height: auto; padding: 9px; background: var(--background); object-fit: cover; box-shadow: 6px 8px 0 #49644328; }
.benefit-keepsakes > img:nth-child(1) { left: 8%; top: 24%; transform: rotate(-10deg); }
.benefit-keepsakes > img:nth-child(2) { left: 32%; top: 7%; transform: rotate(5deg); }
.benefit-keepsakes > img:nth-child(3) { left: 54%; top: 27%; transform: rotate(12deg); }
.benefit-sessions .benefit-visual { background: var(--ui-blue-200); }
.benefit-sessions .session-tablet { width: min(84%, 330px); aspect-ratio: auto; transform: rotate(5deg); box-shadow: 12px 14px 0 #344e7029; }
.benefit-sessions .session-start-screen { box-sizing: content-box; width: calc(100% - 18px); height: auto; aspect-ratio: 8 / 5; }
.benefit-copy { flex: 1; min-height: 244px; padding: 26px 28px 34px; }
.benefit-create .benefit-copy { background: var(--ui-yellow-100); }
.benefit-keep .benefit-copy { background: var(--ui-teal-100); }
.benefit-sessions .benefit-copy { background: var(--ui-blue-100); }
.benefit-copy .display { margin: 0; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.08; }
.benefit-copy p { margin: 20px 0 0; font: 400 18px/1.45 var(--font-body); text-wrap: pretty; }
@media (max-width: 900px) {
  .benefit-section { grid-template-columns: 1fr; gap: 16px; width: min(calc(100% - 32px), 600px); margin-block: 16px; }
  .benefit-visual { height: clamp(270px, 65vw, 340px); }
  .benefit-copy { min-height: 0; padding: 24px 20px 30px; }
  .benefit-copy .display { font-size: clamp(30px, 7vw, 38px); }
  .benefit-copy p { margin-top: 16px; font-size: 17px; }
}
@media (max-width: 760px) {
  .benefit-sessions .session-tablet { width: min(76%, 290px); }
}
@media (max-width: 360px) {
  .benefit-sessions .session-start-screen { gap: 12px; }
}
.grid-wrap { padding: 0; background: none; }
.grid-wrap #main { height: auto; }
.hero { position: relative; display: flex; align-items: center; height: 90svh; min-height: 0; max-height: 90svh; overflow: hidden; background: #67b4e9; }
.hero-photo { position: absolute; inset: 0; background: url(assets/kale/hero-child.webp) center center / cover no-repeat; }
.hero-copy { position: relative; z-index: 1; width: min(100%, var(--content-width)); margin: 0 auto; padding: 130px 52px 70px; align-items: flex-start; text-align: left; background: none; color: var(--ink); }
.hero-copy p { max-width: 410px; margin: 18px 0 0; color: #fff; text-wrap: pretty; }
.hero-body { align-items: flex-start; }
.hero .hero-heading { max-width: 680px; margin: 0; color: var(--yellow); font-size: clamp(72px, 7vw, 112px); }
.hero .hero-heading-lead { font-size: clamp(34px, 3vw, 48px); }
.hero-cta { margin-top: 36px; background: var(--teal-action); color: #fff; box-shadow: none; }
.hero-cta:hover { background: var(--teal-action-hover); }
.hero .hero-heading-lead { color: var(--yellow); }
@media (max-width: 760px) {
  .grid-wrap { height: auto; min-height: 0; padding: 0; }
  .hero { height: auto; min-height: max(100svh, 720px); max-height: none; align-items: flex-start; background: #499ad4; }
  .hero-photo { inset: auto 0 0; height: 58svh; background-size: auto 100%; background-position: 72% center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 100%); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 100%); }
  .header-cta { display: none; }
  .site-header[data-hero-cta-passed] .header-cta { display: inline-flex; }
  .menu-toggle { margin-left: auto; }
  .site-header[data-hero-cta-passed] .menu-toggle { margin-left: 0; }
  .hero-copy { display: flex; width: 100%; margin: 0; padding: calc(var(--header-top) + var(--header-height) + 32px) 22px 0; align-items: center; text-align: center; background: none; }
  .hero .hero-heading { text-align: center; font-size: clamp(42px, 11vw, 50px); }
  .hero .hero-heading-lead { font-size: clamp(24px, 7vw, 32px); }
  .hero .hero-heading em { white-space: nowrap; }
  .hero-body { text-align: center; align-items: center; padding: 0; }
  .hero-copy p { max-width: 360px; margin-top: 16px; font-size: 16px; }
  .hero-cta { margin-top: 28px; }
}
/* The phone shows a rendered screen from the grown-up app design. */
.parent-phone {
  aspect-ratio: 390 / 844;
  min-height: 0;
  padding: 0;
}
.parent-phone::after { display: none; }
.parent-phone .phone-island { z-index: 1; }
.parent-phone-screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.parent-phone-screen.is-active { opacity: 1; }
/* Each list item picks the screen the phone shows. */
.parent-list > li {
  position: relative;
  margin: -12px -14px;
  padding: 12px 14px;
  border-radius: 18px;
  transition: background-color .2s ease;
}
.parent-list > li.is-active { background: rgb(255 255 255 / 55%); }
.parent-list > li.is-active p,
.parent-list > li.is-active > span { color: var(--text); }
.parent-list h3 button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.parent-list h3 button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.parent-list h3 button:focus-visible { outline: none; }
.parent-list > li:has(button:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .parent-phone-screen, .parent-list > li { transition: none; }
}