/* Public marketing shell, Figma 304:1141. Shared controls and primitives: styles.css. */
.landing-page {
  --font-family: "Open Sans", "Noto Sans Hebrew", Arial, sans-serif;
  --landing-step-background: #e3e1f4;
  --landing-section-space: calc(var(--space-40) * 2);
  --landing-hero-height: 445px;
  --landing-hero-aspect-ratio: 2361 / 732;
  --landing-hero-copy-width: 518px;
  --landing-faq-width: 684px;
  --landing-title-weight: 800;
  --landing-title-line: 1.167;
  background: var(--primary-white);
  color: var(--primary-dark);
  font-size: var(--text-body-1);
}
.landing-page main { padding: 0; }
.landing-page p { margin: 0; color: var(--primary-main-sub); }
.landing-page h1, .landing-page h2, .landing-page h3 { margin: 0; }
.landing-page h2 { font-size: var(--text-h4); line-height: var(--line-ui); }
.landing-page h3 { font-size: var(--text-h5); line-height: var(--line-ui); }
.landing-page a { color: inherit; }
.landing-page .btn { text-decoration: none; }
.landing-page .secondary-btn { color: var(--primary-main); }
.landing-page :is(a, summary):focus-visible { outline: var(--space-2) solid var(--primary-main); outline-offset: var(--space-4); }
.landing-page :is(.landing-topbar, .landing-hero, .landing-closing) :focus-visible { outline-color: var(--secondary-light); }
.landing-page:has(dialog[open]) { overflow: hidden; }
.landing-container { width: min(var(--container), calc(100% - var(--space-page-x) * 2)); margin-inline: auto; }
.landing-section { padding-block: var(--landing-section-space); }
.landing-page section[id] { scroll-margin-top: calc(var(--space-60) + var(--space-20)); }
.landing-topbar { height: var(--text-h1); }
.landing-topbar .landing-login { justify-self: start; min-width: calc(var(--space-40) * 2); }
.landing-nav { display: flex; direction: rtl; align-items: center; gap: var(--space-30); }
.landing-nav a { color: var(--primary-light); text-decoration: none; padding-block: var(--space-10); }
.landing-nav a:hover { color: var(--primary-white); text-decoration: underline; text-underline-offset: var(--space-6); }
.landing-skip { position: fixed; z-index: 30; inset-block-start: var(--space-8); inset-inline-start: var(--space-20); padding: var(--space-10) var(--space-20); background: var(--primary-white); transform: translateY(-200%); border-radius: var(--radius-sm); }
.landing-skip:focus { transform: translateY(0); }
.landing-hero { position: relative; width: 100%; aspect-ratio: var(--landing-hero-aspect-ratio); min-height: var(--landing-hero-height); display: flex; align-items: center; padding: var(--space-40) var(--space-page-x) var(--space-60); background: var(--primary-dark); isolation: isolate; }
.landing-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: -1; }
.landing-hero-content { width: min(43%, var(--landing-hero-copy-width)); }
.landing-hero h1 { font-size: var(--text-h1); font-weight: var(--landing-title-weight); line-height: var(--landing-title-line); color: var(--primary-white); margin-block-end: var(--space-14); }
.landing-hero p, .landing-closing p { color: var(--primary-light); }
.landing-actions { display: flex; gap: var(--space-14); margin-block-start: var(--space-30); }
.landing-page .landing-join { color: var(--primary-white); font-weight: var(--font-weight-semibold); }
.landing-join:hover { background: var(--secondary-light); }
.landing-join:active { background: var(--secondary-main-sub); }
.landing-how { background: var(--landing-step-background); }
.landing-section-title { text-align: center; margin-block-end: var(--space-50) !important; }
.landing-section-title::after { content: ""; display: block; width: var(--space-40); height: var(--space-4); margin: var(--space-14) auto 0; border-radius: var(--radius-pill); background: var(--secondary-main); }
.landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); list-style: none; padding: 0; margin: 0; }
.landing-step { overflow: hidden; background: var(--primary-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.landing-step > img { width: 100%; height: var(--text-h4); display: block; object-fit: cover; }
.landing-step-copy { padding: var(--space-20); }
.landing-step-number { width: var(--space-40); height: var(--space-40); display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--primary-main); color: var(--primary-white); font-weight: var(--font-weight-bold); margin-block-end: var(--space-14); }
.landing-step h3 { margin-block-end: var(--space-8); }
.landing-step p { font-size: var(--text-body-2); }
.landing-benefits { padding-block: var(--landing-section-space); }
.landing-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-40); }
.landing-benefit-copy { min-width: 0; }
.landing-children .landing-benefit-copy { grid-column: 2; grid-row: 1; }
.landing-children .landing-benefit-art { grid-column: 1; grid-row: 1; transform: scaleX(-1); }
.landing-benefit-art { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.landing-tag { display: inline-block; padding: var(--space-6) var(--space-10); background: var(--primary-light); color: var(--primary-main-sub); border-radius: var(--radius-sm); font-size: var(--text-body-2); margin-block-end: var(--space-8); }
.landing-intro { margin-block-start: var(--space-8) !important; }
.landing-benefit-list { display: grid; gap: var(--space-20); list-style: none; margin: var(--space-30) 0 0; padding: 0; }
.landing-benefit-list li { position: relative; padding-inline-start: var(--space-30); }
.landing-benefit-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: var(--space-6); width: var(--space-10); height: var(--space-10); border-radius: var(--radius-pill); background: var(--secondary-main); }
.landing-benefit-list h3 { font-size: var(--text-body-1); margin-block-end: var(--space-4); }
.landing-benefit-list p { font-size: var(--text-body-2); }
.landing-parents { background: var(--primary-background); }
.landing-examples { background: var(--secondary-main); }
.landing-examples h2 { color: var(--primary-white); }
.landing-examples .landing-intro { color: var(--secondary-background); }
.landing-examples .landing-tag { background: var(--secondary-dark); color: var(--primary-white); }
.landing-examples-art { position: relative; width: 100%; aspect-ratio: 558 / 399; overflow: hidden; }
.landing-examples-art img { position: absolute; width: 110.39%; height: 120.89%; left: -6.99%; top: -10.32%; object-fit: cover; }
.landing-ribbon { height: var(--space-50); background: url('/assets/landing/ribbon.webp') center bottom / cover no-repeat; }
.landing-ribbon-bottom { background-position: center; }
.landing-faq { overflow: hidden; }
.landing-faq-layout { position: relative; isolation: isolate; --landing-art-overlap: var(--space-40); --landing-faq-edge: max(0px, calc((100% - var(--landing-faq-width)) / 2)); }
.landing-faq-list { position: relative; z-index: 1; width: min(100%, var(--landing-faq-width)); margin-inline: auto; display: grid; gap: var(--space-14); }
.landing-faq-item { padding: var(--space-14) var(--space-20); border-radius: var(--radius-card); background: var(--primary-background); }
.landing-faq-item h3 { font-size: var(--text-body-1); font-weight: var(--font-weight-bold); }
.landing-faq-item p { font-size: var(--text-body-2); margin-block-start: var(--space-8); }
.landing-faq-art { position: absolute; object-fit: contain; pointer-events: none; --landing-art-width: 18%; width: var(--landing-art-width); height: auto; }
.landing-robot { inset-inline-end: calc(var(--landing-faq-edge) - var(--landing-art-width) + var(--landing-art-overlap)); top: 0; --landing-art-width: 14%; transform: rotate(-5deg); }
.landing-book { inset-inline-start: calc(var(--landing-faq-edge) - var(--landing-art-width) + var(--landing-art-overlap)); top: 22%; transform: rotate(5deg); }
.landing-gamepad { inset-inline-end: calc(var(--landing-faq-edge) - var(--landing-art-width) + var(--landing-art-overlap)); top: 53%; transform: rotate(-20deg); }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .landing-robot, .landing-gamepad { translate: 0 calc(var(--landing-parallax-progress, 0) * var(--space-20)); }
  .landing-book { translate: 0 calc(var(--landing-parallax-progress, 0) * var(--space-14) * -1); }
}
.landing-lamp { inset-inline-start: 2%; bottom: calc(var(--landing-section-space) * -1); width: 13%; }
.landing-closing { background: var(--primary-dark); text-align: center; }
.landing-closing-art { display: block; width: min(100%, 438px); aspect-ratio: 438 / 231; object-fit: contain; margin: 0 auto var(--space-20); }
.landing-closing h2 { color: var(--primary-white); font-size: var(--text-h1); line-height: var(--landing-title-line); font-weight: var(--landing-title-weight); margin-block-end: var(--space-14); }
.landing-closing-actions { margin-block-start: var(--space-40); display: grid; justify-items: center; gap: var(--space-14); }
.landing-page .landing-small { font-size: var(--text-sub); }
.landing-page .landing-join-dialog { width: min(100% - var(--space-40), var(--landing-hero-copy-width)); max-height: calc(100dvh - var(--space-40)); color: var(--primary-dark); }
.landing-join-dialog form { padding: var(--space-30); }
.landing-join-dialog h2 { font-size: var(--text-h4); }
.landing-join-dialog .landing-email { color: var(--primary-main); overflow-wrap: anywhere; text-underline-offset: var(--space-4); font-size: var(--text-h5); }
.landing-join-dialog .dialog-actions { direction: rtl; justify-content: end; }
.landing-join-dialog .dialog-actions .btn { min-width: calc(var(--space-40) * 2); }
.landing-noscript { padding: var(--space-20); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.landing-page) { scroll-behavior: smooth; }
}
@media (max-width: 1100px) {
  .landing-page { --landing-section-space: var(--space-60); }
  .landing-hero h1 { font-size: var(--text-h2); }
  .landing-hero-content { width: 46%; }
  .landing-step h3 { font-size: var(--text-reading); }
  .landing-faq-layout { --landing-art-overlap: var(--space-30); }
  .landing-faq-art { opacity: 0.65; --landing-art-width: 12%; }
}
@media (max-width: 760px) {
  .landing-page { --space-page-x: var(--space-20); --landing-section-space: var(--space-50); }
  .landing-topbar { height: auto; min-height: var(--space-50); grid-template-columns: 1fr 1fr; padding-block-start: var(--space-8); }
  .landing-topbar .brand-lockup { grid-column: 2; grid-row: 1; }
  .landing-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: var(--space-10); font-size: var(--text-sub); }
  .landing-topbar .landing-login { min-height: var(--button-md-height); }
  .landing-page section[id] { scroll-margin-top: calc(var(--space-50) * 2); }
  .landing-hero { display: flex; flex-direction: column; aspect-ratio: auto; padding: 0; }
  .landing-hero-content { order: -1; width: 100%; padding: var(--space-40) var(--space-page-x); text-align: center; }
  .landing-hero h1 { font-size: clamp(var(--text-h4), 7.8vw, var(--text-h2)); }
  .landing-hero .landing-hero-tag { display: none; }
  .landing-hero p { font-size: var(--text-body-2); }
  .landing-hero p br { display: none; }
  .landing-actions { justify-content: center; margin-block-start: var(--space-20); }
  .landing-hero-art { position: static; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: left; z-index: auto; }
  .landing-page .btn-lg { min-height: calc(var(--space-40) + var(--space-4)); }
  .landing-steps { grid-template-columns: 1fr; gap: var(--space-20); }
  .landing-step h3 { font-size: var(--text-h5); }
  .landing-step-copy { padding: var(--space-20); }
  .landing-section-title { margin-block-end: var(--space-30) !important; }
  .landing-page h2 { font-size: var(--text-h5); }
  .landing-benefit-grid { display: flex; flex-direction: column; gap: var(--space-20); }
  .landing-benefit-copy { width: 100%; }
  .landing-benefit-art { width: min(100%, 438px); }
  .landing-faq-art { display: none; }
  .landing-closing h2 { font-size: var(--text-h3); }
  .landing-closing-art { width: min(100%, var(--landing-hero-copy-width)); }
  .landing-closing-actions { margin-block-start: var(--space-30); }
  .landing-join-dialog form { padding: var(--space-20); }
  .landing-join-dialog .landing-email { font-size: var(--text-reading); }
  .landing-join-dialog .dialog-actions .btn { width: 100%; }
}

@media (max-width: 760px) {
}

.landing-example-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-14); margin-block: var(--space-20); }
.landing-example-topics .landing-faq-item { background: var(--secondary-background); }
.landing-example-label { display: block; color: var(--primary-main); font-size: var(--text-body-2); margin-block-end: var(--space-8); }
.landing-example-topics h3 { color: var(--primary-dark); }
.landing-page .landing-example-note { color: var(--primary-dark); font-size: var(--text-body-2); }
@media (max-width: 760px) {
  .landing-example-topics { grid-template-columns: 1fr; }
}

/* Four-stage public example viewer, Figma 311:2851; shared evidence primitives. */
.landing-page .landing-examples-dialog { --landing-demo-width: 880px; max-height: calc(100dvh - var(--space-40)); background: var(--primary-white); color: var(--primary-dark); width: min(var(--landing-demo-width), calc(100% - var(--space-40))); padding: 0; overflow: hidden; box-shadow: var(--shadow-dialog); }
.demo-shell { display: flex; flex-direction: column; max-height: calc(100dvh - var(--space-40)); }
.demo-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-14); padding: var(--space-20); }
.demo-heading { min-width: 0; display: grid; gap: var(--space-8); }
.demo-heading h2 { font-size: var(--text-h4); }
.demo-close { flex-shrink: 0; padding: var(--space-10); }
.demo-close img { width: var(--space-20); height: var(--space-20); }
.demo-back { justify-self: start; gap: var(--space-4); }
.landing-examples-dialog [hidden] { display: none; }
.demo-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; gap: var(--space-4); margin: 0; padding: 0 var(--space-20) var(--space-14); counter-reset: demo-step; }
.demo-progress li { counter-increment: demo-step; padding: var(--space-8); background: var(--primary-background); color: var(--primary-main-sub); border-radius: var(--radius-sm); font-size: var(--text-body-2); }
.demo-progress li::before { content: counter(demo-step) ". "; }
.demo-progress [aria-current] { background: var(--primary-main); color: var(--primary-white); font-weight: 700; }
.demo-body { grid-template-columns: minmax(0, 1fr); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-20) var(--space-20); display: grid; gap: var(--space-20); }
.demo-footer { display: flex; justify-content: space-between; gap: var(--space-14); padding: var(--space-20); box-shadow: var(--shadow-card); }
.demo-footer > :last-child { margin-inline-start: auto; }
.demo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.demo-task { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-14); padding: var(--space-14); border-radius: var(--radius-sm); background: var(--primary-background); }
.demo-task > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.demo-task h3 { font-size: var(--text-reading); }
.demo-task .btn { margin-top: auto; white-space: normal; }
.demo-task .btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.demo-task:focus-within { outline: var(--space-2) solid var(--primary-main); outline-offset: var(--space-2); }
.demo-number { align-self: flex-start; border-radius: var(--radius-sm); padding: var(--space-4) var(--space-8); background: var(--primary-main); color: var(--primary-white); font-weight: 700; }
.demo-reading-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.demo-paragraphs { display: grid; gap: var(--space-20); margin-top: var(--space-20); }
.landing-page .demo-paragraphs p { position: relative; padding-inline-start: var(--space-30); color: var(--body-main); font-size: var(--text-reading); line-height: var(--line-copy); }
.demo-paragraph-number { position: absolute; inset-inline-start: 0; color: var(--primary-main-sub); font-size: var(--text-body-2); }
.demo-body .evidence-card { display: grid; gap: var(--space-14); background: var(--primary-background); box-shadow: none; }
.demo-body .evidence-card h3, .demo-analysis h3 { font-size: var(--text-reading); }
.demo-body .evidence-card-heading { margin: 0; }
.demo-body .evidence-card-section { margin-top: 0; }
.landing-page .demo-answer { padding: var(--space-14); background: var(--primary-white); color: var(--body-main); border-radius: var(--radius-sm); white-space: pre-line; }
.demo-body .selected-evidence-passage { background: var(--primary-white); color: var(--primary-main-sub); }
.landing-page .demo-caption { font-size: var(--text-body-2); }
.demo-analysis { display: grid; gap: var(--space-8); padding: var(--space-20); border-radius: var(--radius-sm); }
.demo-analysis.contentful { background: var(--tertiary-green-light); color: var(--primary-dark); }
.demo-analysis.partial { background: var(--tertiary-yellow-light); color: var(--primary-dark); }
.landing-page .demo-analysis p, .landing-page .demo-analysis h3 { color: inherit; }
.demo-sources summary { cursor: pointer; font-weight: 700; padding-block: var(--space-10); }
@media (max-width: 760px) {
  .landing-page .landing-examples-dialog { width: calc(100% - var(--space-20)); max-height: calc(100dvh - var(--space-20)); }
  .demo-shell { max-height: calc(100dvh - var(--space-20)); }
  .demo-header, .demo-footer { padding: var(--space-14); }
  .demo-body { padding-inline: var(--space-14); }
  .demo-heading h2 { font-size: var(--text-h5); }
  .demo-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--space-14); }
  .demo-gallery { grid-template-columns: minmax(0, 1fr); }
  .demo-footer .btn { padding-inline: var(--space-14); white-space: normal; }
  .demo-body .evidence-card { padding: var(--space-14); }
  .demo-close, .demo-back { min-height: calc(var(--space-40) + var(--space-4)); }
}

.demo-body .evidence-shell { grid-area: auto; }

.landing-hero .landing-hero-tag { background: var(--primary-main-sub); color: var(--primary-white); font-size: var(--text-body-2); line-height: var(--line-ui); margin-block-end: var(--space-14); max-width: 100%; }
.landing-example-link { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-10); text-align: start; font: inherit; color: var(--primary-dark); border: 0; cursor: pointer; }
.landing-example-link > :last-child { margin-block-start: auto; }
.landing-example-link > :first-child { font-weight: var(--font-weight-bold); }
.landing-example-link:hover { box-shadow: var(--shadow-card); }
.landing-footer { font-size: var(--text-body-2); padding-block: var(--space-30); background: var(--primary-background); }
.landing-footer .landing-container, .landing-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-20); }
.landing-footer a { text-underline-offset: var(--space-4); }
.landing-contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-block: var(--space-20); }
.landing-contact-actions .btn { white-space: normal; }
#copy-email-status:empty { display: none; }
@media (max-width: 760px) {
  .demo-heading { gap: var(--space-4); }
  .demo-header { padding-block: var(--space-10); }
  .demo-heading #examples-description { display: none; }
  .demo-progress { display: flex; gap: 0; padding-bottom: var(--space-8); }
  .demo-progress li { display: none; }
  .demo-progress [aria-current] { display: block; flex: 1; padding: var(--space-6) var(--space-10); }
  .demo-progress [aria-current]::before { content: counter(demo-step) " / 4 · "; }
}
@media (max-width: 760px) {
  .demo-progress [aria-current]:nth-child(2)::before { content: "2 / 4 · "; }
  .demo-progress [aria-current]:nth-child(3)::before { content: "3 / 4 · "; }
  .demo-progress [aria-current]:nth-child(4)::before { content: "4 / 4 · "; }
}
.landing-contact-actions a.btn-primary { color: var(--primary-white); }
@media (max-width: 760px) {
  .landing-contact-actions { flex-direction: column; }
  .landing-contact-actions .btn { min-height: calc(var(--space-40) + var(--space-4)); }
}

.demo-full-text { display: grid; gap: var(--space-20); padding-block: var(--space-14); font-size: var(--text-reading); line-height: var(--line-copy); }

/* Pilot invitation: centered contact block with shared decorative ribbon. */
.landing-join-dialog form { border-start-start-radius: 0; border-start-end-radius: 0; }
.landing-join-ribbon {
  height: 26px;
  background: url('/assets/card-ribbon.webp') center 63.81% / 100% auto no-repeat;
}
.landing-join-dialog form {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  text-align: center;
}
.landing-join-art {
  display: block;
  width: min(100%, calc(var(--space-40) * 6));
  height: auto;
  align-self: center;
}
.landing-join-dialog .landing-email {
  display: block;
  padding: var(--space-14);
  border-radius: var(--radius-sm);
  background: var(--primary-background);
  text-align: center;
}
.landing-join-dialog .landing-contact-actions {
  justify-content: center;
  margin: 0;
}
.landing-join-dialog .dialog-actions { margin-top: var(--space-8); }

/* Non-modal privacy strip; native dialogs remain above it in the top layer. */
.landing-analytics-notice { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; background: var(--primary-white); box-shadow: var(--shadow-card); padding-block: var(--space-14); }
.landing-analytics-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); }
.landing-analytics-bar p { margin: 0; font-size: var(--text-body-2); color: var(--primary-main-sub); }
.landing-analytics-bar .landing-contact-actions { flex-direction: row; flex-wrap: nowrap; flex-shrink: 0; margin: 0; }
@media (max-width: 760px) {
  .landing-analytics-bar { flex-direction: column; align-items: stretch; gap: var(--space-10); }
  .landing-analytics-bar .landing-contact-actions .btn { flex: 1; }
}