/* ============================================================
   home v2: intro, hero, arc band, statement, the open file, areas rail, faq teaser, close
   ============================================================ */

/* ---------- intro ---------- */
html.is-intro{overflow:hidden}
.intro{position:fixed;inset:0;z-index:200;--veil:1;color:var(--white);display:grid;place-items:center;pointer-events:none}
.intro::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(var(--veil));transform-origin:top;z-index:0}
.intro::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:180px;opacity:.09;mix-blend-mode:overlay;transform:scaleY(var(--veil));transform-origin:top;z-index:1}
.intro-inner{position:relative;z-index:2;text-align:center;padding:0 var(--gutter)}
.intro-tag{color:var(--gold);margin-top:clamp(12px,1.4vw,22px);opacity:0}
.intro-mark{font-family:var(--display);font-size:clamp(56px,13vw,200px);line-height:1;color:var(--white);opacity:0;white-space:nowrap;display:inline-block}
.intro-spin{position:absolute;inset-inline-end:28px;bottom:26px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.28);border-top-color:var(--gold);animation:spin 1s linear infinite;opacity:0;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- hero ---------- */
.hero{min-height:100svh;padding-top:calc(var(--nav-h) + 24px);padding-bottom:clamp(40px,6vw,80px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-top{text-align:center;padding-top:clamp(12px,3vw,40px)}
.hero-tag{margin-top:clamp(8px,1vw,16px)}
.hero-mark{font-family:var(--display);font-size:clamp(56px,13vw,200px);line-height:1;color:var(--white);white-space:nowrap;display:inline-block}
.hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,3vw,36px)}
.hero-grid{display:grid;gap:40px;margin-top:clamp(40px,6vw,72px);align-items:end}
@media (min-width:1000px){.hero-grid{grid-template-columns:1fr 1fr;gap:64px}}
.hero-claim{font-family:var(--display);font-size:clamp(40px,6.4vw,96px);line-height:.98;color:var(--white)}
.hero-claim em{font-style:normal;color:var(--gold)}
.hero-copy{max-width:36em;margin-top:24px;color:var(--on-ink);font-family:var(--serif);font-size:var(--lede);line-height:1.55}
.hero-stage{position:relative;aspect-ratio:1/1;max-width:560px;margin-inline:auto;width:100%}
.hero-ring{position:absolute;inset:6%;border-radius:50%;border:2px solid rgba(255,255,255,.28);pointer-events:none}
.hero-ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(201,162,39,.35)}
/* the disc: background stays inside the circle, the person steps out of it */
.hero-disc{position:absolute;inset:8%;border-radius:50%;overflow:hidden;background:var(--ink-2);box-shadow:0 40px 100px rgba(0,0,0,.4)}
.hero-disc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:linear-gradient(to top,rgba(10,22,40,.35),rgba(10,22,40,0) 50%);pointer-events:none}
/* both layers share one frame and one transform, so the person lines up with the background;
   scaling from the bottom edge pushes the head and shoulders above the circle, where only the cutout is visible */
.hero-disc img,.hero-cut{position:absolute;inset:8%;width:84%;height:84%;object-fit:cover;object-position:50% 0;filter:saturate(.72) contrast(1.05);transform:scale(1.34);transform-origin:50% 100%;will-change:transform}
.hero-disc img{inset:0;width:100%;height:100%}
.hero-cut{z-index:2;filter:saturate(.72) contrast(1.05) drop-shadow(0 30px 40px rgba(0,0,0,.38));pointer-events:none}
/* orbs: display type, one per practice family */
.hero-orb{position:absolute;z-index:3;width:clamp(128px,14vw,186px);height:clamp(128px,14vw,186px);border-radius:50%;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 0 0 1px rgba(15,32,56,.06);transform:translate(-50%,-50%)}
.hero-orb::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(201,162,39,.55)}
.hero-orb b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.9vw,25px);line-height:1.02;letter-spacing:-.005em;text-wrap:balance}
.hero-orb small{display:block;font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.2;color:var(--gold-ink);margin-top:8px;letter-spacing:.02em}
.hero-orb.o1{left:10%;top:20%}
.hero-orb.o2{left:4%;top:60%}
.hero-orb.o3{left:26%;top:93%}
.hero-note{position:absolute;z-index:4;inset-inline-start:-6%;bottom:10%;text-align:center;transform:rotate(-7deg);display:flex;flex-direction:column;align-items:center}
.hero-note svg{width:64px;height:48px;margin:0 auto 6px;order:-1;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:999px){.hero-orb{width:104px;height:104px;padding:9px}.hero-orb b{font-size:17px}.hero-orb small{font-size:13px;margin-top:4px}.hero-note{inset-inline-start:-2%;bottom:18%}.hero-orb.o1{left:14%;top:22%}.hero-orb.o2{left:16%;top:62%}.hero-orb.o3{left:84%;top:14%}.hero-stage{margin-top:16px}}

/* ---------- tilted band ---------- */
.band-tilt{padding:clamp(56px,8vw,110px) 0 clamp(24px,4vw,56px);overflow:hidden}
.band-tilt .marquee{transform:rotate(-2.5deg) scale(1.04);background:var(--paper);border-color:var(--line-2)}

/* ---------- statement ---------- */
.statement{position:relative}
.statement-lines{font-family:var(--display);font-size:clamp(38px,5.6vw,84px);line-height:1.04;color:var(--ink)}
.statement-lines .dim{color:rgba(15,32,56,.42)}
.statement-lines .hit{color:var(--ink)}
.statement-answer{margin-top:clamp(28px,4vw,48px);font-family:var(--display);font-size:clamp(28px,3.6vw,56px);line-height:1.08;color:var(--gold-ink);max-width:16em}
.statement-side{position:relative}
.statement-side .ph{aspect-ratio:4/5;max-width:480px;margin-inline-start:auto}
.statement-side .hand{position:absolute;inset-inline-start:-6%;top:-6%;transform:rotate(-8deg)}

/* ---------- the open file (signature) ---------- */
/* One pinned stage, six beats. The card is the set: each beat plays a short
   scene inside it (a chat, payslips, a letter, a claim, the hearing, the
   judgment), then its stamp lands in the ledger below, and on the sixth the
   ground turns to paper. Transforms and opacity only; the copy on the other
   side names the beat. */
.file{position:relative;overflow:clip}
.file-stage{min-height:100svh;display:grid;align-items:center;padding-top:var(--nav-h);background:var(--ink);transition:background-color .6s var(--ease-io)}
.file.is-deep .file-stage{background:var(--ink-deep)}
.file.is-paper .file-stage{background:var(--paper)}
.file-grid{display:grid;gap:36px;align-items:center;padding-block:32px}
@media (min-width:1000px){.file-grid{grid-template-columns:1.05fr .95fr;gap:80px}}
.file-head{position:relative}
.file-kicker{color:var(--gold);transition:color .55s}
.file.is-paper .file-kicker{color:var(--gold-ink)}
/* the title is a mask: the outgoing line leaves through the top, the next rises from below */
.file-title{position:relative;min-height:2.1em;overflow:hidden;font-family:var(--display);font-size:clamp(40px,6.2vw,92px);line-height:1.02;color:var(--white);margin-top:16px;padding-block:.05em;transition:color .55s}
.file.is-paper .file-title{color:var(--ink)}
.file-title span{position:absolute;inset:0;padding-block:.05em;opacity:0;transform:translateY(105%);transition:transform .55s var(--ease-out),opacity .3s}
.file-title span.is-on{opacity:1;transform:none}
.file-title span.is-out{opacity:0;transform:translateY(-105%);transition:transform .4s var(--ease-io),opacity .25s}
.file-title.dir-back span{transform:translateY(-105%)}
.file-title.dir-back span.is-on{transform:none}
.file-title.dir-back span.is-out{transform:translateY(105%)}
.file-desc{position:relative;min-height:3.6em;margin-top:22px;font-family:var(--serif);font-size:var(--lede);line-height:1.5;color:var(--on-ink);max-width:30em;transition:color .55s}
.file.is-paper .file-desc{color:var(--text)}
/* opacity:0 alone leaves all six descriptions in the accessibility tree, so a
   screen reader heard every stage at once. */
.file-desc span{position:absolute;inset-inline:0;top:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .45s var(--ease-out),visibility 0s .3s}
.file-desc span.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s .1s,transform .45s .1s var(--ease-out),visibility 0s}
.file-dots{display:flex;gap:10px;margin-top:32px;align-items:center}
.file-dots i{width:44px;height:6px;border-radius:3px;background:rgba(255,255,255,.18);position:relative;overflow:hidden;transition:background-color .55s}
.file.is-paper .file-dots i{background:rgba(15,32,56,.14)}
.file-dots i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.file-dots i.is-on::after{transform:scaleX(1)}
.file-dots b{font-family:var(--display);font-size:20px;color:var(--gold);margin-inline-start:8px;font-weight:400;transition:color .55s;white-space:nowrap;font-variant-numeric:tabular-nums}
.file.is-paper .file-dots b{color:var(--gold-ink)}
/* The illustration disclaimer. It sits in the copy column, not in the card: the
   card carries aria-hidden, and both .file-after and .file-foot are hidden on
   phones, so anything inside them would not reach most of the traffic. */
.file-note{margin-top:18px;max-width:44ch;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--on-ink-muted);transition:color .55s}
.file.is-paper .file-note{color:var(--muted)}
@media (max-width:999px){.file .file-note{margin-top:6px;font-size:14px;line-height:1.28;max-width:none}}
.file-after{margin-top:28px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.file.is-paper .file-after{opacity:1;transform:none}

/* the card */
.file-card{position:relative;background:var(--white);color:var(--text);border-radius:var(--r-xl);padding:clamp(20px,2.6vw,34px);max-width:600px;margin-inline:auto;width:100%;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:rotate(-3deg);will-change:transform}
.file.is-paper .file-card{box-shadow:0 20px 60px rgba(15,32,56,.14)}
.file-card::before{content:"";position:absolute;inset:14px;border-radius:calc(var(--r-xl) - 10px);border:1px solid var(--line);pointer-events:none}
/* the tab is a one-line mask: "open file" rolls up and out, "judgment given" rolls in from below.
   GSAP drives it on the scrub; the .is-paper rules are the same move for the no-motion state. */
.file-tab{position:absolute;top:-16px;inset-inline-start:36px;background:var(--gold);color:var(--ink);border-radius:var(--r-pill);padding:6px 16px;font-size:14px;font-weight:800;letter-spacing:.01em;display:inline-grid;justify-items:center;overflow:hidden;transition:background-color .4s,color .4s}
.file-tab .open,.file-tab .done{grid-area:1/1;white-space:nowrap}
.file-tab .done{transform:translateY(110%)}
.file.is-paper .file-tab{background:var(--ink);color:var(--white)}
.file.is-paper .file-tab .open{transform:translateY(-110%)}
.file.is-paper .file-tab .done{transform:none}
.file-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.file-card-head .t{font-family:var(--display);font-size:clamp(20px,2vw,28px);color:var(--ink)}
.file-card-head .m{font-size:14px;color:var(--muted);font-weight:600}

/* the set: every scene stacked in the same box, one visible at a time */
.scenes{position:relative;height:clamp(190px,34vh,340px);margin-bottom:16px;border-radius:var(--r-lg);overflow:hidden;background:var(--paper);isolation:isolate}
.scene{position:absolute;inset:0;padding:16px;opacity:0;visibility:hidden}
.scene.is-on{opacity:1;visibility:visible}
.scene [data-l]{will-change:transform,opacity}

/* 1. first contact: a chat, and the person on the other end of it */
.chat{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:100%}
.msg{position:relative;max-width:78%;padding:9px 13px;border-radius:16px;font-family:var(--sans);font-size:14px;line-height:1.4;background:var(--white);box-shadow:0 2px 10px rgba(15,32,56,.08)}
.msg p{margin:0}
.msg time{display:block;font-size:11px;color:var(--muted);margin-top:4px;text-align:end}
.msg.from-client{align-self:flex-start;border-start-start-radius:4px}
.msg.from-shaul{align-self:flex-end;background:var(--ink);color:var(--on-ink);border-start-end-radius:4px;padding-inline-start:52px}
.msg.from-shaul time{color:var(--on-ink-muted)}
.msg.from-shaul .ava{position:absolute;inset-inline-start:10px;top:10px;width:32px;height:32px;border-radius:50%;object-fit:cover}
.who{position:absolute;inset-inline-end:14px;top:12px;margin:0;display:grid;justify-items:center;gap:4px;z-index:2}
.who img{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:3px solid var(--white);box-shadow:0 8px 24px rgba(15,32,56,.18)}
/* the sender's name sits inside the bubble, the way a chat shows it, so nothing has to fit above the thread */
.msg .from{display:block;font-size:11px;font-weight:800;color:var(--gold);margin-bottom:2px}
/* one face per scene: where the portrait shows (desktop), the bubble drops its small avatar */
@media (min-width:1000px){.msg.from-shaul .ava{display:none}.msg.from-shaul{padding-inline-start:14px}}
.keep{align-self:flex-start;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.5);border-radius:14px;padding:9px 12px;font-size:13px;color:var(--gold-ink)}
.keep b{display:block;font-weight:800;margin-bottom:6px}
.keep ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}
.keep li{position:relative;padding-inline-start:18px;font-weight:600;white-space:nowrap}
/* the tick keeps its shape in both directions, so the borders are physical on purpose */
.keep li::before{content:"";position:absolute;inset-inline-start:0;top:.36em;width:10px;height:6px;border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);transform:rotate(-45deg)}

/* 2. evidence: payslips fan out, one line gets the highlighter, the contract sits under it */
.sheets{position:absolute;inset-inline-start:18px;top:18px;width:50%;height:calc(100% - 36px)}
.sheet{position:absolute;inset:0;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,32,56,.18);padding:14px;transform-origin:50% 118%}
.sheet b{display:block;font-size:12px;font-weight:800;color:var(--ink);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.sheet i{display:block;height:7px;border-radius:4px;background:var(--paper-3);margin-top:8px;width:var(--w,80%)}
.sheet i.gold{background:rgba(201,162,39,.55)}
.hl{position:absolute;inset-inline-end:16px;top:20px;width:40%;display:grid;gap:8px;z-index:2}
.hl-bar{height:10px;border-radius:5px;background:var(--gold);transform-origin:100% 50%}
.hl-txt{font-family:var(--sans);font-weight:800;font-size:14px;color:var(--ink);background:var(--white);border-radius:10px;padding:8px 10px;box-shadow:0 2px 10px rgba(15,32,56,.08)}
.mini{position:absolute;inset-inline-end:16px;bottom:18px;width:40%;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(15,32,56,.14);z-index:2}
.mini b{display:block;font-size:12px;font-weight:800;color:var(--ink);margin-bottom:6px}
.mini i{display:block;height:6px;border-radius:3px;background:var(--paper-3);margin-top:6px;width:var(--w,80%)}
.mini .sig{display:block;margin-top:8px;font-family:"Gveret Levin","Amatic SC",cursive;font-weight:700;font-size:17px;line-height:1;color:var(--ink);text-align:end}

/* 3. the demand letter: two real clauses, then the rest of the page */
.letter{position:absolute;inset:14px 16px;background:var(--white);border-radius:10px;box-shadow:0 8px 24px rgba(15,32,56,.14);padding:14px 16px;overflow:hidden}
.letter .lh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px}
.letter .lh b{font-family:var(--display);font-size:14px;color:var(--ink)}
.letter h4{font-family:var(--display);font-size:20px;color:var(--ink);margin:10px 0 4px}
.letter .cl{font-family:var(--serif);font-size:12.5px;line-height:1.45;color:var(--text);margin:6px 0 0}
.letter .ln{height:7px;border-radius:4px;background:var(--paper-3);margin-top:10px;width:var(--w,85%);transform-origin:100% 50%}
.letter .sig{font-family:"Gveret Levin","Amatic SC",cursive;font-weight:700;font-size:18px;line-height:1.1;color:var(--ink);margin:10px 0 0}
.stampette{position:absolute;inset-inline-end:26px;bottom:22px;border:2px solid var(--gold);color:var(--gold-ink);font-weight:800;font-size:13px;padding:6px 10px;border-radius:10px;background:rgba(246,243,236,.92);transform:rotate(-6deg);white-space:nowrap}
.stampette.filed{inset-inline-end:auto;inset-inline-start:26px;bottom:auto;top:22px;border-color:var(--ink);color:var(--ink);transform:rotate(7deg)}

/* 4. the statement of claim: a stack of pages, its chapter heads, and the court's seal */
.doc{position:absolute;inset:14px 16px}
.doc .pg{position:absolute;inset:0;background:var(--white);border-radius:10px;box-shadow:0 6px 18px rgba(15,32,56,.10)}
.doc .pg1{transform:rotate(-2.5deg) translate(3px,5px)}
.doc .pg2{transform:rotate(1.5deg) translate(-3px,9px)}
.doc .face{position:relative;height:100%;background:var(--white);border-radius:10px;box-shadow:0 8px 24px rgba(15,32,56,.14);padding:14px 16px}
.doc-h{font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.doc h4{font-family:var(--display);font-size:22px;color:var(--ink);text-align:center;margin:6px 0 10px}
.doc ol{margin:0;padding:0;list-style:none;counter-reset:s}
.doc li{display:flex;align-items:baseline;gap:8px;margin-top:8px;counter-increment:s;font-family:var(--serif);font-size:13px;line-height:1.35;color:var(--text)}
.doc li::before{content:counter(s) ".";font-family:var(--display);font-size:13px;color:var(--ink);min-width:16px}
.seal{position:absolute;inset-inline-end:22px;bottom:16px;width:86px;height:86px;color:var(--ink)}
.seal circle{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:1;stroke-linecap:round}
.seal text{font-family:var(--sans);font-size:10px;font-weight:800;fill:currentColor}
.seal .big{font-family:var(--display);font-size:15px;font-weight:400}
.seal-gold{color:var(--gold-ink)}

/* 5. the hearing: the one photographic beat. The face sits on the start side, the cards on the end side. */
.sc-court{padding:10px}
.sc-court .photo{position:absolute;inset:10px;margin:0;border-radius:14px;overflow:hidden;background:var(--ink)}
.sc-court .photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:36% 14%;transform:scale(1.08);transform-origin:50% 30%;filter:saturate(.8)}
.sc-court .photo figcaption{position:absolute;inset-inline-start:14px;bottom:10px;font-family:"Gveret Levin","Amatic SC",cursive;font-weight:700;font-size:22px;color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.qa{position:absolute;inset-inline-end:18px;max-width:54%;background:var(--white);border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.qa small{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:3px}
.qa b{display:block;font-family:var(--serif);font-weight:500;font-size:14px;line-height:1.35;color:var(--ink)}
.qa.q{top:18px}
.qa.a{bottom:18px;background:var(--ink)}
.qa.a small{color:var(--gold)}
.qa.a b{color:var(--white)}

/* 6. the judgment: what was awarded, line by line, and the gold seal */
.verdict{position:absolute;inset:14px 16px;background:var(--white);border-radius:10px;box-shadow:0 8px 24px rgba(15,32,56,.14);padding:14px 18px;text-align:center;display:grid;align-content:center;gap:4px}
.verdict h4{font-family:var(--display);font-size:clamp(24px,3vw,32px);color:var(--ink);margin:0}
.verdict p{font-family:var(--serif);font-size:13.5px;color:var(--text);margin:0}
.awards{display:grid;gap:3px;margin-top:8px;text-align:start}
.awards span{display:flex;justify-content:space-between;gap:10px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text);border-top:1px dashed var(--line);padding-top:4px}
.awards em{font-style:normal;color:var(--gold-ink);font-weight:800;white-space:nowrap}
.verdict .seal{top:10px;bottom:auto;inset-inline-end:10px;width:72px;height:72px;transform:rotate(-8deg)}

/* the ledger: one stamp per beat */
.stamps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){.stamps{grid-template-columns:repeat(3,1fr)}}
.stamp{position:relative;min-height:70px;border:2px solid var(--gold);border-radius:16px;padding:10px 10px 8px;color:var(--gold-ink);opacity:0;transform:scale(1.5) rotate(var(--rot,-6deg));will-change:transform,opacity;background:rgba(201,162,39,.05)}
.stamp .n{display:block;font-family:var(--sans);font-size:13px;line-height:1.25;font-weight:800}
.stamp .d{display:block;font-size:13px;font-weight:700;margin-top:5px;opacity:.75}
.stamp::after{content:"";position:absolute;inset:-5px;border-radius:20px;border:1px solid rgba(201,162,39,.35)}
.file-foot{display:flex;justify-content:space-between;margin-top:16px;font-size:13px;color:var(--muted);font-weight:600}

@media (max-width:999px){
  /* Centre the composition between the nav and the call bar. `safe` means:
     centre while it fits, and fall back to top-aligned the moment it does
     not, so a tight screen loses the bottom rather than the heading. */
  .file .file-stage{align-items:start;align-items:safe center;padding-top:var(--nav-h);padding-bottom:76px}
  .file .file-grid{gap:10px;padding-block:0}   /* the call bar's room is the stage's padding now */
  .file .file-title{font-size:clamp(28px,8.2vw,40px);min-height:2.05em;margin-top:10px}
  .file .file-desc{min-height:2.3em;font-size:16px;margin-top:8px}
  /* Six fixed 44px dashes plus the counter need 364px of a 335px column, so on
     a 375px screen the "6" of "1 / 6" was being clipped off the end. Let them
     share whatever width there is instead of insisting on 44 each. */
  .file .file-dots{margin-top:6px;gap:6px}
  .file .file-dots i{width:auto;flex:1 1 0;min-width:0}
  .file .file-after{display:none}   /* the floating call bar is the persistent CTA on phones */
  /* The tab straddles the card's top edge at top:-16px. That overhang is
     reserved here, on the card, rather than in the grid gap above it —
     the gap is shared and gets tuned, and when it was cut to 6px the tab
     landed on the disclaimer. */
  .file .file-tab{top:-10px}
  .file .file-card{padding:12px 12px 8px;margin-top:10px;transform:rotate(-2deg) scale(.97)}
  .file .file-card-head{margin-bottom:6px;padding-bottom:5px}
  .file .file-card-head .t{font-size:18px}
  /* the scene box must hold the whole chat: first line, reply, checklist */
  .file .scenes{height:clamp(232px,32vh,280px);margin-bottom:6px}
  /* Tablets run the phone layout on a screen twice as tall, and the
     illustration was capped where a phone needed it capped. Here there is
     room, so it takes it. */
  @media (min-width:640px){
    .file .file-card{margin-top:16px}
    .file .scenes{height:clamp(300px,34vh,460px)}
  }
  .file .msg{font-size:12.5px;max-width:84%;padding-block:8px;padding-inline:12px}
  .file .msg.from-shaul{padding-inline-start:50px}
  /* The two bubbles plus the checklist overflow the chat box on a phone, and
     .chat is justify-content:flex-end, so the excess rides UP and the first
     line vanishes behind the file's header. English overflowed by 31px, Hebrew
     cleared by 10 — the same fault, just less visible in the shorter language.
     The timestamps are the cheapest 30px in the scene and the least missed. */
  .file .msg time{display:none}
  .file .keep{font-size:12px;padding:8px 12px}
  .file .keep ul{grid-template-columns:1fr 1fr;gap:3px 12px}
  .file .who{display:none}
  .file .chat{gap:7px}
  .file .sheets{width:52%}
  .file .hl,.file .mini{width:40%}
  .file .letter h4{font-size:17px;margin:6px 0 2px}
  .file .letter .cl{font-size:12px}
  .file .qa{max-width:54%}
  .file .qa b{font-size:13px}
  .file .qa.a{bottom:10px}
  .file .verdict{padding:12px 14px}
  .file .awards span{font-size:11px}
  .file .verdict .seal{width:60px;height:60px}
  /* the ledger stays, compact: three across, names only */
  .file .stamps{grid-template-columns:repeat(3,1fr);gap:4px}
  /* The self-hosted Hebrew/Latin faces run a shade wider than the fallbacks
     used while measuring, and on the live English page that was enough to
     put the ledger's decorative ring 5px behind the call bar. Seven back. */
  .file .stamp{min-height:36px;padding:4px 6px;border-radius:10px}
  .file .stamp::after{inset:-3px;border-radius:12px}
  .file .stamp .n{font-size:11px;line-height:1.2}
  .file .stamp .d{display:none}
  .file .file-foot{display:none}
}

/* 800px-tall phones (most Android): everything fits except the last 20px of the
   ledger, which the call bar was clipping. Taken out of the head, not the scene
   box — the scene box is sized by the chat inside it and has no slack. */
@media (max-width:999px) and (max-height:840px){
  .file .file-grid{padding-block:2px 78px}
  .file .file-title{min-height:1.9em}
  .file .file-desc{min-height:2em}
  .file .file-dots{margin-top:6px}
  .file .file-note{line-height:1.3}
  .file .scenes{margin-bottom:6px}
  /* Secular One is a display face: at 360px the label column is 80px wide and
     two English titles still break into three lines there, where every Hebrew
     one takes two. Rather than shrink the type again, the ledger gives back
     its own padding — the labels stay the size they are. */
  .file .stamps{gap:3px}
  .file .stamp{min-height:32px;padding:3px 5px}
}

/* short phones: the pinned stage has to hold nav, head, scene box and ledger
   above the floating call bar in 667px, so everything tightens one notch */
@media (max-width:999px) and (max-height:790px){
  .file .file-grid{gap:10px}
  .file .file-title{font-size:clamp(24px,7vw,28px);min-height:2.1em;margin-top:8px}
  .file .file-desc{font-size:15px;min-height:2em;margin-top:8px}
  .file .file-dots{margin-top:8px}
  .file .file-card{padding:12px 12px 8px}
  .file .file-card-head{margin-bottom:8px;padding-bottom:6px}
  .file .file-card-head .t{font-size:16px}
  /* The ledger is gone in this band. Give what it frees back to the
     illustration instead of leaving it as air: 176px is what a 640px
     screen can spare, and every pixel of viewport above that is worth
     about four fifths of a pixel here. */
  .file .scenes{height:clamp(160px,calc(160px + (100vh - 640px) * .85),300px);margin-bottom:6px}
  .file .scene{padding:8px 10px}
  .file .msg{font-size:12px;padding:7px 10px}

  .file .msg.from-shaul{padding-inline-start:44px}
  .file .chat{gap:6px}
  /* On 667px the scene box cannot hold two bubbles, a checklist and a bigger
     disclaimer above the call bar. The checklist is the piece whose absence
     costs least: the two bubbles carry the scene, and the copy beside the card
     says the same thing at full size. */
  .file .keep{display:none}
  .file .keep b{margin-bottom:3px}
  .file .keep ul{gap:1px 10px}
  .file .letter,.file .doc,.file .verdict{inset:10px 12px}
  .file .verdict{padding:10px 12px}
  .file .awards span{font-size:10.5px}
  .file .stamps{gap:5px}
  .file .stamp{min-height:34px;padding:5px 6px;border-radius:9px}
  .file .stamp::after{inset:-3px;border-radius:11px}
  .file .stamp .n{font-size:10.5px}
  /* The ledger does not fit above the call bar on a 667px screen — it ran
     99px over, and what showed was three stamps with the rest cut off. The
     .file-dots row at the top already counts the six beats, so the ledger
     steps aside here rather than appearing half-eaten. */
  .file .stamps{display:none}
}

/* ---------- areas rail ---------- */
.areas-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.rail-wrap{position:relative}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gutter) 24px;margin-inline:calc(var(--gutter)*-1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail-card{flex:0 0 min(78vw,400px);scroll-snap-align:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;min-height:520px;transition:transform .6s var(--ease-out),border-color .3s}
@media (hover:hover){.rail-card:hover{transform:translateY(-6px);border-color:var(--line-2)}}
.rail-card .ph{aspect-ratio:4/3;border-radius:0}
.rail-card .ph img{transform:scale(1.06)}
.rail-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;gap:12px}
.rail-card h3{font-size:clamp(26px,2.4vw,34px);line-height:1.05}
.rail-card p{color:var(--muted);flex:1}
.rail-card .idx{position:absolute;top:16px;inset-inline-start:16px;z-index:2;background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:4px 12px;font-family:var(--display);font-size:16px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--t-ui),color var(--t-ui),border-color var(--t-ui)}
@media (hover:hover){.rail-nav button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}}
.rail-nav button:disabled{opacity:.35;pointer-events:none}

/* ---------- faq teaser ---------- */
.faq-teaser .qmark{font-family:var(--display);font-size:clamp(120px,22vw,320px);line-height:.8;color:var(--gold);opacity:.9}

/* ---------- articles ---------- */
.articles-list .rows > li{padding:28px 0}

/* ---------- close ---------- */
.close{min-height:100svh;display:grid;align-items:center;overflow:hidden}
.close-inner{padding-block:calc(var(--nav-h) + 40px) 80px;text-align:center}
.close .giant{font-size:clamp(44px,8.4vw,132px);line-height:.96;max-width:9em;margin-inline:auto}
.close .phone{font-family:var(--display);font-size:clamp(34px,5vw,72px);color:var(--gold);margin-top:32px;line-height:1}
.close .hand{margin-top:36px;color:var(--on-ink-muted)}
.close-ring{position:absolute;inset:auto -20vw -30vw;height:60vw;border-radius:50%;border:1px solid rgba(255,255,255,.12);pointer-events:none}