/* ==========================================================================
   Ilm House Qur'an Academy — responsive layer
   Mobile-first. Loaded after styles.css.
   Breakpoints: 480 / 640 / 768 / 1024 / 1280 / 1440
   Test matrix: 360, 390, 430, 768, 1024, 1280, 1440, 1920
   ========================================================================== */

/* ---------- >= 480px : large phones ---------- */
@media (min-width: 480px) {
  .btn { font-size: 1.0625rem; padding-inline: 26px; }
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .btn-row .btn { width: auto; }
  .phone-row { grid-template-columns: 132px 1fr; }
}

/* ---------- >= 640px : small tablets ---------- */
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .field--full,
  .form-grid .form-actions,
  .form-grid .form-status,
  .form-grid .error-summary { grid-column: 1 / -1; }

  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* At this width no verse wraps, so one floor holds every slide still. */
  .ayah-track { min-height: 168px; }
}

/* ---------- >= 768px : tablets / desktop nav ---------- */
@media (min-width: 768px) {
  .menu-toggle { display: none; }

  .site-nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    position: static;
    inset: auto;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav a {
    padding: 10px 12px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-size: .9375rem;
  }
  .site-header .nav-cta { display: inline-flex; margin-left: 8px; min-height: 44px; padding: 10px 18px; }

  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  /* Task 06 §6: every split now carries the text column first and the media
     column second in the DOM, so a stacked phone reads heading > text > image
     > concluding paragraph. Only the two-column bands move the media column to
     the left for the alternating sections; below 640px nothing is reordered. */
  .split--media-left .split-media { order: -1; }

  .bullet-list { gap: 14px; }
  .faq-list { gap: 15px; }

  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablet: the odd card takes one column's width and centres under the pair,
     so the second row never reads as half-empty. */
  .course-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-3)) / 2);
  }
}

/* ---------- 768–1199px : tablet + narrow laptop ---------- */
/* TASK 28: this is the band where the cards are at their narrowest - 340px in the
   tablet two-column grid and 301px in the 1024–1199px three-column grid, against
   360px once the container reaches its 1200px max. The roomy CTA chrome (26px cap,
   34px arrow disc, 20px label inset, 17px type) leaves only ~125px for the
   Bengali label there and wrapped it onto two lines, so the button sheds chrome and
   steps down to 15px in this band only. Phones keep their own smaller clamp below
   640px; the single-column 640–767px card and >=1200px keep the roomy button. */
@media (min-width: 768px) and (max-width: 1199px) {
  .course-cta { gap: 8px; padding: 8px 10px 8px 14px; font-size: .9375rem; }
  .course-cta .course-cta__cap { width: 22px; height: 22px; }
  .course-cta__arrow { width: 30px; height: 30px; }
}

/* ---------- >= 1024px : laptops ---------- */
@media (min-width: 1024px) {
  /* The two frames become one butt-joined block: 50/50 columns, no gap, equal
     height, outer corners rounded and the shared seam left square (backup
     container 33a66e6: flex row, gap 0, min-height 700px, children stretch). */
  .hero-frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-height: 700px;
  }
  .hero-visual {
    min-height: 0;
    border-radius: var(--radius-hero) 0 0 var(--radius-hero);
  }
  .hero-visual img { position: absolute; inset: 0; }
  .trial-card {
    /* Task 05 round 4 §3: the outer panel keeps only the green top edge and the
       green seam shared with the artwork — no right, no bottom edge. The
       complete four-sided line now belongs to the inner .trial-box. */
    border-width: 1px 0 0 1px;
    border-color: var(--color-primary);
    border-radius: 0 var(--radius-hero) var(--radius-hero) 0;
    padding: 26px;
  }
  /* Backup container 7d8cfcf: 20px top margin + 20px side padding around the
     form only, so the fields sit inside the text measure. The inner box carries
     that inset now (1px border + 11px padding = the 12px the fields had). */
  .trial-box { padding: 11px; }
  .trial-box form { margin-top: 2px; }

  /* 360px cards in 40px gutters is what Screenshot 2 measures (3x360 + 2x40 =
     1160 inside the kit's 1200px container), so this section keeps 1200px and
     takes a 20px side inset rather than letting the shared 32px container
     padding squeeze the cards to 352px. */
  #Courses > .container { max-width: 1200px; padding-inline: 20px; }
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .course-card:nth-child(3) { grid-column: auto; justify-self: stretch; width: auto; }
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* Room here to hold the verse block inside the artwork's own ratio. */
  .ayah-carousel { aspect-ratio: 1366 / 607; }
  .footer-grid { grid-template-columns: 0.8fr 1.15fr 1.4fr 0.9fr; gap: var(--space-5); }

  .split { gap: var(--space-6); }
}

/* ---------- <= 639.98px : phones ---------- */
/* TASK 09: on a phone the header is hidden outright and the hero artwork becomes
   the first thing on screen, edge to edge. 640px is the boundary this stylesheet
   already uses for its small-tablet band (the block below caps the artwork at
   560px and centres it), so stopping at 639.98px leaves every tablet and desktop
   rule exactly as it was.
   `display: none` removes the sticky header's box, so no strip of empty space is
   left above the hero. The artwork then pulls itself out of the container's own
   `padding-inline` (a flat 16px in this band since TASK 25) by negating that same
   value, instead of the container being re-padded - which is what keeps the form
   card, the heading and every other section on their own measure. Only the two
   upper corners go square: the artwork keeps its bottom radius, its own ratio
   (the stacked image is still `height: auto`, so nothing is cropped) and the
   section's bottom padding. */
@media (max-width: 639.98px) {
  .site-header { display: none; }
  /* TASK 29: with viewport-fit=cover the page owns the status-bar area, and the
     phone band hides the header that guards it elsewhere, so the edge-to-edge
     hero keeps its top clear of the bar. 0px wherever no inset is reported. */
  .hero { padding-block-start: env(safe-area-inset-top, 0px); }
  .hero-visual {
    --hero-corner-blend: 88px;
    margin-inline: -16px;
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  }
  /* TASK 10: the form heading must never break into two lines on a phone.
     Measured against the shipped Noto Serif Bengali webfont, the whole sentence
     is 12.98px wide per 1px of font size (259.52px at 20px), and inside the
     green box the text line has `0.9 * vw - 70` px to live in (218px at 320px,
     317px at 430px), so 20px only fits from ~375px up. The size therefore scales
     with the viewport and `nowrap` holds the single line; the clamp keeps ~8% of
     headroom over the measured fit at every width, so the sentence stays inside
     the box instead of pushing the page sideways. Nothing here touches the box,
     its padding, its border, the fields or the desktop/tablet size (20px). */
  .trial-title {
    font-size: clamp(12px, 6.4vw - 5px, 22px);
    white-space: nowrap;
  }
  /* TASK 11: the six section headings must each hold one line on a phone.
     Measured with the shipped webfonts, the widest of the five Bengali headings
     ("📚 আমাদের কোর্স সমূহ (Our Courses)") is 16.40px wide per 1px of font size and
     "Frequently Asked Questions" is 13.81px, while the .section-head text line is
     exactly 0.9 * vw inside the container's clamp(16px, 5vw, 32px) padding (288px
     at 320px, 387px at 430px). One line therefore needs 17.6px at 320px for the
     five and 20.9px for the FAQ, against the 24px / 30.4px they both render today
     — which is why all six break at 320px and the FAQ still does at 430px. The two
     slopes are those fits with ~9% of headroom, capped at the authored minimums so
     480px+ (five) and 507px+ (FAQ) show exactly what they show now, and so the
     value at the 639.98px boundary equals the desktop value on both sides. No
     spacing changes: the widest heading still clears 16px at 320px with the padding
     it has, so the section padding, the heading margins and the .rule underline are
     left alone; the 15px floor only binds below 300px, where a 16px floor would put
     the ink 14px past the container edge. The selectors are
     the six heading IDs only — .trial-title, footer headings, the hidden
     #ayah-heading and 404.html's .section-head are outside this rule. The FAQ needs
     `#FAQ #faq-heading`, not the bare ID: the authored size lives in
     `#FAQ .section-head h2` (css/styles.css:685, specificity 1-1-1), which outranks
     a lone ID and would leave it at 30.4px on one nowrap line = sideways scroll. */
  #mission-heading, #about-heading, #why-heading,
  #purpose-heading, #courses-heading {
    font-size: clamp(15px, 5vw, 1.5rem);
    white-space: nowrap;
  }
  #FAQ #faq-heading {
    font-size: clamp(1rem, 6vw, 1.9rem);
    white-space: nowrap;
  }
  /* TASK 13: the verse sits ON the artwork again — one full-bleed background, no
     columns and no panel beside the text. The backup is explicit that phones were
     never meant to use the landscape file: `ilmhouse_wp385_13Nov25.sql` line 4016
     gives the ayah container `background_image_mobile` = `IMG_1762797530328.webp`
     (line 4177-4178: 896x1344 portrait) painted `cover` at `top center` inside a
     `min_height_mobile` of 80vh with `flex_justify_content_mobile: center`. That
     file is absent from the ZIP archive and 404s on the live host with every sized
     variant, and the live CSS never mentions it, so the artwork was recovered
     pixel-for-pixel from the owner's own capture into `ayah-bg-mobile.webp`
     (360x600 — the exact 0.6 region the capture shows, no re-drawing).
     The landscape file cannot substitute for it at any phone width: `cover` on a
     351x358 card is height-bound, so only 43.5% of the width survives and that
     slice is almost pure ornament (lantern x 60-150, arch x 0-270, vessel x 90-300);
     `contain` letterboxes it to 25-40% of the card height. Hence the portrait
     asset, `top center` and `background-size: 100% auto` as the backup specified.
     TASK 13 framed it 3:5 with `cover`, which left the control row sitting on the
     ornament at the artwork's foot; TASK 19 keeps the artwork whole but gives the
     row a floor of its own. The card is 3:5.6 (H = 1.8667 x W), so the 3:5 artwork
     paints edge to edge at 100% width and the extra 0.2 x W below it is filled with
     #EEF0E2 — the floor colour sampled from the artwork itself — where the controls
     now live. At 390px the image ends 582.7px down a 655.2px card, the 48px row is
     pinned at the content foot (top 597.4px, 14.7px under the image) and the pot,
     whose lowest pixel is y=566/600 of the artwork, ends 47.7px above the row.
     There is no crop and no stretch: the scale is the padding box's width / 360, so
     the whole 360x600 image is on screen at every width. `max-width: 480px` keeps
     that frame at 896px at the top of this breakpoint instead of 1195px at 639px.
     The verse is pinned to the top of the ornament-free band, measured from this
     artwork: the owner's blue annotation box maps to artwork-local x 40-354,
     y 137-338, and the ink profile (L<205) inside those rows is 100% at x 0-20,
     39.8% at x 30, 12.9% at x 50 and 0.00% from x 70 rightwards, with 0.00% ink for
     y 200-320. So the text column starts at x 70/360 = 19.4% of the card width and
     the band top sits at 137/600 of its height — 38.2% padding-top (percentage
     padding resolves against the containing block's inline size, not the box height)
     — and `padding-left: 16.5%` on the track leaves a 265px measure at 390px. The
     inset lives on `.ayah-track`, not on the card, so the control row keeps the
     full card width and cannot push the page sideways at 280px. The 182px ceiling
     on that padding is the band top once the card stops growing at 480px: without
     it the percentage would keep climbing with the viewport while the artwork's
     scale froze, and the verse would drift ~38px below the band top at 639px.
     `align-content: space-between` holds the verse at that band top and pins the
     controls to the card's content foot.
     Because the band is a fixed fraction of the card (203/600 tall, 274/360 wide),
     the verse can only stay inside it if the type is the same kind of fraction: the
     base sizes are pinned at 24px/16px across the whole phone range while the
     artwork shrinks with the viewport, and measured that way the longest slide needs
     248.7px against a 196.8px band at 390px. So Arabic, Bengali, reference and the
     slide gap all track 1% of card width here, with a px floor for the narrow end
     and a px ceiling for the 480px cap. TASK 19 lifts only the Bengali curve
     (13/3.6 -> 14/3.8, same 1.0875rem ceiling): 14 / 14.82 / 16.34px at
     360 / 390 / 430px instead of 13 / 14.04 / 15.48px, while Arabic, reference and
     the slide gap keep exactly the sizes TASK 13 measured.
     640px and above keep the ratified single-column desktop layout untouched.
     TASK 30: the owner asked for the artwork edge to edge on phones - the 5vw
     container gutter plus the 480px cap left 18-21.5px of page background each
     side of the image. The gutter is zeroed for this section alone, the cap,
     the side borders, the radius and the card's own horizontal padding go to
     zero with it, so the artwork's box is exactly the viewport width and its
     horizontal margin and padding measure 0px. With the card now tracking the
     viewport the 480px growth stop is gone, and so is the 182px ceiling that
     compensated for it: percentage padding and the artwork scale with the same
     width again, so the verse band stays registered at every phone width up to
     639.98px. */
  .ayah-section .container { padding-inline: 0; }
  .ayah-carousel {
    aspect-ratio: 3 / 5.6;
    max-width: none;
    padding: 38.2% 0 2.5%;
    border-inline: 0;
    border-radius: 0;
    background-image: url('../assets/images/ayah-bg-mobile.webp');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    align-content: space-between;
    justify-items: stretch;
    /* The control row is wider than the content box at the narrow end ("01 / 14"
       adds a digit), and an implicit auto column would grow to its max-content and
       drag the track, and the verse column, 5px sideways. Pinning the single
       column to the content width keeps the row's overhang centred and the verse
       exactly where the artwork band expects it. */
    grid-template-columns: minmax(0, 1fr);
  }
  .ayah-track {
    min-height: 0;
    /* The column the verse is centred in, as a fraction of the artwork's own
       360px width. Until TASK 30 the card's 4.5% horizontal padding supplied part
       of this inset and the track supplied 16.5% of what was left, which together
       put the column at artwork x 72.5..340.1. Zeroing the card padding for the
       full bleed moved the column to x 59.4..360 - onto the lantern and arch ink
       that the band measurement (x 70..355, 0.00% ink) exists to avoid, and 0.3-0.5%
       of ornament under the text at every phone width. The two insets below restore
       the ratified column to within 0.25 artwork px of where it was: 20% of the card
       width is x 72 and 5.56% is x 339.8, both inside the ink-free edges with 2px
       to spare, and the column's centre (x 205.9) stays on the band's own centre
       (x 212.5) to within the 6px the old 4.5% gutter was off by. */
    padding-inline: 20% 5.56%;
  }
  .ayah-slide { gap: clamp(6px, 1.7vw, 10px); }
  .ayah-arabic {
    font-size: clamp(1.125rem, 5.5vw, 1.65rem);
    line-height: 1.85;
  }
  .ayah-bangla {
    font-size: clamp(14px, 3.8vw, 1.0875rem);
    line-height: 1.7;
  }
  .ayah-ref { font-size: clamp(.78125rem, 3.2vw, .965rem); }
  /* At 280px the control row measures 224px against a 214px content box, so the
     counter broke onto a second line and the round buttons squashed to ellipses.
     The buttons keep their 48px circle and the counter keeps one line; the row
     then spans 219.81px and overhangs the padding by 2.91px each side, which the
     card's own box still contains without moving the page sideways. */
  .ayah-btn { flex-shrink: 0; }
  /* TASK 19: the row now sits on the flat #EEF0E2 strip below the artwork, so the
     frosted plate TASK 13b spread around the counter is gone — the ink on cream
     reads far past AA without it. The row is also one digit wider ("01 / 14"
     instead of "1 / 14"), which at 280px overhangs the padding by ~4px each side
     and still stays inside the card. */
  .ayah-count {
    white-space: nowrap;
  }
  /* TASK 14: the approved shorter questions must read as one line on a phone.
     Measured with the shipped webfonts, the widest summary left after the swap
     ("বিদেশ থেকেও ভর্তি হওয়া যাবে❓") is 13.64px wide per 1px of font size, against
     20.86px for "মেয়েদের জন্য কি আলাদা মহিলা শিক্ষিকা আছেন❓" and 20.05px for the long
     form of this same question before it — a 35% cut, and it is what turns seven
     two-line cards into one-liners at 360px. The line the question lives on is the
     card minus its own horizontal padding, the 18px icon and the 16px gap: 248px at
     360px and 212px at 320px while the card keeps its authored 20px. One line
     therefore needs 18.0px at 360px but only fits at 15.5px at 320px, so the size
     scales with the viewport to a 1rem floor and the horizontal padding is trimmed
     20px -> 14px, which widens that 320px line to 224px and leaves 5.17px of
     headroom over the 16.04px the clamp picks there; the tightest card from 320px up
     keeps 5.17px at 320px, 14.44px at 360px, 41-77px at 390-430px and 148-382px at
     640px and above. Below 320px the floor binds (a true single line at 280px would
     need 13.49px) and
     the approved wording stays readable instead of shrinking — the longest questions
     wrap, which is what the brief asks for on very narrow screens. Colour, border,
     radius, the 68px min-height, the vertical padding, the right-hand +/- icon and
     its 16px gap are untouched, and at the 639.98px boundary the clamp returns
     exactly the authored 18px, so nothing above 640px moves. */
  .faq-item summary {
    font-size: clamp(1rem, calc(7.2vw - 7px), 1.125rem);
    padding-inline: 14px;
  }
  /* TASK 16: audit finding BUG-01. TASK 09 removed the header here, so this band
     had no navigation at all; the sticky bar turns on in exactly the same
     conditions the header turns off, so a phone always has one primary navigation
     and never two. --phone-nav-h is what the bar measures at 360px - the 6px
     top/bottom padding, a 64.5px cell (22px icon + 3px gap + two 13.75px label
     lines + its own 12px padding) and the 1px hairline, 77.5px rounded up to 78 -
     and the two floating bubbles read it, so the bar can never sit over the
     WhatsApp bubble. Above 640px it stays 0px and every one of those positions is
     the authored one.
     TASK 29: the bar's clearance no longer lives on the body. A body
     padding-block-end paints the ivory page background between the dark footer
     and the fixed bar at the end of the document - the light strip owners saw on
     phones, 86px of padding minus the bar's real 64px height. The clearance moves
     into the footer's own bottom padding (see .site-footer), which is the bar's
     own ink, so the document ends dark and the bar sits flush on it at every
     width, whatever height the bar's labels wrap to. */
  :root { --phone-nav-h: 78px; }
  .mobile-nav { display: block; }
  /* TASK 21: phone spacing. The Free Trial Form is locked, so the hero keeps
     its container, its card and every form box on the measured 390/430 values;
     only the two vertical seams around the block close up, to the 16px the
     640-1023 band already uses. The Courses cards are where the desktop-sized
     air was: the 19.5px container inset plus 32px of card padding left the
     Bengali description 315px at 390px and the 24px margin bands pushed each
     card past 600px. These clamps return 15-17px of measure and about 42px of
     height, more where the wider line drops a wrap, gradually across
     360-430px, so each phone width keeps its own proportion and nothing above
     640px moves (the 639.98px boundary reads 20px on the container, the phone
     value, and the tablet band restores 32). */
  .hero { padding-block-end: clamp(16px, 4vw, 24px); }
  .hero-frame { gap: clamp(12px, 4vw, 16px); }
  /* TASK 25: owner-approved implementation of the TASK 24 audit. The container
     drops from the 5vw clamp (18-21.5px across 360-430) to a flat 16px and the
     artwork negates exactly that value above to stay edge to edge. TASK 25 widened
     the fields from 256/283/319 to 274/304/344 at 360/390/430; TASK 27 widens
     them again from the card's own insets, below. Scoped to this band: every value
     at >=640px is untouched, and the form-lock golden's 1024/1440 cases stay
     byte-identical. */
  .hero > .container { padding-inline: 16px; }
  /* TASK 27: the card's own side insets were the largest remaining horizontal
     gap on phones, so they drop 14 -> 9 and the green box 11 -> 8. The intro text
     measure grows by 10px (258 -> 268 at 320, 328 -> 338 at 390) and the fields
     by 16px, while every text box keeps a 9px inset from the card border. Only
     this band: 640+ keeps the authored card padding and the desktop box. */
  .trial-card { padding: 9px; }
  .trial-box { padding: 8px; }
  /* TASK 26: on phones the country selector and the WhatsApp input share one
     row. The selector shows flag + dial + arrow only; the country name stays in
     the trigger's aria-label, so the control still announces it. The first
     track is the selector, the phone field is its DOM neighbour and takes the
     rest. The panel is measured against the form rather than the 96px trigger,
     otherwise the 245-option list would open in a sliver. Scoped to this band:
     >=640px keeps the authored two-column form grid and the full trigger. */
  .form-grid { grid-template-columns: clamp(96px, 26vw, 104px) minmax(0, 1fr); column-gap: 6px; }
  /* 11px block padding gives the trigger the same 50.4px line box as the
     neighbour input without stretching it, so a validation line under either
     field cannot pull the flag/code chip taller. */
  .country-trigger { padding: 11px 4px; gap: 3px; }
  .country-trigger [data-country-label] { display: none; }
  /* 320px cannot hold the 96px selector and the 143.55px placeholder at the
     same time; the ellipsis keeps that one field reading as truncated rather
     than chopped at the border. */
  .field--country + .field input { text-overflow: ellipsis; }
  .country-panel {
    right: auto;
    /* 70px = the form's two side insets in this band: 16 container + 1 card
       border + 9 card padding + 1 box border + 8 box padding, doubled. */
    width: calc(100vw - 70px);
  }
  #Courses > .container { padding-inline: clamp(12px, 3.4vw, 20px); }
  /* The heading keeps the line it was measured on: the inset the container just
     gave up is handed back as a margin on the head, so the TASK 11 one-line fit
     and its 430px authored wrap are the same numbers as before while the cards
     take the extra measure below. */
  #Courses .section-head {
    margin-inline: calc(clamp(16px, 5vw, 32px) - clamp(12px, 3.4vw, 20px));
  }
  /* TASK 28: every card now owns its banner, so the padding lives on the body
     under it. These are the phone values for that body; 640+ keeps the authored
     clamp in styles.css. The CTA sheds chrome here so the Bengali label keeps one
     line at 320px. */
  .course-body { padding: clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) clamp(16px, 4.4vw, 20px); }
  .course-title { margin-bottom: clamp(12px, 3.4vw, 14px); }
  .course-desc { margin-bottom: clamp(14px, 4vw, 18px); }
  .course-includes { margin-bottom: clamp(14px, 4vw, 16px); }
  #Courses .bullet-list { margin-bottom: clamp(16px, 4.4vw, 20px); }
  .course-cta { gap: 8px; padding: 8px 8px 8px 14px; font-size: clamp(.875rem, 3.9vw, 1.0625rem); }
  .course-cta .course-cta__cap { width: 22px; height: 22px; }
  .course-cta__arrow { width: 30px; height: 30px; }
}

/* ---------- 640–1023px : tablets ---------- */
/* The hero masters are 896x1280, so across a full 704px tablet column the
   artwork alone stands ~1006px tall and the form starts a screen below it.
   A canvas scan of all ten rotation images
   (docs/screenshots/task-05/crop-scan.txt) shows real content reaching
   75–92% of the artwork height, so cropping to shorten the block would cut
   class badges and figures — instead the artwork is rendered smaller and
   centred, which costs side gutters but keeps every pixel of it. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero { padding-block: 24px; }
  .hero-frame { gap: 16px; }
  .hero-visual { max-width: 560px; margin-inline: auto; }
}

/* ---------- 1024–1279px : small laptops ---------- */
/* The hero is already two columns here, so the country+phone row shares only
   ~393px. The trigger needs ~215px to show "Bangladesh +880" without
   truncating, and the number field needs ~172px for its "WhatsApp Number"
   placeholder, so the row is a few pixels short of both at the default
   chrome. The selector keeps the larger share, and its own padding and
   internal gaps tighten by 2px to buy the number field the rest — no
   ellipsis in the country name and no clipped placeholder. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* TASK 15 §C: the laptop gap comes from the base clamp (5vw = 51.2-64px) and
     was as unnecessary as the desktop one. The header is in flow, so this is the
     whole visual gap between it and the hero artwork. */
  .hero { padding-block-start: 24px; }
  .form-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .country-trigger { gap: 6px; padding-inline: 10px; }
}

/* ---------- >= 1280px : desktops ---------- */
/* TASK 15 §C: 24px is the approved desktop header-to-hero gap, matching the
   tablet band. Only the top closes up — the hero still opens the page with the
   same space below it. */
@media (min-width: 1280px) {
  .container { padding-inline: 32px; }
  .section { padding-block: var(--space-8); }
  .hero { padding-block-start: 24px; }
}

/* ---------- >= 1440px : wide desktops ---------- */
@media (min-width: 1440px) {
  :root { --container: 1240px; }
  .hero { padding-block: 24px 72px; }
  .split { gap: var(--space-7); }
}

/* ---------- short viewports (landscape phones) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .floating-whatsapp { width: 48px; height: 48px; bottom: calc(12px + var(--phone-nav-h)); right: 12px; }
  .back-to-top { bottom: calc(72px + var(--phone-nav-h)); right: 12px; width: 44px; height: 44px; }
}

/* ---------- coarse pointers: keep touch targets >= 44px ---------- */
@media (pointer: coarse) {
  .site-nav a,
  .faq-item summary,
  .btn { min-height: 48px; }
  .back-to-top, .floating-whatsapp { width: 56px; height: 56px; }
}

/* ---------- print ---------- */
@media print {
  .site-header,
  .mobile-nav,
  .menu-toggle,
  .floating-whatsapp,
  .back-to-top,
  .trial-card form,
  .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .hero, .section, .section--tint, .section--surface { background: #fff; padding-block: 12pt; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #000; }
  .site-footer a, .site-footer h2, .site-footer .tagline { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
  .faq-item { break-inside: avoid; }
  .faq-item[open] summary::after { display: none; }
}