/* Low Shipping in the new design (low_shipping/templates/low_shipping/new_ui/). Replaces
   low_shipping/css/low-shipping-image-generator.css on these pages: the page layout, and the markup the
   unchanged scripts render (file cards, category pickers, job cards, gallery cards, popups), styled with
   the desk.css tokens so light and dark themes both work. */

/* ── Page ─────────────────────────────────────────────────── */
.ls-page.page { display: block; }
.lship .is-hidden { display: none !important; }
.lship .muted { color: var(--text-muted); }
.lship .spacer { flex: 1; }
.lship .nowrap { white-space: nowrap; }

.ls-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ls-bar__stats, .ls-bar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-bar__actions .btn svg { width: 14px; height: 14px; }
.ls-stat { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-label); }
.ls-stat strong { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--text); }
.ls-stat--credit { border-color: var(--primary-soft-border); background: var(--primary-soft); }
.ls-stat--credit strong { color: var(--primary-text); }
.meesho-status { font-weight: var(--fw-semibold); color: var(--text-muted); }
.meesho-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.meesho-status--logged-in { border-color: var(--success); background: var(--success-soft); color: var(--success-text); }
.meesho-status--logged-in .meesho-status__dot { background: var(--success); }
.meesho-status--logged-out { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.meesho-status--logged-out .meesho-status__dot { background: var(--danger); }
.ls-promo { margin: 0 0 14px; }

.ls-grid { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.ls-card { padding: 16px 18px; min-width: 0; }
.ls-card__head { margin-bottom: 12px; }
.ls-card__head h2 { font-size: var(--fs-section); font-weight: var(--fw-bold); color: var(--text); }
.ls-card__head p { margin-top: 2px; font-size: var(--fs-label); }
.ls-card__head--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ls-hint { font-size: var(--fs-small); color: var(--text-muted); margin-top: 8px; }
.ls-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); }
/* "No jobs available yet." / "Upload images to start." — the script writes these as a bare <p class="hint">,
   which read as body copy and, inside the two-column history grid, sat in the left column only. */
.lship .image-grid > .hint, .lship .file-list > .hint { grid-column: 1 / -1; margin: 0; padding: 22px 14px; text-align: center; font-size: var(--fs-label); color: var(--text-muted); }

.ls-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); font-size: var(--fs-label); line-height: 1.5; color: var(--text); }
.ls-note > svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--primary-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-note--warn { border-color: var(--warning); background: var(--warning-soft); }
.ls-note--warn > svg { stroke: var(--warning-text); }

/* ── Meesho login warning (shown by the generator script) ───── */
.meesho-login-warning { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 40px 12px 12px; margin-bottom: 12px; border: 1px solid var(--warning); border-radius: var(--r-md); background: var(--warning-soft); color: var(--text); font-size: var(--fs-label); }
.meesho-login-warning__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--warning-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Only the banner's own title is a block: the steps the script writes contain an inline <strong>
   ("Click <strong>Generate Images</strong> again"), which a bare descendant rule broke onto its own line. */
.meesho-login-warning__body > strong { display: block; font-size: var(--fs-body); color: var(--warning-text); margin-bottom: 2px; }
.meesho-login-warning__body p { line-height: 1.45; }
.meesho-login-warning__steps { margin: 6px 0 0 18px; line-height: 1.6; }
.meesho-login-warning__steps a { color: var(--primary-text); font-weight: var(--fw-semibold); }
.meesho-login-warning__close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.meesho-login-warning__close:hover { background: var(--surface); color: var(--text); }

/* ── Upload ───────────────────────────────────────────────── */
.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 16px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.upload:hover, .upload.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.upload input[type="file"] { display: none; }
.upload__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); }
.upload__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.upload__title { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--text); }
.upload__title u { color: var(--primary-text); text-underline-offset: 3px; }
.upload__hint { font-size: var(--fs-small); color: var(--text-faint); }
.upload--disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }
.is-processing .upload, .is-processing .file-card__actions, .is-processing .btn--text { opacity: .55; pointer-events: none; }

/* ── Selected files (rendered by the generator script) ─────── */
.ls-selection { margin-top: 14px; }
.file-list { display: flex; flex-direction: column; gap: 10px; }
.file-card { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); }
.file-card__preview { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; overflow: hidden; display: grid; place-items: center; }
.file-card__preview img { width: 100%; height: 100%; object-fit: cover; }
.file-card__body { flex: 1; min-width: 0; }
.file-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.file-card__name { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lship .btn--text { height: auto; padding: 2px 8px; border: 0; border-radius: 10px; background: none; color: var(--danger-text); font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.lship .btn--text:hover { background: var(--danger-soft); color: var(--danger-text); }
.category-select-wrapper { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.category-select__label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.file-card__error { font-size: var(--fs-small); color: var(--danger-text); font-weight: var(--fw-semibold); }
.ls-selection__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Select2 category picker (its dropdown is attached to <body>) */
.select2-container--default .select2-selection--multiple { min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--input-bg); padding: 2px 6px; }
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.select2-container--default .select2-selection--multiple.is-invalid { border-color: var(--danger); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top: 4px; border: 1px solid var(--primary-soft-border); border-radius: 12px; background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-label); font-weight: var(--fw-semibold); padding: 1px 8px 1px 22px; position: relative; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--primary-text); padding: 0 3px; }
.select2-container--default .select2-search--inline .select2-search__field { color: var(--text); font-family: var(--font); font-size: var(--fs-body); margin-top: 6px; }
.select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--text-faint); }
.select2-dropdown { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); overflow: hidden; box-shadow: 0 18px 36px -18px rgba(0,0,0,.35); z-index: 1070; }
.select2-container--default .select2-results__option { padding: 7px 10px; font-size: var(--fs-body); }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--primary-soft); color: var(--primary-text); }
.select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option--selected { background: var(--surface-alt); color: var(--text-muted); }
.select2-results__message { color: var(--text-muted); }
.select2-option__title { font-weight: var(--fw-semibold); }
.select2-option__subtitle { font-size: var(--fs-small); color: var(--text-muted); margin-top: 1px; }

/* ── Buttons the scripts render ───────────────────────────── */
.lship .credit-btn, .ls-modal .credit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 15px; border: 1px solid transparent; background: var(--grad); color: var(--on-primary); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; }
.lship .credit-btn:hover { background: var(--grad-hover); color: var(--on-primary); }
.lship .credit-btn.btn--ghost { background: var(--surface); border-color: var(--border-strong); color: var(--primary-text); }
.lship .credit-btn.btn--ghost:hover { background: var(--primary-soft); border-color: var(--primary-soft-border); }
.lship .credit-btn.btn--small { height: 28px; padding: 0 11px; border-radius: 14px; }
.lship .credit-btn:disabled { opacity: .55; cursor: not-allowed; }
.retry-job-btn { color: var(--danger-text) !important; border-color: var(--danger) !important; }
.retry-job-btn:hover { background: var(--danger-soft) !important; }
.retry-job-btn.is-loading { opacity: .7; pointer-events: none; }

/* ── History (job cards) ──────────────────────────────────── */
.image-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Both grids count their columns from the width of the card they sit in, not the viewport: History is a
   7fr column beside Create on a desktop and full width once the page stacks, so a viewport breakpoint
   would guess wrong on exactly the sizes in between. Browsers without container queries keep the default. */
.ls-history, .ls-gallery { container-type: inline-size; }
.image-grid--history, .image-grid--history.image-grid--jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 1100px; overflow-y: auto; padding-right: 2px; }
@container (max-width: 520px) { .image-grid--history, .image-grid--history.image-grid--jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .image-grid--history, .image-grid--history.image-grid--jobs { grid-template-columns: minmax(0, 1fr); } }
.job-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.job-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.job-card__header > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* Narrow cards (three to a row on a laptop): the timestamp and the button stop fighting over one line. */
@container (max-width: 750px) {
  .job-card__header { flex-direction: column; gap: 6px; }
  .job-card__header > div { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
}
.job-card__meta { font-size: var(--fs-small); color: var(--text-muted); }
.job-type-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9px; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; border: 1px solid; }
.job-type-badge--web { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.job-type-badge--desk { background: var(--accent-soft); border-color: var(--accent); color: var(--warning-text); }
.progress-track { height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
/* pages.css has a fixed page-top .progress-bar; the job card one stays inside its track */
.progress-track .progress-bar { position: static; z-index: auto; height: 100%; background: var(--grad); background-size: 200% 100%; animation: lsProgress 1.4s linear infinite; }
@keyframes lsProgress { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.job-card__grid { display: grid; gap: 8px; }
.job-card__item { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); color: var(--text); text-decoration: none; transition: border-color .15s; }
a.job-card__item:hover { border-color: var(--primary); }
.job-card__preview { aspect-ratio: 1 / 1; max-height: 220px; width: 100%; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; }
.job-card__preview img { max-width: 100% !important; max-height: 100%; object-fit: contain; }
.job-card__preview--skeleton { background: linear-gradient(110deg, var(--surface-alt) 30%, var(--surface) 50%, var(--surface-alt) 70%); background-size: 200% 100%; animation: lsProgress 1.2s ease-in-out infinite; }
.job-card__preview--failed, .job-card__preview--no-match { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; text-align: center; background: var(--surface); }
.job-card__preview--failed { background: var(--danger-soft); border-color: var(--danger); }
.job-card__failed-title { font-weight: var(--fw-bold); color: var(--danger-text); }
.job-card__retry-message { font-size: var(--fs-small); color: var(--text-muted); }
.job-card__retry-message.is-error { color: var(--danger-text); }
.job-card__retry-message.is-warning { color: var(--warning-text); }
.job-card__no-match-icon { font-size: 22px; line-height: 1; }
.job-card__no-match-title { font-weight: var(--fw-bold); color: var(--text); }
.job-card__no-match-message { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; }
.job-card__no-match-credits, .no-match-banner__credits { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--success-text); }
.job-card__category { font-size: var(--fs-label); color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.job-card__category strong { color: var(--text); font-weight: var(--fw-semibold); }
.job-card__charges { display: flex; flex-wrap: wrap; gap: 4px; }
.job-card__charge { display: inline-flex; padding: 1px 8px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-small); color: var(--text); }
.job-card__charge:last-child { border-color: var(--success); background: var(--success-soft); color: var(--success-text); font-weight: var(--fw-semibold); }
.job-card__status { font-size: var(--fs-small); color: var(--text-muted); }

/* ── Gallery ──────────────────────────────────────────────── */
/* The results of one generation fill the card instead of leaving a ragged gap on the right. */
#galleryGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container (max-width: 1200px) { #galleryGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 900px) { #galleryGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 620px) { #galleryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 300px) { #galleryGrid { grid-template-columns: minmax(0, 1fr); } }
.ls-price-summary { flex-direction: column; }
.gallery-price-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gallery-savings-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.gallery-savings-label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-muted); letter-spacing: .03em; }
.gallery-savings-input { width: 110px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 10px; background: var(--input-bg); color: var(--text); font: inherit; }
.gallery-savings-result { font-weight: var(--fw-bold); color: var(--success-text); }
.image-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); animation: lsFadeUp .35s ease both; }
@keyframes lsFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.image-card__preview { aspect-ratio: 1 / 1; border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; }
.image-card__preview img { max-width: 100% !important; max-height: 100%; object-fit: contain; }
.image-card__preview:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.image-card__category { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text); }
.image-card__meta { display: flex; flex-direction: column; gap: 3px; }
.image-card__shipping { align-self: flex-start; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--success); background: var(--success-soft); color: var(--success-text); font-size: var(--fs-small); font-weight: var(--fw-bold); }
/* Two cards to a row on a phone: the shipping pill keeps to one line instead of breaking in half. */
@container (max-width: 620px) { .image-card__shipping { font-size: var(--fs-caption); } }
.image-card__note { font-size: var(--fs-small); color: var(--text-muted); }
.image-card__actions { display: flex; gap: 6px; margin-top: 2px; }
.no-match-banner { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 520px; margin: 0 auto; }
.no-match-banner__icon { font-size: 28px; }
.no-match-banner__title { font-size: var(--fs-section); font-weight: var(--fw-bold); color: var(--text); }
.no-match-banner__message, .no-match-banner__tip { color: var(--text-muted); line-height: 1.5; }
.no-match-banner__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lg-backdrop.in { opacity: .92; }

/* ── Credit history ───────────────────────────────────────── */
.ls-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: -4px -2px 14px; overflow-x: auto; }
.credit-tab { height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.credit-tab:hover { color: var(--text); }
.credit-tab.is-active { color: var(--primary-text); border-bottom-color: var(--primary); }
.ls-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ls-filter__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.ls-filter__field--narrow { flex: 0 1 140px; }
.lship .table td { height: auto; padding-top: 8px; padding-bottom: 8px; }
.lship .table td.ls-wrap { white-space: normal; min-width: 160px; max-width: 280px; text-align: left; }
.ls-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: inline-block; }
.ls-totals { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ls-plus { color: var(--success-text); }
.ls-minus { color: var(--danger-text); }
.daterangepicker { font-family: var(--font); }

/* ── Popups (the scripts toggle .is-open by id) ───────────── */
.ls-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ls-modal.is-open { opacity: 1; pointer-events: auto; }
.ls-modal__backdrop { position: absolute; inset: 0; background: rgba(10,29,41,.5); }
.ls-modal__card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
.ls-modal__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ls-modal__close:hover { background: var(--primary-soft); color: var(--primary-text); }
.ls-modal__head h2 { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.25; }
.ls-modal__head p { font-size: var(--fs-label); line-height: 1.5; color: var(--text-muted); }
.ls-modal--warn .ls-modal__card { border-color: var(--warning); }
.ls-modal__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ls-form { display: flex; flex-direction: column; gap: 10px; }
.ls-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ls-steps li { counter-increment: step; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; }
.ls-steps li::before { content: counter(step); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-label); font-weight: var(--fw-bold); }
.ls-steps strong { font-weight: var(--fw-semibold); }
.ls-steps span { font-size: var(--fs-label); color: var(--text-muted); }
.credit-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.credit-pill { min-width: 56px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.credit-pill:hover { border-color: var(--primary); color: var(--primary-text); }
.credit-pill.is-active { background: var(--grad); border-color: transparent; color: var(--on-primary); }
.input-error { color: var(--danger-text); font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.price-grid { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.price-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--grid); font-size: var(--fs-body); }
.price-row:last-child { border-bottom: 0; }
.price-row span:first-child { color: var(--text-muted); }
.price-row--total { background: var(--surface-alt); font-weight: var(--fw-bold); }
.price-row--total span:first-child { color: var(--text); }

/* ── Signed-out visitors ──────────────────────────────────── */
/* The same hero as the home page, the public tool pages and the seller landings: lit grid behind
   it, eyebrow pill, fluid headline, the same room around it. The values are repeated here rather
   than shared, the way every other hero in this design repeats them. */
/* The media column stays the narrower of the two, unlike the tool pages' .th: Instagram's embed
   renders itself at its own 540px cap, so a column wider than that leaves white space beside the
   reel rather than a wider reel. */
.ls-visitor__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 3.2vw, 46px); align-items: start; }
/* Room on the two columns rather than on the band, as tool.css puts it on .th__copy and .dropcard.
   The backdrop is excluded: it is positioned from the top of the document, and a margin would
   push it off the header it has to reach. Unlike the other heroes the two columns start together
   instead of centring on each other - the reel is several times the height of the copy, and
   centring would leave the words stranded halfway down the page. */
.ls-visitor__hero > *:not(.ph__bg) { margin-block: clamp(20px, 2.8vw, 38px); }
.ls-visitor__hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: 999px; padding: 5px 13px; }
.ls-visitor__hero h1 { font-size: clamp(29px, 3.3vw, 40px); font-weight: var(--fw-bold); letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 10px; text-wrap: balance; }
.ls-visitor__lead { color: var(--text-muted); font-size: 17px; line-height: 1.55; max-width: 46ch; margin-bottom: 14px; }
.ls-visitor__points { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ls-visitor__points li { display: flex; gap: 8px; align-items: center; }
.ls-visitor__points svg { width: 16px; height: 16px; fill: none; stroke: var(--success); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Lifted off the grid like the tool pages' .dropcard, so the reel is the subject of the hero */
.ls-visitor__media { padding: 14px; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 84px -48px rgba(3,61,99,.5), 0 6px 16px -10px rgba(10,29,41,.18); }
/* Its title runs as a bar across the top, like .dropcard__bar on the tool pages */
.ls-visitor__media h2 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: 1.4; margin: -14px -14px 12px; padding: 12px 15px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.ls-visitor__media .instagram-media { max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; display: block; }

@media (max-width: 1180px) { .ls-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .ls-visitor__hero { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .image-grid--history, .image-grid--history.image-grid--jobs { grid-template-columns: 1fr; }
  .ls-selection__actions .btn { flex: 1; }
  .ls-modal { padding: 0; align-items: flex-end; }
  .ls-modal__card { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}