/* ============================================================================
   Smartclass360 — the home page.

   Loaded on EVERY site page, on top of landing.css (which still owns the header,
   footer base, the hero scene and the form fields). Same paper, same emerald, same type —
   the change is in how the page is told:

   - no numbered "slides", no eyebrow over every heading, no wall of identical cards;
   - the problem is a ledger: today on one side, struck out once in the instructor's
     red marker; what replaces it in an emerald column beside it;
   - one dark moment: the lights go down and a single sentence is on the wall;
   - the product is a tour with a picture of the real screen for each room;
   - the Hebrew claim is shown, not asserted: the same strings, broken and right.
   ============================================================================ */

:root{
  --deep:   #053B2C;
  --deep-2: #0A5440;
  --mint:   #A7F3D0;
  --rule:   rgba(14,15,19,.14);
}

/* the page is clean paper — no grid, no glow */
body.site::before{background:var(--paper)}
body.site::after{display:none}
.nav a.btn-acc,.nav a.btn-acc:hover{background:var(--acc-d); box-shadow:none}
.nav a.btn-acc:hover{background:#03684B}

.hm-sec{padding:clamp(76px,9vw,132px) 0}
.hm-h2{font-size:clamp(2.05rem,4.3vw,3.5rem); font-weight:900; line-height:1.04; letter-spacing:-.033em; max-width:20ch}
.hm-sub{margin-top:20px; font-size:clamp(1.04rem,1.35vw,1.16rem); color:var(--ink-2); max-width:56ch; line-height:1.72}

/* ---------------------------------- buttons --------------------------------- */
.hm-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:34px}
.hm-btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  background:var(--acc-d); color:#fff; font-weight:800; font-size:1.03rem; line-height:1.2;
  padding:16px 28px; border-radius:12px; transition:background-color .2s, transform .15s}
.hm-btn:hover{background:#03684B}
.hm-btn:active{transform:translateY(1px)}
.hm-link{font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--acc);
  text-decoration-thickness:2px; text-underline-offset:7px; transition:color .2s}
.hm-link:hover{color:var(--acc-d)}

/* ----------------------------------- hero ----------------------------------- */
.hm-hero{padding:clamp(40px,6vw,84px) 0 clamp(20px,3vw,40px)}
.hm-hero h1{font-size:clamp(2.9rem,6.3vw,5.2rem); line-height:.98; letter-spacing:-.04em}
[dir=ltr] .hm-hero h1{font-size:clamp(2.6rem,5.2vw,4.5rem)}
.hm-lead{margin-top:28px; font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-2); max-width:50ch; line-height:1.72}
.hm-note{margin-top:20px; font-size:.92rem; color:var(--muted)}
/* the scene keeps its own grid; it just loses the caption row it no longer has */
.hm-hero .stage-wrap{grid-template-areas:"screen phone" "class phone" "steps steps"}
@media (max-width:560px){ .hm-hero .stage-wrap{grid-template-areas:"screen" "phone" "class" "steps"} }

/* ---------------------------------- ledger ---------------------------------- */
.ledger{margin-top:clamp(40px,5vw,64px); border-top:2px solid var(--ink)}
.lg-row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--rule)}
.lg-was{padding:30px 0 32px; padding-inline-end:clamp(20px,4vw,56px)}
.lg-was h3{font-size:clamp(1.2rem,1.8vw,1.42rem); color:var(--ink)}
.lg-was p{margin-top:10px; color:var(--muted); max-width:46ch}
.lg-now{background:var(--wash); padding:30px clamp(20px,3vw,40px) 32px; margin:0;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.08rem,1.5vw,1.26rem); line-height:1.45;
  color:var(--acc-d); letter-spacing:-.01em; display:flex; align-items:center}
.lg-head > span{padding:14px 0; font-size:.9rem; font-weight:800; color:var(--muted)}
.lg-head > span:last-child{background:var(--wash); color:var(--acc-d); padding-inline:clamp(20px,3vw,40px)}

/* the strike: drawn once, in the marker's red, row after row */
.lg-was s{text-decoration:none; position:relative}
.lg-was s::after{content:''; position:absolute; inset-inline:-3px; top:50%; height:3px; border-radius:2px;
  background:var(--laser); opacity:.85; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease) calc(var(--i) * 170ms + 150ms)}
[dir=ltr] .lg-was s::after{transform-origin:left}
.ledger.in .lg-was s::after{transform:scaleX(1)}
.ledger.in .lg-was h3{color:var(--ink-2)}

/* --------------------------------- the turn --------------------------------- */
.hm-turn{position:relative; overflow:hidden; background:var(--deep); color:#E7FBF2;
  padding:clamp(88px,12vw,168px) 0}
/* the only light in the room: a soft-edged cone from one point above the statement */
.hm-turn{--apex:72%}
[dir=ltr] .hm-turn{--apex:28%}
.hm-turn::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(16% 20% at var(--apex) 0%, rgba(167,243,208,.3), transparent 70%),
    linear-gradient(180deg, rgba(167,243,208,.19), rgba(167,243,208,.02) 92%);
  -webkit-mask-image:conic-gradient(from 148deg at var(--apex) -2%, transparent 0deg, #000 16deg, #000 48deg, transparent 64deg, transparent);
          mask-image:conic-gradient(from 148deg at var(--apex) -2%, transparent 0deg, #000 16deg, #000 48deg, transparent 64deg, transparent)}
.hm-turn-in{position:relative}
.hm-turn h2{font-size:clamp(2.3rem,5.4vw,4.7rem); font-weight:900; line-height:1.02; letter-spacing:-.038em;
  color:#fff; max-width:17ch}
.hm-turn p{margin-top:32px; max-width:58ch; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.75; color:rgba(231,251,242,.78)}

/* ---------------------------------- the tour -------------------------------- */
.tour-tabs{display:flex; margin-top:clamp(36px,4vw,52px); border-bottom:1px solid var(--rule);
  overflow-x:auto; scrollbar-width:none}
.tour-tabs::-webkit-scrollbar{display:none}
.tour-tabs [role=tab]{flex:none; position:relative; display:grid; gap:2px; text-align:start; cursor:pointer;
  background:none; border:0; padding:14px clamp(14px,1.8vw,24px) 18px; color:var(--muted); font:inherit;
  border-radius:10px 10px 0 0; transition:color .2s, background-color .2s}
.tour-tabs [role=tab]:first-child{padding-inline-start:0}
.tour-tabs [role=tab] b{font-family:var(--f-disp); font-weight:800; font-size:1.06rem; letter-spacing:-.01em}
.tour-tabs [role=tab] small{font-size:.82rem}
.tour-tabs [role=tab]:hover{color:var(--ink)}
.tour-tabs [role=tab][aria-selected=true]{color:var(--ink)}
.tour-tabs [role=tab][aria-selected=true] small{color:var(--acc-d)}
.tour-tabs [role=tab]::after{content:''; position:absolute; inset-inline:clamp(14px,1.8vw,24px); bottom:-1px; height:3px;
  border-radius:3px 3px 0 0; background:var(--acc); transform:scaleX(0); transition:transform .3s var(--ease)}
.tour-tabs [role=tab]:first-child::after{inset-inline-start:0}
.tour-tabs [role=tab][aria-selected=true]::after{transform:scaleX(1)}
.tour-tabs [role=tab]:focus-visible{outline-offset:-3px}

.tour-panel{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4.5vw,72px);
  padding-top:clamp(28px,3.5vw,44px); align-items:start}
.tour-panel[hidden]{display:none}

.tf{border-bottom:1px solid var(--rule)}
.tf summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 0; font-family:var(--f-disp); font-weight:800; font-size:clamp(1.06rem,1.4vw,1.2rem);
  letter-spacing:-.012em; line-height:1.3; transition:color .2s}
.tf summary::-webkit-details-marker{display:none}
.tf summary::after{content:''; flex:none; width:12px; height:12px; margin-inline-end:4px;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  color:var(--muted); transition:transform .3s var(--ease)}
.tf[open] summary{color:var(--acc-d)}
.tf[open] summary::after{transform:rotate(45deg); color:var(--acc-d)}
.tf summary:hover{color:var(--acc-d)}
.tf summary:focus-visible{outline-offset:4px}
.tf-body{padding:0 0 24px; color:var(--ink-2); max-width:52ch}
.tf-save{margin-top:14px; font-size:.95rem; color:var(--muted)}
.tf-save b{color:var(--ink); font-weight:800}
.tf[open] .tf-body{animation:tfIn .35s var(--ease)}
@keyframes tfIn{from{opacity:0; transform:translateY(-4px)}}

.tour-shot{position:sticky; top:100px}

/* ---- the product pictures ---- */
.mk{background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:18px;
  box-shadow:0 2px 6px -3px rgba(16,17,20,.08), 0 40px 70px -44px rgba(4,120,87,.42);
  font-size:.9rem; line-height:1.4; color:var(--ink)}
.mk-slide{position:relative; aspect-ratio:16/9; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:6% 7%; container-type:inline-size; overflow:hidden}
.mk-slide h5{margin:0; font-family:var(--f-disp); font-weight:800; font-size:clamp(.9rem,5.2cqw,1.45rem); letter-spacing:-.02em; line-height:1.2}
.mk-lines{display:grid; gap:9px; margin-top:7%}
.mk-lines i{height:6px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line)}
.mk-lines i:nth-child(2){width:78%} .mk-lines i:nth-child(3){width:56%}

/* deck */
.mk-win{background:var(--surface-2); border-radius:12px; padding:14px}
.mk-chart{display:flex; align-items:flex-end; gap:7%; height:58%; margin-top:5%; padding-inline:2%;
  border-bottom:1.5px solid var(--line-2)}
.mk-col{flex:1; position:relative; display:flex; align-items:flex-end; gap:5%; height:100%}
.mk-col span{flex:1; height:var(--h); background:var(--acc-xl); border-radius:3px 3px 0 0}
.mk-col span.b{background:var(--acc)}
.mk-col em{position:absolute; inset-inline:-20%; top:calc(100% + 5px); text-align:center; font-style:normal;
  font-size:clamp(.55rem,2.6cqw,.74rem); color:var(--muted); white-space:nowrap}
.mk-strip{display:flex; gap:8px; margin-top:14px}
.mk-strip span{flex:1 1 0; min-width:0; aspect-ratio:16/9; background:#fff; border:1px solid var(--line-2); border-radius:4px;
  padding:8px 9px; display:grid; gap:12%; align-content:start}
.mk-strip i{height:3px; border-radius:2px; background:var(--line-2)}
.mk-strip i:first-child{width:62%; background:var(--ink-2)}
.mk-strip span.on{outline:2px solid var(--acc); outline-offset:1px}
.mk-seq{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px}
.mk-seq li{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px; background:var(--surface-2); color:var(--ink-2)}
.mk-seq li b{flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:#fff;
  border:1px solid var(--line-2); font-size:.74rem}
.mk-seq li.on{background:var(--wash); color:var(--acc-d); font-weight:700}
.mk-seq li.on b{border-color:var(--acc); color:var(--acc-d)}

/* studio */
.mk-ribbon{display:flex; gap:4px; padding-bottom:10px; border-bottom:1px solid var(--line); overflow:hidden}
.mk-ribbon span{flex:none; font-size:.8rem; padding:6px 10px; border-radius:7px; color:var(--muted); white-space:nowrap}
.mk-ribbon span.on{background:var(--wash); color:var(--acc-d); font-weight:800}
.mk-st-body{display:grid; grid-template-columns:1fr 32%; gap:14px; margin-top:14px}
.mk-canvas{background:var(--surface-2); border-radius:10px; padding:14px; display:grid; align-items:center}
.mk-sel{position:relative; outline:1.5px solid var(--acc); padding:3% 4%}
.mk-sel i{position:absolute; width:8px; height:8px; background:#fff; border:1.5px solid var(--acc); border-radius:2px}
.mk-sel .h-tl{top:-5px; left:-5px} .mk-sel .h-tr{top:-5px; right:-5px}
.mk-sel .h-bl{bottom:-5px; left:-5px} .mk-sel .h-br{bottom:-5px; right:-5px}
.mk-sel .h-t{top:-5px; left:calc(50% - 4px)} .mk-sel .h-b{bottom:-5px; left:calc(50% - 4px)}
.mk-sel .h-l{left:-5px; top:calc(50% - 4px)} .mk-sel .h-r{right:-5px; top:calc(50% - 4px)}
.mk-pane{display:grid; gap:11px; align-content:start; padding-inline-start:14px; border-inline-start:1px solid var(--line); font-size:.8rem}
.mk-pane b{font-family:var(--f-disp); font-size:.92rem}
.mk-pane label{display:grid; gap:4px; color:var(--muted)}
.mk-pane label span{background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:6px 9px; color:var(--ink); font-weight:600}

/* live room */
.mk-wall{display:grid; align-content:center; gap:12px; aspect-ratio:16/9; padding:6% 7%; border-radius:10px;
  background:#fff; border:1px solid var(--line); container-type:inline-size}
.mk-q{margin:0 0 4px; font-family:var(--f-disp); font-weight:800; font-size:clamp(1rem,5cqw,1.5rem); letter-spacing:-.02em; line-height:1.2}
.mk-res{display:grid; grid-template-columns:38% 1fr 3.2em; align-items:center; gap:12px; font-weight:600}
.mk-res i{position:relative; height:12px; border-radius:6px; background:var(--surface-2); overflow:hidden}
.mk-res i::before{content:''; position:absolute; inset-block:0; inset-inline-start:0; width:var(--w); border-radius:6px; background:var(--line-2)}
.mk-res:first-of-type i::before{background:var(--acc)}
.mk-res b{text-align:end; font-variant-numeric:tabular-nums}
.mk-phones{display:flex; justify-content:center; gap:16px; margin-top:20px}
.mk-ph{position:relative; width:44px; height:78px; display:grid; gap:5px; align-content:end; padding:12px 5px;
  background:#fff; border:2px solid var(--ink-2); border-radius:10px}
.mk-ph i{height:11px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line-2)}
.mk-ph i.on{background:var(--acc-xl); border-color:var(--acc)}
.mk-ph.done::after{content:'✓'; position:absolute; top:-9px; inset-inline-end:-9px; width:20px; height:20px;
  display:grid; place-items:center; border-radius:50%; background:var(--acc-d); color:#fff; font-size:.68rem; font-weight:900}
.mk-count{margin-top:12px; text-align:center; font-size:.84rem; color:var(--muted)}

/* operations */
.mk-sync{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px;
  background:var(--wash); color:var(--acc-d); font-size:.84rem; font-weight:800}
.mk-sync::before{content:'✓'}
.mk-week{display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:auto 96px 96px; gap:6px; margin-top:14px}
.mk-week b{text-align:center; font-size:.8rem; color:var(--muted); padding-bottom:6px; border-bottom:1px solid var(--line)}
.mk-week .u{border-radius:8px; padding:8px; font-size:.76rem; font-weight:700; line-height:1.25;
  border-inline-start:3px solid; overflow:hidden}
.mk-week .u.a{background:var(--wash); border-color:var(--acc); color:var(--acc-d)}
.mk-week .u.b{background:#EEF2FF; border-color:#818CF8; color:#3730A3}
.mk-week .u.p{background:var(--surface-2); border-color:var(--line-2); color:var(--muted)}
.mk-week .u.g{background:#FEF6DD; border-color:#F2B33D; color:#8A5A06}
.mk-week .u.x{background:#FDEEF5; border-color:#E879A9; color:#9D174D}

/* share & output */
.mk-link{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px;
  border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2)}
.mk-link span{font-family:var(--f-mono); font-size:.8rem; color:var(--ink-2)}
.mk-link em{font-style:normal; font-size:.78rem; font-weight:800; color:var(--acc-d); white-space:nowrap}
.mk-share .mk-slide{margin-top:14px}
.mk-share .pin{position:absolute; width:24px; height:24px; display:grid; place-items:center; border-radius:50% 50% 50% 0;
  background:var(--acc-d); color:#fff; font-size:.72rem; font-weight:800; box-shadow:0 4px 10px -4px rgba(4,120,87,.7)}
.mk-bubble{position:absolute; inset-block-start:36%; inset-inline-end:5%; width:48%; padding:8px 10px;
  background:#fff; border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--shadow);
  font-size:clamp(.62rem,2.9cqw,.8rem); line-height:1.35}
.mk-bubble b{display:block; color:var(--acc-d); font-size:.92em}
.mk-pdf{display:flex; gap:10px; margin-top:14px}
.mk-pdf span{width:54px; aspect-ratio:1/1.41; border:1px solid var(--line-2); border-radius:3px; box-shadow:var(--shadow-s);
  background:#fff linear-gradient(var(--surface-2),var(--surface-2)) 50% 16%/72% 26% no-repeat}

/* platform */
.mk-tbl{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.mk-tr{display:grid; grid-template-columns:1.5fr .8fr 1fr; gap:12px; align-items:center; padding:11px 14px; border-top:1px solid var(--line)}
.mk-th{border-top:0; background:var(--surface-2); color:var(--muted); font-size:.78rem; font-weight:800}
.mk-tr em{font-style:normal; font-size:.74rem; font-weight:800; padding:3px 10px; border-radius:99px; background:#FEF6DD; color:#8A5A06}
.mk-tr em.on{background:var(--wash); color:var(--acc-d)}
.mk-tr i{display:block; position:relative; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.mk-tr i::before{content:''; position:absolute; inset-block:0; inset-inline-start:0; width:var(--w); background:var(--acc)}
.mk-mfa{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:16px;
  padding:14px; border:1px dashed var(--line-2); border-radius:10px}
.mk-mfa b{font-size:.88rem}
.mk-mfa div{display:flex; gap:6px}
.mk-mfa span{width:30px; height:38px; display:grid; place-items:center; background:#fff; border:1px solid var(--line-2);
  border-radius:7px; font-family:var(--f-mono); font-weight:600}
.mk-mfa .cur{border-color:var(--acc); box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.mk-mfa .cur::after{content:''; width:2px; height:18px; background:var(--acc-d); animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ------------------------------ Hebrew, shown -------------------------------- */
.hm-heb{background:var(--surface); border-block:1px solid var(--line)}
.hm-heb-in{display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(36px,6vw,96px); align-items:center}
.spec{display:grid; gap:16px}
.spec-card{margin:0; padding:18px 22px 22px; border-radius:16px; border:1px solid var(--line-2); background:var(--paper)}
.spec-card figcaption{display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:.84rem; font-weight:800; color:var(--muted)}
.spec-card figcaption::before{flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%;
  font-size:.7rem; font-weight:900; color:#fff}
.spec-bad figcaption::before{content:'✕'; background:var(--laser)}
.spec-good{background:#fff; border-color:rgba(16,185,129,.55); box-shadow:0 30px 60px -42px rgba(4,120,87,.55)}
.spec-good figcaption{color:var(--acc-d)}
.spec-good figcaption::before{content:'✓'; background:var(--acc-d)}
.spec-ui{display:grid; gap:8px}
.spec-ui p{margin:0; color:var(--ink-2)}
.spec-ui .spec-h{font-family:var(--f-disp); font-weight:800; font-size:1.22rem; color:var(--ink); letter-spacing:-.015em}
.spec-ui label{display:flex; align-items:center; gap:10px; margin-top:4px; font-weight:600}
.spec-ui label i{flex:1; font-style:normal; font-weight:400; padding:8px 11px; background:#fff;
  border:1px solid var(--line-2); border-radius:8px; color:var(--ink-2)}
.spec-bad .spec-ui{opacity:.82}

/* ---------------------------------- steps ----------------------------------- */
.steps-ol{--gap:clamp(24px,4vw,60px); position:relative; list-style:none; margin:clamp(48px,6vw,72px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
/* one path from the first stop to the last — it ends where you go live */
.steps-ol li:not(:last-child)::before{content:''; position:absolute; inset-inline-start:22px; top:21px;
  width:calc(100% + var(--gap) - 22px); height:2px; background:var(--ink)}
.steps-ol li{position:relative; padding-top:68px}
.st-n{position:absolute; top:0; inset-inline-start:0; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background:var(--paper); border:2px solid var(--ink);
  font-family:var(--f-disp); font-weight:900; font-size:1.1rem}
.steps-ol li:last-child .st-n{background:var(--acc-d); border-color:var(--acc-d); color:#fff}
.steps-ol h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.steps-ol p{margin-top:10px; color:var(--muted); max-width:34ch}

/* ---------------------------------- close ----------------------------------- */
.hm-close{background:var(--wash); border-top:1px solid rgba(4,120,87,.14); padding:clamp(80px,10vw,136px) 0}
.hm-close-in{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(30px,6vw,96px); align-items:end}
.hm-close h2{font-size:clamp(2.15rem,4.6vw,3.8rem); font-weight:900; line-height:1.03; letter-spacing:-.036em}
.hm-close p{font-size:clamp(1.04rem,1.35vw,1.16rem); color:var(--ink-2); line-height:1.72; max-width:48ch}
.hm-close .hm-cta{margin-top:28px}

/* --------------------------------- narrow ----------------------------------- */
@media (max-width:980px){
  .tour-panel{grid-template-columns:1fr}
  .tour-shot{position:static; order:-1; max-width:620px}
  .hm-heb-in,.hm-close-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lg-head{display:none}
  .lg-row{grid-template-columns:1fr; border-bottom:0; padding-bottom:26px}
  .lg-row + .lg-row{border-top:1px solid var(--rule); padding-top:4px}
  .lg-was{padding:24px 0 14px}
  .lg-now{padding:16px 18px; border-radius:12px}
  .steps-ol{--gap:34px; grid-template-columns:1fr}
  .steps-ol li:not(:last-child)::before{inset-inline-start:21px; top:22px; bottom:calc(-1 * var(--gap)); width:2px; height:auto}
  .steps-ol li{padding-top:6px; padding-inline-start:70px}
  .mk{padding:14px}
  .mk-st-body{grid-template-columns:1fr}
  .mk-pane{border-inline-start:0; padding-inline-start:0; grid-template-columns:repeat(3,1fr)}
  .mk-pane b{grid-column:1/-1}
  .mk-week{grid-template-rows:auto 84px 84px}
  .mk-week .u{font-size:.68rem; padding:6px}
}

/* =============================== inner pages ================================ */
/* The same grammar as the home page: a big headline on paper, then one ink rule that the
   content hangs from — no eyebrow, no card around the text. */
.pg-head{padding:clamp(48px,7vw,100px) 0 clamp(30px,4vw,52px)}
.pg-head h1{font-size:clamp(2.6rem,5.6vw,4.5rem); font-weight:900; line-height:1; letter-spacing:-.04em; max-width:18ch}
.pg-head .hm-sub{margin-top:22px}
.pg-body{padding-bottom:clamp(76px,9vw,128px)}
.pg-body > .wrap{border-top:2px solid var(--ink); padding-top:clamp(34px,4.5vw,56px)}
.pg-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5.5vw,88px); align-items:start}
.pg-h2{font-size:clamp(1.55rem,2.6vw,2.15rem); font-weight:900; line-height:1.1; letter-spacing:-.03em; max-width:20ch}
.pg-h2-gap{margin-top:clamp(44px,5vw,64px)}

/* about */
.pg-story p{font-size:clamp(1.04rem,1.3vw,1.14rem); line-height:1.8}
.pg-story p:first-child{font-family:var(--f-disp); font-weight:700; font-size:clamp(1.2rem,1.7vw,1.42rem);
  line-height:1.5; letter-spacing:-.012em; color:var(--ink)}
.pg-vals{margin:26px 0 0; border-top:1px solid var(--rule)}
.pg-vals > div{padding:22px 0 24px; border-bottom:1px solid var(--rule)}
.pg-vals dt{font-family:var(--f-disp); font-weight:800; font-size:clamp(1.12rem,1.5vw,1.28rem); letter-spacing:-.012em}
.pg-vals dd{margin:8px 0 0; color:var(--muted); max-width:48ch}

/* contact */
.pg-mail{display:inline-block; margin-top:22px; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.02em; color:var(--acc-d); text-decoration:none;
  border-bottom:2px solid var(--acc); padding-bottom:2px; overflow-wrap:anywhere}
.pg-mail:hover{color:var(--ink)}
.pg-lines{list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--rule)}
.pg-lines li{border-bottom:1px solid var(--rule)}
.pg-lines a{display:flex; justify-content:space-between; align-items:center; padding:16px 0;
  font-weight:700; color:var(--ink); text-decoration:none; transition:color .2s}
/* a chevron pointing the way you read: left in Hebrew, right in English */
.pg-lines a::after{content:''; width:9px; height:9px; border-top:2px solid currentColor; border-left:2px solid currentColor;
  transform:rotate(-45deg); margin-inline-end:4px; opacity:.5}
[dir=ltr] .pg-lines a::after{border-left:0; border-right:2px solid currentColor; transform:rotate(45deg)}
.pg-lines a:hover{color:var(--acc-d)}
.pg-aside{margin-top:28px; color:var(--muted); max-width:40ch}

/* forms: one quiet sheet, the fields doing the talking */
.form-card{background:var(--surface); border:1px solid var(--line-2); border-radius:18px; box-shadow:none;
  padding:clamp(22px,3.2vw,38px)}
.field label{font-size:.92rem}
.field input,.field select,.field textarea{border-radius:10px; background:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff}
.form-send{width:100%; margin-top:16px; border:0; cursor:pointer; font-family:inherit}
.ok-msg,.err-msg{border-radius:10px}

/* trial: the promises, then the path */
.ticks{margin:0; gap:0; border-top:1px solid var(--rule)}
.ticks li{padding:16px 0; border-bottom:1px solid var(--rule); font-weight:600; color:var(--ink)}
.ticks li::before{background:var(--acc-d); color:#fff}
.steps-ol.is-vert{--gap:30px; grid-template-columns:1fr; margin-top:30px}
.steps-ol.is-vert li{padding-top:6px; padding-inline-start:68px}
.steps-ol.is-vert li:not(:last-child)::before{inset-inline-start:21px; top:22px; bottom:calc(-1 * var(--gap)); width:2px; height:auto}
.steps-ol.is-vert h3{font-size:1.2rem}
.steps-ol.is-vert p{margin-top:6px}

/* legal: one readable column, numbered headings already in the text */
.pg-prose{max-width:72ch}
.prose{font-size:1.04rem; line-height:1.78}
.prose h2{font-size:clamp(1.3rem,2vw,1.6rem); font-weight:900; letter-spacing:-.02em; margin:44px 0 12px}
.prose h2:first-of-type{margin-top:28px}
.prose h3{font-size:1.1rem; margin:26px 0 8px}
.upd{font-family:var(--f-body); font-size:.9rem; font-weight:600; color:var(--muted); margin-bottom:22px}
.note{border-radius:10px; border-inline-start:0; background:var(--wash); color:var(--ink-2)}

/* footer, every page */
.ftr{margin-top:0; background:var(--surface)}
.ftr h4{font-family:var(--f-disp); font-size:.98rem; font-weight:800; letter-spacing:-.01em; text-transform:none; color:var(--ink)}

@media (max-width:920px){
  .pg-split{grid-template-columns:1fr}
}