/*
 * Overview
 * Dafi Shpilman marketing page. Replace the marketing.css import with this file;
 * retain scene styles. All selectors are scoped to .ds-marketing.
 *
 * Tokens and foundations
 * Source: uploaded DESIGN.md and SKILL.md. Exact extracted values live in :root.
 * Duplicate radius-full values become radius-circle and radius-full (pill).
 * Duplicate motion records become typed durations/easing/transition tokens;
 * `all` and `none` are transition properties, not valid duration values.
 * Fonts must be supplied by the host with appropriate licenses. No remote import.
 * Generic sans-serif is a fallback, not an additional branded font.
 *
 * Anatomy, variants, responsive behavior
 * Existing ds-* classes cover hero, experience, method, services, contact, footer.
 * Mobile first; two columns begin at 768px (12 x space-16). CSS variables cannot
 * be used in media-query conditions. Layout widths derive from spacing tokens.
 *
 * States and interactions
 * Native anchors/buttons retain keyboard behavior. Hover, focus-visible, active,
 * disabled, aria-busy, aria-invalid, data-state=error/empty are styled below.
 * Disabled links require JS to suppress activation and tabindex=-1 as appropriate.
 * aria-busy announces work; the host must prevent duplicate submissions.
 *
 * Accessibility
 * Use dir=rtl/lang=he in markup, meaningful labels, real headings, image alt text,
 * aria-pressed for choices, aria-current=step for method navigation, role=status
 * for async feedback and descriptive error text linked with aria-describedby.
 * Pale palette colors are surfaces/decorations, not small text on white.
 * Focus uses a contrasting inner/outer ring. Errors never depend on color alone.
 * CSS cannot implement keyboard logic, ARIA announcements, or disable JS motion.
 * Existing Framer Motion code must continue to honor useReducedMotion().
 *
 * Content guidelines
 * Preserve Dafi's Hebrew copy. Allow wrapping; no truncation or uppercase prose.
 * Anti-patterns
 * Do not load the old marketing stylesheet alongside this replacement, nest
 * interactive controls, use low-contrast beige text on white, or hide error text.
 * QA checklist
 * Static parsing/token checks performed separately. Before integration, visually
 * verify 360px and 1440px widths, 200% zoom, keyboard order, every state, long copy,
 * supplied fonts, image crops, and reduced motion. This file does not publish a site.
 */

:root {
  --color-1: #000000;
  --color-2: #15495F;
  --color-3: #0077C0;
  --color-4: #3A8DC2;
  --color-5: #3994C9;
  --color-6: #A69C8C;
  --color-7: #C6A578;
  --color-8: #87CEEB;
  --color-9: #F4DFAB;
  --color-10: #E5E7EB;
  --color-11: #EEE9E3;
  --color-12: #FFFFFF;

  --font-display: "Discovery FS", "Open Sans Hebrew", sans-serif;
  --font-body: "Open Sans Hebrew", "Discovery FS", sans-serif;
  --text-xs: 10px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 26px;
  --text-4xl: 32px;
  --text-9: 50px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --line-height-1: 34px;
  --line-height-2: 38px;
  --line-height-3: 22px;
  --line-height-4: 26px;
  --line-height-5: 30px;
  --line-height-6: 50px;
  --line-height-7: 15px;
  --line-height-8: 24px;
  --line-height-9: 16px;
  --line-height-10: 31.5px;
  --line-height-11: 21px;
  --line-height-12: 19.2px;

  --space-base: 4px;
  --space-1: 1px;
  --space-2: 3px;
  --space-3: 4px;
  --space-4: 5px;
  --space-5: 8px;
  --space-6: 10px;
  --space-7: 12px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 42px;
  --space-14: 48px;
  --space-15: 52px;
  --space-16: 64px;
  --space-17: 112px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-circle: 50%;
  --radius-full: 9999px;
  --shadow-sm: rgb(255, 255, 255) 0px 0px 0px 3px inset;
  --shadow-md: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;

  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --duration-transform: 0.4s;
  --duration-reveal: 0.7s;
  --delay-base: 0.03s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-transform: cubic-bezier(0.65, 0.05, 0.36, 1);
  --transition-property-all: all;
  --transition-property-none: none;
  --transition-colors: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard),
    fill var(--duration-fast) var(--ease-standard),
    stroke var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-standard);
  --transition-reveal: opacity var(--duration-base),
    transform var(--duration-reveal) var(--ease-transform);
}

.ds-marketing {
  --ds-gutter: var(--space-10);
  --ds-section: var(--space-16);
  --ds-canvas: var(--color-12);
  --ds-ink: var(--color-2);
  --ds-soft: var(--color-2);
  --ds-line: var(--color-10);
  position: relative;
  isolation: isolate;
  direction: rtl;
  color: var(--ds-ink);
  background: var(--ds-canvas);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-8);
  overflow-wrap: anywhere;
}

.ds-marketing *, .ds-marketing *::before, .ds-marketing *::after { box-sizing: border-box; }
.ds-marketing ::selection { color: var(--color-2); background: var(--color-9); }
.ds-marketing :where(h1, h2, h3, p, figure, ul, ol) { margin: 0; }
.ds-marketing :where(h1, h2, h3) { font-family: var(--font-display); font-weight: var(--weight-semibold); text-wrap: balance; }
.ds-marketing h1 { font-size: var(--text-9); line-height: var(--line-height-6); }
.ds-marketing h2 { font-size: var(--text-4xl); line-height: var(--line-height-2); }
.ds-marketing h3 { font-size: var(--text-3xl); line-height: var(--line-height-1); }
.ds-marketing p { text-wrap: pretty; }
.ds-marketing :where(h1, h2) > span { color: var(--color-3); }
.ds-marketing a { color: inherit; text-decoration-thickness: var(--space-1); text-underline-offset: var(--space-3); }
.ds-marketing :where(a, button, input, textarea, select) { transition: var(--transition-colors); }
.ds-marketing :where(button, input, textarea, select) { font: inherit; }
.ds-marketing :where(button, a) { touch-action: manipulation; }
.ds-marketing button { cursor: pointer; }
.ds-marketing :where(a, button, input, textarea, select):focus-visible {
  outline: var(--space-2) solid var(--color-2);
  outline-offset: var(--space-2);
  box-shadow: 0 0 0 var(--space-2) var(--color-12);
}
.ds-marketing :where(a, button):active { text-decoration: underline; }
.ds-marketing :where(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"]) {
  color: var(--color-2);
  background: var(--color-10);
  border-color: var(--color-2);
  cursor: not-allowed;
  text-decoration: none;
}
.ds-marketing :where([aria-busy="true"], [data-state="loading"]) { cursor: progress; border-style: dashed; }
.ds-marketing [hidden] { display: none !important; }
.ds-marketing img { display: block; max-inline-size: 100%; block-size: auto; }
.ds-marketing :where(section, li[id]) { scroll-margin-block-start: var(--space-11); }
.ds-marketing .ds-wrap { padding-inline: var(--ds-gutter); }
.ds-marketing :where(.ds-wrap, .ds-hero, .ds-closing, .ds-footer) { max-inline-size: calc(var(--space-17) * 12); margin-inline: auto; }
.ds-marketing .ds-kicker { font-size: var(--text-sm); margin-block-end: var(--space-10); }
.ds-marketing .ds-name { font-weight: var(--weight-semibold); font-size: var(--text-xl); text-decoration: none; }
.ds-marketing .ds-name span { display: block; margin-block-start: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.ds-marketing .ds-action {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--space-11); min-block-size: var(--space-14);
  padding: var(--space-7) var(--space-8); border-radius: var(--radius-sm);
  color: var(--color-12); background: var(--color-3);
  font-weight: var(--weight-semibold); text-decoration: none;
}
.ds-marketing :where(.ds-action > span, .ds-copy > span) { font-size: var(--text-3xl); }

/* Hero: independent title, image and logo planes without fixed text heights. */
.ds-marketing .ds-hero { padding: 0 var(--ds-gutter) var(--ds-section); display: grid; gap: var(--space-11); }
.ds-marketing .ds-programme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10); padding-block: var(--space-10); border-block-end: var(--space-1) solid var(--ds-line); }
.ds-marketing :where(.ds-programme nav, .ds-footer nav) { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.ds-marketing :where(.ds-programme nav a, .ds-footer a) { display: inline-flex; align-items: center; min-block-size: var(--space-14); }
.ds-marketing .ds-title-plane { min-inline-size: 0; }
.ds-marketing .ds-hero-line { margin-block-start: var(--space-10); font-size: var(--text-2xl); line-height: var(--line-height-5); }
.ds-marketing .ds-title-plane .ds-action { margin-block-start: var(--space-11); }
.ds-marketing .ds-photo-plane { min-inline-size: 0; }
.ds-marketing .ds-photo-plane picture { display: block; overflow: hidden; border-radius: var(--radius-md); }
.ds-marketing .ds-photo-plane img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ds-marketing .ds-photo-plane figcaption { margin-block-start: var(--space-8); font-size: var(--text-sm); }
.ds-marketing .ds-logo-plane { position: relative; z-index: 1; inline-size: var(--space-17); padding: var(--space-5); background: var(--color-12); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.ds-marketing .ds-logo-plane img { inline-size: 100%; }
.ds-marketing .ds-hero-bottom { display: flex; align-items: center; gap: var(--space-11); padding-block-start: var(--space-11); border-block-start: var(--space-1) solid var(--ds-line); }
.ds-marketing .ds-hero-bottom p { max-inline-size: calc(var(--space-17) * 6); font-size: var(--text-lg); line-height: var(--line-height-4); }
.ds-marketing .ds-hero-bottom > span { display: none; font-family: var(--font-display); font-size: var(--text-9); color: var(--color-3); }

/* Experience and credits. */
.ds-marketing .ds-experience { display: grid; gap: var(--space-12); padding-block: var(--ds-section); background: var(--color-11); }
.ds-marketing .ds-lead { margin-block-end: var(--space-10); font-size: var(--text-2xl); line-height: var(--line-height-5); }
.ds-marketing .ds-lead strong { font-weight: var(--weight-bold); }
.ds-marketing .ds-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin-block-start: var(--space-11); padding-block-start: var(--space-10); border-block-start: var(--space-1) solid var(--color-6); }
.ds-marketing .ds-proof > span { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--line-height-2); }
.ds-marketing .ds-proof p { flex: 1; min-inline-size: 0; }
.ds-marketing .ds-credits { display: grid; gap: var(--space-10); border-block-start: var(--space-1) solid var(--color-6); padding-block-start: var(--space-11); }
.ds-marketing .ds-credits ul { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-10); padding: 0; list-style: none; }
.ds-marketing .ds-credits li { font-size: var(--text-lg); }

/* Method: a sticky score on wide screens and a simple list on mobile. */
.ds-marketing .ds-method { --ds-ink: var(--color-12); color: var(--ds-ink); background: var(--color-2); padding-block: var(--ds-section); }
.ds-marketing .ds-method h2 > span { color: var(--color-8); }
.ds-marketing .ds-method-heading { margin-block-end: var(--space-12); }
.ds-marketing .ds-method-layout { display: grid; gap: var(--space-16); }
.ds-marketing .ds-score { display: none; min-inline-size: 0; }
.ds-marketing .ds-score-inside { position: sticky; inset-block-start: var(--space-11); padding-block: var(--space-8) var(--space-12); }
.ds-marketing .ds-score-title { margin-block-end: var(--space-10); font-size: var(--text-sm); }
.ds-marketing .ds-score-lines { display: flex; flex-direction: column; gap: var(--space-5); }
.ds-marketing .ds-score-lines > a { display: flex; align-items: center; min-block-size: var(--space-14); font-size: var(--text-3xl); line-height: var(--line-height-1); color: var(--color-8); text-decoration: none; transition: var(--transition-colors), var(--transition-transform); }
.ds-marketing .ds-score-lines > a:is(.is-active, [aria-current="step"]) { color: var(--color-12); font-weight: var(--weight-bold); text-decoration: underline; }
.ds-marketing .ds-resolve { margin-block-start: var(--space-12); font-size: var(--text-4xl); line-height: var(--line-height-2); color: var(--color-9); }
.ds-marketing .ds-score-rule { margin-block-start: var(--space-10); inline-size: var(--space-1); block-size: var(--space-16); background: var(--color-4); }
.ds-marketing .ds-score-rule > span { display: block; inline-size: 100%; block-size: 100%; background: var(--color-12); transform-origin: top; }
.ds-marketing .ds-method-steps { padding: 0; list-style: none; }
.ds-marketing .ds-method-steps li { display: grid; grid-template-columns: var(--space-11) minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-12); border-block-start: var(--space-1) solid var(--color-8); }
.ds-marketing .ds-step-id { font-size: var(--text-sm); color: var(--color-8); font-variant-numeric: tabular-nums; direction: ltr; }
.ds-marketing .ds-method-steps h3 { margin-block-end: var(--space-8); }
.ds-marketing .ds-method-steps p { max-inline-size: calc(var(--space-17) * 4); font-size: var(--text-lg); line-height: var(--line-height-4); }

/* Service rows and contact choices. */
.ds-marketing .ds-services { padding-block: var(--ds-section); }
.ds-marketing .ds-services > div:first-child { margin-block-end: var(--space-12); }
.ds-marketing .ds-service-ledger { border-block-start: var(--space-1) solid var(--ds-line); }
.ds-marketing .ds-service-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--space-14); gap: var(--space-10); align-items: center; padding-block: var(--space-11); border-block-end: var(--space-1) solid var(--ds-line); }
.ds-marketing .ds-service-row :where(h3, p) { grid-column: 1; }
.ds-marketing .ds-service-row > a { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; inline-size: var(--space-14); block-size: var(--space-14); border: var(--space-1) solid var(--color-2); border-radius: var(--radius-circle); font-size: var(--text-3xl); text-decoration: none; }
.ds-marketing .ds-contact { display: grid; gap: var(--space-12); padding-block: var(--ds-section); background: var(--color-8); }
.ds-marketing .ds-contact h2 > span { color: var(--color-2); }
.ds-marketing .ds-contact-title > p:last-child { margin-block-start: var(--space-10); font-size: var(--text-lg); }
.ds-marketing .ds-choices { border-block-start: var(--space-1) solid var(--color-2); }
.ds-marketing .ds-choices button { display: flex; align-items: center; gap: var(--space-8); inline-size: 100%; min-block-size: var(--space-16); padding: var(--space-8); border: 0; border-block-end: var(--space-1) solid var(--color-2); border-radius: 0; color: var(--color-2); background: var(--color-8); text-align: start; }
.ds-marketing .ds-choice-mark { min-inline-size: var(--space-10); font-variant-numeric: tabular-nums; }
.ds-marketing .ds-choice-plus { margin-inline-start: auto; font-size: var(--text-2xl); }
.ds-marketing .ds-choices button[aria-pressed="true"] { color: var(--color-12); background: var(--color-2); font-weight: var(--weight-semibold); }
.ds-marketing .ds-draft { padding-block-start: var(--space-11); }
.ds-marketing .ds-draft-message { font-size: var(--text-lg); line-height: var(--line-height-4); }
.ds-marketing .ds-copy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-11); inline-size: 100%; min-block-size: var(--space-14); margin-block-start: var(--space-10); padding: var(--space-8) var(--space-10); border: var(--space-1) solid var(--color-2); border-radius: var(--radius-sm); color: var(--color-12); background: var(--color-2); }
.ds-marketing .ds-note { margin-block-start: var(--space-10); font-size: var(--text-sm); line-height: var(--line-height-3); }

/* Optional form controls and explicit error / empty states. */
.ds-marketing :where(input, textarea, select) { inline-size: 100%; min-block-size: var(--space-14); padding: var(--space-7) var(--space-8); border: var(--space-1) solid var(--color-2); border-radius: var(--radius-sm); color: var(--color-2); background: var(--color-12); }
.ds-marketing textarea { resize: vertical; }
.ds-marketing ::placeholder { color: var(--color-2); opacity: 1; }
.ds-marketing :where([aria-invalid="true"], [data-state="error"]) { border: var(--space-2) dashed var(--color-2); color: var(--color-2); background: var(--color-9); }
.ds-marketing :where(.ds-error, .ds-empty, [data-state="empty"]) { padding: var(--space-10); border: var(--space-1) dashed var(--color-2); border-radius: var(--radius-md); color: var(--color-2); background: var(--color-11); }
.ds-marketing .ds-error { background: var(--color-9); font-weight: var(--weight-semibold); }

/* Closing statement and legal navigation. */
.ds-marketing .ds-closing { display: grid; gap: var(--space-16); padding: var(--ds-section) var(--ds-gutter); background: var(--color-11); }
.ds-marketing .ds-close-copy { grid-row: 1; }
.ds-marketing .ds-close-copy > p { margin-block-end: var(--space-10); text-align: start; }
.ds-marketing .ds-close-copy .ds-action { margin-block-start: var(--space-11); }
.ds-marketing .ds-close-word { justify-self: end; color: var(--color-2); font-family: var(--font-display); font-size: var(--text-9); line-height: var(--line-height-6); font-weight: var(--weight-bold); pointer-events: none; }
.ds-marketing .ds-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10); padding: var(--space-11) var(--ds-gutter) var(--space-16); border-block-start: var(--space-1) solid var(--ds-line); }

@media (hover: hover) {
  .ds-marketing a:hover { text-decoration: underline; }
  .ds-marketing .ds-action:hover { color: var(--color-12); background: var(--color-2); }
  .ds-marketing .ds-service-row > a:hover { color: var(--color-12); background: var(--color-2); }
  .ds-marketing .ds-choices button:not(:disabled):not([aria-disabled="true"]):hover { color: var(--color-2); background: var(--color-12); }
  .ds-marketing .ds-choices button[aria-pressed="true"]:not(:disabled):hover { box-shadow: var(--shadow-sm); color: var(--color-12); background: var(--color-2); }
  .ds-marketing .ds-copy:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: var(--shadow-sm); }
}
/* State rules intentionally follow component styles to win in the cascade. */
.ds-marketing :is(a, button):is(:disabled, [aria-disabled="true"]) { color: var(--color-2); background: var(--color-10); cursor: not-allowed; box-shadow: none; text-decoration: none; }

@media (min-width: 768px) {
  .ds-marketing { --ds-gutter: var(--space-16); --ds-section: var(--space-17); }
  .ds-marketing .ds-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); }
  .ds-marketing .ds-programme { grid-column: 1 / -1; }
  .ds-marketing .ds-title-plane { grid-column: 1; grid-row: 2; align-self: center; }
  .ds-marketing .ds-photo-plane { grid-column: 2; grid-row: 2 / 4; }
  .ds-marketing .ds-photo-plane img { aspect-ratio: 1; }
  .ds-marketing .ds-logo-plane { grid-column: 1; grid-row: 3; justify-self: end; }
  .ds-marketing .ds-hero-bottom { grid-column: 1 / -1; justify-content: space-between; }
  .ds-marketing .ds-hero-bottom > span { display: block; }
  .ds-marketing :where(.ds-experience, .ds-contact, .ds-method-layout) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
  .ds-marketing .ds-credits { grid-column: 1 / -1; grid-template-columns: 1fr 3fr; }
  .ds-marketing .ds-score { display: block; }
  .ds-marketing .ds-method-steps li { min-block-size: calc(var(--space-17) * 3); align-content: center; gap: var(--space-10); }
  .ds-marketing .ds-service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--space-14); gap: var(--space-12); }
  .ds-marketing .ds-service-row p { grid-column: 2; }
  .ds-marketing .ds-service-row > a { grid-column: 3; grid-row: 1; }
  .ds-marketing .ds-copy { inline-size: fit-content; }
  .ds-marketing .ds-closing { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .ds-marketing .ds-close-copy { grid-column: 1; }
  .ds-marketing .ds-close-word { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {:root:not([data-motion="full"]) .ds-marketing *,:root:not([data-motion="full"]) .ds-marketing *::before,:root:not([data-motion="full"]) .ds-marketing *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }:root:not([data-motion="full"]) .ds-marketing .ds-score-inside { position: static; }:root:not([data-motion="full"]) .ds-marketing .ds-method-steps li { min-block-size: 0; }:root:not([data-motion="full"]) .ds-marketing :where(.ds-score-lines > a, .ds-photo-plane figure, .ds-logo-plane) { transform: none !important; }:root:not([data-motion="full"]) .ds-marketing .ds-resolve { opacity: 1 !important; }
}

@media (forced-colors: active) {
  .ds-marketing :where(a, button, input, textarea, select):focus-visible { outline-color: Highlight; }
  .ds-marketing :where(.ds-action, .ds-copy, .ds-choices button) { border: var(--space-1) solid ButtonText; }
  .ds-marketing .ds-choices button[aria-pressed="true"] { outline: var(--space-2) solid Highlight; outline-offset: calc(-1 * var(--space-3)); }
}