/* HOMEE: the phone layer.
 *
 * The site was designed at desktop width, where 0.72rem is a legible caption.
 * On a phone held at arm's length it is not, and there are 162 rules across the
 * site below 0.85rem. Chasing each one would not survive the next design change,
 * so the scale is lifted at the root and everything in rem follows. Spacing is
 * in px throughout the site, so nothing reflows from the lift.
 *
 * Loaded last on every page, so it wins without !important.
 *
 * Targets, from the published guidance:
 *   tap target   44x44 CSS px   Apple HIG, and WCAG 2.2 AA needs 24x24 minimum
 *   spacing      8px between adjacent targets   Material 3
 *   form input   16px           below this, iOS Safari zooms the page on focus
 */

@media (max-width: 640px) {

  /* ---- 1. type scale ----------------------------------------------------
     A 12.5% lift at the root. Every rem-based size moves with it, so the
     hierarchy the design already has is preserved rather than flattened. */
  html { font-size: 18px; }

  /* The few sizes that are still too small after the lift get a floor.
     0.72rem lands at 12.9px, which is under the 13px we want to hold. */
  .eyebrow, .svc-eyebrow, .why-eyebrow, .story-tag, .story-fr,
  .sh-sub, .ev-where, .stat-lbl, .svc-desc, .lst-tag, .rgt-chip,
  .call-hours, .pk-note, .ans-mine, .cl-count, .kicker,
  .sum-lbl, .sum-pend, .prof-row, .bar-lbl, .svc-note {
    font-size: max(0.78rem, 13.5px);
  }

  /* Long-form prose gets a little more line height than a desktop column needs */
  p, li, .ch-sub, .psub, .sub { line-height: 1.65; }

  /* ---- 2. tap targets ---------------------------------------------------
     Anything a finger has to hit gets 44px of height. Inline links inside a
     paragraph are excluded: padding there would break the line box, and WCAG
     2.2 exempts targets in a sentence. */
  button,
  a.btn, .btn,
  .nav-i,
  .pk-tab,
  .call-opt,
  .agent-kind,
  .svc-secnav a,
  .lang-btn, .svc-lang-btn,
  select, input[type="checkbox"] + span, input[type="radio"] + span {
    min-height: 44px;
  }

  .btn, button.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 12px;
  }

  /* the site footer is a column of 19px links, the worst offender on the site */
  footer a, .ft-col a, .foot a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  /* small icon buttons that cannot grow visually still need a real hit area */
  .chat-close, .modal-x, .pk-x {
    min-width: 46px;
    min-height: 46px;
    box-sizing: border-box;
  }

  /* the assistant panel and the inline "see all" links were the last few that
     landed a pixel or two short */
  .see-all, .cq-chip, .chat-send, .chat-in input, .chat-in textarea {
    min-height: 46px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  .cq-label, .chat-hstatus { font-size: max(0.78rem, 13.5px); }
  h4 { font-size: max(0.9rem, 15px); }

  /* the top navigation row and the source links beside each benefit */
  .topnav a, .msrc, .set-row a, .prof-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* <small> is the site's caption element and lands as low as 10.8px */
  small { font-size: max(0.76rem, 13px); }
  .logo small, .mc-bal small, .mc-sum small { font-size: max(0.7rem, 12px); }

  /* The service header bar. These four controls were given 44px targets back
     when the header was the only way to navigate. The hamburger menu now
     carries all four, so on phones they leave the bar entirely: keeping them
     pushed .svc-nav-right to 292px inside a 375px viewport and overflowed the
     page by 78px sideways. The language button stays, since switching language
     is a first-move need for this audience and must not be a menu away. */
  .svc-nav-cta, .svc-nav-ghost, .svc-user, .svc-nav-out { display: none; }
  .svc-nav-right { min-width: 0; }

  /* Three controls the earlier passes missed, all measured at 390px. The logo
     and the back link are real navigation and get the full 44px; the source
     citation sits inline inside a sentence, where WCAG 2.5.8 asks only for 24px
     and inline padding buys it without shifting the line box around it. */
  /* padding, not a display change: the logo lays its two lines out as blocks,
     and switching it to a flex column made "HOMEE" wrap mid-word. */
  a.logo { min-height: 44px; box-sizing: border-box; padding-block: 4px; }
  .rg-back { min-height: 44px; box-sizing: border-box; }
  .nx-perk .tx a { padding-block: 1px; }

  /* the sign-up logo strapline, last caption under the 11.5px floor. The other
     sub-floor glyph is the language caret, which carries an inline font-size
     and is decorative next to its own label, so it is left alone rather than
     overridden: a stylesheet rule there would only shrink the label beside it. */
  .rg-logo small { font-size: max(0.7rem, 12px); }

  /* Two standalone controls on the community page. Both sit on their own line
     rather than inside a sentence, so the inline exemption does not apply and
     they take the full 44px: the card action link was 50x24, and the link to
     the full organisation guide was 186x23, under even the 24px minimum. */
  .so-card .so-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
  .svc-orgs-all a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* breadcrumbs: "בית" is only 21px of text, under the 24px minimum target */
  .svc-crumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 24px;
    padding-inline: 4px;
  }

  /* Two captions still land under the 11.5px floor on phones: the month
     abbreviation in the events date chip, and the assistant bubble badge. */
  .ev-mon { font-size: max(0.7rem, 12px); }
  .bot-bdg { font-size: max(0.7rem, 12px); }

  /* dashboard captions: the perk tab labels, the card flip hint, the nav labels */
  .pk-tabl, .flip-hint, .logo, .nav-i span, .ue {
    font-size: max(0.75rem, 13px);
  }
  /* the source link that sits under each benefit in the rights list */
  .rgt-more .inner a, .rgt-srclink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* adjacent targets need air between them so the wrong one is not hit */
  .call-opts, .agent-kinds, .pk-tabs, .secnav-in { gap: 10px; }

  /* ---- 3. forms ---------------------------------------------------------
     Under 16px, iOS Safari zooms the whole page when the field takes focus and
     the user is left scrolled sideways. */
  input, select, textarea {
    font-size: max(1rem, 16px);
    min-height: 44px;
  }
  .pf-fld input, .pf-fld select,
  .sum-bform input,
  .job-form input, .job-form select, .job-form textarea {
    padding-block: 11px;
  }

  /* .chat-input-wrap input sets .84rem at specificity 0,1,1, which outranks a
     bare element selector no matter how late this file loads. Matching that
     specificity is the fix; an !important here would only hide the cause. */
  .chat-input-wrap input,
  .search-wrap input {
    font-size: max(1rem, 16px);
  }

  /* ---- 4. layout --------------------------------------------------------
     One column for anything that was a grid, and let wide rows scroll inside
     themselves rather than pushing the page sideways. */
  .sum-grid, .nx-grid, .pf-grid, .ans-grid, .ins-grid, .mc-row {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }
  .mc-row { gap: 12px; }
  .mc-sum { align-self: start; }

  /* the dashboard nav is a horizontal rail on a phone: keep it swipeable and
     stop the tall stacked items from eating the first screen */
  #nav { overflow-x: auto; scrollbar-width: none; }
  #nav::-webkit-scrollbar { display: none; }
  /* wide enough for the longest label at the lifted type size, so nothing is
     broken mid-word, and the rail scrolls instead */
  .nav-i {
    min-width: 106px;
    padding: 10px 8px;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  .nav-i span:not(.ic):not(.bdg) { line-height: 1.25; }

  /* the three overview counters are a number and two words each: three across
     reads at a glance instead of costing three screens */
  .tiles, .ov-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 12px 8px; text-align: center; }
  .tile .tl { font-size: max(0.7rem, 12px); line-height: 1.3; }
  .tile .tn { font-size: 1.5rem; }

  /* tables and code cannot wrap, so they scroll in their own box */
  table, pre { display: block; max-width: 100%; overflow-x: auto; }

  /* ---- 5. density -------------------------------------------------------
     Cards carry desktop padding that wastes a quarter of a phone screen. */
  .card, .svc-block, .sup { padding: 16px; }
  .cnt, .wrap { padding-inline: 16px; }
  .ans-card { padding: 14px 15px; }

  /* the hero answer figures stay large, they are the reason for the block */
  .ans-v { font-size: 1.5rem; }

  /* ---- 6. content priority ----------------------------------------------
     Long narrative sections open on demand instead of costing five screens of
     scroll to a reader who came to get something done. The content is always
     in the DOM; only its default state on a phone changes. */
  .mfold-on [data-mfold] {
    max-height: 46vh;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .mfold-on [data-mfold].mfold-open {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mfold-btn {
    display: block;
    width: calc(100% - 32px);
    margin: -8px auto 28px;
    min-height: 48px;
    background: #fff;
    border: 1.5px solid var(--border, #E2E8F0);
    border-radius: 100px;
    font: inherit;
    font-weight: 800;
    font-size: max(0.88rem, 15px);
    color: var(--navy, #1B3A6B);
    cursor: pointer;
  }
  .mfold-btn:focus-visible { outline: 3px solid var(--teal, #2BBFB0); outline-offset: 3px; }
}

/* the button is a phone affordance only */
.mfold-btn { display: none; }
.mfold-on .mfold-btn { display: block; }

/* Phones in landscape and small tablets. A tablet is still a touch device,
   so the input floor and the tap targets apply here too. Measured at 768 and
   820: the chat field was 14.28px and 28 targets sat under 44px. */
@media (min-width: 641px) and (max-width: 820px) {
  html { font-size: 17px; }
  input, select, textarea { font-size: max(1rem, 16px); }
  /* same specificity collision as on the phone */
  .chat-input-wrap input, .search-wrap input { font-size: max(1rem, 16px); }
  button, .btn, .nav-i, .svc-secnav a, .see-all, .cq-chip, .chat-send {
    min-height: 44px; box-sizing: border-box;
  }
  footer a, .ft-col a { display: inline-block; min-height: 44px; line-height: 44px; }
  .chat-close, .modal-x { min-width: 46px; min-height: 46px; box-sizing: border-box; }
}

/* Respect a user who has asked the system to reduce motion. The reveal
   animation and the fold transitions are decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .svc-topic-body, .tl-body, .cl-items, .expand, .rgt-more { transition: none; }
  * { animation-duration: 0.01ms; animation-iteration-count: 1; }
}

/* =====================================================================
   Phone homepage. Content priority, not a smaller desktop.
   Everything below is inside the phone query: desktop is untouched.
   ===================================================================== */
@media (max-width: 640px) {

  /* --- 1. a slimmer top bar ------------------------------------------ */
  .topbar, .nav-wrap, .hdr { padding-block: 6px; }
  .topbar .logo img, .hdr .logo img { height: 34px; }
  .logo .l1 { font-size: 1.05rem; }
  .logo .l2 { font-size: 0.6rem; }

  /* --- 2. two calls to action on one row, search underneath ----------- */
  .hero-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .hero-choice {
    width: 100%;
    min-height: 52px;
    padding: 12px 10px;
    font-size: max(0.86rem, 14px);
    line-height: 1.25;
    text-align: center;
  }
  .search-wrap { width: 100%; }

  /* --- 3. the counters become buttons -------------------------------- */
  .stats-in {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 8px 4px;
    background: #fff;
    border: 1.5px solid var(--border, #E2E8F0);
    border-radius: 14px;
    text-decoration: none;
  }
  .stat:active { transform: scale(0.97); }
  .stat-ic { font-size: 1rem; line-height: 1; }
  .stat-num { font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
  /* the label shrinks to a caption under the number it belongs to */
  .stat-lbl {
    font-size: max(0.6rem, 10.5px);
    line-height: 1.2;
    text-align: center;
    color: var(--mid, #5A6B87);
  }

  /* --- 4. official systems: four, then a way to all of them ----------- */
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-grid .sys-item:nth-child(n + 5) { display: none; }
  .sys-card > p { display: none; }

  /* --- 5. the four steps reduce to icons; tapping opens the modal ----- */
  .steps-h { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .steps-card > p, .steps-band-sub { display: none; }
  .sh-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 2px;
    min-height: 76px;
  }
  .sh-title, .sh-sub { display: none; }
  .sh-num { font-size: max(0.66rem, 11px); font-weight: 800; text-align: center; }
  .sh-circle { width: 44px; height: 44px; }

  /* --- 7. stories: picture and headline, the rest is in the article --- */
  .story-ex, .story-fr, .story-tag { display: none; }
  .story-card { padding-bottom: 14px; }

  /* --- 8. community without the weekly list -------------------------- */
  .comm-events { display: none; }

  /* --- 9. about runs from the story straight to the closing CTA ------- */
  .join { display: none; }
}
/* =====================================================================
   Phone: the navigation buttons carry words, not decoration.
   ===================================================================== */
@media (max-width: 640px) {

  /* the counters lose the emoji and the figure: on a phone they are a way in,
     and the number was decoration competing with the label */
  .stat-ic, .stat-num { display: none; }
  .stat {
    min-height: 52px;
    padding: 10px 6px;
  }
  .stat-lbl {
    font-size: max(0.74rem, 13px);
    font-weight: 700;
    color: var(--navy, #1B3A6B);
    line-height: 1.25;
  }

  /* the fourteen services become two columns of seven, title only, each in the
     colour of the service it opens */
  .svc-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .svc-card .svc-ic,
  .svc-card .svc-desc { display: none; }
  .svc-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 10px;
    border-color: var(--svc-accent, var(--border, #E2E8F0));
    box-shadow: none;
  }
  .svc-card .svc-name {
    font-size: max(0.86rem, 14px);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    color: var(--svc-accent, var(--navy, #1B3A6B));
  }
  .svc-card:active { transform: scale(0.98); }
}

/* =====================================================================
   Phone: one centred column.
   A phone can be 320px or 440px wide, and the same page has to feel
   deliberate on both. Everything sits in a centred column with equal
   gutters, and the text is centred with it so nothing drifts to an edge
   as the screen grows.
   Lists and form controls keep their reading edge: centring a bullet list
   or a field label makes it harder to scan, not easier.
   ===================================================================== */
@media (max-width: 640px) {

  /* one column, centred, capped so a big phone does not stretch the design */
  .cnt, .wrap, .svc-main, .hero-in, .sec-hd, .stats-in {
    max-width: 460px;
    margin-inline: auto;
  }

  /* the shared centre line */
  h1, h2, h3, h4, h5,
  p, .sub, .sec-sub, .psub, .ch-sub, .eyebrow, .svc-eyebrow,
  .stat-lbl, .svc-name, .sh-num, .lst-blurb, .ans-hd, .ans-card,
  .sys-card, .steps-card, .steps-band, .story-card, .comm-text, .join, .ft-col {
    text-align: center;
  }

  /* blocks centre themselves and their contents */
  .card, .svc-block, .sup, .sys-card, .steps-card, .story-card, .ans-card {
    margin-inline: auto;
  }
  .hero-choices, .search-wrap, .btn, .mfold-btn, .see-all {
    margin-inline: auto;
  }
  .sec-hd, .ans-hd { align-items: center; }

  /* icon and text stacks stand in the middle rather than at the reading edge */
  .sup, .comm-feat, .join-feat, .sys-item, .stat, .sh-item, .ans-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sup .stx { align-items: center; }

  /* Exceptions. These stay aligned to the reading edge because centring them
     costs comprehension: the eye loses the start of each line. */
  ul, ol, li,
  .lst-task, .task, .cl-item, .rgt-cond li, .svc-topic li, .tl-body li,
  label, .pf-fld, .pf-fld label, .fld, .fld label,
  input, select, textarea,
  .prof-row, .sum-brow, .sum-mrow, .mrow2, .call-opt, .agent-kind {
    text-align: start;
  }
  .pf-fld, .fld { align-items: stretch; }
}

/* =====================================================================
   Phone: the top of the page.
   The hero photograph costs a full screen and carries no information, so
   on a phone it becomes the flat colour the overlay already fades into.
   The bar itself is slimmed, and the headline moves up to sit close to it
   with one clean gap rather than a screen of empty photograph.
   ===================================================================== */
@media (max-width: 640px) {

  /* --- the hero is a flat colour, not a picture --- */
  #hero {
    background-image: none !important;
    background-color: #EBF1FB !important;
  }
  .hero-bg { display: none; }

  /* --- a slimmer bar --- */
  #nav .nav-in { padding-block: 4px; }
  #nav .logo img,
  #nav .svc-logo img { height: 38px; width: auto; }
  #nav .l1 { font-size: 1.02rem; line-height: 1.15; }
  #nav .l2 { font-size: 0.58rem; }

  /* --- the headline sits just under the bar --- */
  .hero-body {
    min-height: 0;
    padding-inline: 16px;
  }
  .hero-text {
    padding: 26px 0 30px !important;
    max-width: 460px;
    margin-inline: auto;
  }
  .hero-h1 { margin-bottom: 10px; }
  .hero-p { margin-bottom: 18px; }
}

/* the two that were set on the wrong elements last time */
@media (max-width: 640px) {
  /* the hero carried a 620px min-height of its own, which the photograph
     needed and a flat colour does not */
  #hero { min-height: 0 !important; }

  /* the bar is 69px because the logo image is 64px, not because of padding */
  #nav .nav-logo img { height: 40px; }
  #nav .nav-logo { gap: 8px; }
}

/* the logo is pinned to 64px by an !important rule further up the stylesheet,
   so the phone override has to say so too */
@media (max-width: 640px) {
  #nav .nav-logo img,
  .nav-logo img { width: 42px !important; height: 42px !important; }
  #nav .nav-in { padding-block: 5px; }
  .nav-logo-text .n1 { font-size: 1rem; }
  .nav-logo-text .n2 { font-size: 0.6rem; }
}

/* the bar's height came from the two-line logo text, not the image */
@media (max-width: 640px) {
  .nav-logo-text .n1 { font-size: 1rem; line-height: 1.1; }
  .nav-logo-text .n2 { font-size: 0.6rem; line-height: 1.2; }
  .nav-logo { gap: 8px; align-items: center; }
}

/* .nav-in carries an explicit height:68px, which is why slimming its contents
   changed nothing. 54px still clears the 44px hamburger comfortably. */
@media (max-width: 640px) {
  #nav .nav-in, .svc-nav-in { height: 54px; }
  /* the chip rail sits directly under the service header, so it moves too */
  .svc-secnav { top: 54px; }
  .svc-sec { scroll-margin-top: 108px; }
}

/* =====================================================================
   Approved fix 1 of 4 — compact service hero (phone only).
   The hero spent 54% of the first screen restating the page the reader
   already chose. The decorative icon and the chips go; the chips repeat
   what the answer strip below states with real figures. Breadcrumbs,
   heading, description, gradient and colour are untouched, so the
   branding is unchanged and only the duplication is removed.
   ===================================================================== */
@media (max-width: 640px) {
  .svc-hero-in { padding: 16px 16px 22px; }
  .svc-crumbs { margin-bottom: 14px; }
  .svc-hero-ic { display: none; }
  .svc-chips { display: none; }
  .svc-hero-main { gap: 0; }
  .svc-hero h1 { margin-bottom: 6px; }
}

/* =====================================================================
   Approved fix 2 of 4 — sticky registration navigation (phone only).
   MEASURED: btnNext sat at y=964 in an 844px viewport even on the
   shortest step, so the primary action needed a scroll every time.
   sticky, not fixed: the bar stays inside the form's flow, so it cannot
   detach from the page or cover the footer. Bottom padding on the
   wrapper keeps the last field clear of it.
   ===================================================================== */
@media (max-width: 640px) {
  .rg-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 20px;
    padding: 12px 0 14px;
    background: var(--bg, #F5F7FA);
    border-top: 1px solid var(--border, #E2E8F2);
  }
  /* MEASURED: the bar is 77px tall and is the last child of .rg-card, so
     the form above it needs that clearance or the last field lands under it. */
  #regForm { padding-bottom: 84px; }
  .rg-card { padding-bottom: 0; }
  /* both controls stay thumb sized; order is unchanged, RTL as before */
  .rg-nav .btn { min-height: 48px; flex: 1 1 0; }
}

/* =====================================================================
   Approved fix 4 of 4 — dashboard welcome block (phone only).
   MEASURED: 149px of a 844px screen, and 61% of the first screen passed
   before any content. The block is reduced rather than removed: the name
   and the household summary are real user data and stay, they just stop
   occupying a full gradient panel.
   ===================================================================== */
@media (max-width: 640px) {
  .hello {
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: var(--r, 12px);
  }
  .hello .hi { font-size: 1.05rem; }
  .hello .fam { font-size: max(0.78rem, 13.5px); margin-top: 2px; }
  /* the decorative glow is sized for the desktop panel */
  .hello::after { display: none; }
}

/* =====================================================================
   Homepage, phone only. Everything below lives inside the phone query,
   so the desktop layout stays exactly as it is authored in index.html.
   ===================================================================== */
@media (max-width: 640px) {

  /* --- 1. "התחילו כאן" runs the full width of the screen --------------
     .cnt is padded 16px on a phone, so pulling the card out by that much
     makes it touch both edges without any viewport-unit maths, which is
     what would otherwise fight the RTL scrollbar. */
  .steps-card {
    margin-inline: -16px;
    padding-inline: 16px;
    border-radius: 0;
  }

  /* --- 3. the community band, same treatment -------------------------
     The section itself is a rounded band inset 16px on each side, so it has
     to give up that inset first or the card can only reach the band edge. */
  #community {
    width: 100%;
    margin-inline: 0;
    border-radius: 0;
  }
  .comm-card {
    margin-inline: -16px;
    border-radius: 0;
    border-inline: 0;
  }
  /* the three features become 1:1 tiles side by side instead of a list */
  .comm-feats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .comm-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    gap: 5px;
    padding: 6px 4px;
    min-width: 0;
    text-align: center;
    line-height: 1.25;
    font-size: max(0.68rem, 12px);
    overflow-wrap: anywhere;
  }
  .comm-feat .feat-ic { font-size: 1.25rem; }

  /* --- 4. the stories band carried more air than it needed ----------- */
  #stories { padding: 40px 0; }
  #stories .sec-hd { margin-bottom: 26px; }
  #stories .stories-grid { gap: 14px; }
  #stories .story-img { height: 150px; }
  #stories .story-body { padding: 13px 14px; }
  #stories .story-title { margin-bottom: 4px; }
  #stories .story-auth { margin-top: 9px; }

  /* --- 5. the hero wave was painting over the search field ----------
     It sits at z-index 5 while the hero content sits at 2, and on a phone
     the curve cut across 53% of the search pill. Behind the content is
     where a decoration belongs. Desktop never overlapped, so this is
     scoped to the phone rather than changed at the source. */
  .hero-wave { z-index: 1; }
}

/* the tiles get one more step down where the row is narrowest */
@media (max-width: 340px) {
  .comm-feats { gap: 6px; }
  .comm-feat { font-size: max(0.6rem, 11px); gap: 3px; padding: 4px 2px; line-height: 1.2; }
  .comm-feat .feat-ic { font-size: 1rem; }
}

/* "Still deciding" on a phone: six headings that open one at a time. The
   markup is built at runtime by the script in index.html and removed again
   above 640px, so these rules only ever meet the phone structure. */
@media (max-width: 640px) {
  .why-acc { display: flex; flex-direction: column; gap: 10px; }
  .why-item {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    overflow: hidden;
  }
  .why-q {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    background: none; border: 0; cursor: pointer;
    font: inherit; text-align: start; color: #fff;
    padding: 14px 16px; min-height: 44px;
  }
  .why-q-t { flex: 1; font-size: max(0.9rem, 15px); font-weight: 700; line-height: 1.35; }
  .why-acc .why-ic { flex-shrink: 0; margin: 0; }
  .why-chev { flex-shrink: 0; opacity: .75; transition: transform .25s; }
  .why-q[aria-expanded="true"] .why-chev { transform: rotate(180deg); }
  .why-q:focus-visible { outline: 3px solid var(--orange, #F5831F); outline-offset: -3px; }
  .why-a { padding: 0 16px 16px; }
  .why-a p { margin: 0; font-size: max(0.85rem, 14px); line-height: 1.7; color: rgba(255,255,255,.82); }

  /* the buttons sit under the short lead now, so the old lead-in line above
     them would just repeat the eyebrow */
  .why-cta-t { display: none; }
  .why-cta { margin-bottom: 26px; }
}