/* workshop.html, the Hebrew workshop page "דיזיין ספרינט אג׳נטי" (2026-10-12).
   Lifted from the approved design canvas (rounds 3 to 10), then pruned to the classes this page uses.
   The shared foundation (fonts, reset, header, footer chrome) is assets/site.css; this file is only what
   this page adds on top. Edit the rules here, not the canvas export they came from. */
:root{
    --paper:#FBFAF7; --paper-2:#F1EFEA; /* the live site's second paper tone (header, benefit cards, email box); not yet in the brand tokens, flagged in COORDINATION-NOTES */ --tint:#EDEAE3; --bright:#FEFEFE; --card:#F7F5F0;
    --peach:#FBEADF; --yellow:#FFD23E; --sun-line:#F0D488; --night:#1A1714; --fuchsia:#EA3C7F; --fuchsia-text:#CC165B;
    --ink:#1A1714; --ink-soft:#5C544B;
    --blue:#346AE9; --blue-deep:#264CB6; --line:#E5E1D9; --rule:#DED8CD;
    /* the canvas's red for the field's two error lines (round 20): 6.0:1 on the card */
    --err:#B42318;
    /* the sign-up band picture's own pink ground (sampled from webinar-hero.jpg): its reserved box shows it until the picture loads, and if it never does */
    --band-ground:#FD5296;
    /* the page's mid grey for small body lines (5 uses below) and the confirmation's soft green, declared once */
    --ink-mid:#3D3832; --ok-bg:#E7F3EA;
    --sans:'Uncut Sans','Ploni ML v2 AAA','Assistant','Heebo',system-ui,sans-serif;
    --serif:'Uncut Sans','Ploni ML v2 AAA','Assistant','Heebo',system-ui,sans-serif;
    /* headings only: the true semibold first, so a Latin word in a Hebrew headline is as heavy as the Hebrew Demi Bold */
    --head:'Uncut Sans SB','Uncut Sans','Ploni ML v2 AAA','Assistant','Heebo',system-ui,sans-serif;
  }
html[lang="he"]{ --sans:'Ploni Digits','Uncut Sans','Ploni ML v2 AAA','Assistant','Heebo',system-ui,sans-serif; --serif:'Ploni Digits','Uncut Sans','Ploni ML v2 AAA','Assistant','Heebo',system-ui,sans-serif; --head:'Ploni Digits','Uncut Sans SB','Uncut Sans','Ploni ML v2 AAA','Assistant','Heebo',system-ui,sans-serif; }
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-kerning:none; font-synthesis:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.65;}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.07; letter-spacing:-.015em; text-wrap:balance;}
p{text-wrap:pretty;}
/* form controls do not inherit the page font on their own (they fell back to Arial): take the family and the
   letter spacing from the page. Only these two, so no control changes size or line height. */
input,button,select,textarea{font-family:inherit;letter-spacing:inherit}
.btn{display:inline-block; background:var(--blue); color:#fff; font-family:var(--sans); font-size:1.125rem; font-weight:600; padding:15px 32px; border-radius:100px; border:none; cursor:pointer; text-decoration:none; transition:background .15s ease;}
header{position:sticky; top:0; z-index:20; background:rgba(254,254,254,.93); backdrop-filter:saturate(1.2) blur(8px);}
.bar{max-width:1200px; margin-inline:auto; padding-inline:clamp(22px,5vw,64px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:15px;}
.bar .brand{grid-column:1; justify-self:start;}
.bar .nav{grid-column:2;}
.bar .bar-end{grid-column:3; justify-self:end;}
.nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0; background:none; border:1.5px solid var(--rule); border-radius:100px; cursor:pointer;}
.nav-burger span{display:block; width:18px; height:2px; margin-inline:auto; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.mobile-menu{display:none;}
@media (max-width:860px){
    .bar-end .btn{display:none;}

    .nav-burger{display:flex;}

    .mobile-menu{display:block; position:absolute; top:100%; inset-inline:0; height:0; overflow:hidden;
      pointer-events:none;
      /* OPAQUE, not the old 98%. The panel used to sit in the flow with nothing behind
         it, so the alpha never showed; out of flow it lies over the page, and the
         header's backdrop-filter makes it a backdrop root, which composites that 2%
         into something far more see-through than 2%. Measured: the page was plainly
         legible through the open menu. */
      background:#FEFEFE;}

    .mobile-menu-inner{transform:translateY(-100%); transition:transform .34s cubic-bezier(.22,.61,.36,1);
      border-top:1px solid var(--rule);}

    .mobile-menu-inner{display:flex; flex-direction:column; padding:10px clamp(22px,5vw,64px) 24px;}

    .mobile-menu a:not(.btn){font-size:1.125rem; font-weight:600; color:var(--ink); text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line);}

    .mobile-menu .btn{display:block; text-align:center; margin-top:18px;}}
.nav{display:flex; gap:4px; align-items:center;}
.nav a{font-size:.875rem; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:9px 14px; border-radius:10px; transition:background .15s ease, color .15s ease;}
.nav a:hover{background:rgba(52,106,233,.08); color:var(--ink);}
.nav a:active{background:rgba(52,106,233,.16); color:var(--blue-deep);}
.bar-end{display:flex; align-items:center; gap:clamp(10px,1.5vw,16px);}
.bar .btn{font-size:.875rem; padding:9px 22px;}
[id]{scroll-margin-top:84px;}
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3{font-weight:600;}
h1, h2{font-weight:700;}
html[lang="he"] h1, html[lang="he"] h2{font-weight:600;}
main :is(h1,h2,h3){font-family:var(--head); font-weight:600;}
section{padding-block:0;}
footer{padding-block:40px;}
p{text-wrap:pretty;}
.pay-soon{font-family:var(--sans); font-size:.875rem; font-weight:600; line-height:1.4; color:var(--ink-soft); white-space:nowrap;}
@media (max-width:860px){ .bar-end .pay-soon{display:none;}}
.mobile-menu .pay-soon{display:block; white-space:normal; padding:15px 0 0; text-align:center; font-size:1rem;}
.nav a[aria-current="page"]{color:var(--ink); background:rgba(52,106,233,.08);}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--blue) !important; outline-offset:3px; border-radius:6px;}
.btn:focus-visible, .nav-burger:focus-visible{border-radius:100px;}
.nav a:focus-visible{border-radius:10px;}
.faq-sec{padding-block:clamp(56px,7vw,104px);}
.faq{max-width:800px; margin-inline:auto;}
.faq-sec h2{text-align:center}
.faq details{border-top:1px solid var(--rule); padding:24px 0;}
.faq details:last-child{border-bottom:1px solid var(--rule);}
.faq summary{font-size:1.5rem; font-weight:600; line-height:1.35; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:'Uncut Sans',sans-serif; font-weight:400; font-size:1.875rem; line-height:1; flex:none;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:14px 0 0; color:var(--ink-soft); font-size:1.125rem; line-height:1.6;}
@media (max-width:860px){ .nav{display:none;}}
@media (max-width:760px){
    .faq summary{font-size:1.25rem;}

    .faq details{padding:20px 0;}

    .faq details p{font-size:1rem;}}
.w2{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,5vw,64px)}
main h2{font-size:clamp(1.875rem,3.6vw,2.875rem);line-height:1.05;margin:0 0 clamp(22px,3vw,40px)}
.btn2{align-self:flex-start;min-height:48px;line-height:1.2;padding:12px 26px;border-radius:100px;border:none;background:var(--blue);color:#fff;font-size:1.0625rem;font-weight:600;cursor:pointer;transition:background .15s ease,transform .16s var(--mo-ease)}
.btn2:hover{background:var(--blue-deep)}
.btn2:not(:disabled):active{transform:translateY(1.5px) scale(.985)}
.cons{margin:0;font-size:.85rem;line-height:1.55;color:#5C544B}
.cons a{color:#1A1714}
.bens{padding-top:clamp(56px,7vw,104px)}
.bA-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.bA{background:var(--paper-2);border-radius:24px;padding:12px 12px 26px}
.bA-pic{aspect-ratio:4/3;border-radius:16px;background:#1A1714}
.bA h3{font-size:1.5rem;line-height:1.15;margin:20px 12px 8px;font-weight:600}
.bA p{margin:0 12px;font-size:1.0625rem;line-height:1.5;color:var(--ink-mid)}
.faq-sec{padding-block:clamp(56px,7vw,104px) 0}
.ft2{margin-top:clamp(56px,7vw,104px);border-top:1px solid #DED8CD;padding:36px 0 44px}
.ft2 a{color:#1A1714;text-decoration:underline;text-underline-offset:3px}
.tel{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cols3 p{margin:0;font-size:.95rem;line-height:1.9;overflow-wrap:anywhere}
.fh{font-weight:700}
.fid{margin:14px 0 0;font-size:.85rem;color:#5C544B}
@media (max-width:760px){
 .bA-g{grid-template-columns:1fr}
.bA-pic{aspect-ratio:16/8}

 .cols3{grid-template-columns:1fr;gap:14px}}
.bA-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.bA{padding:12px 12px 28px}
.bA-pic{aspect-ratio:16/7;background-size:200% auto}
.bA h3{font-size:clamp(1.5rem,2.2vw,1.875rem);margin:22px 14px 8px}
.bA p{margin:0 14px;font-size:1.125rem;max-width:40ch}
@media (max-width:760px){.bA-g{grid-template-columns:1fr;gap:16px}
.bA-pic{aspect-ratio:16/8;background-size:260% auto}
.bA h3{font-size:1.5rem}}
.bens{padding-bottom:clamp(56px,7vw,104px)}
.bA-pic{background:none}
.bA-img{aspect-ratio:4/3;overflow:hidden}
.bA-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.bA-img{aspect-ratio:4/3}}
@media (min-width:761px){.bA-img{aspect-ratio:16/10}}
/* ===== the sign-up band: ONE white component (Omer picked option C of round two on the canvas "Sign-up band and FAQ", 2026-10-12) =====
   A white container on the cream page (border, radius and shadow are the price card's own, .c9 above), one container level, no nested
   card. A small square picture beside the heading and the line, the form full width under both. It replaces the old grey box that
   came twice (a wide one and a phone one); there is one form, one field id, one set of lines for every width. */
.mw{padding-top:clamp(48px,6vw,88px)}
.mwc{max-width:880px;margin-inline:auto;box-sizing:border-box;background:#FFFFFF;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(31,29,25,.14);padding:44px 48px 40px}
.mwc-top{display:flex;align-items:center;gap:40px}
.mwc-t{flex:1;min-width:0}
.mwc-t h2{font-size:clamp(1.75rem,4.4vw,2.5rem);line-height:1.1;margin:0;text-wrap:balance}
.mwc-t p{margin:12px 0 0;font-size:1.125rem;line-height:1.5;color:var(--ink-soft)}
.mwc-pic{width:176px;height:176px;flex:none;border-radius:20px;overflow:hidden;background:var(--band-ground)}
.mwc-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* if the picture never arrives, the browser's broken-image mark stays hidden (workshop.js adds .is-broken): the box keeps its size and its pink ground, nothing jumps */
.mwc-pic img.is-broken{visibility:hidden}
.mwc-f{margin-top:32px;display:flex;flex-direction:column}
.mwc-f .mb4-row{display:flex;gap:12px}
.mwc-f .mb4-row input{flex:1;height:48px;border-radius:12px;border:1.5px solid rgba(26,23,20,.55);background:#fff;padding:0 14px;font-size:1rem;text-align:right;min-width:0;box-sizing:border-box;color:var(--ink)}
.mwc-f .btn2{flex:none;align-self:auto}
.mwc-c{margin:16px 0 0}
.mwc-f .ws-msg.err{margin-top:8px}
/* sent: the tick and the two lines take the row's place, side by side, so the card keeps its height; no green box inside the white card */
.mwc-f.is-sent{flex-direction:row;align-items:center;gap:14px;min-height:48px}
.mwc-f .ws-tick{margin:0;flex:none}
.mwc-f .ws-msg.ok{background:none;border-radius:0;padding:0;line-height:1.3}
.mwc-f .ws-msg.ok b{font-size:1.25rem}
.mwc-f .ws-rest{color:var(--ink-soft)}
@media (max-width:760px){
 .mwc{padding:24px 20px 26px}
 .mwc-top{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:12px 16px;align-items:center}
 .mwc-t{display:contents}
 .mwc-t h2{grid-column:1;grid-row:1;font-size:1.5rem;line-height:1.15}
 .mwc-pic{grid-column:2;grid-row:1;width:88px;height:88px;border-radius:16px}
 .mwc-t p{grid-column:1/-1;grid-row:2;margin:0;font-size:1rem}
 .mwc-f{margin-top:22px}
 .mwc-f .mb4-row{flex-direction:column;gap:10px}
 /* in the column the row's flex:1 1 0% would act on the HEIGHT and crush the field; the field keeps its own 48px */
 .mwc-f .mb4-row input{flex:none;width:100%}
 .mwc-f .btn2{width:100%}
 .mwc-f.is-sent{min-height:106px}
 .mwc-c{margin-top:14px;font-size:.85rem}}
.h5{background:#FFFFFF;text-align:center}
.h5-txt{padding-top:72px;padding-bottom:48px}
.h5-k{margin:0 0 18px;font-size:1.5rem;line-height:1.2;font-weight:500;color:#EA3C7F}
.h5 h1{margin:0;font-size:clamp(2.25rem,6.2vw,5.625rem);line-height:1.0;font-weight:600;color:#1A1714;letter-spacing:-.02em}
.h5-sub{margin:24px auto 0;max-width:640px;font-size:1.3125rem;line-height:1.5;color:rgba(26,23,20,.72)}
@media (max-width:760px){
 .h5-txt{padding-top:36px;padding-bottom:28px}
.h5 h1{font-size:2.375rem;line-height:1.05}
.h5-sub{font-size:1.1875rem;margin-top:16px}}
@media (min-width:761px){.faq-sec{padding-top:113px}}
.cons{font-size:.875rem;line-height:1.5}
.cons a{color:#1A1714;text-decoration:underline;text-underline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f7{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.f7-q{font-weight:600;font-size:1rem}
.f7 label{font-size:.875rem;font-weight:600}
.f7 .mb4-row{display:flex;gap:10px}
.f7 .mb4-row input{flex:1;height:48px;border-radius:12px;border:1.5px solid rgba(26,23,20,.55);background:#fff;padding:0 14px;font-size:1rem;text-align:right;min-width:0}
.f7 .btn2{flex:none}
.f7 .cons{margin-top:4px!important;color:var(--ink-mid)}
@media (max-width:760px){
 .f7 .mb4-row{flex-direction:column}
 /* in the column the row's flex:1 1 0% would act on the HEIGHT and crush the field to its text (20px); the field keeps its own 48px */
 .f7 .mb4-row input{flex:none;width:100%;box-sizing:border-box}
.f7 .btn2{width:100%}}
body{background:#FBFAF7}
header{background:var(--paper-2)!important}
.h8{background:var(--paper-2);text-align:center;padding-bottom:56px}
.h8 .h5-txt{padding-top:72px;padding-bottom:48px}
.h8-pic img{display:block;width:100%;height:auto;border-radius:24px}
.h8-in{position:relative}
.h8 h1{text-wrap:balance;font-size:clamp(2.25rem,4.9vw,4.375rem)}
.c8-h{font-size:1.25rem;font-weight:600;line-height:1.3}
@media (max-width:760px){
  .h8{padding-bottom:36px}

  .h8 h1{font-size:2.375rem}

  .h8 .h5-txt{padding-top:36px;padding-bottom:28px}

  .h8-pic img{border-radius:16px}}
.c9{background:#FFFFFF;color:#1A1714;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(31,29,25,.14);
  padding:28px;width:520px;max-width:100%;box-sizing:border-box;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:18px;position:relative;z-index:2;margin-top:-64px}
.c9 p,.c9 ol{margin:0}
.c9-k{font-size:1rem;font-weight:600;line-height:1.3}
.c9-pr{font-size:2.5rem;font-weight:600;line-height:1}
.c9-vat{font-size:.875rem;line-height:1.4;color:var(--ink-mid);margin-top:2px!important}
.c9-act{display:flex;flex-direction:column;gap:8px}
.c9-btn{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px;box-sizing:border-box;margin:0!important;white-space:normal}
.c9-btn:focus-visible{outline:3px solid #1A1714;outline-offset:3px}
.c9-micro{font-size:.8125rem;line-height:1.4;color:var(--ink-mid)}
.w9{display:flex;flex-direction:column;align-items:center;gap:10px}
.dt9{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;width:100%;max-width:320px}
.dt9::before{content:'';position:absolute;top:4px;right:16.66%;left:16.66%;height:1.5px;background:#1A1714}
.dt9 li{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.dt9-dot{width:10px;height:10px;border-radius:50%;background:#1A1714}
.dt9-d{font-size:.8125rem;color:var(--ink-mid);text-align:center}
@media (max-width:760px){
  .c9{width:auto;padding:20px;margin-top:-32px;margin-inline:12px;gap:16px}}
.r10x{--r10-paper:#FBFAF7;--r10-bright:#FEFEFE;--r10-rule:#DED8CD;--r10-fuchsia:#EA3C7F;--r10-fuchsia-text:#CC165B;--r10-ink:#1A1714;--r10-ink-soft:#5C544B;--r10-tint:#EDEAE3;color:var(--r10-ink)}
.r10x section{padding-block:clamp(58px,8vw,102px)}
.r10x h2,.r10x h3{font-family:var(--serif);font-weight:600;line-height:1.07;letter-spacing:-.015em;text-wrap:balance;color:inherit}
.r10x p{line-height:1.65}
.r10x .r10-kicker{font-family:var(--sans);font-size:.75rem;font-weight:700;line-height:1.65;letter-spacing:.18em;color:var(--r10-fuchsia-text);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.r10x .r10-kicker::before{content:"";width:28px;height:2px;background:currentColor;display:inline-block;flex:none}
.r10x .r10-center{justify-content:center}
.r10x .r10-big{font-size:clamp(1.875rem,4.6vw,3.5rem)}
.r10x .r10-bright{background:var(--r10-bright)}
.r10x .r10-leave{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.5vw,36px);margin-top:clamp(28px,3vw,44px)}
.r10x .r10-leave>div{border-top:2px solid var(--r10-rule);padding-top:18px}
.r10x .r10-ln{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--r10-fuchsia);line-height:1;display:block}
.r10x .r10-leave h3{font-size:1.2rem;line-height:1.3;margin:10px 0 0;text-wrap:pretty}
.r10x .r10-tang{background:var(--r10-fuchsia);color:var(--r10-paper)}
.r10x .r10-tang .r10-kicker{color:var(--r10-paper);font-size:1.1875rem;letter-spacing:.16em}
.r10x .r10-tang .r10-big{max-width:1190px}
.r10x .r10-levels{list-style:none;padding:0;margin:clamp(30px,4vw,50px) 0 0;border-top:1px solid rgba(251,250,247,.4)}
.r10x .r10-levels li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px clamp(20px,3vw,40px);align-items:baseline;padding-block:18px;border-bottom:1px solid rgba(251,250,247,.4)}
.r10x .r10-levels .r10-ln{color:var(--r10-paper);font-size:1.4rem}
.r10x .r10-levels h3{font-size:1.625rem;line-height:1.2;color:var(--r10-paper)}
.r10x .r10-about-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(32px,4vw,64px);align-items:center}
.r10x .r10-about-grid img{width:100%;height:auto;aspect-ratio:600/840;object-fit:cover;display:block;border-radius:18px;box-shadow:0 22px 55px rgba(31,29,25,.16);background:var(--r10-tint)}
.r10x .r10-about-grid h2{font-size:clamp(2.25rem,4.5vw,3.5rem);margin-bottom:2px}
.r10x .r10-about-grid p{font-family:var(--sans);font-size:1.1rem;line-height:1.7;color:var(--r10-ink);margin-top:16px;max-width:591px}
.r10x .r10-about-grid p.r10-kicker{font-size:.75rem;line-height:1.65;color:var(--r10-fuchsia-text);margin-top:0;max-width:none}
.r10x .r10-taught{border-top:1px solid var(--r10-rule);text-align:center;padding-block:clamp(40px,5vw,64px)}
.r10x .r10-taught-line{font-family:var(--sans);color:var(--r10-ink-soft);font-size:clamp(1rem,1.35vw,1.125rem);margin:8px auto 0;max-width:442px}
.r10x .r10-taught-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(42px,6vw,92px);margin-top:clamp(26px,3vw,38px)}
.r10x .r10-taught-row img{height:clamp(38px,4.5vw,50px);width:auto;max-width:100%;opacity:.55}
.r10x .r10-taught-row img.r10-lg-uxi{height:clamp(19px,2.4vw,25px)}
@media (max-width:1000px){.r10x .r10-leave{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
.r10x .r10-leave{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,36px)}

.r10x .r10-leave>div{border-top:1px solid var(--r10-rule);padding-block:18px}

.r10x .r10-leave>div:first-child,.r10x .r10-leave>div:nth-child(2){border-top:2px solid var(--r10-rule)}

.r10x .r10-about-grid{grid-template-columns:1fr;gap:26px}

.r10x .r10-about-grid img{max-width:260px}}
@media (max-width:600px){
.r10x .r10-leave{grid-template-columns:1fr}

.r10x .r10-leave>div:nth-child(2){border-top:1px solid var(--r10-rule)}

.r10x .r10-levels li{grid-template-columns:44px minmax(0,1fr);gap:14px}

.r10x .r10-levels h3{font-size:1.5rem}

.r10x .r10-taught-row{gap:30px 42px}

.r10x .r10-taught-row img{height:34px}

.r10x .r10-taught-row img.r10-lg-uxi{height:18px}}

/* ===== the page state (see the switch comment at the top of workshop.html) ===== */
html:not([data-ws="open"]) .when-open,
html[data-ws="open"] .when-buyless,
html:not([data-ws="soon"]) .when-soon,
html:not([data-ws="full"]) .when-full,
html:not([data-ws="closed"]) .when-closed,
html:not([data-ws="full"]):not([data-ws="closed"]) .when-cohort,
html[data-ws="soon"] .when-notsoon,
html[data-ws="full"] .when-seats,
html[data-ws="closed"] .when-seats,
html[data-ws="full"] .when-priced,
html[data-ws="closed"] .when-priced{display:none!important}
/* ===== the SOON card, option B (Omer, 2026-10-12, canvas boards SOON-B-*) =====
   Registration is not open and nobody can pay, so the card says so, shows the price quietly (28px, one line, only
   the VAT words, no deadline clause: workshop.html's price script never writes it in SOON) and leaves the email
   box as the one thing to do. The seats and refund line is the card's last line in SOON and OPEN (FULL and CLOSED have none: nobody can buy there); in OPEN it
   keeps its old 8px distance from the button. */
html[data-ws="soon"] .c9-h{text-wrap:balance}
html[data-ws="soon"] .c9-price{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
html[data-ws="soon"] .c9-price .c9-pr{font-size:1.75rem}
html[data-ws="soon"] .c9-price .c9-vat{margin-top:0!important}
.c9 .c9-micro{margin-top:2px}
html[data-ws="open"] .c9 .c9-micro{margin-top:-10px}
@media (max-width:760px){html[data-ws="open"] .c9 .c9-micro{margin-top:-8px}}
/* keyboard focus in the card, in the sign-up band and on the FAQ questions, every state: a 3px ink ring with a 3px gap (the global rule draws blue) */
.c9 .mb4-row input:focus-visible,.c9 .btn2:focus-visible,.mwc-f input:focus-visible,.mwc-f .btn2:focus-visible,.faq summary:focus-visible{outline:3px solid var(--ink)!important;outline-offset:3px}
.c9 .btn2:focus-visible,.mwc-f .btn2:focus-visible{border-radius:100px}
/* the two kinds of answer line, as drawn on the canvas: the card and the sign-up band lower down share them */
.ws-msg.err{color:var(--err);font-size:.95rem}
.ws-msg.ok{background:var(--ok-bg);border-radius:12px;padding:12px 14px;line-height:1.5;overflow-wrap:anywhere}
/* the honeypot: off screen, never in the tab order (the form's own script and the endpoint both drop it) */
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* after a good send the label, the field and the button go in both forms on every width (the card's row and the band's row); the confirmation stays */
.is-sent label,.is-sent .mb4-row,.is-sent .btn2{display:none}
.ws-msg{margin:0}
.ws-msg a{color:inherit}
/* Motion follows the house rule (Omer, 2026-09-16): the OS reduced-motion setting is deliberately not honoured here; the widget's Stop animations toggle (a11y.css) is the stop. */
/* The approved motion pass (2026-10-12). Start states paint from html.ws-pre, set in the <head> (workshop.html), so nothing flashes; the card, its dots and its line play once from .c9-in (workshop.js). Stop animations drops ws-pre's rules at once. */
html.anim .bA,html.anim .r10-leave>div,html.anim .r10-levels li,html.anim .mwc{opacity:0}
html.ws-pre:not(.a11y-reduce-motion) .c9{opacity:0;transform:translateY(16px)}
html.ws-pre:not(.a11y-reduce-motion) .dt9-dot{opacity:0;transform:scale(.6)}
html.ws-pre:not(.a11y-reduce-motion) .dt9::before{transform:scaleX(0);transform-origin:100% 50%}
html.ws-pre .c9.c9-in{opacity:1;transform:none;transition:opacity .5s var(--mo-ease),transform .5s var(--mo-ease)}
html.ws-pre .c9-in .dt9-dot{opacity:1;transform:none;transition:opacity .2s var(--mo-ease) var(--d,.2s),transform .2s var(--mo-ease) var(--d,.2s)}
.dt9 li:nth-child(2){--d:.285s}
.dt9 li:nth-child(3){--d:.37s}
html.ws-pre .c9-in .dt9::before{transform:none;transition:transform .4s var(--mo-ease) .57s}
/* The sent tick: a ring draws, the check follows, then the two lines of the confirmation fade up. */
.ws-tick{display:block;width:36px;height:36px;margin:0 0 10px}
.c9 .ws-tick{margin-inline:auto}
.ws-tick circle,.ws-tick path{fill:none;stroke:#2563FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-tick circle{stroke-dasharray:88;animation:ws-ring .42s var(--mo-ease) both}
.ws-tick path{stroke-dasharray:20;animation:ws-check .3s var(--mo-ease) .42s both}
.ws-msg.ok b,.ws-msg.ok .ws-rest{display:block;animation:ws-up .5s var(--mo-ease) .6s both}
.ws-msg.ok .ws-rest{animation-delay:.685s}
html.a11y-reduce-motion .ws-tick circle,html.a11y-reduce-motion .ws-tick path,html.a11y-reduce-motion .ws-msg.ok b,html.a11y-reduce-motion .ws-msg.ok .ws-rest{animation:none}
@keyframes ws-ring{from{stroke-dashoffset:88}to{stroke-dashoffset:0}}
@keyframes ws-check{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes ws-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}