/* v46 — How we work: the film before the text; phases + principles as one
   critical path; "done means" line per mode. Site tokens only. Replaces the
   v45 convergence field on this page (assets/v45.css/.js stay in the package,
   unreferenced, so the field can be restored in one line). */

/* ---- the film band (white, full-bleed to 1680px, 1920:800) ---- */
.hwf{padding-block:clamp(1.5rem,3vw,2.5rem) 0;background:var(--white)}
.hwf__frame{position:relative;width:min(100%,1440px);margin:0 auto;aspect-ratio:1920/800;background:var(--white)}
.hwf__frame img,.hwf__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hwf__frame video{opacity:0;transition:opacity var(--dur-slow,400ms) ease}
.hwf__frame video.is-playing{opacity:1}
.hwf__cap{display:grid;gap:.5rem 2rem;padding-top:1.25rem;margin:.5rem 0 0;border-top:1px solid var(--light)}
.hwf__cap .mono-label{color:var(--brand-indigo)}
.hwf__cap p{color:var(--slate);max-width:62ch}
@media (min-width:860px){.hwf__cap{grid-template-columns:auto 1fr;align-items:baseline}}
@media (max-width:759px){.hwf__frame video{display:none}}

/* ---- the critical path ---- */
.cp-path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cp-phase{display:grid;grid-template-columns:1fr;gap:1.25rem 3rem;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--light)}
.cp-phase:last-child{border-bottom:1px solid var(--light)}
@media (min-width:900px){.cp-phase{grid-template-columns:minmax(220px,300px) 1fr}.cp-phase__side{position:sticky;top:calc(68px + 1.5rem);align-self:start}}
.cp-phase--1{--dot:var(--brand-violet);--dot-text:var(--brand-violet)}.cp-phase--2{--dot:var(--brand-blue);--dot-text:var(--brand-blue)}.cp-phase--3{--dot:var(--brand-emerald);--dot-text:#0e7490}/* text-safe teal (5.6:1) — emerald is 1.9:1 on white */
.cp-phase__n{font-family:var(--font-mono);font-weight:500;font-size:var(--step--1);letter-spacing:.08em;color:var(--label);display:flex;align-items:center;gap:.6rem}
.cp-phase__n::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px color-mix(in srgb,var(--dot) 18%,transparent)}
.cp-phase__title{font-family:var(--font-display);font-size:var(--step-2);font-weight:800;letter-spacing:-.03em;margin-top:.6rem;color:var(--charcoal)}
.cp-phase__title .period{color:var(--dot-text);background:none;-webkit-background-clip:initial;background-clip:initial}
.cp-phase__clock{display:block;margin-top:.5rem;color:var(--brand-indigo)}
.cp-phase__arc{display:block;margin-top:.35rem;font-size:var(--step--1);color:var(--label)}
.cp-phase__body>p{color:var(--slate);max-width:60ch}
.cp-prin{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.cp-prin li{display:grid;grid-template-columns:2.2rem 1fr;gap:.25rem 1rem;align-items:start;padding:1rem 0 0;border-top:1px dashed var(--light)}
.cp-prin__n{font-family:var(--font-mono);font-size:var(--step--1);color:var(--dot-text);padding-top:.25rem}
.cp-prin h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--charcoal);margin:0;line-height:1.25}
.cp-prin__tag{display:inline-block;font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-inline-end:.6rem;vertical-align:.12em}
.cp-prin p{grid-column:2;color:var(--slate);max-width:60ch;font-size:.98rem;margin:0}
.cp-proofs{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.cp-proof{border-inline-start:2px solid var(--dot);padding-inline-start:1rem;max-width:60ch}
.cp-proof__line{color:var(--charcoal);margin:0 0 .15rem}
.cp-proof__link{color:var(--brand-indigo);display:inline-flex;align-items:center;min-height:44px;gap:.35em;text-decoration:none}
.cp-proof__arr{display:inline-block;transition:transform var(--dur-fast,150ms) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cp-proof__link:hover{text-decoration:underline}.cp-proof__link:hover .cp-proof__arr{transform:translateX(3px)}[dir="rtl"] .cp-proof__link:hover .cp-proof__arr{transform:translateX(-3px)}}
[dir="rtl"] .cp-proof__arr{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .cp-prin__tag{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:500;font-size:.8rem}
[dir="rtl"] .cp-phase__n,[dir="rtl"] .cp-phase__clock{font-family:var(--font-body);letter-spacing:0;text-transform:none}

/* ---- "done means" line in the mode cards (D-06) ---- */
.mode{display:flex;flex-direction:column}
.mode__done{margin-top:auto;padding-top:1rem;border-top:1px solid var(--light);font-size:.95rem;color:var(--charcoal)}
.mode__done .mono-label{display:block;margin-bottom:.2rem;font-size:.72rem}
.mode__done{margin-top:1.25rem}
[dir="rtl"] .mode__done .mono-label{font-family:var(--font-body);letter-spacing:0;text-transform:none}

@media (prefers-reduced-motion:reduce){.hwf__frame video{transition:none}.cp-proof__arr{transition:none}}

/* v46.1 — pause control (WCAG 2.2.2: moving content > 5 s must be pausable) */
.hwf__pause{position:absolute;right:clamp(.75rem,2vw,1.5rem);bottom:clamp(.5rem,1.5vw,1rem);z-index:2;display:none;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .8rem;border:1px solid var(--light);border-radius:var(--radius-sm,8px);background:rgba(255,255,255,.92);color:var(--label);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--dur-fast,150ms) ease,transform 160ms var(--ease-out)}
.hwf__pause:active{transform:scale(.97)}
.hwf__frame.has-film .hwf__pause{display:inline-flex}
@media (hover:hover) and (pointer:fine){.hwf__pause:hover{background:var(--white);color:var(--charcoal)}}
[dir="rtl"] .hwf__pause{right:auto;left:clamp(.75rem,2vw,1.5rem);font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.8rem}

/* v46.2 — AI workshops gallery: one wide photo, then three across on desktop */
@media (min-width:860px){.photo-grid[data-astro-cid-v6kxekfk]{grid-template-columns:repeat(6,1fr)}.photo[data-astro-cid-v6kxekfk]{grid-column:span 2}.photo--wide[data-astro-cid-v6kxekfk]{grid-column:1 / -1}}



/* desktop: horizontal rail across the top, stops in three columns, loop ring at the far end */
@media (min-width:860px){
  .stops{grid-template-columns:repeat(3,1fr);gap:3rem;padding-top:3rem;padding-inline-end:6.5rem}
  .stops::before{top:6px;inset-inline-start:0;inset-inline-end:0;height:4px}
  .stop__dot{top:-3rem;inset-inline-start:0}
  .stops__loop{top:-1px;inset-inline-end:0}
  [dir="rtl"] .stops::before{background:linear-gradient(270deg,var(--brand-violet) 0%,var(--brand-indigo) 30%,var(--brand-blue) 55%,var(--brand-cyan) 80%,var(--brand-emerald) 100%)}
}
/* phones: vertical rail down the start edge, stops stacked, ring at the bottom */
@media (max-width:859px){
  .stops{padding-inline-start:2rem;padding-bottom:2.5rem;padding-top:.5rem}
  .stops::before{top:0;bottom:0;inset-inline-start:6px;width:4px;background:linear-gradient(180deg,var(--brand-violet) 0%,var(--brand-indigo) 30%,var(--brand-blue) 55%,var(--brand-cyan) 80%,var(--brand-emerald) 100%)}
  .stop__dot{top:.25rem;inset-inline-start:-2rem}
  .stops__loop{bottom:0;inset-inline-start:-1px}
}
[dir="rtl"] .stop__n,[dir="rtl"] .stop__done .mono-label,[dir="rtl"] .stops__loop .mono-label{font-family:var(--font-body);letter-spacing:0;text-transform:none}

/* v46.4 — Ways to engage: one rail, three stops (the film's line, drawn across the page) */
.stops{list-style:none;margin:0;padding:2.25rem 0 0;position:relative;display:grid;grid-template-columns:1fr;gap:2.5rem}
.stops::before{content:"";position:absolute;background:linear-gradient(90deg,var(--brand-violet) 0%,var(--brand-indigo) 30%,var(--brand-blue) 55%,var(--brand-cyan) 80%,var(--brand-emerald) 100%);border-radius:2px}
.stop{position:relative;display:flex;flex-direction:column}
.stop--1{--dot:var(--brand-violet);--dot-text:var(--brand-violet)}.stop--2{--dot:var(--brand-blue);--dot-text:var(--brand-blue)}.stop--3{--dot:var(--brand-emerald);--dot-text:#0e7490}
.stop__dot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px var(--ice),0 0 0 6px color-mix(in srgb,var(--dot) 35%,transparent)}
.stop__n{margin:0 0 .35rem;color:var(--dot-text)}
.stop__name{font-family:var(--font-display);font-size:var(--step-2);font-weight:800;letter-spacing:-.03em;color:var(--charcoal);margin:0 0 .4rem}
.stop__reach{font-size:var(--step-0);font-weight:500;color:var(--dot-text);margin:0 0 .9rem}
.stop__text{color:var(--slate);max-width:36ch;margin:0 0 1.5rem}
.stop__done{margin-top:auto;padding-top:1rem;border-top:1px solid var(--light);font-size:1.05rem;font-weight:500;color:var(--charcoal);max-width:36ch}
.stop__done .mono-label{display:block;margin-bottom:.2rem;font-size:.72rem;color:var(--label)}
.stop__link{display:inline-flex;align-items:center;min-height:44px;margin:-.75rem 0 1rem;color:var(--brand-indigo);text-decoration:none}
@media (hover:hover) and (pointer:fine){.stop__link:hover{text-decoration:underline}}
.stops__loop{position:absolute;display:flex;align-items:center;gap:.5rem;color:var(--label)}
.stops__ring{display:block;width:18px;height:18px;border-radius:50%;border:3px solid var(--brand-emerald);background:var(--ice)}
/* desktop: horizontal rail across the top, stops in three columns, loop ring at the far end */
@media (min-width:860px){
  .stops{grid-template-columns:repeat(3,1fr);gap:3rem;padding-top:3rem;padding-inline-end:6.5rem}
  .stops::before{top:6px;inset-inline-start:0;inset-inline-end:0;height:4px}
  .stop__dot{top:-3rem;inset-inline-start:0}
  .stops__loop{top:-1px;inset-inline-end:0}
  [dir="rtl"] .stops::before{background:linear-gradient(270deg,var(--brand-violet) 0%,var(--brand-indigo) 30%,var(--brand-blue) 55%,var(--brand-cyan) 80%,var(--brand-emerald) 100%)}
}
/* phones: vertical rail down the start edge, stops stacked, ring at the bottom */
@media (max-width:859px){
  .stops{padding-inline-start:2rem;padding-bottom:2.5rem;padding-top:.5rem}
  .stops::before{top:0;bottom:0;inset-inline-start:6px;width:4px;background:linear-gradient(180deg,var(--brand-violet) 0%,var(--brand-indigo) 30%,var(--brand-blue) 55%,var(--brand-cyan) 80%,var(--brand-emerald) 100%)}
  .stop__dot{top:.25rem;inset-inline-start:-2rem}
  .stops__loop{bottom:0;inset-inline-start:-1px}
}
[dir="rtl"] .stop__n,[dir="rtl"] .stop__done .mono-label,[dir="rtl"] .stops__loop .mono-label{font-family:var(--font-body);letter-spacing:0;text-transform:none}

/* v46.8 — Hebrew still: its own infographic (2880x1201, same 2.4:1 band as the English film), shown whole, no film */
.hwf__frame--still{aspect-ratio:2880/1201}
.hwf__frame--still img{object-fit:contain}