/* ==========================================================================
   Alon & Natali Travel — base stylesheet
   All CSS lives here (no inline <style> / style="") so the site can run
   under a strict Content-Security-Policy: style-src 'self'.
   Colour values chosen to meet WCAG 2.2 AA contrast (4.5:1 text, 3:1 UI).
   ========================================================================== */

:root {
    --bg:            #fffdf9;
    --surface:       #ffffff;
    --text:          #2d3436;
    --muted:         #5f5f5f;

    --teal-light:    #74ebd5;   /* decorative gradient start */
    --teal:          #48dbfb;   /* decorative gradient end   */
    --ink-deep:      #08313f;   /* text on the bright gradient — 8.4:1+ */

    --action:        #0b7285;   /* buttons: white on this = 5.6:1 */
    --action-hover:  #095b6b;   /* 7.7:1 */
    --coral:         #c93a3a;   /* headings — 5.1:1 on white */
    --highlight:     #e60000;   /* 4.7:1 on --bg */

    --amber:         #feca57;   /* decorative card accent only */
    --amber-line:    #a97b00;   /* interactive borders — 3.8:1 */

    --focus:         #08313f;
    --radius-lg:     20px;
    --radius-pill:   50px;
}

html { font-size: 100%; background-color: var(--bg); }

body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
    padding: 0;
    background: transparent;
    overflow-wrap: break-word;
}

/* Sea photo pinned behind the whole page. It sits in its own layer under the
   content (z-index -1) so it never tints the text, and stays put on scroll. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('/assets/page-bg.jpg') center / cover no-repeat;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* High-contrast modes must stay flat */
html.a11y-contrast-dark body::before,
html.a11y-contrast-light body::before { display: none; }

/* --- Visible keyboard focus everywhere (WCAG 2.4.7 / 2.4.11) ------------ */
:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Skip link (WCAG 2.4.1) -------------------------------------------- */
.skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 10000;
    background: var(--ink-deep);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
    font-weight: bold;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus { top: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.is-hidden { display: none; }

/* --- Header ------------------------------------------------------------- */
.header {
    background: transparent;
    color: var(--ink-deep);
    padding: 84px 20px 34px;
    text-align: center;
    position: relative;
}
.header--compact { padding: 84px 20px 24px; }
.header a { color: var(--ink-deep); }

.logo {
    display: block;
    width: 210px;
    max-width: 62%;
    height: auto;
    background: #fdfaf5;
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    margin: 0 auto 14px;
}

.logo--sm { width: 165px; margin-bottom: 10px; }
.logo-link { display: inline-block; line-height: 0; }
.logo-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-lg); }

.container {
    max-width: 800px;
    margin: auto;
    padding: 40px 20px;
    /* Soft translucent panel: the photo still shows through, but body text
       keeps its contrast instead of fighting the sea and sky behind it. */
    background: rgba(255, 253, 249, 0.74);
    border-radius: var(--radius-lg);
}
html.a11y-contrast-dark .container,
html.a11y-contrast-light .container { background: transparent; }
.container--narrow { max-width: 700px; padding: 60px 20px; text-align: center; }

h1 { font-size: 2.6rem; margin-bottom: 10px; line-height: 1.2; }
.header .logo + h1 { margin-top: 0; }
h2 { line-height: 1.25; }
@media (max-width: 600px) {
    h1 { font-size: 1.9rem; }
    .header { padding-top: 92px; }
    .header--compact { padding-top: 92px; }
    .logo { width: 180px; max-width: 66%; }
    .logo--sm { width: 145px; }
}

.price { font-size: 2.8em; color: var(--coral); font-weight: bold; margin: 25px 0; }
.price-note { font-size: 0.4em; color: var(--muted); font-weight: normal; display: block; margin-top: 6px; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-block;
    background-color: var(--action);
    color: #ffffff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: 1.15em;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(11, 114, 133, 0.25);
    transition: transform 0.2s, background 0.3s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    min-height: 40px;
}
.btn:hover { background-color: var(--action-hover); transform: scale(1.03); }
.btn--sm { padding: 9px 22px; font-size: 0.95em; }
.btn--md { padding: 11px 26px; font-size: 1.05em; }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; transform: none; }

/* --- Cards -------------------------------------------------------------- */
.features {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    margin: 40px 0;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--amber);
}
.features h2 { color: var(--coral); }
.features ul { padding: 0; margin: 0; }
.features li { margin-bottom: 15px; font-size: 1.1em; list-style: none; }
.features-note {
    font-weight: normal;
    color: var(--text);
    /* Same padding and size as the list rows above, so the emoji column
       and the text column line up all the way down the card. */
    font-size: 1.1em;
    padding: 6px 10px;
    margin: 14px 0 0;
}
.features-note:last-of-type { margin-bottom: 0; }

/* The bio is one dictionary string carrying blank lines, so the paragraph
   breaks survive as text rather than as markup the translator has to repeat. */
.about-story { white-space: pre-line; text-align: start; max-width: 62ch; margin-inline: auto; }

.footer { text-align: center; font-size: 0.9em; color: var(--muted); margin-top: 50px; padding: 0 20px 30px; }
.footer a, .footer-link { color: var(--muted); }
.footer-nav { margin-top: 6px; }
.footer-nav a { margin: 0 8px; display: inline-block; padding: 4px 0; }

/* --- Cookie consent -----------------------------------------------------
   A bottom sheet rather than a full-screen block: it must be answerable,
   not inescapable. The two buttons are deliberately identical — refusing
   is not made the harder path. */
.consent-banner {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 9997;   /* just under the accessibility launcher */
    padding: 16px 18px;
    background: #ffffff;
    border-top: 3px solid var(--action);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    color: var(--text);
    font-size: 0.9em;
    line-height: 1.55;
    text-align: start;
}
.consent-banner[hidden] { display: none; }
.consent-banner__title {
    margin: 0 0 6px;
    font-size: 1.05em;
    color: var(--action);
}
.consent-banner__body { margin: 0 0 8px; max-width: 70ch; }
.consent-banner__link { color: var(--action); display: inline-block; padding: 4px 0; }
.consent-banner__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.consent-btn {
    flex: 1 1 auto;
    max-width: 220px;
    min-height: 44px;
    padding: 10px 22px;
    border: 2px solid var(--action);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--action);
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}
.consent-btn:hover { background: var(--action); color: #ffffff; }

/* The accessibility launcher lives at the bottom too. Rather than reserving
   a gutter inside the banner — which made it needlessly tall on a phone —
   the launcher steps up by the banner's measured height while it is open.
   --consent-h is written by consent.js. */
html.has-consent-banner .a11y-launcher {
    inset-block-end: calc(var(--consent-h, 0px) + 18px);
}
html.has-consent-banner .a11y-panel {
    inset-block-end: calc(var(--consent-h, 0px) + 84px);
}

@media (max-width: 640px) {
    .consent-banner { padding: 14px 16px; font-size: 0.86em; }
    .consent-btn { max-width: none; }
}

.footer-consent-link {
    margin: 0 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Language switcher -------------------------------------------------- */
.lang-switch {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    display: flex;
    gap: 6px;
    z-index: 10;
}
.lang-btn {
    background: #ffffff;
    color: var(--ink-deep);
    border: 2px solid var(--ink-deep);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    min-height: 32px;
}
.lang-btn[aria-pressed="true"] { background: var(--ink-deep); color: #ffffff; }

/* --- Form --------------------------------------------------------------- */
.form-section {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    margin: 40px 0;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--teal);
    scroll-margin-top: 30px;
}
.form-section h2 { color: var(--coral); margin-top: 0; }

.form-group { margin-bottom: 20px; text-align: start; }
.form-group > label,
.form-fieldset > legend { display: block; font-weight: bold; margin-bottom: 8px; padding: 0; }

.form-fieldset { border: 0; padding: 0; margin: 0 0 20px; text-align: start; }
.legend-note { font-weight: normal; }

.form-group input,
.form-group select,
.form-group textarea,
.form-fieldset input[type="date"] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid var(--amber-line);
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text);
    min-height: 44px;
}
.form-group textarea { resize: vertical; min-height: 100px; }
.hidden-field { display: none; }

.sub-label { font-weight: normal; font-size: 0.9em; margin-bottom: 4px; display: block; }
.date-row { display: flex; gap: 12px; flex-wrap: wrap; }
.date-row[hidden] { display: none; }
.date-col { flex: 1 1 140px; min-width: 140px; }

/* --- One destination = one card: the city and its own dates together -----
   Keeping the arrival/departure pair inside the same bordered block is what
   makes a multi-city trip readable at a glance — Prague 1-10 Oct, Budapest
   10-12 Oct — instead of a list of cities followed by one anonymous range. */
.dest-block {
    border: 2px solid var(--amber-line);
    border-radius: 12px;
    padding: 14px 16px 16px;
    background: var(--bg);
}
.dest-block + .extra-destinations:not(:empty) { margin-top: 14px; }
.dest-dates { margin-top: 12px; }
.dest-dates .date-col input { margin: 0; }

/* Inside a destination card the two dates always stack, at every width, so
   the city, the arrival date and the departure date read as three rows of
   exactly the same width. Side by side they would be half as wide as the
   city box above them, which is what made the card look ragged. */
.dest-dates .date-col { flex: 1 1 100%; min-width: 0; }

/* Safari on iOS gives input[type="date"] an intrinsic width from its own
   date format and lets that win over width:100%, so the two date boxes came
   out wider than the city box above them and spilled past the card's edge.
   Turning off the native appearance drops the intrinsic sizing; min-width:0
   and max-width:100% stop it creeping back in a flex column. Chrome and
   Firefox were already correct and are unaffected. */
.form-group input[type="date"],
.form-fieldset input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
}
.inline-check {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
}
.inline-check input { width: auto; min-height: 0; }

.field-note {
    font-size: 0.9em;
    opacity: 0.85;
    margin: 8px 0 0;
}
.field-note--list {
    padding-inline-start: 20px;
    margin: 10px 0 0;
}
.field-note--list li { margin: 2px 0; }

/* Advisory, not an error: amber and calm, never red. */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 0;
    padding: 12px 14px;
    border: 2px solid var(--amber-line);
    border-radius: 12px;
    background: var(--bg);
    font-size: 0.95em;
    line-height: 1.5;
}
.form-notice[hidden] { display: none; }
.form-notice__icon { flex: none; line-height: 1.5; }

.mt-8 { margin-top: 8px; }

/* --- Multi-destination -------------------------------------------------- */
.extra-destinations:not(:empty) { margin-top: 14px; }
.extra-destination { margin-top: 14px; }
.extra-destination[hidden] { display: none; }
/* --- Destination line + the country we resolve for the visitor ----------
   Every text box inside a destination card is the full width of the card, so
   the city sits exactly above its own arrival and departure fields and the
   three read as one aligned block. The resolved-country chip and the remove
   button therefore wrap onto their own line rather than eating into the
   input — a chip like "צ'כיה" used to leave one visible character to type in
   on a phone. */
.dest-line,
.extra-destination__line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.dest-line input[type="text"],
.extra-destination__line input[type="text"] { flex: 1 1 100%; min-width: 0; }

/* The chip, the remove button and the field's own feedback line all share
   the row's second line. Keeping the message in here rather than below the
   row is what stops the card growing when the field is blurred — a 31px jump
   that used to move the "add destination" button out from under a thumb that
   was already on its way down. */
.dest-line > .field-error,
.dest-line > .field-ok,
.dest-line > .field-warn,
.extra-destination__line > .field-error,
.extra-destination__line > .field-ok,
.extra-destination__line > .field-warn {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* The visitor types the city; this chip is how the site answers with the
   country. It is decorative feedback, not an input — the canonical name
   travels in a hidden field, and the recognised city is announced by the
   aria-live .field-ok line, so a screen reader is not told twice. */
.dest-country {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: 2px solid var(--teal);
    color: var(--ink-deep);
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dest-country[hidden] { display: none; }

@media (max-width: 480px) { .dest-country { font-size: 0.85em; } }

.btn-remove {
    flex: none;
    width: 44px;
    min-height: 44px;
    border: 2px solid var(--amber-line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
}
.btn-remove:hover { border-color: #b00020; color: #b00020; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 18px;
    min-height: 44px;
    border: 2px dashed var(--teal);
    border-radius: 999px;
    background: transparent;
    color: var(--teal);
    font-family: inherit;
    font-size: 0.98em;
    font-weight: bold;
    cursor: pointer;
}
.btn-secondary:hover { background: var(--bg); }
.btn-secondary[disabled] { opacity: 0.5; cursor: not-allowed; }

.order-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 24px 0 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg);
    border: 2px solid var(--teal);
    font-weight: bold;
}
.order-total strong { font-size: 1.35em; color: var(--coral); }
.order-total__detail { font-weight: normal; font-size: 0.92em; opacity: 0.85; }

.flexible-details {
    margin-top: 14px;
    padding: 16px 18px 2px;
    border: 2px dashed var(--amber-line);
    border-radius: 12px;
    background: var(--bg);
}
.flexible-details[hidden] { display: none; }
.flexible-details .field-note { margin: 0 0 14px; }

/* The "which stop first?" block only exists on the flexible branch, and only
   once there is more than one city to order. */
#flex-order-group[hidden],
#flex-order-custom[hidden],
#dates-notes[hidden] { display: none; }
#flex-order-slots { margin-bottom: 4px; }
#flex-order-slots .form-group { margin-bottom: 12px; }
#flex-order-status[hidden] { display: none; }


.checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    background: var(--bg);
    border: 2px solid var(--amber-line);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    min-height: 44px;
}
.checkbox-option input { width: auto; margin: 0; }
.checkbox-option:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) {
    .checkbox-group { grid-template-columns: 1fr; }
}

html[dir="rtl"] .form-group,
html[dir="rtl"] .form-fieldset { text-align: right; }
html[dir="rtl"] .container--terms { text-align: right; }

/* --- Validation feedback ------------------------------------------------ */
.field-error {
    color: #b00020;
    font-weight: bold;
    font-size: 0.95em;
    margin: 6px 0 0;
}
[aria-invalid="true"] { border-color: #b00020 !important; }

.field-ok {
    color: #0a6b3d;
    font-weight: bold;
    font-size: 0.95em;
    margin: 6px 0 0;
}
.form-group input[data-state="valid"],
.form-group select[data-state="valid"],
.form-fieldset input[data-state="valid"] { border-color: #0a6b3d; }

/* Amber, not red: the field is still submittable. #7a4a00 on --bg is 5.9:1. */
.field-warn {
    color: #7a4a00;
    font-weight: bold;
    font-size: 0.95em;
    margin: 6px 0 0;
}
.form-group input[data-state="warn"] { border-color: var(--amber-line); }
.suggest-btn--warn { border-color: var(--amber-line); color: #7a4a00; }
.suggest-btn--warn:hover { background: #fff8e8; }

.suggest-btn {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 4px 12px;
    min-height: 32px;
    border: 2px solid #b00020;
    border-radius: 999px;
    background: var(--surface);
    color: #6b0014;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
}
.suggest-btn:hover { background: #fff0f0; }
.suggest-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

#destination-unlisted-wrap[hidden] { display: none; }

.consent-group { margin-bottom: 16px; }
.checkbox-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: normal;
    font-size: 0.95em;
    line-height: 1.5;
    cursor: pointer;
}
.checkbox-consent input {
    width: auto;
    min-height: 0;
    margin: 3px 0 0;
    flex-shrink: 0;
}
.checkbox-consent a { color: var(--coral); text-decoration: underline; }
.checkbox-consent:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.field-hint {
    color: var(--muted);
    font-size: 0.9em;
    margin: 6px 0 0;
    padding-inline-start: 24px;
}
.field-hint[hidden] { display: none; }
.checkbox-consent input:disabled { cursor: not-allowed; }
.checkbox-consent:has(input:disabled) { cursor: default; }

.error-summary {
    border: 3px solid #b00020;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: #fff5f5;
    color: #6b0014;
}
.error-summary h3 { margin: 0 0 8px; font-size: 1.05em; }
.error-summary ul { margin: 0; padding-inline-start: 20px; }
.error-summary a { color: #6b0014; }

.form-status { margin-top: 15px; font-weight: bold; color: var(--action); }
.form-status--error { color: #b00020; }

/* --- About / CTA -------------------------------------------------------- */
.about-section { text-align: center; margin: 30px 0 40px; }
.about-section h2 { color: var(--coral); font-size: 1.6em; margin-bottom: 14px; }
.about-section p { max-width: 600px; margin: 0 auto 24px; color: #444444; }
.about-section .about-lead { margin-bottom: 14px; color: var(--text); }

#cta-paragraph {
    font-size: 1.25em;
    text-align: center;
    font-weight: 600;
    margin: 30px auto;
    max-width: 650px;
}
.cta-highlight { color: var(--highlight); font-weight: 800; font-size: 1.2em; }
.cta-strike { color: var(--muted); }

.about-photo {
    width: 100%;
    height: auto;
    max-width: 420px;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    display: block;
    margin: 0 auto;
}

/* --- Social ------------------------------------------------------------- */
.social-section { text-align: center; margin: 50px 0 10px; }
.social-section p { font-weight: bold; color: var(--text); margin-bottom: 18px; font-size: 1.1em; }
.social-icons { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.social-icons a {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}
.social-icons a:hover { transform: scale(1.1); }
.social-icons svg { width: 26px; height: 26px; fill: #ffffff; }
.social-facebook  { background: #1877f2; }
.social-tiktok    { background: #000000; }
.social-instagram { background: radial-gradient(circle at 30% 110%, #c2185b 0%, #d6249f 45%, #285AEB 100%); }
.social-youtube   { background: #d10000; }

.email-cta { margin-top: 26px; text-align: center; }
.email-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 22px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    border: 2px solid var(--action);
    color: var(--action);
    font-weight: bold;
    font-size: 1.05em;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
    transition: transform 0.2s, background 0.2s, color 0.2s;
}
.email-cta a:hover { transform: translateY(-2px); background: var(--action); color: #ffffff; }
.email-cta .email-emoji { font-size: 1.5em; flex-shrink: 0; }
@media (max-width: 600px) {
    .email-cta a { font-size: 0.95em; padding: 12px 18px; }
}

/* --- Content pages ------------------------------------------------------ */
.container--terms h2 { color: var(--coral); margin-top: 40px; }
.mt-40 { margin-top: 40px; }
.prose a { color: var(--action); }
/* ...but a link styled as a button keeps its own white-on-teal contrast */
.prose a.btn { color: #ffffff; }

/* --- Thank-you page ----------------------------------------------------- */
.thanks-card {
    background: var(--surface);
    border: 2px solid var(--teal);
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.07);
    padding: 56px 32px 40px;
    margin-top: 44px;
    text-align: center;
    position: relative;
}
.thanks-card h1 { font-size: 2.2rem; color: var(--coral); margin: 0 0 10px; }
.thanks-subtitle { font-size: 1.15em; font-weight: bold; margin: 0 0 18px; }
.thanks-card > p { max-width: 460px; margin-inline: auto; color: #444444; }

/* Badge that lands on the card edge and gives the plane its little take-off */
.thanks-badge {
    position: absolute;
    top: -36px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-light), var(--teal));
    border: 4px solid var(--surface);
    box-shadow: 0 8px 18px rgba(8, 49, 63, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgeDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
html[dir="rtl"] .thanks-badge { transform: translateX(50%); }
.thanks-plane { font-size: 1.9rem; animation: planeLift 2.8s ease-in-out 0.7s infinite; }

@keyframes badgeDrop {
    0%   { opacity: 0; margin-top: -22px; }
    100% { opacity: 1; margin-top: 0; }
}
@keyframes planeLift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(3px, -5px) rotate(-8deg); }
}

.thanks-steps {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 28px auto 24px;
    max-width: 460px;
    text-align: start;
}
.thanks-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg);
    border: 2px solid var(--amber-line);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.step-num {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--action);
    color: #ffffff;
    font-weight: bold;
    font-size: 0.78em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.thanks-note { font-size: 0.92em; color: var(--muted); margin: 0 0 26px; }

.thanks-social { text-align: center; margin-top: 34px; }
.thanks-social p { margin-bottom: 12px; font-weight: bold; }

@media (max-width: 480px) {
    .thanks-card { padding: 50px 20px 32px; }
    .thanks-card h1 { font-size: 1.8rem; }
}

/* --- Motion & delight ---------------------------------------------------
   Everything here is decorative. All of it is switched off further down
   under prefers-reduced-motion so it can never get in a visitor's way.
   ------------------------------------------------------------------------ */

/* Reading-progress bar pinned to the top of the viewport */
.scroll-progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--teal-light), var(--action));
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 60;
    pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: right center; }

/* A plane that crosses the header once, on arrival */
.sky-plane {
    position: absolute;
    top: 22%;
    inset-inline-start: -60px;
    font-size: 1.8rem;
    opacity: 0;
    animation: flyAcross 6s ease-in-out 0.5s 1 forwards;
    pointer-events: none;
}
@keyframes flyAcross {
    0%   { opacity: 0; transform: translate(0, 0) rotate(6deg); }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(101vw, -70px) rotate(-4deg); }
}
html[dir="rtl"] .sky-plane { animation-name: flyAcrossRtl; }
@keyframes flyAcrossRtl {
    0%   { opacity: 0; transform: translate(0, 0) scaleX(-1) rotate(-6deg); }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(101vw, -70px) scaleX(-1) rotate(4deg); }
}

/* The logo breathes gently so the header never feels static */
.logo { animation: gentleFloat 6s ease-in-out infinite; }
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Feature rows lift, and their emoji gives a small kick, on hover */
.features li {
    transition: transform 0.25s ease, background 0.25s ease;
    border-radius: 12px;
    padding: 6px 10px;
}
.features li:hover { transform: translateX(-6px); background: var(--bg); }
html[dir="ltr"] .features li:hover { transform: translateX(6px); }
.features li > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.features li:hover > span[aria-hidden="true"] { transform: scale(1.35) rotate(-10deg); }

/* The discounted price gives a slow heartbeat to draw the eye */
.cta-highlight {
    display: inline-block;
    animation: pricePulse 2.6s ease-in-out infinite;
}
@keyframes pricePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
}

/* Light sweeps across the main buttons on hover */
.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.btn:hover::after { left: 120%; }

/* Photo leans in slightly when pointed at */
.about-photo { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.about-photo:hover {
    transform: scale(1.03) rotate(-1deg);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.22);
}

/* The form card glows softly while it is being filled in */
.form-section { transition: box-shadow 0.4s ease; }
.form-section:focus-within { box-shadow: 0 18px 40px rgba(11, 114, 133, 0.22); }

/* Interest chips settle with a small press */
.checkbox-option { transition: transform 0.18s ease, background 0.2s ease; }
.checkbox-option:hover { transform: translateY(-2px); background: #f4fbfd; }
.checkbox-option:active { transform: translateY(0); }

/* Dotted flight path separating the pitch from the form */
.path-divider {
    height: 34px;
    margin: 10px 0 -6px;
    background-image: radial-gradient(circle, var(--amber-line) 2px, transparent 2px);
    background-size: 18px 18px;
    background-position: center;
    background-repeat: repeat-x;
    opacity: 0.5;
}

/* Optional background-music toggle (mirrors the accessibility launcher) */
.music-toggle {
    position: fixed;
    inset-block-end: 18px;
    inset-inline-end: 18px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: var(--ink-deep);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    padding: 0;
    font-family: inherit;
}
.music-toggle:hover { background: var(--action); }
.music-toggle[hidden] { display: none; }
.music-icon { font-size: 1.5rem; line-height: 1; }

/* Equaliser bars replace the note while a track is playing */
.music-bars { display: none; align-items: flex-end; gap: 3px; height: 20px; }
.music-bars i { display: block; width: 4px; background: #ffffff; border-radius: 2px; height: 6px; }
.music-toggle.is-playing .music-icon { display: none; }
.music-toggle.is-playing .music-bars { display: flex; }
.music-toggle.is-playing .music-bars i:nth-child(1) { animation: eq 0.9s ease-in-out infinite; }
.music-toggle.is-playing .music-bars i:nth-child(2) { animation: eq 0.9s ease-in-out 0.15s infinite; }
.music-toggle.is-playing .music-bars i:nth-child(3) { animation: eq 0.9s ease-in-out 0.3s infinite; }
@keyframes eq {
    0%, 100% { height: 6px; }
    50%      { height: 18px; }
}

/* --- Scroll reveal ------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-pop {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-pop.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: headingBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes headingBounce {
    0%   { transform: scale(0.85) translateY(20px); }
    55%  { transform: scale(1.06) translateY(-6px); }
    75%  { transform: scale(0.98) translateY(2px); }
    100% { transform: scale(1) translateY(0); }
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Nothing may stay invisible if JS or IntersectionObserver is unavailable. */
.no-js .reveal, .no-js .reveal-pop {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-pop {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .btn:hover, .email-cta a:hover, .social-icons a:hover { transform: none; }

    /* Decorative motion is switched off entirely */
    .sky-plane, .scroll-progress { display: none; }
    .logo,
    .cta-highlight,
    .thanks-badge,
    .thanks-plane { animation: none !important; }
    .features li:hover,
    .features li:hover > span[aria-hidden="true"],
    .about-photo:hover,
    .checkbox-option:hover { transform: none; }
    .btn::after { display: none; }
    .about-photo, .features li, .checkbox-option { transition: none; }
    .music-toggle.is-playing .music-bars i { animation: none !important; height: 12px; }
}

/* ==========================================================================
   Form: steps, progress and footer
   The request form grew from six fields to fifteen. These rules break it
   into five named stages, show how far along the visitor is, and keep the
   running total in view on a phone — without touching the palette or the
   type scale already set at the top of this file.
   ========================================================================== */

/* --- Progress ----------------------------------------------------------- */
.form-progress { margin: 0 0 28px; }
.form-progress__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(11, 114, 133, 0.14);
    overflow: hidden;
}
.form-progress__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal-light), var(--action));
    transition: width 0.35s ease;
}
.form-progress__label {
    margin: 8px 0 0;
    font-size: 0.88em;
    color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
    .form-progress__fill { transition: none; }
}

/* --- Steps -------------------------------------------------------------- */
.form-step {
    padding: 0 0 4px;
    margin: 0 0 28px;
    border-bottom: 1px solid rgba(11, 114, 133, 0.15);
}
.form-step:last-of-type { border-bottom: 0; }

.form-step__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    font-weight: bold;
    font-size: 1.08em;
    color: var(--ink-deep);
}
.form-step__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--action);
    color: #ffffff;
    font-size: 0.7em;
    font-variant-numeric: tabular-nums;
}
.form-step__hint {
    margin: 0 0 18px;
    font-size: 0.9em;
    color: var(--muted);
}

/* --- Coupon code --------------------------------------------------------
   Sits directly above the total it changes, so the cause and the effect are
   in the same glance. */
.coupon-row { margin: 0 0 14px; }
.coupon-row__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.92em;
    font-weight: bold;
    color: var(--muted);
}
.coupon-row__line { display: flex; gap: 8px; align-items: stretch; }
.coupon-row__line input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    border: 2px solid var(--amber-line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.coupon-row.is-applied .coupon-row__line input {
    border-color: var(--action);
    background: var(--bg);
    font-weight: bold;
}

.btn-coupon {
    flex: none;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid var(--action);
    border-radius: 12px;
    background: var(--action);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-coupon:hover { background: var(--action-hover); border-color: var(--action-hover); }
.coupon-row.is-applied .btn-coupon {
    background: transparent;
    color: var(--muted);
    border-color: var(--amber-line);
}
.coupon-row.is-applied .btn-coupon:hover { border-color: #b00020; color: #b00020; }

.coupon-feedback {
    margin: 8px 0 0;
    font-size: 0.86em;
    line-height: 1.5;
}
.coupon-feedback[hidden] { display: none; }
/* Same three tones as the field-level feedback above, so a coupon reads
   like every other answer the form gives. */
.coupon-feedback--ok { color: #0a6b3d; font-weight: bold; }
.coupon-feedback--warn { color: #7a4a00; font-weight: bold; }
.coupon-feedback--error { color: #b00020; font-weight: bold; }

.order-total__was { color: var(--muted); font-weight: normal; opacity: 0.8; }
.order-total__was[hidden] { display: none; }

/* --- Footer: total + submit -------------------------------------------- */
.form-footer { margin-top: 28px; }
.form-footer .order-total { margin: 0 0 14px; }
.form-footer .btn { width: 100%; }

/* --- Clear the form ------------------------------------------------------
   Deliberately quieter than the submit button beside it: it sits below,
   narrower, in outline rather than fill. Armed, it turns red — but the
   label changes too, so the state never rests on colour alone. */
.form-actions { display: flex; flex-direction: column; gap: 12px; }

.btn-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    padding: 10px 24px;
    min-height: 44px;
    border: 2px solid var(--amber-line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-reset:hover:not([disabled]) {
    border-color: #b00020;
    color: #b00020;
    background: var(--surface);
}
.btn-reset[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Armed beats hover: the pointer is still on the button after the first
   press, and the hover rule would otherwise mask the change. */
.btn-reset.is-armed,
.btn-reset.is-armed:hover:not([disabled]) {
    border-color: #b00020;
    background: #b00020;
    color: #ffffff;
}
.btn-reset__icon { font-size: 1.05em; line-height: 1; }

/* Per-step clear: the same idea as .btn-reset but deliberately quieter, so
   it never competes with the submit button at the foot of the form. It sits
   under the step heading and only wakes up once the step has something in
   it. */
.btn-step-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 12px;
    min-height: 32px;
    border: 1px solid var(--amber-line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.82em;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-step-reset:hover:not([disabled]) {
    border-color: #b00020;
    color: #b00020;
    background: var(--surface);
}
.btn-step-reset[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-step-reset.is-armed,
.btn-step-reset.is-armed:hover:not([disabled]) {
    border-color: #b00020;
    background: #b00020;
    color: #ffffff;
}
.btn-step-reset__icon { font-size: 1em; line-height: 1; }
.step-nav + .form-reset-note { text-align: center; margin-top: 8px; }

.form-reset-note {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px dashed var(--amber-line);
    color: var(--muted);
    font-size: 0.86em;
    line-height: 1.5;
    text-align: center;
}
.form-reset-note[hidden] { display: none; }

/* --- Trust line under the pay button ------------------------------------ */
.pay-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--teal);
    color: var(--muted);
    font-size: 0.88em;
    line-height: 1.45;
    text-align: center;
}
.pay-trust__icon { font-size: 1.05em; flex-shrink: 0; }

@media (max-width: 700px) {
    /* The total and pay button sit at the end of the form only — they do not
       follow the visitor down the page. */
    .form-footer {
        position: static;
        margin-inline: 0;
        padding: 0;
        background: none;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .form-footer .order-total {
        margin: 0 0 10px;
        padding: 8px 12px;
        border-width: 1px;
    }
    .form-footer .order-total strong { font-size: 1.2em; }
    .pay-trust {
        margin-top: 8px;
        padding: 7px 10px;
        font-size: 0.82em;
    }
}

/* --- Selects: one arrow on every browser -------------------------------- */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--action) 50%),
                      linear-gradient(135deg, var(--action) 50%, transparent 50%);
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    background-position: right 18px center, right 11px center;
    padding-inline-end: 40px;
}
html[dir="rtl"] .form-group select {
    background-position: left 18px center, left 11px center;
}
html.a11y-contrast-dark .form-group select,
html.a11y-contrast-light .form-group select { background-image: none; }

/* ==========================================================================
   Marketing layer — hero, benefit cards, process, offer, FAQ, sticky CTA
   Added on top of the palette above; no new colours are introduced, so the
   WCAG contrast ratios recorded at the top of this file still hold.
   ========================================================================== */

/* --- Type: give Hebrew a real face --------------------------------------
   font-src is 'self' and the site ships no webfont, so instead of falling
   through to Arial we name the good Hebrew UI faces that ship with iOS,
   macOS, Android and Windows. First hit wins; Arial stays as the floor. */
body {
    font-family: 'Assistant', 'Heebo', 'Rubik', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', 'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
    letter-spacing: -0.005em;
}
h1, h2, h3, .btn { letter-spacing: -0.02em; }

/* --- Section eyebrow ----------------------------------------------------- */
.section-eyebrow {
    margin: 0 0 6px;
    font-size: 0.82em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--action);
}

/* --- Hero ---------------------------------------------------------------- */
.hero-sub {
    max-width: 34ch;
    margin: 0 auto 22px;
    font-size: 1.12em;
    line-height: 1.55;
    color: var(--ink-deep);
}

.hero-actions { margin: 0; }
.hero-actions .btn { font-size: 1em; padding: 10px 24px; }


@media (max-width: 600px) {
    .hero-sub { font-size: 1.02em; max-width: 30ch; }
    .hero-actions .btn { width: auto; font-size: 0.96em; padding: 9px 20px; }
}

/* --- Benefit cards ------------------------------------------------------- */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0;
    margin: 18px 0 0;
    list-style: none;
}
.benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border-radius: 16px;
    background: var(--bg);
    border: 1px solid rgba(11, 114, 133, 0.16);
    font-size: 1.02em;
    text-align: start;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(11, 114, 133, 0.14);
}
.benefit__icon { font-size: 1.5em; line-height: 1.1; flex: none; }
.benefit__text { line-height: 1.5; }

@media (max-width: 560px) {
    .benefit-grid { grid-template-columns: 1fr; gap: 10px; }
    .features { padding: 26px 20px; }
}

/* --- How it works -------------------------------------------------------- */
.steps-section { margin: 40px 0; text-align: center; }
.steps-section h2 { color: var(--coral); margin-top: 0; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.step-card {
    margin: 0;
    padding: 24px 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid rgba(11, 114, 133, 0.16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
    text-align: center;
}
.step-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--action);
    color: #ffffff;
    font-size: 0.95em;
    font-weight: bold;
}
.step-card h3 { margin: 0 0 8px; font-size: 1.05em; color: var(--ink-deep); }
.step-card p { margin: 0; font-size: 0.95em; color: var(--muted); line-height: 1.55; }

@media (max-width: 700px) {
    .steps-grid { grid-template-columns: 1fr; gap: 12px; }
    .step-card { display: flex; align-items: flex-start; gap: 14px; text-align: start; padding: 18px; }
    .step-card__num { flex: none; width: 28px; height: 28px; margin: 0; font-size: 0.9em; }
}

/* --- Offer card ---------------------------------------------------------- */
.offer-card {
    margin: 40px 0 10px;
    padding: 30px 26px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 2px solid var(--amber);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.07);
    text-align: center;
}
.offer-card__badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--highlight);
    color: #ffffff;
    font-size: 0.82em;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.offer-card__title { margin: 0 0 6px; color: var(--coral); font-size: 1.5em; }
.offer-card #cta-paragraph { margin: 0 auto 18px; }

.offer-card__list {
    display: inline-block;
    margin: 0 auto 22px;
    padding: 0;
    list-style: none;
    text-align: start;
}
.offer-card__list li {
    position: relative;
    margin: 0 0 8px;
    padding-inline-start: 28px;
    font-size: 1em;
    line-height: 1.5;
}
.offer-card__list li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-weight: bold;
    color: #0a6b3d;
}
.offer-card__action { margin: 0; }
.offer-card__action .btn { width: auto; font-size: 1.02em; padding: 14px 30px; }

@media (max-width: 560px) {
    .offer-card { padding: 24px 18px; }
    .offer-card__title { font-size: 1.28em; }
}

/* --- FAQ ----------------------------------------------------------------
   Built on <details>, so it opens and closes with no JavaScript at all and
   stays operable if a script fails to load. */
.faq-section { margin: 50px 0 10px; }
.faq-section h2 { color: var(--coral); margin-top: 0; }

.faq-item {
    margin: 0 0 10px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(11, 114, 133, 0.18);
    overflow: hidden;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    min-height: 44px;
    font-weight: bold;
    color: var(--ink-deep);
    cursor: pointer;
    list-style: none;
    box-sizing: border-box;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex: none;
    font-size: 1.35em;
    font-weight: bold;
    line-height: 1;
    color: var(--action);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 1px solid rgba(11, 114, 133, 0.14); }
.faq-item summary:hover { background: var(--bg); }
.faq-item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.faq-item p {
    margin: 0;
    padding: 14px 18px 18px;
    color: var(--muted);
    line-height: 1.65;
}
.faq-more { margin: 18px 0 0; text-align: center; font-size: 0.95em; }
.faq-more a { color: var(--action); font-weight: bold; }

/* --- Sticky mobile CTA ---------------------------------------------------
   Phones only. It never covers the form (ui.js hides it once the form is on
   screen) and it leaves the accessibility launcher and music button clear. */
.sticky-cta { display: none; }
.sticky-cta[hidden] { display: none; }

@media (max-width: 700px) {
    .sticky-cta {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 55;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 88px 10px 16px;
        background: var(--ink-deep);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.22);
    }
    html[dir="ltr"] .sticky-cta { padding: 10px 16px 10px 88px; }
    .sticky-cta[hidden] { display: none; }

    .sticky-cta__price {
        display: flex;
        align-items: baseline;
        gap: 6px;
        color: #ffffff;
        font-size: 0.92em;
    }
    .sticky-cta__price s { opacity: 0.7; }
    .sticky-cta__price strong { font-size: 1.28em; }

    .sticky-cta__btn {
        flex: none;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 22px;
        border-radius: var(--radius-pill);
        background: var(--teal);
        color: var(--ink-deep);
        font-weight: bold;
        text-decoration: none;
    }
    .sticky-cta__btn:hover { background: var(--teal-light); }
    .sticky-cta__btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

    /* Give the page room so the bar never sits on top of the footer links. */
    html.has-sticky-cta .footer { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .benefit:hover { transform: none; }
    .benefit { transition: none; }
}


/* --- Repeated call to action between sections ---------------------------
   The offer is made three times down the page: after the introduction,
   in the offer card, and once more after the FAQ. These two are the light
   version — a single button at its natural width, with the price beside it
   so the ask is never separated from what it costs. */
.mid-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 32px 0;
    text-align: center;
}
.mid-cta .btn {
    width: auto;
    font-size: 1em;
    padding: 13px 30px;
}

@media (max-width: 560px) {
    .mid-cta { margin: 26px 0; }
    .mid-cta .btn { font-size: 0.96em; padding: 12px 24px; }
}

/* ==========================================================================
   Let the sea photo through
   The cards between sections were opaque panels sitting on top of the page
   background, which broke the view into a stack of white boxes. They keep
   their borders and their spacing — the shape of a card is what groups the
   content — but the fill is gone, so the background reads as one continuous
   image from the header down to the footer.

   Contrast is unaffected: the .container panel behind these blocks is the
   surface the WCAG ratios at the top of this file were measured against.
   ========================================================================== */

.features,
.benefit,
.step-card,
.faq-item,
.offer-card {
    background: transparent;
    box-shadow: none;
}

/* Borders soften now that they are no longer edging a filled box. */
.benefit { border-color: rgba(11, 114, 133, 0.28); }
.step-card { border-color: rgba(11, 114, 133, 0.28); }
.faq-item { border-color: rgba(11, 114, 133, 0.30); }

/* Hover feedback has to come from somewhere other than a colour change now,
   so the cards lift and their border deepens instead of filling in. */
.benefit:hover {
    border-color: var(--action);
    box-shadow: 0 10px 22px rgba(11, 114, 133, 0.13);
}
.faq-item summary:hover { background: rgba(255, 255, 255, 0.45); }
.faq-item[open] { border-color: var(--action); }

/* The offer card is still the one block that has to stand out, so it keeps
   the amber frame and gains a faint warm wash rather than a solid fill. */
.offer-card {
    background: rgba(255, 253, 249, 0.55);
    border-color: var(--amber-line);
}

/* High-contrast modes flatten everything anyway; make sure nothing here
   reintroduces a translucent layer they cannot control. */
html.a11y-contrast-dark .offer-card,
html.a11y-contrast-light .offer-card,
html.a11y-contrast-dark .faq-item summary:hover,
html.a11y-contrast-light .faq-item summary:hover { background: transparent; }

/* ==========================================================================
   One continuous background
   Every page-level panel is transparent now — the container, the form card,
   the offer card, the thank-you card. Nothing sits on a white sheet, so the
   sea photo runs unbroken from the header to the footer.

   Losing the panels costs contrast, so three things compensate:
     1. the photo is dialled back, which lightens what sits behind the text;
     2. body text is darker and set one weight heavier;
     3. form controls keep a light fill — an input the visitor cannot
        distinguish from the page is not a control, it is a guess.
   ========================================================================== */

body::before { opacity: 0.34; }

.container,
.form-section,
.offer-card,
.thanks-card {
    background: transparent;
    box-shadow: none;
}

/* --- Text: heavier and darker so it holds its own over the photo --------- */
:root {
    --text:  #1c2426;   /* was #2d3436 */
    --muted: #454545;   /* was #5f5f5f */
}

body { font-weight: 500; }

.hero-sub,
.about-section p,
.features li,
.features-note,
.benefit__text,
.step-card p,
.faq-item p,
.offer-card__list li,
.form-step__hint,
.field-note,
.quote p {
    font-weight: 500;
    color: var(--text);
}

.about-section p,
.step-card p,
.faq-item p { color: #2b3336; }

h1, h2, h3 { font-weight: 800; }
.section-eyebrow { font-weight: 800; }
.form-step__eyebrow { font-weight: 800; }
.form-group > label,
.form-fieldset > legend { font-weight: 700; }

/* --- Controls stay readable ---------------------------------------------
   These are the exception to the transparency rule: a text field, a select
   and the destination block need a surface you can see, or the form stops
   looking fillable. They are lightened rather than pure white so they still
   read as part of the same page. */
.form-group input,
.form-group select,
.form-group textarea,
.form-fieldset input[type="date"],
.coupon-row__line input {
    background: rgba(255, 255, 255, 0.88);
}
.dest-block,
.flexible-details {
    background: rgba(255, 255, 255, 0.55);
}

/* Small advisory blocks keep a faint wash so they stay distinguishable
   from ordinary body copy. */
.form-notice,
.pay-trust,
.form-reset-note,
.order-total {
    background: rgba(255, 255, 255, 0.62);
}

/* --- Testimonials --------------------------------------------------------
   Quoted verbatim from customers, with names and platform removed at their
   authors' expense rather than ours: an unattributed quote is weaker social
   proof, so it is presented plainly and never dressed up as a star rating. */
.quotes-section { margin: 44px 0; text-align: center; }
.quotes-section h2 { color: var(--coral); margin-top: 0; }

.quotes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 22px;
    align-items: start;
}
.quote {
    position: relative;
    margin: 0;
    padding: 22px 22px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 114, 133, 0.28);
    text-align: start;
}
.quote::before {
    content: "\201D";
    display: block;
    margin-bottom: -14px;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--teal);
}
.quote p { margin: 0; line-height: 1.7; }

@media (max-width: 700px) {
    .quotes-grid { grid-template-columns: 1fr; gap: 12px; }
    .quote { padding: 18px; }
}

/* High-contrast modes flatten the lot; nothing above may reintroduce a
   translucent layer they cannot override. */
html.a11y-contrast-dark .form-group input,
html.a11y-contrast-light .form-group input,
html.a11y-contrast-dark .form-group select,
html.a11y-contrast-light .form-group select,
html.a11y-contrast-dark .form-group textarea,
html.a11y-contrast-light .form-group textarea,
html.a11y-contrast-dark .dest-block,
html.a11y-contrast-light .dest-block,
html.a11y-contrast-dark .flexible-details,
html.a11y-contrast-light .flexible-details,
html.a11y-contrast-dark .form-notice,
html.a11y-contrast-light .form-notice,
html.a11y-contrast-dark .pay-trust,
html.a11y-contrast-light .pay-trust,
html.a11y-contrast-dark .order-total,
html.a11y-contrast-light .order-total,
html.a11y-contrast-dark .quote,
html.a11y-contrast-light .quote { background: transparent; }

/* --- Accents, re-darkened for a photo background -------------------------
   The original coral, teal and red were measured against the near-opaque
   cream panel. With the panel gone they sit directly on the photograph, and
   over its darker regions they fell to roughly 2.5:1 — under the 3:1 floor
   for large text, let alone the 4.5:1 for body copy. These replacements
   clear 4.5:1 against the darkest area the background reaches, and they
   raise white-on-colour contrast for the buttons at the same time. */
:root {
    --coral:        #8f1d1d;   /* was #c93a3a — 4.6:1 over the photo */
    --action:       #075059;   /* was #0b7285 — 4.7:1, white on it 9.1:1 */
    --action-hover: #04383e;
    --highlight:    #a80000;   /* was #e60000 — 4.1:1, white on it 7.9:1 */
    --focus:        #06232c;
}

/* --- Sticky bar button: white lettering ----------------------------------
   It was dark navy on teal, which read as a passive chip against the navy
   bar rather than a button. White on deep red is the strongest pairing
   available in this palette (7.9:1) and matches the offer badge. */
@media (max-width: 700px) {
    .sticky-cta__btn {
        background: var(--highlight);
        color: #ffffff;
    }
    .sticky-cta__btn:hover { background: #8a0000; color: #ffffff; }
}

/* Every button keeps white lettering, whatever it is nested inside. */
.btn, .btn:hover, .btn:visited, .btn:active { color: #ffffff; }

/* --- Premium planning link: transparent like everything else ------------- */
.email-cta a { background: transparent; }
.email-cta a:hover { background: var(--action); color: #ffffff; }
html.a11y-contrast-dark .email-cta a,
html.a11y-contrast-light .email-cta a { background: transparent; }

/* --- Step navigation -----------------------------------------------------
   The form now opens one step at a time. These rules only style the button;
   the hiding is done in steps.js, so if that script fails every step stays
   visible and the form still works. */
.step-nav {
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.step-nav[hidden] { display: none; }
.step-nav .btn { width: auto; }

/* --- A soft sheet behind anything with words on it -----------------------
   Fully transparent blocks left the copy sitting straight on the photo,
   which is hard to read wherever the image goes busy. This puts a thin
   white veil back — enough to settle the text on a calm surface, light
   enough that the photograph still shows through it as one background
   rather than a stack of panels. */
.container,
.features,
.benefit,
.step-card,
.quote,
.faq-item,
.offer-card,
.form-section,
.thanks-card,
.email-cta a {
    background: rgba(255, 255, 255, 0.42);
}

/* The intro block has no padding or border of its own, so a wash on it drew a
   bare rectangle on top of the container's — two edges in the same spot. It
   now rides on the container sheet alone. */
.about-section { background: transparent; }

/* The offer card stays a shade warmer so it still reads as the one block
   that is selling something. */
.offer-card { background: rgba(255, 253, 249, 0.62); }

/* No sheet on the container at all: the photo runs unbroken from the header
   to the footer, so the page looks the same from top to bottom with no edge
   where the content starts. Cards keep their own light fill, and the legal
   pages keep a sheet because dense prose needs the calmer surface. */
.container { background: transparent; }
.container--terms { background: rgba(255, 255, 255, 0.62); }

.faq-item summary:hover { background: rgba(255, 255, 255, 0.55); }

html.a11y-contrast-dark .container,
html.a11y-contrast-light .container,
html.a11y-contrast-dark .about-section,
html.a11y-contrast-light .about-section,
html.a11y-contrast-dark .features,
html.a11y-contrast-light .features,
html.a11y-contrast-dark .benefit,
html.a11y-contrast-light .benefit,
html.a11y-contrast-dark .step-card,
html.a11y-contrast-light .step-card,
html.a11y-contrast-dark .quote,
html.a11y-contrast-light .quote,
html.a11y-contrast-dark .faq-item,
html.a11y-contrast-light .faq-item,
html.a11y-contrast-dark .offer-card,
html.a11y-contrast-light .offer-card,
html.a11y-contrast-dark .form-section,
html.a11y-contrast-light .form-section,
html.a11y-contrast-dark .thanks-card,
html.a11y-contrast-light .thanks-card { background: transparent; }

/* --- Buttons: white lettering, no exceptions -----------------------------
   Filled buttons carry white text. The rule names the nested spans too,
   because several buttons wrap their label in one and an inherited colour
   was winning there. */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active,
.btn > *,
.btn-coupon,
.btn-coupon > *,
.sticky-cta__btn,
.sticky-cta__btn > * {
    color: #ffffff;
}

/* The one filled button that is not white-on-colour is the applied-coupon
   state, which deliberately goes quiet once the code is accepted. */
.coupon-row.is-applied .btn-coupon,
.coupon-row.is-applied .btn-coupon > * { color: var(--muted); }
.coupon-row.is-applied .btn-coupon:hover,
.coupon-row.is-applied .btn-coupon:hover > * { color: #b00020; }

/* --- Lead-in above the offer ---------------------------------------------
   Two short lines that hand the reader from the testimonials into the
   price. Kept visually quieter than a heading so it reads as a spoken
   aside rather than a new section. */
.offer-lead {
    margin: 34px 0 -6px;
    text-align: center;
    font-size: 1.12em;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink-deep);
}
.offer-lead span { display: block; }
.offer-lead span + span { color: var(--coral); }

@media (max-width: 560px) {
    .offer-lead { font-size: 1.02em; margin-top: 28px; }
}

/* Three testimonials now, so give them a row of their own on wide screens. */
@media (min-width: 701px) {
    .quotes-grid { grid-template-columns: repeat(3, 1fr); }
}