/* ============================================================
   PAGE: product-origin
   ============================================================ */

/* Visually-hidden utility (WCAG 4.1.2) */
body.page-product-origin .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

body.page-product-origin *, body.page-product-origin *::before, body.page-product-origin *::after, body.page-product-origin { margin: 0; padding: 0; box-sizing: border-box; }

:root:has(body.page-product-origin) {
  --blue-light: #4da6ff;
  --blue-dark: #0a1e3d;
  --bg: #050a14;
  --glass-border: rgba(255,255,255,0.25);
  --spring: cubic-bezier(0.23, 1, 0.32, 1);
}

html:has(body.page-product-origin) { scroll-behavior: smooth; overflow-x: hidden; }

body.page-product-origin {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

/* ─── Back Arrow ─── */
body.page-product-origin .back-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; padding: 8px 18px; border-radius: 999px;
  color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 500;
  text-decoration: none; letter-spacing: 0.03em;
  transition: color 0.25s, transform 0.25s;
}
body.page-product-origin .back-arrow:hover { color: rgba(255,255,255,0.7); transform: translateX(-3px); }
body.page-product-origin .back-arrow svg { width: 14px; height: 14px; }

/* ─── Hero ─── */
body.page-product-origin .hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; padding: 120px 24px 80px;
  isolation: isolate; contain: layout; /* no `paint`: it hard-clipped the orb glow at the hero edge (visible cut where the comparison section starts) */
}

body.page-product-origin .hero-gradient {
  position: absolute; width: 750px; height: 450px; top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-48deg) scale(0);
  background: radial-gradient(ellipse at 25% 25%, #7cc4ff 0%, #4da6ff 15%, #2b8ae6 30%, #1a5bb5 45%, #0f3d80 60%, #0a1e3d 80%, transparent 100%);
  border-radius: 50%; filter: blur(85px); opacity: 0; pointer-events: none; z-index: 0;
  animation: heroReveal1 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint;
}
body.page-product-origin .hero-gradient-2 {
  position: absolute; width: 450px; height: 320px; top: 32%; left: 63%;
  transform: translate3d(-50%, -50%, 0) rotate(20deg) scale(0);
  background: radial-gradient(ellipse at 60% 30%, #c2f1f6 0%, #7ce4ee 20%, #2fbccb 40%, #0b4d57 70%, transparent 100%);
  border-radius: 50%; filter: blur(95px); opacity: 0; pointer-events: none; z-index: 0;
  animation: heroReveal2 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint;
}
body.page-product-origin .hero-glow {
  position: absolute; width: 120px; height: 120px; top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0);
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(245,179,66,0.5) 0%, rgba(245,179,66,0) 70%);
  animation: glowPulse 2s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint;
}
body.page-product-origin .hero-ring {
  position: absolute; width: 80px; height: 80px; top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0);
  border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1px solid rgba(245,179,66,0.2);
  animation: ringExpand 3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint;
}

/* The orbs mirror the primaryLogo square grid: bright light blue top-left,
   cyan top-right, amber bottom-right, big blue wash in the middle. The two
   accents reveal with the bang and then hold (no JS drift handoff). */
body.page-product-origin .hero-gradient-3 {
  position: absolute; width: 300px; height: 300px; top: 30%; left: 36%;
  transform: translate3d(-50%, -50%, 0) rotate(20deg) scale(0);
  background: radial-gradient(circle, rgba(184,224,255,0.9) 0%, rgba(77,166,255,0.8) 40%, transparent 75%);
  border-radius: 50%; filter: blur(80px); opacity: 0; pointer-events: none; z-index: 0;
  animation: heroReveal2 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint;
}
body.page-product-origin .hero-gradient-4 {
  position: absolute; width: 260px; height: 260px; top: 68%; left: 62%;
  transform: translate3d(-50%, -50%, 0) rotate(20deg) scale(0);
  background: radial-gradient(circle, rgba(255,217,140,0.85) 0%, rgba(245,179,66,0.75) 45%, transparent 78%);
  border-radius: 50%; filter: blur(80px); opacity: 0; pointer-events: none; z-index: 0;
  animation: heroReveal2 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint;
}

/* The desktop page loader must never swallow the big-bang entrance: hold
   every hero animation at frame 0 while the overlay is up (html.ll-loading)
   and let the full sequence run the moment it lifts. Mobile never gets the
   gate class. The drift handoff timer in the page script counts from
   loader-lift for the same reason. */
html.ll-loading body.page-product-origin .hero-gradient,
html.ll-loading body.page-product-origin .hero-gradient-2,
html.ll-loading body.page-product-origin .hero-gradient-3,
html.ll-loading body.page-product-origin .hero-gradient-4,
html.ll-loading body.page-product-origin .hero-glow,
html.ll-loading body.page-product-origin .hero-ring,
html.ll-loading body.page-product-origin .hero-content { animation-play-state: paused; }

body.page-product-origin .hero-content {
  position: relative; z-index: 1; text-align: center; max-width: 680px;
  opacity: 0; animation: contentFadeIn 1s ease 0.6s forwards;
}

body.page-product-origin .hero-title { font-size: clamp(56px, 10vw, 96px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 16px; color: #fff; font-weight: 900; }
body.page-product-origin .hero-subtitle { font-size: clamp(14px, 2vw, 18px); color: rgba(255,255,255,0.7); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
/* Prices are minimums - projects can be quoted above them. */
body.page-product-origin .hero-from { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
body.page-product-origin .hero-price { font-size: clamp(32px, 6vw, 56px); font-weight: 900; line-height: 1; margin-bottom: 8px; color: var(--blue-light); }
body.page-product-origin .hero-description { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 32px auto 48px; max-width: 520px; }
body.page-product-origin .hero-description strong { color: rgba(255,255,255,0.95); font-weight: 700; }

body.page-product-origin .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 40px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.3s; cursor: pointer; border: none; min-height: 44px; /* WCAG 2.5.5 */ }
body.page-product-origin .btn-primary { background: #fff; color: var(--bg); }
body.page-product-origin .btn-primary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(77,166,255,0.3); }

/* ─── Comparison Section ─── */
body.page-product-origin .comparison-section { position: relative; padding: 80px 24px 100px; }
body.page-product-origin .comparison-container { max-width: 800px; margin: 0 auto; }
body.page-product-origin .section-header { text-align: center; margin-bottom: 64px; }
body.page-product-origin .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px; }
body.page-product-origin .section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
body.page-product-origin .comparison-table { border: 1px solid rgba(77,166,255,0.08); border-radius: 20px; overflow: hidden; background: linear-gradient(rgba(255,255,255,0.01), rgba(255,255,255,0.01)), var(--bg); }
body.page-product-origin .comparison-header { display: grid; grid-template-columns: 1.4fr 1fr 1fr 28px; gap: 0; padding: 24px 28px; border-bottom: 1px solid rgba(77,166,255,0.08); background: rgba(77,166,255,0.03); }
body.page-product-origin .comparison-feature-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-product-origin .comparison-plan { text-align: center; font-size: 16px; font-weight: 700; color: #fff; display: flex; flex-direction: column; gap: 4px; }
body.page-product-origin .comparison-price { display: block; font-size: 12px; font-weight: 500; color: var(--blue-light); opacity: 0.7; }
body.page-product-origin .comparison-group { border-bottom: 1px solid rgba(77,166,255,0.06); }
body.page-product-origin .comparison-group:last-child { border-bottom: none; }
body.page-product-origin .comparison-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); padding: 20px 28px 8px; opacity: 0.8; }
body.page-product-origin .comparison-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 28px; gap: 0; padding: 12px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.2s ease; cursor: pointer;
}
body.page-product-origin .comparison-row:last-child { border-bottom: none; }
body.page-product-origin .comparison-row:hover { background: rgba(77,166,255,0.03); }
body.page-product-origin .comparison-row.tip-active { background: rgba(77,166,255,0.05); }
body.page-product-origin .has-tip { position: relative; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 0L5 20L9 16L12.5 24L16 22.5L12.5 15L18 15Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='8' r='7' fill='%234da6ff'/%3E%3Ctext x='24' y='11.5' text-anchor='middle' font-size='11' font-weight='bold' fill='white' font-family='sans-serif'%3E%3F%3C/text%3E%3C/svg%3E") 5 0, pointer; }
body.page-product-origin .comparison-feature {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6);
  display: flex; align-items: center;
}
body.page-product-origin .row-info-cell {
  display: flex; align-items: center; justify-content: center;
}
body.page-product-origin .row-info-cell .row-info {
  width: 13px; height: 13px; flex-shrink: 0; opacity: 0.15; color: rgba(255,255,255,0.7);
  transition: opacity 0.2s;
}
body.page-product-origin .comparison-row:hover .row-info { opacity: 0.4; }
body.page-product-origin .comparison-row.tip-active .row-info { opacity: 0.7; color: var(--blue-light); }
body.page-product-origin .comparison-cell { display: flex; align-items: center; justify-content: center; }
body.page-product-origin .comparison-cell .check-icon { width: 16px; height: 16px; color: var(--blue-light); opacity: 0.8; }
body.page-product-origin .comparison-dash { color: rgba(255,255,255,0.15); font-size: 14px; }
body.page-product-origin .comparison-value { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); }
body.page-product-origin .origin-col { color: var(--blue-light); }

/* ─── Tooltip ─── */
body.page-product-origin .tip-bubble { display: none !important; }

body.page-product-origin #global-tip {
  position: absolute; z-index: 9999; pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s var(--spring); transform: translateY(4px);
  background: rgba(15, 22, 42, 0.55); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(77,166,255,0.2); border-radius: 14px; padding: 14px 18px; max-width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(77,166,255,0.08), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(255,255,255,0.03);
}
body.page-product-origin #global-tip::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 128px 128px; pointer-events: none; }
body.page-product-origin #global-tip::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%); pointer-events: none; }
body.page-product-origin #global-tip.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
body.page-product-origin #global-tip .tip-title { position: relative; z-index: 2; font-size: 12px; font-weight: 700; color: var(--blue-light); margin-bottom: 6px; letter-spacing: 0.02em; }
body.page-product-origin #global-tip .tip-text { position: relative; z-index: 2; font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.6; font-weight: 400; }
body.page-product-origin #global-tip .tip-text strong { color: rgba(255,255,255,0.85); font-weight: 600; }
body.page-product-origin #global-tip .tip-arrow { position: absolute; width: 12px; height: 12px; z-index: -1; background: rgba(15, 22, 42, 0.55); border: 1px solid rgba(77,166,255,0.2); transform: rotate(45deg); }
body.page-product-origin #global-tip .tip-arrow.arrow-bottom { bottom: -6px; left: 50%; margin-left: -6px; border-top: none; border-left: none; }
body.page-product-origin #global-tip .tip-arrow.arrow-top { top: -6px; left: 50%; margin-left: -6px; border-bottom: none; border-right: none; }

/* ─── Footer ─── */
/* ─── Contact CTA ─── */
body.page-product-origin .page-cta { text-align: center; padding: 24px 24px 80px; position: relative; z-index: 1; }
body.page-product-origin .page-cta-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(77,166,255,0.25), transparent); margin: 0 24px; }
body.page-product-origin .page-cta h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 12px; color: var(--text-primary); }
body.page-product-origin .page-cta p { font-size: 15px; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.6; max-width: 380px; margin-left: auto; margin-right: auto; }
body.page-product-origin footer { text-align: center; padding: 48px 24px 32px; color: rgba(255,255,255,0.2); font-size: 13px; border-top: 1px solid rgba(255,255,255,0.04); position: relative; z-index: 1; }
body.page-product-origin .footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
body.page-product-origin .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.25s, border-color 0.25s, transform 0.25s; }
body.page-product-origin .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); transform: translateY(-2px); }
body.page-product-origin .footer-social a svg { width: 14px; height: 14px; }
body.page-product-origin footer .footer-links { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 4px; margin-bottom: 24px; }
body.page-product-origin footer .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; font-size: clamp(11px, 3vw, 13px);
  /* inline-block + padding lifts these from a 14px-tall target to 24px,
     the WCAG 2.2 AA 2.5.8 minimum. They wrap onto two rows on a phone,
     so a short target here meant real mis-taps between legal pages. */
  display: inline-block; padding: 5px 0; }
body.page-product-origin footer .footer-links a:hover { color: rgba(255,255,255,0.6); }
body.page-product-origin footer .footer-sep { color: rgba(255,255,255,0.3); margin: 0 clamp(4px, 1.5vw, 10px); }
body.page-product-origin footer .address { color: rgba(255,255,255,0.48); margin-bottom: 8px; }
body.page-product-origin footer .footer-copy { color: rgba(255,255,255,0.46); }
body.page-product-origin .light-only { display: none !important; }
[data-theme="light"] body.page-product-origin .dark-only { display: none !important; }
[data-theme="light"] body.page-product-origin .light-only { display: inline !important; }
body.page-product-origin footer a:has(> .footer-logo) { display: inline-block; }
body.page-product-origin .footer-logo { width: 48px; height: auto; margin-bottom: 14px; filter: drop-shadow(0 0 6px rgba(77,166,255,0.4)); }

/* ─── Skeleton ─── */
body.page-product-origin .skeleton-text { height: 12px; margin-bottom: 8px; width: 80%; }
body.page-product-origin .skeleton-text.short { width: 40%; }
body.page-product-origin .skeleton-heading { height: 28px; width: 50%; margin-bottom: 12px; border-radius: 8px; }
body.page-product-origin .skeleton-pill { height: 28px; width: 100px; border-radius: 999px; }
/* Match real .hero-title clamp(56px, 10vw, 96px) */
body.page-product-origin .hero-title-sk { height: clamp(56px, 10vw, 96px); }
/* Match real .hero-subtitle clamp(14px, 2vw, 18px) */
body.page-product-origin .hero-sub-sk { height: clamp(14px, 2vw, 18px); }
/* Match real .hero-price clamp(32px, 6vw, 56px) */
body.page-product-origin .hero-price-sk { height: clamp(32px, 6vw, 56px); }
body.page-product-origin .skeleton-content { opacity: 0; transition: opacity 0.2s; }
body.page-product-origin.show-skeleton .skeleton-content { opacity: 1; }
body.page-product-origin.loaded .skeleton-content { display: none !important; }
body.page-product-origin:not(.loaded) .real-content { display: none; }
body.page-product-origin.loaded .real-content { display: contents; }

/* ─── Light Mode ─── */
[data-theme="light"]:has(body.page-product-origin) { --bg: #eef1f6; --blue-light: #1a66b5; --glass-border: rgba(0,0,0,0.13); }
[data-theme="light"] body.page-product-origin { background: var(--bg); color: #1a1a2e; }
[data-theme="light"] body.page-product-origin .back-arrow { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .back-arrow:hover { color: rgba(0,0,0,0.7); }
[data-theme="light"] body.page-product-origin .hero-title { color: #1a1a2e; }
[data-theme="light"] body.page-product-origin .hero-subtitle, [data-theme="light"] body.page-product-origin .hero-description { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .hero-description strong { color: rgba(0,0,0,0.9); }
[data-theme="light"] body.page-product-origin .hero-from { color: rgba(0,0,0,0.35); }
[data-theme="light"] body.page-product-origin .hero-price { color: var(--blue-light); }
[data-theme="light"] body.page-product-origin .btn-primary { background: #1a1a2e; color: #fff; }
[data-theme="light"] body.page-product-origin .btn-primary:hover { background: #2a2a4e; box-shadow: 0 12px 40px rgba(43,127,212,0.2); }
[data-theme="light"] body.page-product-origin .section-label { color: var(--blue-light); }
[data-theme="light"] body.page-product-origin .section-title { color: #1a1a2e; }
[data-theme="light"] body.page-product-origin #global-tip { background: rgba(200,215,235,0.3); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-color: rgba(0,0,0,0.08); box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 30px rgba(43,127,212,0.1), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.04); }
[data-theme="light"] body.page-product-origin #global-tip .tip-text { color: rgba(0,0,0,0.65); }
[data-theme="light"] body.page-product-origin #global-tip .tip-text strong { color: #1a1a2e; }
[data-theme="light"] body.page-product-origin #global-tip .tip-arrow { background: rgba(200,215,235,0.3); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] body.page-product-origin footer { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-product-origin footer .address { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }
[data-theme="light"] body.page-product-origin footer .footer-logo { filter: drop-shadow(0 0 6px rgba(43,127,212,0.3)); }
[data-theme="light"] body.page-product-origin footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-product-origin footer .footer-sep { color: rgba(0,0,0,0.45); }
[data-theme="light"] body.page-product-origin footer .footer-copy { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .comparison-table { border-color: rgba(0,0,0,0.06); background: linear-gradient(rgba(0,0,0,0.015), rgba(0,0,0,0.015)), var(--bg); }
[data-theme="light"] body.page-product-origin .comparison-header { background: rgba(26,111,194,0.04); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] body.page-product-origin .comparison-plan { color: #1a1a2e; }
[data-theme="light"] body.page-product-origin .comparison-plan.origin-col { color: var(--blue-light); }
[data-theme="light"] body.page-product-origin .comparison-group { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] body.page-product-origin .comparison-row { border-bottom-color: rgba(0,0,0,0.03); }
[data-theme="light"] body.page-product-origin .comparison-row:hover { background: rgba(26,111,194,0.03); }
[data-theme="light"] body.page-product-origin .comparison-row.tip-active { background: rgba(26,111,194,0.05); }
[data-theme="light"] body.page-product-origin .comparison-feature { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .row-info-cell .row-info { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-product-origin .comparison-cell .check-icon { color: var(--blue-light); }
[data-theme="light"] body.page-product-origin .comparison-dash { color: rgba(0,0,0,0.12); }
[data-theme="light"] body.page-product-origin .comparison-value { color: rgba(0,0,0,0.6); }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  body.page-product-origin .hero { padding: 100px 20px 160px; }
  body.page-product-origin .hero-gradient { width: 420px; height: 300px; filter: blur(60px); }
  body.page-product-origin .hero-gradient-2 { width: 280px; height: 200px; filter: blur(70px); }
  body.page-product-origin .comparison-section { padding: 60px 16px 80px; }
  body.page-product-origin .comparison-header { grid-template-columns: 1.2fr 0.9fr 0.9fr 24px; padding: 20px 16px; }
  body.page-product-origin .comparison-plan { font-size: 14px; }
  body.page-product-origin .comparison-row { grid-template-columns: 1.2fr 0.9fr 0.9fr 24px; padding: 10px 16px; }
  body.page-product-origin .comparison-feature { font-size: 12px; }
  body.page-product-origin .comparison-group-label { padding: 16px 16px 6px; }
  body.page-product-origin #global-tip { max-width: 240px; }
}
@media (max-width: 480px) {
  body.page-product-origin #global-tip { max-width: 200px; font-size: 10px; padding: 10px 14px; }
}

/* Respect prefers-reduced-motion (WCAG 2.2 AA 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  body.page-product-origin *, body.page-product-origin *::before, body.page-product-origin *::after, body.page-product-origin {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.page-product-origin .skip-link {position:fixed;top:-48px;left:0;background:#2b7fd4;color:#fff;padding:10px 16px;z-index:99999;text-decoration:none;font-weight:600;border-radius:0 0 4px 0;transition:top .2s ease,opacity .2s ease;font-size:14px;opacity:0;pointer-events:none;white-space:nowrap}
body.page-product-origin .skip-link:focus, body.page-product-origin .skip-link:focus-visible {top:0;opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:-4px}

/* Global :focus-visible - keyboard accessibility (WCAG 2.4.7) */
body.page-product-origin a:focus-visible, body.page-product-origin button:focus-visible, body.page-product-origin [role="button"]:focus-visible, body.page-product-origin input:focus-visible, body.page-product-origin select:focus-visible, body.page-product-origin textarea:focus-visible, body.page-product-origin .btn:focus-visible, body.page-product-origin .theme-toggle:focus-visible, body.page-product-origin .theme-toggle-mobile:focus-visible {
  outline: 2px solid var(--blue-light, #4da6ff);
  outline-offset: 2px;
  border-radius: 4px;
}
body.page-product-origin .btn:focus-visible { border-radius: 999px; }
/* ─── THEME TOGGLE (footer) ───
   The standard site control. This page has no nav to hold it, so it sits in
   the footer social row - same 34px circle, same sun/moon flip. */
/* Footer placement: the toggle sits in the social row, so it wears the same
   bordered circle and lift-on-hover as the social links (border-box keeps it
   34px; no hover fill, the icons keep their own colours). */