/* EduKal marketing site.
   Same tokens as the app (see STYLES in Edukal_Frontend/src/App.jsx) so the two
   read as one product. The app is a 480px-wide phone canvas; this is a real
   page, so the layout differs while the palette and type do not. */

:root {
  --purple: #5B4FE0;
  --purple-d: #4A3FC4;
  --purple-l: #EEEBFC;
  --teal: #1FAE8E;
  --teal-l: #E4F6F1;
  --orange: #F5A623;
  /* The one token added for the hero picture. Purple and teal each already had
     a light partner (--purple-l, --teal-l) and orange did not; the value is the
     tint the old attendance mock hard-coded, promoted to a name so the tile
     behind the payments icon and the greeting card cannot drift apart. */
  --orange-l: #FDF2E0;
  --ink: #2A2545;
  --body: #4A4368;
  --muted: #8E89A6;
  --line: #ECEAF4;
  --bg: #F7F6FC;
  --card: #fff;

  --wrap: 1120px;
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Heebo', system-ui, sans-serif;
  color: var(--body);
  background: var(--card);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Rubik', system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.4px;
}

p { margin: 0; }
a { color: var(--purple); }

img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip:focus { inset-inline-start: 0; }

:where(a, button, summary):focus-visible {
  outline: 2.5px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- brand mark ---------- */
.mark { position: relative; display: inline-flex; flex-shrink: 0; }
.mark-star { position: absolute; top: -5px; right: -6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 14px; padding: 13px 24px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--purple); color: #fff;
  box-shadow: 0 12px 24px -10px rgba(91, 79, 224, .65);
}
.btn-primary:hover { background: var(--purple-d); }
.btn-outline { background: #fff; color: var(--purple); border: 1.5px solid var(--purple-l); }
.btn-outline:hover { border-color: var(--purple); }
.btn-nav { padding: 9px 18px; font-size: 14px; background: var(--purple); color: #fff; }
.btn-nav:hover { background: var(--purple-d); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 66px; }
.nav-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 19px;
  color: var(--purple); text-decoration: none; letter-spacing: -.5px;
}
.nav-links { display: none; gap: 26px; margin-inline-start: auto; }
.nav-links a { color: var(--body); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--purple); }
.nav .btn-nav { margin-inline-start: auto; }
.nav-links ~ .btn-nav { margin-inline-start: 0; }

@media (min-width: 900px) { .nav-links { display: flex; } }
/* Five items instead of four since the blog was added — they fit at 900px only
   with a tighter gap. */
@media (min-width: 900px) and (max-width: 1060px) { .nav-links { gap: 18px; } }
.nav-links a[aria-current] { color: var(--purple); font-weight: 700; }

/* ---------- hero ---------- */
.hero {
  padding: 56px 0 64px;
  background: radial-gradient(ellipse 80% 60% at 75% 0%, var(--purple-l) 0%, #fff 60%);
}
.hero-in { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .hero-in { grid-template-columns: 1.15fr .85fr; gap: 56px; } }

/* The badge carries a full sentence now, not a four-word list, so the size is a
   clamp: 17px on desktop, where the hero has room and the old 13px looked
   undersized, easing down to 14px on a phone.

   It wraps to two lines below roughly 365px wide, and that is accepted rather
   than avoided. Measured on the real string: at a 360px viewport only 13.5px
   or less keeps it on one line, which would mean shrinking the text instead of
   enlarging it. So the radius drops from 999px to 14px -- a stadium that wraps
   reads as broken, a rounded rectangle reads as a badge either way. */
.eyebrow {
  display: inline-block; font-size: clamp(14px, 3.6vw, 17px); font-weight: 700; color: var(--purple);
  background: var(--purple-l); padding: 7px 16px; border-radius: 14px;
  line-height: 1.5; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(30px, 6.2vw, 50px); font-weight: 800; }
.lede { font-size: clamp(15.5px, 2.2vw, 18px); margin-top: 18px; max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- hero picture: four app screens, rebuilt and cross-faded ----------
   Markup, not screenshots. See the long note above appShot() in
   templates/home.js for why, and for why every figure inside it is a
   demonstration figure.

   The frame is deliberately understated: a wide radius, a hairline border and
   a soft shadow, and no black bezel, notch or speaker slot. It should read as
   "this is a phone" without competing with the headline beside it, which a
   glossy device illustration does. 265px is the same width the old mock used
   and the widest this can be before it starts to out-weigh the h1 at the
   940px breakpoint where the two sit side by side. */
.hero-art { display: flex; flex-direction: column; align-items: center; }
.shot {
  width: 265px; max-width: 100%; padding: 10px;
  border-radius: 38px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 34px 62px -30px rgba(42, 37, 69, .45);
}
.shot-screen {
  background: var(--bg); border-radius: 29px; padding: 13px 11px;
  display: flex; flex-direction: column; gap: 9px;
}

/* The four screens live in one grid cell, so the frame is as tall as the
   tallest of them and never resizes as they change. They are close enough in
   height that the shortest does not leave an obvious hole; keep it that way
   when editing one.

   The percentages below are shares of the whole 12s loop: four screens, three
   seconds each, so a screen's turn is 25%. The outgoing screen holds until 25%
   and only finishes fading at 28% — after the next one has already begun — so
   the two overlap for those 0.36s. Fading it out by 25% instead looks like the
   right thing and is not: both screens sit at zero for one frame and the phone
   blinks empty between every pair. The nav pill and its label run on the same
   three numbers for the same reason.

   Changing the number of screens means changing 12s and all of the percentages
   together, which is why they are kept in one block rather than scattered.

   The two rules that keep it from failing empty:

   FIRST, the base state IS the first screen — .ap-screen:first-child carries
   opacity 1 on its own. Every screen used to be hidden until the animation
   revealed it, which meant the hero rendered as a blank grey phone in any
   situation where the animation had not started or was not advancing: a tab
   loaded in the background, a restored session, a throttled or occluded tab, a
   browser that failed to create the animation at all. It looked exactly like a
   broken build, and a hard reload "fixed" it because that restarted the
   timeline. A picture must not depend on an animation to be a picture.

   SECOND, the -0.4s on the delay. The first pane would otherwise begin at 0%,
   which is opacity 0, and spend its first 360ms fading up from nothing — and a
   timeline frozen at zero would sit on that frame forever. Starting the whole
   loop 0.4s in puts pane 0 just past its fade-in at the moment the page paints.
   Every pane shifts by the same amount, so the phases between them, and every
   crossfade, are untouched. */
.shot-stack { display: grid; }
.ap-screen {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 9px;
  opacity: 0;
  animation: ap-pane 12s ease-in-out infinite both;
  animation-delay: calc(var(--i) * 3s - 0.4s);
}
.ap-screen:first-child { opacity: 1; }
@keyframes ap-pane {
  0%   { opacity: 0; transform: translateY(7px); }
  3%   { opacity: 1; transform: none; }
  25%  { opacity: 1; transform: none; }
  28%  { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 0; transform: translateY(7px); }
}

/* institution switcher. In RTL the first flex child sits on the right, so the
   name lands right and the chevron left with no ordering rules. */
.ap-tenant {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; padding: 8px 12px;
}
.ap-tenant b { flex: 1; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink); }
.ap-tenant svg { width: 15px; height: 15px; flex-shrink: 0; }

/* greeting */
.ap-greet {
  display: flex; align-items: center; gap: 9px;
  background: var(--orange-l); border-radius: 15px; padding: 10px 12px;
}
.ap-greet > svg { width: 20px; height: 20px; flex-shrink: 0; }
.ap-greet-txt { min-width: 0; }
.ap-greet-txt b {
  display: block; font-family: 'Rubik', sans-serif; font-weight: 800;
  font-size: 13px; color: var(--ink); line-height: 1.35;
}
.ap-greet-txt span { display: block; font-size: 10px; color: var(--body); line-height: 1.35; }

/* tile grid. Two columns at every width: the frame never gets wide enough for
   a third to be readable, and one column would double the height. */
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-tile {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 9px; min-height: 76px;
}
.ap-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; margin-bottom: 1px;
}
.ap-ico svg { width: 15px; height: 15px; }
.ap-ico.p { background: var(--purple-l); }
.ap-ico.o { background: var(--orange-l); }
.ap-ico.g { background: var(--teal-l); }
.ap-tile b {
  font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 11px;
  color: var(--ink); line-height: 1.3;
}
.ap-tile span { font-size: 9.5px; color: var(--muted); line-height: 1.3; }

/* ---- list screens: ילדים and הודעות ---- */
.ap-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.ap-head b {
  flex: 1; font-family: 'Rubik', sans-serif; font-weight: 800;
  font-size: 12.5px; color: var(--ink);
}
.ap-mini {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; color: var(--purple);
  background: var(--purple-l); border-radius: 8px; padding: 5px 8px;
}
.ap-mini svg { width: 11px; height: 11px; }

.ap-row {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; padding: 7px 9px;
}
/* The initial in a coloured circle is what the app draws for a child with no
   photo, which is every child: there is no upload path for one. */
.ap-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 12px; color: #fff;
}
.ap-row .ap-ico { width: 30px; height: 30px; border-radius: 10px; margin: 0; flex-shrink: 0; }
.ap-row-body { flex: 1; min-width: 0; }
.ap-row-body b {
  display: block; font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: 10.5px; color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-row-body span { display: block; font-size: 9px; color: var(--muted); line-height: 1.35; }
.ap-row > svg { width: 14px; height: 14px; flex-shrink: 0; }
.ap-time { font-size: 9px; color: var(--muted); font-style: normal; flex-shrink: 0; }

/* ---- יומן: the day, as things you tap rather than things you read ---- */
.ap-chips { display: flex; gap: 5px; }
.ap-chip {
  font-size: 9.5px; font-weight: 700; padding: 6px 9px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.ap-chip.on { background: var(--purple); border-color: var(--purple); color: #fff; }

.ap-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px; display: flex; flex-direction: column; gap: 7px;
}
.ap-sec { display: flex; align-items: center; gap: 6px; }
.ap-sec .ap-ico { width: 22px; height: 22px; border-radius: 7px; margin: 0; }
.ap-sec .ap-ico svg { width: 12px; height: 12px; }
.ap-sec b { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 10.5px; color: var(--ink); }

.ap-jt { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.ap-jtile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid var(--line); border-radius: 11px; padding: 7px 2px;
  color: var(--muted);
}
.ap-jtile svg { width: 17px; height: 17px; }
.ap-jtile span { font-size: 8.5px; font-weight: 700; }
/* Chosen: the tone fills in behind it. Off is the same muted tint the app uses
   for a thing that is available but not picked. */
.ap-jtile.on.p { border-color: var(--purple); background: var(--purple-l); color: var(--purple); }
.ap-jtile.on.o { border-color: var(--orange); background: var(--orange-l); color: var(--orange); }
.ap-jtile.on.g { border-color: var(--teal);   background: var(--teal-l);   color: var(--teal); }

.ap-field {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 7px 9px; background: var(--bg);
}
.ap-field svg { width: 14px; height: 14px; flex-shrink: 0; }
.ap-field span { font-size: 10px; font-weight: 600; color: var(--ink); }
.ap-field i { margin-inline-start: auto; font-size: 9px; color: var(--muted); font-style: normal; }

/* ---- bottom nav: what tells you which screen you are looking at ----
   Same four items, tones and shape as the app's own, and the active one is on
   the same clock as the stack above it: one --i, two animations. */
.ap-nav {
  display: flex; gap: 2px; margin-top: 3px;
  border-top: 1px solid var(--line); padding-top: 8px;
}
.ap-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  --tone: var(--purple); --tone-l: var(--purple-l);
}
.ap-nav-item.g { --tone: var(--teal);   --tone-l: var(--teal-l); }
.ap-nav-item.o { --tone: var(--orange); --tone-l: var(--orange-l); }
.ap-nav-pill {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--tone-l); color: var(--tone);
  animation: ap-nav-pill 12s ease-in-out infinite both;
  animation-delay: calc(var(--i) * 3s - 0.4s);
}
/* Lit in the base state too, for the same reason the first screen is visible in
   it: with no animation running, this is the screen being shown. */
.ap-nav-item:first-child .ap-nav-pill { background: var(--tone); color: #fff; }
.ap-nav-pill svg { width: 16px; height: 16px; }
@keyframes ap-nav-pill {
  0%   { background: var(--tone-l); color: var(--tone); }
  3%   { background: var(--tone);   color: #fff; }
  25%  { background: var(--tone);   color: #fff; }
  28%  { background: var(--tone-l); color: var(--tone); }
  100% { background: var(--tone-l); color: var(--tone); }
}
.ap-nav-lab {
  font-size: 9.5px; font-weight: 600; color: var(--muted); letter-spacing: -.1px;
  animation: ap-nav-lab 12s ease-in-out infinite both;
  animation-delay: calc(var(--i) * 3s - 0.4s);
}
.ap-nav-item:first-child .ap-nav-lab { color: var(--tone); font-weight: 800; }
@keyframes ap-nav-lab {
  0%   { color: var(--muted); font-weight: 600; }
  3%   { color: var(--tone);  font-weight: 800; }
  25%  { color: var(--tone);  font-weight: 800; }
  28%  { color: var(--muted); font-weight: 600; }
  100% { color: var(--muted); font-weight: 600; }
}
.ap-nav-badge {
  position: absolute; top: -2px; inset-inline-end: -2px;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: #E85A5A; color: #fff; border: 2px solid var(--bg);
  font-size: 8px; font-weight: 800; font-style: normal; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Somebody who has asked for less motion gets the home screen, held still.
   A crossfade every three seconds is exactly the kind of thing that setting
   exists to stop. */
@media (prefers-reduced-motion: reduce) {
  .ap-screen, .ap-nav-pill, .ap-nav-lab { animation: none; }
  .ap-screen:not(:first-child) { display: none; }
}

/* ---------- the price, said where it cannot be missed ----------
   Three places on the way down: under the hero's buttons, in the band below it,
   and once more in full before the FAQ. Not decoration — it is the question
   every visitor is holding while they read everything else. */

/* Directly under the CTA row, so it is read in the same glance as the button
   it qualifies. Teal rather than purple: the buttons are already purple, and a
   reassurance that matches them reads as part of the same control. */
.hero-free {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; font-size: 14.5px; color: var(--body);
}
.hero-free svg { width: 20px; height: 20px; flex-shrink: 0; }
.hero-free b { color: var(--ink); font-weight: 800; }

/* ---------- strip ----------
   The band between the hero and the feature grid. It stood empty after the
   three claims that used to fill it were removed, keeping only its old height
   (26px each side plus the two hairlines) so the page held its rhythm. The
   three points below are what it is now for.

   One column on a phone, three across from 700px. Not auto-fit: two-and-a-
   dangling-one is exactly the layout that makes three claims look like a
   mistake. */
.strip { border-block: 1px solid var(--line); background: var(--bg); }
.strip-in { padding-block: 26px; }
.free-strip { display: grid; gap: 16px; }
@media (min-width: 700px) { .free-strip { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.free-point { display: flex; align-items: center; gap: 11px; }
.free-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--teal-l); flex-shrink: 0;
}
.free-ico svg { width: 21px; height: 21px; }
.free-point > span { display: flex; flex-direction: column; min-width: 0; }
.free-point b {
  font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--ink); line-height: 1.3;
}
.free-point span span { font-size: 13px; color: var(--muted); line-height: 1.4; }



/* ---------- sections ---------- */
.sec { padding: 68px 0; }
.sec-alt { background: var(--bg); }
.sec-h { font-size: clamp(24px, 4vw, 34px); font-weight: 800; }
.sec-sub { font-size: 16px; margin-top: 12px; max-width: 60ch; }
.sec-note { font-size: 14px; color: var(--muted); margin-top: 20px; }

.grid { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: #D8D3F2; transform: translateY(-2px); }
/* The tile carries the feature's tone rather than one purple for all eight,
   and the stroke width is raised with the size: 1.7 is drawn for a 21px icon
   and thins out visibly at 26px. */
.card-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 15px; margin-bottom: 14px;
  background: var(--purple-l);
}
.card-i.p { background: var(--purple-l); }
.card-i.g { background: var(--teal-l); }
.card-i.o { background: var(--orange-l); }
.card-i svg { width: 26px; height: 26px; stroke-width: 1.9; }
.card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; }
.card p { font-size: 14px; }

/* steps */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--purple); color: #fff;
  font-family: 'Rubik'; font-weight: 800; font-size: 16px; margin-bottom: 14px;
}
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.step p { font-size: 14.5px; }

/* security */
.sec-split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 940px) { .sec-split { grid-template-columns: 1.35fr .65fr; } }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-inline-start: 30px; font-size: 15px; }
.checks li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FAE8E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.shield { display: flex; justify-content: center; }
.shield svg { width: min(190px, 55vw); height: auto; stroke-width: 1.1; }

/* faq */
.faq { margin-top: 34px; display: grid; gap: 12px; }
.q { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 4px 20px; }
.q[open] { border-color: #D8D3F2; }
.q summary {
  font-family: 'Rubik'; font-weight: 700; font-size: 16px; color: var(--ink);
  padding: 16px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.q summary::-webkit-details-marker { display: none; }
/* The two sides here are physical on purpose, unlike the otherwise identical
   chevron on .post-card-more.

   A two-border chevron points at the corner where its sides meet, and rotate()
   is always physical -- it does not flip with the writing direction. Pair it
   with border-inline-end and the base direction flips under RTL while the
   rotation does not, which put this arrow at left when closed and right when
   open instead of down and up. The .post-card-more arrow wants exactly that
   flip, because it points along the reading direction. This one does not: down
   and up mean expanded and collapsed in any direction. */
.q summary::after {
  content: ''; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2.2px solid var(--purple); border-bottom: 2.2px solid var(--purple);
  transform: rotate(45deg); transition: transform .2s ease; margin-block-start: -5px;
}
.q[open] summary::after { transform: rotate(-135deg); margin-block-start: 3px; }
.q p { padding-bottom: 18px; font-size: 14.5px; }


/* ---------- legal pages + 404 ---------- */
.legal { padding: 52px 20px 72px; }
.legal h1 { font-size: clamp(25px, 5vw, 34px); font-weight: 800; }
.legal-updated { font-size: 13.5px; color: var(--muted); margin: 10px 0 34px; }
.legal-sec { margin-bottom: 30px; }
.legal-sec h2 { font-size: 18.5px; font-weight: 700; margin-bottom: 10px; }
.legal-sec p { font-size: 15.5px; margin-bottom: 11px; }
.legal-sec ul { margin: 0 0 11px; padding-inline-start: 22px; font-size: 15.5px; }
.legal-sec li { margin-bottom: 7px; }

.notfound { text-align: center; padding-block: 40px; }
.notfound h1 { font-size: clamp(27px, 5vw, 38px); font-weight: 800; }
.notfound .lede { margin-inline: auto; }
.notfound .hero-cta { justify-content: center; }

/* ---------- blog index ---------- */
.blog-head { padding-bottom: 44px; }
.blog-head .lede { margin-inline: 0; }
.blog-group + .blog-group { margin-top: 56px; }
.post-grid { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; text-decoration: none; color: var(--body);
  transition: border-color .15s ease, transform .15s ease;
}
.post-card:hover { border-color: #D8D3F2; transform: translateY(-2px); }
.post-card-date { font-size: 13px; color: var(--muted); }
.post-card h3 { font-size: 17.5px; font-weight: 700; margin: 8px 0 9px; }
.post-card-desc { font-size: 14.5px; }
.post-card-more { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--purple); }
/* Same two-border chevron as .q summary::after, and the same pair of sides, so
   it lands pointing along the reading direction — left, on an RTL page. */
.post-card-more::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin-inline-start: 8px;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- latest posts, home page ---------- */
/* White cards on the tinted band, deliberately quiet: a hairline instead of a
   shadow, generous padding, and a lot of air between the three of them. The
   band needs the hairline on top because #faq above it is .sec-alt and shares
   the same background, and without it the two read as one very long grey block.

   No slider, no arrows, no script. One column on a phone, three equal columns
   on a desktop, and nothing in between that scrolls sideways. */
.news { background: var(--bg); border-top: 1px solid var(--line); }

.news-list { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 1060px) {
  .news-list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* Own class rather than .post-card: the blog index cards carry a pill, a meta
   line and a "לכתבה" row that these do not, and overriding four of their rules
   costs more than writing these six. */
.news-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: 28px 26px 30px;
  text-decoration: none; color: var(--body);
  transition: border-color .15s ease, transform .15s ease;
}
@media (min-width: 1060px) { .news-card { padding: 32px 28px 34px; } }

.news-card:hover { border-color: var(--purple); transform: translateY(-2px); }
.news-card:hover h3, .news-card:focus-visible h3 { color: var(--purple); }
@media (prefers-reduced-motion: reduce) { .news-card:hover { transform: none; } }
/* The global focus ring sets border-radius: 6px so a plain inline link gets a
   rounded outline. On a card with 24px corners that squares the card itself
   for as long as it holds focus, so the radius is restated here. */
.news-card:focus-visible {
  border-radius: calc(var(--radius) + 6px);
  outline-offset: 4px;
}

.news-date {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--purple);
  letter-spacing: -.2px;
}
.news-card h3 {
  font-size: clamp(19px, 2.2vw, 21px); font-weight: 800;
  line-height: 1.4; margin: 12px 0 0;
  transition: color .15s ease;
}
/* The light grey summary of the reference, with the generous line spacing that
   is most of why it reads as calm. */
.news-desc {
  margin-top: 14px;
  font-size: 15px; line-height: 1.95; color: var(--muted);
}

.news-all { margin-top: 30px; font-size: 15px; font-weight: 700; }

/* ---------- a post ---------- */
/* Long-form reading: a narrower measure than the legal pages get by default,
   slightly larger type, and generous space between paragraphs. Everything here
   is scoped under .post so the legal pages keep the styling they were reviewed
   with. */
.post { padding: 52px 20px 40px; max-width: 720px; }
.post h1 { font-size: clamp(26px, 5.2vw, 38px); font-weight: 800; }
.post .eyebrow { margin-bottom: 16px; }

.post-meta {
  display: flex; flex-wrap: wrap; gap: 9px;
  font-size: 13.5px; color: var(--muted); margin-top: 16px;
}

.post-lead {
  font-size: clamp(16.5px, 2.2vw, 19px); color: var(--ink); font-weight: 500;
  margin: 26px 0 0; padding-inline-start: 16px;
  border-inline-start: 3px solid var(--purple-l);
}

.post-body { margin-top: 14px; }
.post-sec { margin-top: 38px; }
.post-sec h2 {
  font-size: clamp(19px, 3vw, 23px); font-weight: 700; margin-bottom: 14px;
}
.post-sec p { font-size: 16.5px; line-height: 1.85; margin-bottom: 16px; }
.post-sec ul { margin: 0 0 16px; padding-inline-start: 22px; }
.post-sec li { font-size: 16.5px; line-height: 1.8; margin-bottom: 12px; }
.post-sec li::marker { color: var(--purple); }

.post-cta {
  margin-top: 52px; padding: 26px 24px;
  background: var(--purple-l); border-radius: var(--radius);
}
.post-cta h2 { font-size: 19px; font-weight: 800; color: var(--purple-d); }
.post-cta p { font-size: 15px; margin-top: 10px; max-width: 52ch; }
.post-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* The one outbound link a post may carry (section.link in templates/post.js).
   Sits at the end of a section, below the list, and is deliberately not styled
   as a button: it leaves the site, and a primary-looking button at the end of
   an article reads as the article's own call to action. */
.post-link { margin: 4px 0 16px; font-size: 16.5px; font-weight: 600; }
.post-link-note {
  display: block; margin-top: 4px;
  font-size: 13.5px; font-weight: 400; color: var(--muted);
}

.post-back { margin-top: 34px; font-size: 15px; font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #B9B3D0; padding: 46px 0 26px; }
.footer-in { display: grid; gap: 26px; }
@media (min-width: 760px) { .footer-in { grid-template-columns: 1fr auto; align-items: start; } }
.footer .nav-brand { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-links a { color: #B9B3D0; text-decoration: none; font-size: 14.5px; }
.footer-links a:hover { color: #fff; }
.footer-legal {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; color: #8981A8;
}