/* law4me home page (front-page.php), redesigned 11.11.2026: law4me-site/preview-home-redesign/DIRECTION.md, option 1
   "החותמת במסך הראשון" (Michael: "תעלה מה שאתה ממליץ"). Same tokens as main.css (BRIEF.md). New here: today's myth as a
   playable card on the hero illustration, a navy band for the myth deck (the logo's navy), white cards for long lists,
   and state-change motions that play once: the headline highlighter, the stamp on an answer, the family tree. */


.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- motion: once, explains a state, off for reduced motion ---------- */
@keyframes l4m-draw-mark { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@keyframes l4m-stamp {
  0% { opacity: 0; transform: rotate(-8deg) scale(1.8); }
  65% { opacity: 1; transform: rotate(-8deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
.mark-draw { background-repeat: no-repeat; background-position: 100% 0; background-size: 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .mark-draw { animation: l4m-draw-mark .8s var(--ease-out) .25s both; }
}


/* ---------- hero: "מה קרה לכם?" grouped by the three live topics (critic: label | chips, label above on phones) ---------- */
/* the label sits above its own chips at every width: the chips get the full column, and a wrapped chip never runs
   back under the label (a side label column cost the chips a third of the width at 1440) */
/* 11.11.2026, round 3 (Michael: "שפר את העיצוב מבלי לשנות את השפה"): the three groups read as three rows of a friendly
   form: hairlines between them, an ink label with its topic's icon, and "מה קרה לכם?" a step above the labels */
.heroA .hero-ask { margin-top: 2rem; font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.3 var(--f-display); }
.ask-groups { display: grid; margin-top: .9rem; border-top: 1px solid var(--line); }
.ask-group { display: grid; gap: .6rem; padding-block: .95rem 1rem; border-bottom: 1px solid var(--line); }
.ask-lab { display: flex; align-items: center; gap: .55rem; color: var(--ink); font: 600 17px/1.3 var(--f-display); }
.ask-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r); background: var(--hl-wash); }
.ask-ic .i { width: 18px; height: 18px; }
.ask-t { text-wrap: balance; }
/* desktop: the label (icon above its word) in a narrow column beside its chips, so the three rows stay as short as the
   old stack and the whole hero still fits a 1290x750 laptop screen (Michael's screenshot) */
@media (min-width: 900px) {
  .heroA .hero-ask { margin-top: 1.75rem; }
  .ask-group { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: .75rem; }
  .ask-lab { flex-direction: column; align-items: flex-start; gap: .3rem; padding-top: .1rem; }
}
.hero h1 + .hero-ask { margin-top: 1.75rem; }

/* ---------- tools: three leading tools, then the rest as a compact index by topic ---------- */
.tools-feature { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .tools-feature { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .tf-big { grid-row: span 2; }
}
.tf {
  position: relative; display: grid; align-content: start; justify-items: start; gap: .6rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--body); text-decoration: none;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.tf-ask { color: var(--ink); font: 700 clamp(1.35rem, 1.1rem + .7vw, 1.7rem)/1.25 var(--f-display); }
.tf-desc { color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 34rem; }
.tf-go {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: .35rem; padding: .5rem 1rem;
  border: 1px solid var(--hl-edge); border-radius: var(--r); background: var(--hl); color: var(--ink); font: 600 17px/1.2 var(--f-body);
}
.tf-go .i { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease-out); }
.tf-big { gap: .8rem; }
.tf-big .tf-ask { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.tf-big .tf-go { margin-top: auto; }
.tf-tree { width: min(100%, 20rem); margin-block: .75rem .25rem; color: var(--ink); align-self: center; justify-self: center; }
.tf-tree circle { fill: var(--surface); }
.tf-tree .n-hl { fill: var(--hl); }
.tf-tree .n-top { fill: var(--tint); }
.tf-tree .n-gone { fill: var(--surface); stroke-dasharray: 4 4; }
@media (prefers-reduced-motion: no-preference) {
  .tf-tree .tree-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tf-tree .tree-nodes circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
  .tf-tree.is-in .tree-lines path { transition: stroke-dashoffset 1.1s var(--ease-out) .15s; stroke-dashoffset: 0; }
  .tf-tree.is-in .tree-nodes circle { transition: opacity .3s var(--ease-out), transform .35s var(--ease-out); opacity: 1; transform: none; }
  .tf-tree.is-in .tree-nodes circle:nth-child(1) { transition-delay: 0s; }
  .tf-tree.is-in .tree-nodes circle:nth-child(n+2) { transition-delay: .7s; }
  .tf-tree.is-in .tree-nodes circle:nth-child(n+4) { transition-delay: .95s; }
}
@media (hover: hover) {
  .tf:hover { border-color: var(--line-strong); transform: translateY(-2px); }
  .tf:hover .hl-sweep { background-size: 100% 100%; }
  .tf:hover .tf-go .i { transform: translateX(-3px); }
}
.tf:active { transform: scale(.99); }

.tools-more { margin-top: 2.25rem; }
/* the closing "all tools" cell carries this link on desktop (critic S7) */
@media (min-width: 900px) { .tools2 .sec-head .more { display: none; } }
.tm-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .tm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the last cell of a 3-column group: "all the tools", so the grid never ends on a hole (taste-floor rule 4) */
.tm-all { flex: 1; display: flex; align-items: center; gap: .5rem; min-height: 4.5rem; padding: .85rem .1rem; color: var(--ink); font: 600 18px/1.35 var(--f-display); text-decoration: none; }
.tm-all .i { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease-out); }
@media (hover: hover) { .tm-all:hover { text-decoration: underline; } .tm-all:hover .i { transform: translateX(-3px); } }
@media (max-width: 899px) { .tm-list > li.tm-all-li { display: none; } }
.tm-list > li { display: flex; border-bottom: 1px solid var(--line); }
.tm {
  flex: 1; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .85rem; row-gap: .15rem; align-items: start;
  padding: .85rem .1rem; color: var(--body); text-decoration: none;
}
.tm-ic { grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r); background: var(--hl-wash); color: var(--ink); }
.tm-ic .i { width: 22px; height: 22px; }
.tm-ask { color: var(--ink); font: 600 18px/1.35 var(--f-display); }
.tm-desc { color: var(--muted); font-size: 16px; line-height: 1.45; }
@media (max-width: 699px) { .tm { align-items: center; } .tm-ic { grid-row: auto; } .tm-desc { display: none; } }
@media (hover: hover) { .tm:hover .hl-sweep { background-size: 100% 100%; } .tm:hover .tm-ic { background: var(--hl); } }

/* ---------- myth or fact: the game, on a navy band; the answer gets a stamp ---------- */
.myths2 { background: var(--ink); border-top: 0; color: #DCE3EC; }
.myths2-in { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 900px) { .myths2-in { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3.5rem; } }
.myths2 h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.7rem); }
.myths2-head p { margin-top: .7rem; max-width: 26rem; color: #DCE3EC; }
.myths2-head .myths2-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); color: #fff; font: 500 18px/1.45 var(--f-display); }
/* the counter and the score share the card footer, so a guess moves nothing above the finger (critic S1) */
.myth-tally { color: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.myth-tally .myth-count { color: var(--muted); }
.myth-score:not(:empty)::before { content: " · "; }
.myth-score b { color: var(--ink); font-weight: 600; }
.mcard { scroll-margin-top: calc(var(--head-h) + 1rem); }
/* no side stripe on the law's quote (critic S5): the tint and the highlighter carry it */
body.home .myth-quote, body.home .story-quote { border-inline-start: 0; border-radius: var(--r); background: var(--tint); }
.mcard { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.35rem, 3vw, 2.25rem); border-radius: var(--r); background: var(--surface); color: var(--body); }
.mcard .myth-belief { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); }
.mcard .myth-guess .btn { min-height: 56px; font-size: 19px; }
.mcard .myth-guess .btn .i { width: 1.2em; height: 1.2em; }
@media (hover: hover) { .mcard .myth-guess .btn:not(:disabled):hover { background: var(--hl); border-color: var(--hl-edge); } }
.mcard .myth-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.mstamp {
  display: inline-block; padding: .25rem .8rem .3rem; border: 3px solid currentColor; border-radius: var(--r);
  font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1 var(--f-display); letter-spacing: .01em; transform: rotate(-8deg);
}
.mstamp.is-true { color: var(--ok); }
.mstamp.is-false { color: var(--warn); }
.myth-feedback { color: var(--ink); font: 700 20px/1.35 var(--f-display); }
l4m-myths2:not(.is-ready) .myth-guess, l4m-myths2:not(.is-ready) .myth-next { display: none; }
l4m-myths2.is-ready:not(.is-revealed) .myth-answer { display: none; }
@media (prefers-reduced-motion: no-preference) {
  l4m-myths2.is-revealed .myth-answer { animation: l4m-rise .24s var(--ease-out); }
  l4m-myths2.is-revealed .mstamp { animation: l4m-stamp .36s var(--ease-out) both; }
  l4m-myths2.is-revealed .myth-quote .hl-mark { animation: l4m-mark .6s var(--ease-out) .3s both; }
}

/* ---------- the live topics: their moments as white cards, every guide visible ---------- */
.hub2-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem; align-items: center; margin-bottom: 2rem; }
.hub2-head .hub-band-img { width: 180px; }
.hub2-head h2 { font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.7rem); }
.hub2-head p { margin-block: .45rem .5rem; color: var(--muted); max-width: 38rem; }
@media (min-width: 900px) { .hub2-head .hub-band-img { width: 250px; } }
@media (max-width: 599px) { .hub2-head { grid-template-columns: 1fr; gap: .25rem; } .hub2-head .hub-band-img { width: 140px; } }
.moments2 { columns: 1; column-gap: 1.25rem; }
@media (min-width: 900px) { .moments2 { columns: 2; } }
.moment2 {
  break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 1.25rem;
  padding: 1.15rem 1.35rem .35rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.moment2 h3 { margin-bottom: .35rem; font-size: 21px; }
.moment2 .guide-list { border-top: 0; }
.moment2 .guide-list li:last-child a { border-bottom: 0; }
.moment2 .guide-list a { padding-block: .8rem; font-size: 18px; }
/* a topic with one short list: its head and its card side by side, no lone half-width card (critic S9) */
.hub2-one .moments2 { columns: 1; }
@media (min-width: 900px) {
  .hub2-one .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
  .hub2-one .hub2-head { margin-bottom: 0; }
  .hub2-one .hub2-head .hub-band-img { width: 170px; }
  .hub2-one .moment2 { margin-bottom: 0; }
}
.tag2 {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: var(--r);
  background: var(--hl-wash); color: var(--ink); font: 500 16px/1.35 var(--f-body); white-space: nowrap;
}
.tag2 .i { width: 1.05em; height: 1.05em; }
/* phone: the cards lose their frame (the width goes to the titles) and a tool tag follows the title on its line */
@media (max-width: 599px) {
  .moment2 { padding: 0; border: 0; background: none; margin-bottom: 1.75rem; }
  .moment2 h3 { margin-bottom: .2rem; }
  .moment2 .guide-list { border-top: 1px solid var(--line); }
  .moment2 .guide-list li:last-child a { border-bottom: 1px solid var(--line); }
  .moment2 .guide-list a, .life-st .guide-list a { display: block; padding-block: .75rem; }
  .moment2 .tag2, .life-st .tag2 { margin-inline-start: .5rem; vertical-align: .1em; }
}

/* ---------- the ruling and the new law: a tinted band so the page has a rhythm ---------- */
.stories2 { background: var(--tint); }
.stories2 .story-card { background: var(--surface); }

/* ---------- coming soon: one compact block ---------- */
.soon2-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .soon2-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soon2-i {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .85rem; align-items: center; height: 100%;
  padding: .6rem .85rem .6rem .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--body); text-decoration: none;
}
.soon2-i img { width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; }
.soon2-i b { display: block; color: var(--ink); font: 600 18px/1.3 var(--f-display); }
.soon2-d { display: block; margin-top: .15rem; color: var(--muted); font-size: 16px; line-height: 1.4; }
/* phones: names only; the detailed illustrations would be a blur at this size (critic S11) */
@media (max-width: 899px) { .soon2-d, .soon2-i img { display: none; } .soon2-i { grid-template-columns: 1fr; min-height: 3.25rem; padding: .7rem .9rem; } }
@media (hover: hover) { a.soon2-i:hover { border-color: var(--line-strong); } }

/* ---------- the hero: today's myth on the illustration's desk ---------- */
/* top-aligned: the card grows when its answer opens, and a centred row would move the button under the mouse (critic r2 M1) */
.heroA .hero-in { align-items: start; }
.heroA-art { position: relative; display: grid; justify-items: center; }
.heroA-art img { width: 100%; max-width: 34rem; }
/* round 3: the text gets a little more width; the art sits lower, so the card ends near the chips instead of leaving a
   hole under it; the card overlaps only the floor of the drawing, not the person */
@media (min-width: 900px) {
  .heroA .hero-in { grid-template-columns: minmax(0, 1.28fr) minmax(0, .82fr); gap: 2.75rem; }
  .heroA-art { padding-top: 2.5rem; }
  .heroA-art img { max-width: 31rem; }
}
/* the ruling under the chips: a quiet row of its own, ink like the guide rows, instead of a stray blue link */
.heroA .hero-reads { margin-top: 1.25rem; padding-top: 0; border-top: 0; max-width: none; }
.heroA .hero-reads li { gap: .7rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.heroA .hero-reads li .i { margin-top: 0; }
.heroA .hero-reads a { color: var(--ink); font-weight: 500; text-decoration: none; }
@media (hover: hover) { .heroA .hero-reads a:hover { text-decoration: underline; } }
.mhero {
  position: relative; z-index: 1; display: grid; gap: .75rem; width: min(100%, 26rem);
  margin-top: -3rem; justify-self: start;
  padding: 1.15rem 1.3rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  box-shadow: 0 1px 2px rgba(19, 34, 56, .06), 0 14px 26px -20px rgba(19, 34, 56, .45);
}
.mhero-belief { color: var(--ink); font: 600 21px/1.35 var(--f-display); }
.mhero-belief::before, .mhero-belief::after { content: '"'; }
.mhero-guess { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mhero-q { margin-inline-end: auto; color: var(--muted); font: 500 17px/1.3 var(--f-body); }
.mhero-guess .btn { min-width: 6.5rem; justify-content: center; }
.mhero-guess .btn[aria-pressed="true"] { background: var(--hl); border-color: var(--hl-edge); }
.mhero-guess .btn:disabled { cursor: default; }
.mhero-guess .btn:disabled:not([aria-pressed="true"]) { opacity: .55; }
@media (hover: hover) { .mhero-guess .btn:not(:disabled):hover { background: var(--hl); border-color: var(--hl-edge); } }
.mhero-answer { display: grid; gap: .6rem; }
.mhero .myth-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.mhero .mstamp { font-size: 1.6rem; }
.mhero-text { color: var(--body); font-size: 17px; line-height: 1.55; }
/* the hero answer carries its quote, source and guide, like every answer in the deck (critic r2 M2, reader 11.11.2026) */
.mhero .myth-quote p { font-size: 16px; line-height: 1.6; }
.mhero-answer .more { min-height: 44px; font-size: 17px; }
.mhero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
  padding-top: .35rem; border-top: 1px solid var(--line); }
.mhero-count { color: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.mhero-foot .mhero-more { padding-top: 0; border-top: 0; }
.mhero-more { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding-top: .35rem; border-top: 1px solid var(--line);
  color: var(--ink); font: 600 17px/1.3 var(--f-body); text-decoration: none; }
.mhero-more .i { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease-out); }
@media (hover: hover) { .mhero-more:hover { text-decoration: underline; } .mhero-more:hover .i { transform: translateX(-3px); } }
l4m-myth-hero:not(.is-ready) .mhero-guess { display: none; }
l4m-myth-hero.is-ready:not(.is-revealed) .mhero-answer { display: none; }
@media (prefers-reduced-motion: no-preference) {
  l4m-myth-hero.is-revealed .mhero-answer { animation: l4m-rise .24s var(--ease-out); }
  l4m-myth-hero.is-revealed .mstamp { animation: l4m-stamp .36s var(--ease-out) both; }
}
@media (max-width: 899px) {
  .heroA-art img { max-width: 19rem; }
  .mhero { margin-top: -3.5rem; justify-self: stretch; width: 100%; }
}
@media (max-width: 599px) {
  .mhero-q { flex-basis: 100%; }
  .mhero-guess .btn { flex: 1; }
}