/* Single-promo section library stylesheet (substrate v4, from the launch-tested
   gestion-reseaux page). Sites theme it by overriding the :root vars in their
   own site.css — never edit this file in a site repo. */
:root {
  color-scheme: light;
  --ink: #112a2a;
  --muted: #557070;
  --line: #e2ecea;
  --bg: #f5faf9;
  --panel: #ffffff;
  --deep: #0f3d3a;
  --deep-darker: #0a2c29;
  --deep-2: #0d9488;
  --accent: #0d9488;
  --accent-rgb: 13, 148, 136;
  --save: #15a34a;
  --save-soft: #e7f8ee;
  --cta: #f97316;
  --cta-dark: #ea580c;
  --warn: #e1493f;
  --shadow: 0 24px 60px rgba(17, 42, 42, 0.12);
  --shadow-soft: 0 12px 32px rgba(17, 42, 42, 0.08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Clearance for the fixed sticky bar: body padding-bottom = bar height, so the
     bar exactly covers the clearance (no empty strip under the footer, no overlap).
     73px is the default bar height; script.js syncClearance() refines to the exact
     px on load + resize. The footer keeps normal padding (never a big bottom). */
  padding-bottom: 73px;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

.wrap {
  width: min(1080px, calc(100vw - 40px));
  margin: 0 auto;
}

.wrap-narrow {
  width: min(760px, calc(100vw - 40px));
  margin: 0 auto;
}

/* --- Promo bar --- */
.promo-bar {
  background: var(--deep);
  color: #f2fffc;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 9px 16px;
}
.promo-bar strong { color: #ffd9a8; }
.promo-bar .save { color: #74e8a3; font-weight: 800; }

/* --- Header (NOT sticky — the sticky bottom CTA is the one persistent element,
       operator rule 2026-07-03: never two sticky bars) --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px max(20px, calc((100vw - 1080px) / 2));
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(150%);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 850;
  font-size: 17px;
  text-decoration: none;
  color: var(--ink);
}
.brand-icon { width: 34px; height: 34px; border-radius: 9px; }
.header-cta { padding: 0 16px; min-height: 40px; font-size: 14px; }
@media (max-width: 560px) { .header-cta { display: none; } }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn-cta {
  background: linear-gradient(180deg, #fb923c, var(--cta));
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.32);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(249, 115, 22, 0.42); background: linear-gradient(180deg, var(--cta), var(--cta-dark)); }
.btn-cta:active { transform: translateY(0); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--deep); }
.btn-ghost:hover { border-color: var(--deep-2); color: var(--deep-2); }
.btn-lg { min-height: 58px; padding: 0 34px; font-size: 18px; border-radius: 13px; }
.btn-block { width: 100%; }

/* --- Hero --- */
.hero {
  position: relative;
  padding: 64px 0 56px;
  background:
    radial-gradient(1100px 460px at 50% -120px, rgba(var(--accent-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, #ffffff, var(--bg));
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--deep-2);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hero h1 {
  /* line breaks are authored in the markup (H1 = exactly 2 lines, operator rule) */
  max-width: none;
  margin: 0 auto 18px;
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero h1 .hl { color: var(--save); white-space: nowrap; }
/* Product name in the H1 is a real affiliate link: keep the highlight color,
   add an underline so it reads as clickable (any <a> inside the highlight). */
.hero h1 .hl a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hero h1 .hl a:hover { text-decoration-thickness: 3px; }
.hero h1 .strike { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--warn); }
.lede {
  max-width: 62ch; /* sized so the authored lede sits on 2 lines desktop */
  margin: 0 auto 30px;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--muted);
}
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-sub { display: block; font-size: 13px; color: var(--muted); }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
.trust-row li { display: inline-flex; align-items: center; gap: 7px; }
.trust-row li::before { content: "✓"; color: var(--save); font-weight: 900; }

/* --- Section CTA (operator rule: CTA cadence = hero + roughly every OTHER section) --- */
.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  text-align: center;
}

/* Product-name mentions in body copy are affiliate links (operator rule) */
.plink { color: var(--deep-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.plink:hover { color: var(--cta-dark); }

/* --- Section base --- */
.section { padding: 64px 0; border-bottom: 1px solid var(--line); }
.section.alt { background: #fff; }
/* Cards must contrast with their section: white sections tint their panels
   (white-on-white cards read as floating borders — operator, 2026-07-03) */
.section.alt .problem-list li,
.section.alt .faq-list details,
.section.alt .price-card.muted,
.section.alt .network-band li { background: var(--bg); }
/* Body prose inside a section (structured fan-out pages write plain <p> into
   the section slot). Without this the paragraphs fell back to browser defaults:
   16px, full 1080px measure, no rhythm. A readable measure, centered, at the
   page type scale. The final CTA is excluded: it owns its own (light on dark)
   colour, and this rule would out-specify it and grey the text out. */
.section:not(.final-cta) > .wrap > p,
.section:not(.final-cta) > .wrap-narrow > p {
  max-width: 78ch;
  margin: 0 auto 18px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
}
.section:not(.final-cta) > .wrap > p:last-child,
.section:not(.final-cta) > .wrap-narrow > p:last-child { margin-bottom: 0; }
.section-head { max-width: 640px; margin: 0 auto 38px; text-align: center; }
.section-head h2 {
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.section-head p { color: var(--muted); font-size: 18px; margin: 0; }
.section-head.one-line { max-width: none; }
.section-head.one-line h2, .section-head.one-line p { white-space: nowrap; }
@media (max-width: 760px) { .section-head.one-line h2, .section-head.one-line p { white-space: normal; } }

/* --- Pricing smackdown --- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.price-card.muted { opacity: 0.92; }
.price-card.highlight {
  border: 2px solid var(--save);
  box-shadow: 0 24px 56px rgba(21, 163, 74, 0.18);
  transform: translateY(-6px);
}
.price-name { font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.price-amount { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.price-card.muted .price-amount { color: var(--muted); }
.price-card.highlight .price-amount { color: var(--save); }
.price-cur { font-size: 22px; font-weight: 800; vertical-align: super; }
.price-per { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.price-note { color: var(--muted); font-size: 14px; margin: 0; }
.price-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--save);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(21, 163, 74, 0.3);
}
.price-card .btn { margin-top: 18px; }
.price-strike { text-decoration: line-through; text-decoration-color: var(--warn); }

/* --- Problem list --- */
.problem-list, .check-list, .audience-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.problem-list li, .check-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-size: 16px;
}
.problem-list li::before { content: "✕"; color: var(--warn); font-weight: 900; font-size: 17px; }
.problem-list[data-icon="check"] li::before { content: "✓"; color: var(--save); }
.problem-list[data-icon="cross"] li::before { content: "✕"; color: var(--warn); }
.problem-list[data-icon="neutral"] li::before { content: "•"; color: var(--muted); }
.problem-list[data-icon="dot"] li::before { content: "•"; color: var(--accent); }
.problem-list[data-icon="arrow"] li::before { content: "→"; color: var(--accent); }
.problem-list[data-icon="star"] li::before { content: "★"; color: var(--accent); }
.problem-list[data-icon="info"] li::before { content: "i"; color: var(--accent); font-family: Georgia, serif; }
.check-list li { border: 0; background: transparent; padding: 8px 0; }
.check-list li::before { content: "✓"; color: var(--save); font-weight: 900; font-size: 17px; }
.problem-list strong, .check-list strong { color: var(--ink); }

/* --- Features --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(var(--fg-cols, 3), minmax(0, 1fr));
  gap: 18px;
}
.feature-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.feature-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  font-size: 22px;
}
.feature-card h3 { font-size: 18px; margin-bottom: 6px; }
.feature-card p { color: var(--muted); font-size: 15px; margin: 0; }
/* Multi-product cards carry two quiet exact-destination links (title + text), not
   four competing orange buttons plus an ambiguous shared button beneath the grid. */
.offer-card { display: flex; flex-direction: column; }
.offer-card p { flex: 1; }
.offer-best {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(16, 122, 87, 0.1));
  color: var(--accent, #0f766e);
  font-size: 12px;
  font-weight: 600;
}
.offer-card-link {
  color: var(--accent, #0f766e);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.offer-card-link { margin-top: 14px; align-self: flex-start; }
.offer-card > .shot {
  width: 100%;
  height: 180px;
  margin-bottom: 16px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}
.product-comparison-intro {
  padding: 42px 0 28px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.product-comparison-intro .wrap { max-width: 820px; }
.product-comparison-intro h1 {
  margin: 8px 0 14px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  text-wrap: balance;
}
.product-comparison-intro p { margin: 0 auto 20px; max-width: 70ch; color: var(--muted); font-size: 18px; }

/* --- Networks band --- */
.network-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.network-band li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14px;
  font-weight: 700;
  color: var(--deep);
}

/* --- Audience --- */
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.aud-card {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
.aud-card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.aud-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 900; flex: none; }
.aud-ico.ok { background: var(--save); color: #fff; }
.aud-ico.no { background: var(--warn); color: #fff; }
.aud-card.pro { border-color: rgba(21, 163, 74, 0.3); background: var(--save-soft); }
.aud-card.con { background: #fbf3f2; border-color: rgba(225, 73, 63, 0.25); }
.aud-card ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); }
.aud-card li { margin-bottom: 6px; }

/* --- Guarantee --- */
.guarantee-ico { font-size: 38px; }

/* --- FAQ --- */
.faq-list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
}
.faq-list details[open] { border-color: rgba(var(--accent-rgb), 0.3); }
.faq-list summary { cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--deep-2); font-weight: 900; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { margin: 12px 0 0; color: var(--muted); }

/* --- Final CTA --- */
.final-cta { text-align: center; background: linear-gradient(180deg, var(--deep-darker), var(--deep)); color: #fff; }
.final-cta h2 { color: #fff; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; margin-bottom: 12px; }
.final-cta p { color: rgba(255, 255, 255, 0.78); font-size: 18px; max-width: 68ch; margin: 0 auto 26px; }
.final-cta .plink { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.76); }
.final-cta .plink:hover { color: #ffd9a8; text-decoration-color: currentColor; }

/* --- Sticky CTA --- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px max(16px, calc((100vw - 1080px) / 2));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(17, 42, 42, 0.1);
  backdrop-filter: blur(14px);
  transform: translateY(120%);
  transition: transform 260ms ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .sticky-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
}
.sticky-cta .sticky-text span { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.sticky-cta .btn { flex: 0 0 auto; white-space: nowrap; }

/* --- Footer --- */
.site-footer { padding: 40px 0; background: #fff; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 850; font-size: 16px; color: var(--ink); text-decoration: none; }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer-disc { max-width: 600px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.footer-copy { margin: 0; color: #93a8a5; font-size: 12px; letter-spacing: 0.02em; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-card.highlight { transform: none; order: -1; }
  .audience-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .section { padding: 48px 0; }
  .hero { padding: 44px 0 40px; }
  /* authored H1 break is a desktop layout decision — let text-wrap: balance
     handle narrow screens (forced br made uneven 3-line stacks) */
  .hero h1 br { display: none; }
  .btn-lg { width: 100%; }
  .hero-cta .btn-lg { width: 100%; }
  .feature-grid { grid-template-columns: 1fr; }
  .sticky-cta .sticky-text span { display: none; }
  .sticky-cta .sticky-text { display: block; white-space: nowrap; font-size: 14px; }
}

/* --- Product visuals (screenshots / logo) --- */
h1, h2 { text-wrap: balance; }
.hero-shot { max-width: 880px; margin: 44px auto 0; }
.browser-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.browser-bar i:nth-child(1) { background: #ff6058; }
.browser-bar i:nth-child(2) { background: #ffbe2e; }
.browser-bar i:nth-child(3) { background: #2aca44; }
.shot { display: block; width: 100%; height: auto; cursor: zoom-in; }
/* A hero source can be square or portrait even though the page gives it an 880px
   column. Never let its intrinsic ratio turn one image into an entire screen. Keep
   the full picture (no crop) inside a bounded white stage; the lightbox remains the
   place to inspect it at its natural proportions. */
.hero-shot img.shot {
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}
/* Tall screenshots are previews of a page, so show its fold at a useful scale.
   script.js applies this class from the source's intrinsic ratio. The desktop
   lightbox still opens the uncropped source for anyone who wants the full page. */
.hero-shot img.shot.is-fold-crop {
  width: 100%;
  height: clamp(320px, 48vw, 520px);
  max-height: none;
  object-fit: cover;
  object-position: top center;
}
.shot.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 28px;
  background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 13px, var(--line) 13px, var(--line) 26px);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  cursor: default;
}
.shot.placeholder .ph-ico { font-size: 30px; }
.shot.placeholder small { font-weight: 600; font-size: 12px; opacity: 0.85; }
.shots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shots-grid .shot.placeholder { min-height: 180px; }
/* Screenshot grids: uniform 16:10 crop — source images come in mixed sizes
   (operator, 2026-07-03). Top-anchored so app toolbars stay visible. */
.shots-grid img.shot,
.shots-grid img.imgpick-shot {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
}
/* Physical product photos: the item sits low in lifestyle shots, so anchor the
   crop to the bottom (top-anchor is for app screenshots with toolbars). */
.shots-grid.crop-product img.shot,
.shots-grid.crop-product img.imgpick-shot {
  object-position: center bottom;
}
.rating-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
.rating { text-align: center; }
.rating .stars { color: #f5b301; font-size: 18px; letter-spacing: 2px; }
.rating strong { display: block; font-size: 18px; }
.rating span { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .shots-grid { grid-template-columns: 1fr; } }

/* --- Social proof (physical single-promo) --- */
.social-proof { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.proof-aggregate { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.proof-stars { color: #f5b301; font-size: 34px; letter-spacing: 5px; line-height: 1; }
.proof-stars.sm { font-size: 18px; letter-spacing: 3px; margin-bottom: 12px; }
.proof-score-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.proof-score { font-size: 22px; font-weight: 800; }
.proof-meta { color: var(--muted); font-size: 14px; }
.proof-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; width: 100%; }
.proof-quote { margin: 0; padding: 22px 24px; background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.14); border-radius: 14px; }
.proof-quote blockquote { margin: 0; font-size: 16px; line-height: 1.6; }
.proof-quote figcaption { margin-top: 12px; }
.proof-by { display: flex; align-items: center; gap: 12px; }
.proof-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.proof-who { display: flex; flex-direction: column; line-height: 1.35; }
.proof-who strong { font-size: 15px; font-weight: 700; }
.proof-source { color: var(--muted); font-size: 13px; }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(10, 30, 28, 0.82);
  backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* --- CTA focus + reassurance --- */
.btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.55); outline-offset: 3px; }
img.shot:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.55); outline-offset: 3px; }
.cta-sub-light { color: rgba(255, 255, 255, 0.72); margin-top: 12px; }