/* DALOO minimal concept (27.9.2026). Shared tokens and base for the concept home. V6 (29.9.2026): the
   legal pages load it too, for ConceptHeader alone, which sits there in a .cx box of its own. Every rule
   here is under .cx or a cx- class, so their content is not restyled; the two html rules at the end
   (smooth scroll off for reduced motion and for the widget's stop switch) now apply there as well.
   Modeled on zettafleet.com: cream page, monochrome isometric line art, one copper accent,
   bracketed mono eyebrows, lots of whitespace. Section styles live in each component. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

.cx {
  --c-page: #faf8f3;
  --c-panel: #f2eee6;
  --c-ink: #1a1815;
  --c-ink-2: #5d5a55;
  --c-quiet: #6a6761; /* 4.87:1 on the panel, 5.31:1 on the page (AA for small text on both) */
  --c-line: #dcd6cb;
  --c-stroke: #2b2825;
  --c-fill-1: #ffffff;
  --c-fill-2: #f2eee6;
  --c-fill-3: #e6e0d5;
  --c-accent: #d97757;
  --c-accent-d: #b85a3b;
  --c-accent-s: #fae9df;
  /* Copper for SMALL TEXT on tinted grounds (the soft copper, the bot bubble, the window). --c-accent-d
     stays for strokes, fills and the focus ring. 4.95:1 on #fae9df, 5.01 on #f1ede5, 5.70 on #fdfcf9. */
  --c-accent-t: #a14c30;
  --c-ok: #4d7961;

  --f-sans: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Heebo before the generic monospace: Hebrew has no JetBrains glyphs, and the generic fallback on
     Windows is Courier New, which set the bracket eyebrows as wide, letter-spaced type. */
  --f-mono: 'JetBrains Mono', 'Heebo', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --w: 1120px;
  --gutter: 24px;
  --sec: clamp(64px, 9vw, 120px);
  --radius: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (max-width: 640px) { .cx { --gutter: 16px; } }

.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }

.cx-wrap { width: 100%; max-width: calc(var(--w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.cx-sec { padding-block: var(--sec); }
/* Anchor landing (#platform #live #trust #start, and #how). html keeps scroll-padding-top 84px from
   global.css, which clears the fixed header for focus and anchors alike. The negative margins skip most of
   a section's own top padding, so a jump puts the eyebrow about 50px under the header (or, for #start,
   which opens with a panel, the panel's top edge), not a screen of empty space. V5: #platform no longer
   opens with a panel of its own, it continues the hero surface, and its var(--sec) of space above the
   eyebrow is the .pf-panel padding, so it lands like the others. global.css also gives #platform #how
   #trust a 104px margin sized for the old header; one class more wins over it. #features (V5) is the empty
   box on the top edge of #live that the legal pages' old header and footer link to, so it lands the same.
   #film (2.10.2026) opens with the same var(--sec), so a shared daloo.ai/#film lands the same way too. */
.cx :is(#platform, #how, #features, #live, #trust, #film) { scroll-margin-top: calc(28px - var(--sec)); }
.cx #start { scroll-margin-top: calc(-.55 * var(--sec)); }

/* Bracketed eyebrow: [ הפלטפורמה ]. The brackets are mono, as on zettafleet. The Hebrew words are Heebo:
   JetBrains Mono has no Hebrew, and its wide spaces pulled the words apart. */
.cx-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--c-quiet);
  margin: 0 0 18px;
}
.cx-eyebrow::before, .cx-eyebrow::after { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0; }
/* The brackets are decoration: the second declaration gives them empty alt text, so a region named by
   its eyebrow is not read as [ ההבדל ]. Browsers without alt-text support keep the first one. */
.cx-eyebrow::before { content: '[ '; content: '[ ' / ''; }
.cx-eyebrow::after { content: ' ]'; content: ' ]' / ''; }

.cx-h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--c-ink);
}
.cx-sub { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; color: var(--c-ink-2); margin: 14px 0 0; }
.cx-center { text-align: center; }
.cx-center .cx-sub { margin-inline: auto; max-width: 520px; }
.cx-rule { width: 48px; height: 1px; background: var(--c-line); margin: 28px auto 0; border: 0; }
/* padding-left is physical on purpose: in this RTL line the browser puts the letter-spacing of the last
   '+' to its right, so the ink sat .3em left of centre. The same amount on the left balances it. */
.cx-plus { font-family: var(--f-mono); color: var(--c-quiet); letter-spacing: .6em; text-align: center; font-size: 14px; padding-left: .6em; }

/* Words wrapped in grey corner brackets, as in the zettafleet hero */
.cx-br {
  position: relative;
  display: inline-block;
  color: var(--c-quiet);
  padding: 0 .22em;
  margin: 0 .06em;
}
.cx-br::before, .cx-br::after {
  content: '';
  position: absolute;
  width: .32em; height: .32em;
  border: 2px solid #b9b2a6;
}
.cx-br::before { top: .02em; inset-inline-end: 0; border-bottom: 0; border-inline-start: 0; }
.cx-br::after { bottom: .06em; inset-inline-start: 0; border-top: 0; border-inline-end: 0; }

/* Frame drawn only as four corner brackets (illustration holder) */
.cx-frame { position: relative; padding: 22px; }
.cx-frame > i { position: absolute; width: 18px; height: 18px; border: 1.5px solid #bdb6aa; }
.cx-frame > i:nth-of-type(1) { top: 0; right: 0; border-bottom: 0; border-left: 0; }
.cx-frame > i:nth-of-type(2) { top: 0; left: 0; border-bottom: 0; border-right: 0; }
.cx-frame > i:nth-of-type(3) { bottom: 0; right: 0; border-top: 0; border-left: 0; }
.cx-frame > i:nth-of-type(4) { bottom: 0; left: 0; border-top: 0; border-right: 0; }

/* Buttons: dark primary + light secondary */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border-radius: 8px;
  font: 500 15px/1 var(--f-sans);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.cx-btn:active { transform: translateY(1px); }
.cx-btn--dark { background: var(--c-ink); color: #faf8f3; }
.cx-btn--light { background: var(--c-fill-1); color: var(--c-ink); border-color: var(--c-line); }
/* Hover only where there is a real hover. On iOS a tap leaves :hover on the tapped button until the
   next tap elsewhere, so the header's קביעת דמו stayed grey after a tap. */
@media (hover: hover) {
  .cx-btn--dark:hover { background: #33302b; }
  .cx-btn--light:hover { border-color: #bfb8ab; }
}
.cx-btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
/* A 44px target on phones and on any touch screen (a tablet in the trust card stack, say). */
@media (max-width: 640px), (pointer: coarse) { .cx-btn--sm { min-height: 44px; } }
/* The darker copper: 4.34:1 on the page, 3.98 on the panel, 4.60 on white (a ring needs 3:1). */
.cx :focus-visible { outline: 2px solid var(--c-accent-d); outline-offset: 3px; border-radius: 6px; }

.cx-num { font-family: var(--f-mono); font-size: 12px; color: var(--c-quiet); }
.cx-num b { color: var(--c-ink); font-weight: 500; }

/* Isometric line-art defaults */
.cx-iso { display: block; width: 100%; height: auto; overflow: visible; }
.cx-iso .s { fill: none; stroke: var(--c-stroke); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.cx-iso .f1 { fill: var(--c-fill-1); stroke: var(--c-stroke); stroke-width: 1.25; stroke-linejoin: round; }
.cx-iso .f2 { fill: var(--c-fill-2); stroke: var(--c-stroke); stroke-width: 1.25; stroke-linejoin: round; }
.cx-iso .f3 { fill: var(--c-fill-3); stroke: var(--c-stroke); stroke-width: 1.25; stroke-linejoin: round; }
.cx-iso .ac { fill: var(--c-accent); stroke: var(--c-accent-d); stroke-width: 1.25; stroke-linejoin: round; }
.cx-iso .acs { fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cx-iso .ln { fill: none; stroke: #b9b2a6; stroke-width: 1; }
.cx-iso text { font-family: var(--f-sans); fill: var(--c-ink-2); }

/* Reveal-on-view helper: concept.js adds .is-in. Hidden only once html.cx-js is set (an inline line in
   index.astro), so without JS, or if concept.js never arrives, everything stays visible. */
.cx-js .cx-in { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.cx-js .cx-in.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cx *, .cx *::before, .cx *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
  .cx-js .cx-in { opacity: 1; transform: none; }
  /* global.css scrolls anchors smoothly. A long animated jump is what reduced motion asks to avoid.
     This file loads after global.css, on the home and (V6) on the legal pages. */
  html { scroll-behavior: auto; }
}

/* The accessibility widget's own stop switch (body[nl-animations="off"]). It pauses animations inline
   wherever they happen to be, so the CSS loops are removed instead and sit on their complete frame,
   like reduced motion. hero.js and live.js watch the same attribute for the scripted loops. */
body[nl-animations="off"] .cx .pf-a,
body[nl-animations="off"] .cx .ct-art * { animation: none !important; }
html:has(body[nl-animations="off"]) { scroll-behavior: auto; }

/* The phone size of the accessibility button (V5, 29.9) moved to /accessibility-widget/daloo-brand.css,
   which every page loads, so the legal pages get the same 40px disc as the home page. */