/* ==========================================================================
   MERIDIAN · V2 theme · cool porcelain storefront
   Namespace: md-*  ·  Custom properties: --md-*
   Image rule: every photo renders at width:100% / height:auto from its real
   width/height attributes — never cropped, never stretched, same shape on
   every screen.
   ========================================================================== */

:root {
  --md-bg: #F4F6F8;
  --md-surface: #FFFFFF;
  --md-panel: #EAF0F5;
  --md-ink: #0B1B2B;
  --md-ink-2: #344556;
  --md-ink-3: #5F7183;
  --md-line: #DCE4EB;
  --md-brand: #1F5EFF;
  --md-brand-ink: #1440B8;
  --md-brand-wash: #E8EFFF;
  --md-brand-glow: #8AA9FF;
  --md-go: #22C55E;
  --md-go-hover: #1DB054;
  --md-go-ink: #052812;
  --md-night: #0B1B2B;
  --md-night-2: #132A40;
  --md-night-line: rgba(255, 255, 255, .12);
  --md-red: #D9432F;
  --md-gold: #F2A516;
  --md-r-xl: 28px;
  --md-r-l: 20px;
  --md-r: 14px;
  --md-r-s: 10px;
  --md-max: 1180px;
  --md-gut: 24px;
  --md-lift: 0 1px 2px rgba(11, 27, 43, .05), 0 10px 30px -12px rgba(11, 27, 43, .14);
  --md-lift-hi: 0 2px 4px rgba(11, 27, 43, .06), 0 24px 48px -18px rgba(11, 27, 43, .28);
  --md-font-d: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --md-font-b: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --md-bar-h: 66px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--md-bar-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--md-bg); color: var(--md-ink-2); font: 400 17px/1.65 var(--md-font-b); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--md-brand-ink); }
h1, h2, h3 { font-family: var(--md-font-d); color: var(--md-ink); letter-spacing: -.02em; margin: 0; overflow-wrap: break-word; }
h3 { font-size: 1.12rem; line-height: 1.35; font-weight: 700; }
p { margin: 0; }
strong, b { color: var(--md-ink); font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--md-brand); outline-offset: 3px; border-radius: 6px; }
.md-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.md-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--md-night); color: #fff; padding: 10px 16px; border-radius: var(--md-r-s); }
.md-skip:focus { top: 12px; }
.md-wrap { width: 100%; max-width: var(--md-max); margin: 0 auto; padding: 0 var(--md-gut); }
.ico { flex: none; }

/* Photos: true aspect ratio everywhere */
.md-pic { width: 100%; height: auto; }
.md-photo { position: relative; border-radius: var(--md-r-l); overflow: hidden; background: var(--md-surface); box-shadow: var(--md-lift); }
.md-photo figcaption { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; font-size: .9rem; color: var(--md-ink-3); border-top: 1px solid var(--md-line); }
.md-photo figcaption .ico { margin-top: 3px; color: var(--md-brand); }

/* ---------- Buttons ---------- */
.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1.2 var(--md-font-b); text-decoration: none; text-align: center; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s, border-color .18s; }
.md-btn:hover { transform: translateY(-1px); }
.md-btn--go { background: var(--md-go); color: var(--md-go-ink); box-shadow: 0 10px 24px -10px rgba(34, 197, 94, .75), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.md-btn--go:hover { background: var(--md-go-hover); }
.md-btn--dark { background: var(--md-night); color: #fff; }
.md-btn--dark:hover { background: var(--md-night-2); }
.md-btn--line { background: transparent; color: var(--md-ink); border-color: var(--md-line); }
.md-btn--line:hover { border-color: var(--md-ink); }
.md-btn--s { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.md-btn--l { min-height: 56px; padding: 14px 28px; font-size: 1.06rem; }
.md-more { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; font-weight: 700; color: var(--md-ink); text-decoration: none; border-bottom: 2px solid var(--md-line); }
.md-more:hover { border-bottom-color: var(--md-brand); }

/* ---------- Strip + header ---------- */
.md-strip { background: var(--md-night); color: #DCE6F2; font-size: .82rem; font-weight: 500; }
.md-strip-in { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; padding-top: 8px; padding-bottom: 8px; }
.md-strip span { display: inline-flex; align-items: center; gap: 7px; }
.md-strip .ico { color: var(--md-go); }

.md-bar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--md-line); }
.md-bar-in { display: flex; align-items: center; gap: 28px; min-height: var(--md-bar-h); }
.md-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--md-ink); text-decoration: none; font: 800 1.12rem/1 var(--md-font-d); letter-spacing: -.02em; white-space: nowrap; }
.md-mark { flex: none; }
.md-nav { display: flex; gap: 30px; margin-left: auto; }
.md-nav a { color: var(--md-ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.md-nav a:hover, .md-nav a.is-here { color: var(--md-ink); border-bottom-color: var(--md-brand); }
.md-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--md-line); border-radius: 12px; background: var(--md-surface); color: var(--md-ink); cursor: pointer; align-items: center; justify-content: center; }
.md-burger-close { display: none; }
.md-burger[aria-expanded="true"] .md-burger-open { display: none; }
.md-burger[aria-expanded="true"] .md-burger-close { display: block; }
.md-sheet { border-top: 1px solid var(--md-line); background: var(--md-surface); box-shadow: 0 18px 30px -18px rgba(11, 27, 43, .35); }
.md-sheet-in { display: grid; padding-top: 10px; padding-bottom: 18px; }
.md-sheet-in a:not(.md-btn) { padding: 14px 4px; color: var(--md-ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--md-line); }
.md-sheet-in .md-btn { margin-top: 16px; }

/* ---------- Hero ---------- */
.md-hero { padding: 56px 0 40px; background: radial-gradient(1100px 520px at 85% 0%, var(--md-brand-wash), transparent 65%), var(--md-bg); }
.md-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.md-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.md-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px; background: var(--md-surface); border: 1px solid var(--md-line); box-shadow: var(--md-lift); color: var(--md-ink); font-size: .9rem; font-weight: 700; }
.md-hero-eyebrow .ico { flex: none; color: var(--md-brand); }
.md-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; }
.md-hero-lead { font-size: 1.14rem; color: var(--md-ink-2); max-width: 36em; }
.md-hero-buy { display: grid; gap: 14px; width: 100%; }
.md-hero-price { font-size: .95rem; color: var(--md-ink-3); }
.md-hero-price b { font: 800 1.45rem/1 var(--md-font-d); color: var(--md-ink); letter-spacing: -.02em; }
.md-hero-btns { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.md-hero-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .92rem; color: var(--md-ink-3); }
.md-hero-list { display: grid; gap: 10px; }
.md-hero-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--md-ink); }
.md-hero-list .ico { color: var(--md-go-hover); margin-top: 3px; }

.md-stage { display: grid; gap: 14px; }
.md-stage-frame { padding: 14px; border-radius: var(--md-r-xl); background: linear-gradient(160deg, var(--md-surface), var(--md-brand-wash)); border: 1px solid var(--md-line); box-shadow: var(--md-lift-hi); }
.md-stage-frame .md-pic { border-radius: calc(var(--md-r-xl) - 10px); }
.md-stage-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.md-stage-chips li { padding: 7px 14px; border-radius: 999px; background: var(--md-surface); border: 1px solid var(--md-line); font-size: .85rem; font-weight: 600; color: var(--md-ink); }

/* Stars (shared markup from _core) */
.stars { display: inline-flex; gap: 2px; color: var(--md-gold); }
.star { display: inline-flex; }
.star--off { color: #C9D3DD; }

/* ---------- Stats ---------- */
.md-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-l); box-shadow: var(--md-lift); }
.md-stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: 22px 24px; }
.md-stat + .md-stat { border-left: 1px solid var(--md-line); }
.md-stat dd { margin: 0; font: 800 1.6rem/1.1 var(--md-font-d); color: var(--md-ink); letter-spacing: -.02em; }
.md-stat dt { font-size: .9rem; color: var(--md-ink-3); line-height: 1.4; }

/* ---------- Section scaffolding ---------- */
.md-sec { padding: 96px 0; }
.md-sec--panel { background: var(--md-panel); }
.md-sec--night { background: var(--md-night); color: #C3D0DE; }
.md-sec--night h2, .md-sec--night h3, .md-sec--night strong, .md-sec--night b { color: #fff; }
.md-sec--deal { background: linear-gradient(180deg, var(--md-bg), var(--md-brand-wash)); }
.md-head { display: grid; gap: 12px; margin-bottom: 44px; max-width: 46rem; }
.md-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.md-head h2 { font-size: clamp(1.75rem, 3.1vw, 2.55rem); line-height: 1.15; font-weight: 800; }
.md-head-sub { font-size: 1.08rem; color: var(--md-ink-3); }
.md-sec--night .md-head-sub { color: #9FB2C6; }
.md-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--md-brand); }
.md-tag::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.md-sec--night .md-tag { color: var(--md-brand-glow); }
.md-tag--soft { color: var(--md-ink-3); }
.md-tag--glow { color: var(--md-go); }
.md-text { display: grid; gap: 16px; }
.md-fine { margin-top: 22px; font-size: .9rem; color: var(--md-ink-3); text-align: center; max-width: 52rem; margin-left: auto; margin-right: auto; }

/* ---------- Overview split ---------- */
.md-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.md-split .md-head { margin-bottom: 24px; }
.md-ticks { display: grid; gap: 10px; margin-top: 24px; }
.md-ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r); font-weight: 500; color: var(--md-ink); }
.md-ticks .ico { color: var(--md-brand); margin-top: 4px; }

/* ---------- Mechanism (night) ---------- */
.md-mech-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.md-photo--sticky { position: sticky; top: calc(var(--md-bar-h) + 24px); background: var(--md-night-2); box-shadow: none; border: 1px solid var(--md-night-line); }
.md-mech-list { display: grid; gap: 16px; }
.md-mech { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 26px; border-radius: var(--md-r-l); background: var(--md-night-2); border: 1px solid var(--md-night-line); }
.md-mech-n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--md-brand); color: #fff; font: 800 1.05rem/1 var(--md-font-d); }
.md-mech h3 { margin-bottom: 8px; font-size: 1.18rem; }
.md-mech p { font-size: 1rem; }

/* ---------- Spotlight stories ---------- */
.md-stories { display: grid; gap: 72px; }
.md-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.md-story--flip .md-photo { order: 2; }
.md-story-copy { display: grid; gap: 14px; }
.md-story-copy h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.25; font-weight: 800; }
.md-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--md-r); background: var(--md-surface); border-left: 4px solid var(--md-brand); font-size: .95rem; color: var(--md-ink); }
.md-note .ico { color: var(--md-brand); margin-top: 3px; }

/* ---------- Steps ---------- */
.md-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: md-step; }
.md-step { display: flex; flex-direction: column; background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-l); overflow: hidden; box-shadow: var(--md-lift); }
.md-step-pic { border-bottom: 1px solid var(--md-line); }
.md-step-body { display: grid; gap: 8px; padding: 20px; }
.md-step-n { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--md-brand-wash); color: var(--md-brand-ink); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.md-step p { font-size: .96rem; }

/* ---------- Specs ---------- */
.md-specs-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.md-specs-wrap--solo { grid-template-columns: minmax(0, 1fr); }
.md-specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-l); overflow: hidden; }
.md-specs-wrap:not(.md-specs-wrap--solo) .md-specs { grid-template-columns: minmax(0, 1fr); }
.md-spec { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--md-line); }
.md-spec dt { font-weight: 700; color: var(--md-ink); font-size: .95rem; }
.md-spec dd { margin: 0; font-size: .96rem; }
.md-specs-wrap--solo .md-spec:nth-child(odd) { border-right: 1px solid var(--md-line); }

/* ---------- In the box ---------- */
.md-kit-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.md-kit-wrap--solo { grid-template-columns: minmax(0, 1fr); }
.md-kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.md-kit-wrap--solo .md-kits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-kit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 20px; background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-l); }
.md-kit-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--md-brand-wash); color: var(--md-brand); }
.md-kit-tag { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--md-ink-3); margin-bottom: 2px; }
.md-kit h3 { font-size: 1.02rem; margin-bottom: 4px; }
.md-kit p:last-child { font-size: .94rem; }

/* ---------- Comparison ---------- */
.md-table-scroll { overflow-x: auto; border-radius: var(--md-r-l); border: 1px solid var(--md-line); background: var(--md-surface); box-shadow: var(--md-lift); -webkit-overflow-scrolling: touch; }
.md-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.md-table th, .md-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--md-line); }
.md-table thead th { font: 700 .92rem/1.3 var(--md-font-d); color: var(--md-ink); background: var(--md-bg); }
.md-table tbody tr:last-child > * { border-bottom: 0; }
.md-table tbody th { font-weight: 700; color: var(--md-ink); width: 26%; }
.md-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--md-surface); box-shadow: 1px 0 0 var(--md-line); }
.md-table thead th:first-child { background: var(--md-bg); }
.md-table .md-own { background: var(--md-brand-wash); }
.md-table thead .md-own { background: var(--md-brand); color: #fff; }
.md-table td small { display: block; margin-top: 4px; color: var(--md-ink-3); font-size: .84rem; line-height: 1.4; }
.md-c { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.md-c--yes { color: #15803D; }
.md-c--no { color: var(--md-red); }
.md-c--mid { color: #92400E; }
.md-c--na { color: var(--md-ink-2); font-weight: 600; }
.md-swipe { display: none; margin-top: 10px; font-size: .85rem; color: var(--md-ink-3); align-items: center; gap: 6px; justify-content: center; }

/* ---------- Fit ---------- */
.md-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.md-fit-card { padding: 30px; border-radius: var(--md-r-l); background: var(--md-surface); border: 1px solid var(--md-line); border-top: 5px solid var(--md-go); }
.md-fit-card--no { border-top-color: var(--md-red); }
.md-fit-card h3 { margin-bottom: 18px; font-size: 1.2rem; }
.md-fit-card ul { display: grid; gap: 14px; }
.md-fit-card li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; }
.md-fit-card li .ico { flex: none; margin-top: 4px; color: #15803D; }
.md-fit-card--no li .ico { color: var(--md-red); }

/* ---------- Reviews ---------- */
.md-score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; max-width: 54rem; margin: -12px auto 36px; padding: 20px 26px; border-radius: var(--md-r-l); background: var(--md-surface); border: 1px solid var(--md-line); box-shadow: var(--md-lift); }
.md-score-n { font: 800 2.9rem/1 var(--md-font-d); color: var(--md-ink); letter-spacing: -.03em; }
.md-score-n small { font-size: 1.1rem; color: var(--md-ink-3); }
.md-score-txt { flex: 1 1 220px; display: grid; gap: 4px; font-size: .92rem; color: var(--md-ink-3); }
.md-reviews { columns: 3 300px; column-gap: 20px; }
.md-review { break-inside: avoid; display: grid; gap: 12px; margin-bottom: 20px; padding: 24px; background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-l); }
.md-review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.md-review-ok { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: #15803D; }
.md-review h3 { font-size: 1.06rem; }
.md-review p { font-size: .97rem; }
.md-review-who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--md-line); }
.md-review-who b { display: block; font-size: .95rem; }
.md-review-who small { display: block; font-size: .84rem; color: var(--md-ink-3); }
.md-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--md-brand-wash); color: var(--md-brand-ink); font: 800 .9rem/1 var(--md-font-d); }

/* ---------- Packages ---------- */
.md-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.md-pack { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; background: var(--md-surface); border: 2px solid var(--md-line); border-radius: var(--md-r-xl); cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.md-pack:hover { border-color: #B9C7D6; }
.md-pack.is-picked { border-color: var(--md-brand); box-shadow: 0 0 0 4px var(--md-brand-wash), var(--md-lift-hi); }
.md-pack--hot { transform: translateY(-6px); }
.md-pack-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--md-night); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.md-pack--hot .md-pack-flag { background: var(--md-brand); }
.md-pack-pic { position: relative; border-radius: var(--md-r); overflow: hidden; border: 1px solid var(--md-line); }
.md-pack-qty { position: absolute; right: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px; background: var(--md-night); color: #fff; font: 800 .95rem/1.2 var(--md-font-d); }
.md-pack-info { display: grid; gap: 4px; }
.md-pack-info h3 { font-size: 1.2rem; }
.md-pack-tag { font-size: .9rem; color: var(--md-ink-3); }
.md-pack-price { margin-top: 6px; }
.md-pack-price b { font: 800 2.1rem/1 var(--md-font-d); letter-spacing: -.03em; }
.md-pack-price span { font-size: .9rem; color: var(--md-ink-3); }
.md-pack-total { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9rem; color: var(--md-ink-3); }
.md-save { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #DCFCE7; color: #166534; font-weight: 800; font-size: .82rem; }
.md-pack-list { display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--md-line); }
.md-pack-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .93rem; }
.md-pack-list .ico { color: #15803D; margin-top: 4px; }
.md-pack-go { margin-top: auto; width: 100%; padding-left: 14px; padding-right: 14px; font-size: .92rem; }

.md-pick { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; max-width: 1080px; margin: 30px auto 0; padding: 18px 22px; border-radius: var(--md-r-l); background: var(--md-night); color: #C3D0DE; }
.md-pick-txt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.md-pick-txt > span:first-child { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--md-brand-glow); }
.md-pick-txt b { color: #fff; }
.md-pick-sum { display: inline-flex; align-items: center; gap: 8px; }
.md-pick-sum > b { font: 800 1.3rem/1 var(--md-font-d); }
.md-pick-sum s { color: #8197AD; }
.md-assure { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; font-size: .92rem; font-weight: 600; color: var(--md-ink); }
.md-assure li { display: inline-flex; align-items: center; gap: 7px; }
.md-assure .ico { color: #15803D; }

/* ---------- FAQ ---------- */
.md-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.md-faq-side { position: sticky; top: calc(var(--md-bar-h) + 24px); }
.md-faq-side .md-head { margin-bottom: 24px; }
.md-faq-box { display: grid; gap: 12px; justify-items: start; padding: 22px; border-radius: var(--md-r-l); background: var(--md-surface); border: 1px solid var(--md-line); font-size: .95rem; }
.md-help { display: flex; gap: 8px; align-items: center; color: var(--md-ink-3); overflow-wrap: anywhere; }
.md-qas { display: grid; gap: 12px; }
.md-qa { background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r); }
.md-qa[open] { border-color: #B9C7D6; box-shadow: var(--md-lift); }
.md-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.md-qa summary::-webkit-details-marker { display: none; }
.md-qa summary h3 { font-size: 1.02rem; }
.md-qa-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--md-brand-wash); color: var(--md-brand); transition: transform .2s; }
.md-qa[open] .md-qa-ico { transform: rotate(45deg); }
.md-qa-a { padding: 0 20px 20px; font-size: .97rem; }

/* ---------- Closing band ---------- */
.md-closer { padding: 88px 0; background: radial-gradient(800px 400px at 15% 0%, rgba(31, 94, 255, .35), transparent 60%), var(--md-night); color: #C3D0DE; }
.md-closer-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.md-closer--solo .md-closer-in { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.md-closer-copy { display: grid; gap: 16px; justify-items: start; max-width: 40rem; }
.md-closer--solo .md-closer-copy { justify-items: center; }
.md-closer h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.15; font-weight: 800; }
.md-closer strong { color: #fff; }
.md-closer .md-btn { margin-top: 8px; }

/* ---------- Footer ---------- */
.md-foot { padding: 64px 0 120px; background: #06111D; color: #93A6BA; font-size: .92rem; }
.md-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--md-night-line); }
.md-foot .md-logo { color: #fff; margin-bottom: 14px; }
.md-foot-h { margin-bottom: 12px; color: #fff; font-weight: 700; }
.md-foot-col ul { display: grid; gap: 8px; }
.md-foot a { color: #C3D0DE; text-decoration: none; }
.md-foot a:hover { color: #fff; text-decoration: underline; }
.md-foot strong { color: #fff; }
.md-updated { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .85rem; color: #C3D0DE; }
.md-legal { display: grid; gap: 12px; padding-top: 28px; font-size: .84rem; line-height: 1.6; }

/* ---------- Offer dock ---------- */
.md-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 27, 43, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--md-night-line); transform: translateY(110%); transition: transform .3s ease; }
.md-dock.is-on { transform: none; }
.md-dock-in { display: flex; align-items: center; gap: 14px; }
.md-dock-pct { flex: none; display: grid; place-items: center; min-width: 58px; height: 44px; padding: 0 8px; border-radius: 12px; background: var(--md-brand); color: #fff; font: 800 1.05rem/1 var(--md-font-d); }
.md-dock-txt { flex: 1 1 auto; min-width: 0; display: grid; color: #fff; line-height: 1.3; }
.md-dock-txt b { color: #fff; font-size: .98rem; }
.md-dock-txt small { color: #9FB2C6; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-dock .md-btn { flex: none; }

/* ==========================================================================
   Shared pages from _core: hand-off (select-country) + policy documents
   ========================================================================== */
.v2-hand { min-height: 100vh; background: radial-gradient(900px 500px at 80% 0%, var(--md-brand-wash), transparent 60%), var(--md-bg); }
.v2-hand-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px var(--md-gut) 48px; display: grid; gap: 28px; justify-items: center; }
.v2-hand-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--md-ink); text-decoration: none; font: 800 1.12rem/1 var(--md-font-d); }
.v2-hand-card { width: 100%; max-width: 620px; background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-xl); box-shadow: var(--md-lift-hi); overflow: hidden; }
.v2-hand-card--media { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.v2-hand-body { display: grid; gap: 18px; padding: 36px; align-content: center; }
.v2-hand-media { display: flex; align-items: center; padding: 18px; background: linear-gradient(160deg, var(--md-brand-wash), var(--md-panel)); }
.v2-hand-media img { width: 100%; height: auto; border-radius: var(--md-r-l); }
.v2-hand-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; font-weight: 800; }
.v2-hand-lead { color: var(--md-ink-2); }
.v2-track { display: grid; gap: 10px; padding: 16px; border-radius: var(--md-r); background: var(--md-bg); counter-reset: none; }
.v2-track li { display: flex; align-items: center; gap: 12px; color: var(--md-ink-3); font-size: .95rem; }
.v2-track li span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--md-surface); border: 2px solid var(--md-line); font-weight: 800; font-size: .82rem; color: var(--md-ink-3); }
.v2-track li b { font-weight: 600; color: inherit; }
.v2-track li.is-done { color: var(--md-ink); }
.v2-track li.is-done span { background: var(--md-go); border-color: var(--md-go); color: var(--md-go-ink); }
.v2-track li.is-now { color: var(--md-ink); }
.v2-track li.is-now span { border-color: var(--md-brand); color: var(--md-brand); animation: md-pulse 1.4s ease-in-out infinite; }
@keyframes md-pulse { 50% { box-shadow: 0 0 0 6px var(--md-brand-wash); } }
.v2-count { position: relative; width: 64px; height: 64px; justify-self: center; }
.v2-count svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.v2-count circle { fill: none; stroke: var(--md-brand); stroke-width: 4; stroke-dasharray: 120; stroke-dashoffset: 0; animation: md-ring 3s linear forwards; }
.v2-count b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.4rem/1 var(--md-font-d); color: var(--md-ink); }
@keyframes md-ring { to { stroke-dashoffset: 120; } }
.v2-hand-go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 22px; border-radius: 999px; background: var(--md-go); color: var(--md-go-ink); font-weight: 800; text-decoration: none; text-align: center; box-shadow: 0 10px 24px -10px rgba(34, 197, 94, .75); }
.v2-hand-go:hover { background: var(--md-go-hover); }
.v2-regions { display: grid; gap: 12px; }
.v2-region { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: var(--md-r); border: 2px solid var(--md-line); text-decoration: none; color: var(--md-ink); transition: border-color .18s, box-shadow .18s; }
.v2-region:hover { border-color: var(--md-brand); box-shadow: 0 0 0 4px var(--md-brand-wash); }
.v2-region-code { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--md-night); color: #fff; font: 800 .95rem/1 var(--md-font-d); }
.v2-region-name { font-weight: 800; font-family: var(--md-font-d); }
.v2-region-go { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: #15803D; }
.v2-hand-small { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--md-ink-3); }
.v2-hand-small .ico { margin-top: 3px; }
.v2-hand-back, .v2-doc-main .v2-hand-back { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--md-ink-3); text-decoration: none; }
.v2-hand-back:hover { color: var(--md-ink); }

.v2-doc { background: var(--md-bg); }
.v2-doc-head { padding: 18px var(--md-gut); background: var(--md-surface); border-bottom: 1px solid var(--md-line); }
.v2-doc-main { width: 100%; max-width: 780px; margin: 0 auto; padding: 40px var(--md-gut) 64px; display: grid; gap: 16px; }
.v2-doc-main h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
.v2-doc-main h2 { font-size: 1.3rem; margin-top: 16px; }
.v2-doc-date { color: var(--md-ink-3); font-size: .92rem; }
.v2-doc-contact { display: grid; gap: 10px; padding: 20px; border-radius: var(--md-r-l); background: var(--md-surface); border: 1px solid var(--md-line); }
.v2-doc-contact li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.v2-doc-contact .ico { color: var(--md-brand); margin-top: 4px; }
.v2-doc-foot { padding: 24px var(--md-gut); text-align: center; font-size: .88rem; color: var(--md-ink-3); border-top: 1px solid var(--md-line); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .md-nav { gap: 20px; }
  .md-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-kit-wrap--solo .md-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-foot-brand { grid-column: 1 / -1; max-width: 36rem; }
}

@media (max-width: 940px) {
  :root { --md-bar-h: 60px; }
  .md-nav, .md-bar .btn-nav-cta { display: none; }
  .md-burger { display: inline-flex; }
  .md-sec { padding: 72px 0; }

  /* Hero: photo first, then name, lead and CTA inside the first screen (R5.4) */
  .md-hero { padding: 20px 0 32px; }
  .md-hero-grid { display: flex; flex-direction: column; gap: 18px; }
  .md-hero-copy { display: contents; }
  .md-stage { order: 1; width: 100%; max-width: 560px; margin: 0 auto; }
  .md-hero-eyebrow { order: 2; align-self: flex-start; }
  .md-hero h1 { order: 3; }
  .md-hero-lead { order: 4; }
  .md-hero-buy { order: 5; }
  .md-hero-rate { order: 6; }
  .md-hero-list { order: 7; }
  .md-stage-frame { padding: 8px; border-radius: var(--md-r-l); }
  .md-stage-frame .md-pic { border-radius: 14px; }
  .md-stage-chips { display: none; }

  .md-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-stat:nth-child(3) { border-left: 0; }
  .md-stat:nth-child(n+3) { border-top: 1px solid var(--md-line); }

  .md-split, .md-mech-grid, .md-story, .md-specs-wrap, .md-kit-wrap, .md-faq, .md-closer-in, .md-fit { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .md-story--flip .md-photo { order: 0; }
  .md-stories { gap: 56px; }
  .md-photo--sticky, .md-faq-side { position: static; }
  .md-specs-wrap--solo .md-specs { grid-template-columns: minmax(0, 1fr); }
  .md-specs-wrap--solo .md-spec:nth-child(odd) { border-right: 0; }
  .md-swipe { display: flex; }
  .md-pack--hot { transform: none; }
  .v2-hand-card--media { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .v2-hand-media { padding: 12px; }
  .v2-hand-media img { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 640px) {
  :root { --md-gut: 16px; }
  body { font-size: 16px; }
  .md-strip-in { gap: 4px 16px; font-size: .76rem; }
  .md-strip span:nth-child(n+2) { display: none; }
  .md-hero-lead { font-size: 1.04rem; }
  .md-hero-btns { display: grid; width: 100%; }
  .md-hero-btns .md-btn { width: 100%; }
  .md-hero-btns .md-more { display: none; }
  .md-hero-eyebrow { padding: 5px 12px 5px 10px; font-size: .8rem; box-shadow: none; }
  .md-head { margin-bottom: 32px; }
  .md-sec { padding: 60px 0; }
  .md-steps, .md-kits, .md-kit-wrap--solo .md-kits { grid-template-columns: minmax(0, 1fr); }
  .md-spec { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 18px; }
  .md-mech { padding: 20px; gap: 14px; }
  .md-fit-card { padding: 22px; }
  .md-score { justify-content: center; text-align: center; }
  .md-score .md-btn { width: 100%; }

  /* Bundles: compact rows so every option fits on one or two screens */
  .md-packs { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .md-pack { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 14px; padding: 18px 16px 16px; border-radius: var(--md-r-l); }
  .md-pack-pic { align-self: start; }
  .md-pack-info h3 { font-size: 1.08rem; }
  .md-pack-price b { font-size: 1.65rem; }
  .md-pack-list, .md-pack-go { grid-column: 1 / -1; }
  .md-pick { padding: 16px; }
  .md-pick .md-btn { width: 100%; }

  .md-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .md-dock-txt b { font-size: .9rem; }
  .md-dock-txt small { display: none; }
  .md-dock-pct { min-width: 50px; height: 40px; font-size: .95rem; }
  .md-cta-tail { display: none; }
  .v2-hand-body { padding: 24px 20px; }
}

@media (max-width: 380px) {
  .md-hero h1 { font-size: 2.05rem; }
  .md-pack { grid-template-columns: 88px minmax(0, 1fr); }
  .md-dock-txt { display: none; }
  .md-dock-in { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
