/* Linxshot component composition. Cards: 16px; buttons: 8px; small controls: 6px. */
.hero-section {
  padding: 140px 0 64px;
  position: relative;
  isolation: isolate;
}
.hero-section .hero-title-accent { color: #153e98; }
.hero-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-title { font-size: clamp(2.5rem, 4vw, 3.5rem); letter-spacing: -.04em; line-height: 1.08; }
.hero-title span { display: block; }
.hero-title .hero-title-line { display: flex; align-items: center; gap: .1em; margin-bottom: .36em; white-space: nowrap; }
.hero-title .hero-title-line:last-child { margin-bottom: 0; }
.hero-title .hero-title-part { flex: 0 0 auto; line-height: 1; }
.hero-title .hero-emoji-slot {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  letter-spacing: 0;
}
.hero-title .hero-title-emoji {
  display: block;
  width: .8em;
  height: .8em;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.hero-title .hero-camera-slot .hero-title-emoji {
  width: .95em;
  height: .95em;
  transform: translateY(-.08em);
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-title .hero-title-line { font-size: .92em; }
}
@media (max-width: 480px) {
  .hero-title .hero-title-line { font-size: .9em; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  html:lang(en) .hero-title .hero-title-line { font-size: .83em; }
}
@media (max-width: 480px) {
  html:lang(en) .hero-title .hero-title-line { font-size: clamp(2rem, 9vw, 2.25rem); }
  /* German and Dutch headlines are wider; scale them with the screen so they fit. */
  html:lang(de) .hero-title .hero-title-line,
  html:lang(nl) .hero-title .hero-title-line { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
}

.hero-title-accent { color: var(--primary); }
.hero-description { margin-top: 24px; max-width: 42ch; font-size: 1.05rem; line-height: 1.65; color: var(--text-secondary); }
.hero-cta-group { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hero-cta-group .chrome-btn { white-space: nowrap; }
.product-principles { margin-top: 24px; }
.hero-meta-list { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; color: var(--text-secondary); font-size: .85rem; }
.hero-meta-item { display: flex; gap: 10px; align-items: center; }
.hero-meta-item .ui-icon { width: 17px; height: 17px; flex-basis: 17px; color: var(--primary); }
/* One article template, two aligned layers. Only the After layer is interactive. */
.hero-comparison { min-width: 0; scroll-margin-top: 100px; }
.comparison-stage { position: relative; border: 1px solid #cbd5e1; border-radius: 16px; background: #ffffff; isolation: isolate; }
.capture-layer { border-radius: 15px; overflow: hidden; }
.capture-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split)); }
.wiki-paper { padding: 28px; color: #202122; background: #ffffff; font-family: 'Segoe UI', sans-serif; }
.wiki-header { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #a2a9b1; padding-bottom: 8px; }
.wiki-title { font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; letter-spacing: 0; }
.wiki-tabs { display: flex; gap: 12px; font-size: .75rem; color: #54595d; }
.wiki-tab.active { color: #202122; border-bottom: 2px solid #3366cc; }
.wiki-sub { font-size: .75rem; color: #54595d; margin: 10px 0 22px; }
.wiki-paragraph { font-size: 1.05rem; line-height: 1.9; margin: 0; }
.capture-link { color: #2454ae; padding: 0; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.capture-after .capture-link, .sample-link {
  --hotspot-alpha: .36;
  cursor: pointer; background-color: transparent; box-shadow: none;
  background-image: linear-gradient(90deg, rgba(56, 156, 224, var(--hotspot-alpha)) 0%, transparent 20%, transparent 80%, rgba(56, 156, 224, var(--hotspot-alpha)) 100%), linear-gradient(180deg, rgba(56, 156, 224, var(--hotspot-alpha)) 0%, transparent 20%, transparent 80%, rgba(56, 156, 224, var(--hotspot-alpha)) 100%);
}
.capture-after .capture-link:hover, .capture-after .capture-link.hovered, .sample-link:hover, .sample-link.hovered { --hotspot-alpha: .55; color: #163f8b; }
.capture-after .capture-link:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 3px; }
.comparison-handle { position: absolute; top: -8px; bottom: -8px; left: var(--split); transform: translateX(-50%); width: 44px; z-index: 2; background: transparent; border: 0; padding: 0; cursor: ew-resize; touch-action: none; }
.comparison-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: linear-gradient(to bottom, transparent 0%, var(--primary) 22%, var(--primary) 78%, transparent 100%); }
.comparison-handle > span { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--primary); background: #ffffff; color: var(--primary-hover); }
.comparison-handle svg { width: 24px; height: 24px; }
.comparison-handle:hover > span { background: #eff6ff; }
.comparison-handle:active { transform: translateX(-50%); }
.comparison-handle:focus-visible { outline: none; }
.comparison-instruction { margin-top: 20px; max-width: 60ch; font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }
.smart-wiki-popover { position: absolute; width: min(440px, calc(100% - 24px)); max-width: calc(100% - 24px); z-index: 3; padding: 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #94a3b8; box-shadow: var(--shadow-lg); }
.smart-wiki-popover[hidden] { display: none; }
.popover-title { font-size: .95rem; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.popover-domain { margin-top: 4px; color: var(--primary-hover); font-size: .85rem; }
.popover-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.popover-copy-btn { padding: 10px 12px; min-height: 44px; border: 1px solid #64748b; border-radius: 8px; background: #e2e8f0; color: var(--text-primary); white-space: nowrap; font-size: .8rem; flex-shrink: 0; }
.popover-copy-btn:hover { background: #cbd5e1; }
.popover-url { font-size: .8rem; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; min-width: 0; user-select: text; cursor: text; }
.feature-icon-box { margin-bottom: 24px; color: var(--primary); }
.feature-icon-box .ui-icon { width: 28px; height: 28px; }
.feature-title { font-size: 1.35rem; margin-bottom: 14px; }
.feature-desc { color: var(--text-secondary); font-size: .925rem; line-height: 1.7; margin-bottom: 22px; max-width: 58ch; }
.feature-points { list-style: none; display: grid; gap: 10px; }
.feature-point { font-size: .8rem; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 8px; }
.feature-point .ui-icon { width: 16px; height: 16px; flex-basis: 16px; color: var(--primary); margin-top: 2px; }
.comparison-table-wrapper { max-width: 1040px; margin-inline: auto; border: 1px solid #e2e8f0; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -32px rgba(30, 50, 80, .28); overflow: hidden; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
.comparison-feature-column { width: 32%; }
.comparison-product-column { width: 36%; }
.comparison-traditional-column { width: 32%; }
.comparison-table th, .comparison-table td { padding: 22px 28px; vertical-align: middle; }
.comparison-table thead th { padding-block: 20px; border-bottom: 1px solid #e8edf3; color: var(--text-muted); font-size: .8125rem; font-weight: 550; line-height: 1.4; }
.comparison-table thead .highlight-col { position: relative; color: var(--text-primary); font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.comparison-table thead .highlight-col::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--primary); }
.comparison-brand-heading { display: flex; align-items: center; gap: 10px; }
.comparison-brand-heading img { width: 28px; height: 28px; flex: 0 0 28px; }
.comparison-table tbody th { color: var(--text-primary); font-size: .9375rem; font-weight: 550; line-height: 1.45; }
.comparison-table tbody tr + tr > * { border-top: 1px solid #eef2f6; }
.comparison-table .highlight-col { background: #f6f9ff; box-shadow: inset 1px 0 #e3ecfb, inset -1px 0 #e3ecfb; }
.comp-cell { display: flex; align-items: flex-start; gap: 12px; }
.comp-icon { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: #eef2f6; color: #64748b; }
.highlight-col .is-yes .comp-icon { background: var(--primary); color: #ffffff; }
.is-no .comp-icon { background: #f1f5f9; color: #94a3b8; }
.is-partial .comp-icon { background: #fdf0dc; color: #b45309; }
.comp-text { display: grid; gap: 2px; min-width: 0; }
.comp-text strong { color: var(--text-primary); font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.comparison-table td:not(.highlight-col) .comp-text strong { color: var(--text-secondary); font-weight: 550; }
.comp-text span { color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
.comp-mobile-label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .comparison-table tbody tr > * { transition: background-color .2s ease; }
  .comparison-table tbody tr:hover > :not(.highlight-col) { background: #fafbfd; }
  .comparison-table tbody tr:hover > .highlight-col { background: #f0f5ff; }
}
@media (max-width: 900px) {
  .comparison-table th, .comparison-table td { padding: 20px; }
  .comparison-table thead th { padding-block: 18px; }
}
@media (max-width: 720px) {
  #comparison .comparison-intro { margin-bottom: 28px; }
  .comparison-table-wrapper { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .comparison-table, .comparison-table tbody, .comparison-table tr, .comparison-table th, .comparison-table td { display: block; }
  .comparison-table colgroup, .comparison-table thead { display: none; }
  .comparison-table tbody { display: grid; gap: 12px; }
  .comparison-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid #e2e8f0; border-radius: 16px; background: var(--bg-card); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
  .comparison-table tbody tr + tr > * { border-top: 0; }
  .comparison-table tbody th { grid-column: 1 / -1; padding: 16px 18px 14px; border-bottom: 1px solid #eef2f6; }
  .comparison-table td { padding: 14px 16px 16px; }
  .comparison-table .highlight-col { box-shadow: none; border-right: 1px solid #e3ecfb; }
  .comp-mobile-label { display: block; margin-bottom: 10px; color: var(--text-muted); font-size: .75rem; font-weight: 600; line-height: 1.3; }
  .highlight-col .comp-mobile-label { color: var(--primary-hover); }
  .comp-cell { gap: 10px; }
  .comp-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .comp-text strong { font-size: .875rem; }
  .comp-text span { font-size: .78rem; }
}
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 980px; margin-inline: auto; align-items: stretch; }
.pricing-card { --price-edge: rgba(37, 99, 235, .7); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 36px; border: 1px solid #dce3ed; border-radius: var(--radius-lg); background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); isolation: isolate; }
/* Pointer light follows only the one-pixel perimeter, leaving the copy surface clear. */
.pricing-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--price-light-x, 50%) var(--price-light-y, 0%), var(--price-edge), transparent 75%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 350ms ease-out;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pricing-card.is-lit::before { opacity: 1; }
}
.pricing-card-motion { display: flex; min-width: 0; perspective: 1200px; }
.pricing-card-motion > .pricing-card { width: 100%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pricing-card-motion > .featured {
    transform: rotateX(var(--pro-tilt-x, 0deg)) rotateY(var(--pro-tilt-y, 0deg));
    transition: transform 350ms cubic-bezier(.16, 1, .3, 1);
  }
  .pricing-card-motion.is-tilting > .featured {
    will-change: transform;
    transition-duration: 120ms;
  }
}
.pricing-intro > span { display: inline; }
.pricing-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 8px; }
.pricing-title { font-size: 1.25rem; font-weight: 620; letter-spacing: -.015em; }
.pricing-badge { padding: 4px 11px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #ffffff; font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pricing-desc { min-height: 3.2em; max-width: 40ch; color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; }
.pricing-price-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 28px; }
.pricing-price { font-size: 3.5rem; font-weight: 640; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pricing-price::first-letter { font-size: .5em; font-weight: 550; letter-spacing: 0; vertical-align: .62em; margin-right: 2px; }
.pricing-period { color: var(--text-muted); font-size: .875rem; line-height: 1.5; }
.pricing-chrome-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.pricing-card > .btn { width: 100%; margin-top: 28px; padding-inline: 18px; }
.pricing-card > .btn:focus-visible { outline-width: 3px; outline-offset: 4px; }
.pricing-card > .btn-secondary { border: 1px solid #c7d2e0; background: #ffffff; color: var(--text-primary); }
.pricing-action-arrow { width: 18px; height: 18px; flex: 0 0 18px; margin-left: auto; transition: transform 180ms ease-out; }
.pricing-cta > span { flex: 1; text-align: left; }
.pricing-list-heading { margin: 32px 0 16px; padding-top: 28px; border-top: 1px solid #e8edf3; color: var(--text-primary); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
.pricing-features { display: grid; align-content: start; gap: 14px; margin: 0; list-style: none; }
.pricing-feature-item { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: .9375rem; line-height: 1.55; }
.pricing-feature-item .ui-icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: #eef2f7; color: #475569; }
.pricing-grid > .pricing-card:focus-within { border-color: var(--primary); }

/* Pro: the one saturated surface on the page. */
.pricing-card.featured {
  --price-edge: rgba(255, 255, 255, .85);
  border-color: transparent; color: #ffffff;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(160deg, #2152d4 0%, #1e3a8a 100%);
  box-shadow: 0 2px 4px rgba(30, 58, 138, .12), 0 32px 64px -28px rgba(30, 64, 175, .55);
}
.featured .pricing-title, .featured .pricing-price { color: #ffffff; }
.featured .pricing-desc { color: rgba(255, 255, 255, .86); }
.featured .pricing-period { color: rgba(255, 255, 255, .8); }
.featured .pricing-list-heading { border-top-color: rgba(255, 255, 255, .2); color: #ffffff; }
.featured .pricing-feature-item { color: rgba(255, 255, 255, .92); }
.featured .pricing-feature-item .ui-icon { background: rgba(255, 255, 255, .18); color: #ffffff; }
.pricing-card > .pricing-cta-pro { border: 0; background: #ffffff; color: #1e40af; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .45); }
.pricing-card > .pricing-cta-pro:focus-visible { outline-color: #ffffff; }
.featured:focus-within { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35), 0 32px 64px -28px rgba(30, 64, 175, .55); }
@media (hover: hover) and (pointer: fine) {
  .pricing-card > .btn-secondary:hover { border-color: var(--primary); color: var(--primary-hover); background: #f5f9ff; }
  .pricing-card > .pricing-cta-pro:hover { background: #eef4ff; }
  .pricing-cta:hover .pricing-action-arrow { transform: translate(2px, -2px); }
}
@media (max-width: 900px) {
  .pricing-grid { gap: 20px; }
  .pricing-card { padding: 28px; }
}
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .pricing-card-motion { order: -1; }
  .pricing-desc { min-height: 0; max-width: none; }
}
@media (max-width: 480px) {
  .pricing-card { padding: 24px; }
  .pricing-price { font-size: 3rem; }
  .pricing-card > .btn { font-size: .875rem; padding-inline: 14px; gap: 8px; }
}
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-question { width: 100%; border: 0; padding: 24px 0; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; font-size: 1rem; font-weight: 550; color: var(--text-primary); }
.faq-question .ui-icon { transition: transform .2s; color: var(--text-secondary); }
.faq-item.active .faq-question .ui-icon { transform: rotate(180deg); color: var(--primary); }
.faq-answer { max-height: 0; overflow: hidden; color: var(--text-secondary); font-size: .9rem; line-height: 1.75; }
.faq-answer-inner { padding-bottom: 24px; }
.cta-banner {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  padding: 72px 48px; border-radius: var(--radius-lg); color: #ffffff; text-align: center;
  background: radial-gradient(70% 90% at 50% -10%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(160deg, #2152d4 0%, #1e3a8a 100%);
  box-shadow: 0 2px 4px rgba(30, 58, 138, .12), 0 32px 64px -32px rgba(30, 64, 175, .5);
}
.cta-banner-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: 18px; background: #ffffff; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .45); }
.cta-banner-mark img { width: 44px; height: 44px; }
.cta-banner-title { max-width: 18em; margin-bottom: 16px; color: #ffffff; font-size: clamp(1.875rem, 3.2vw, 2.5rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.cta-banner-desc { max-width: 52ch; margin: 0 auto 32px; color: rgba(255, 255, 255, .86); font-size: 1.0625rem; line-height: 1.7; }
.cta-banner .cta-banner-btn { background: #ffffff; color: #1e40af; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .45); }
.cta-banner .cta-banner-btn:hover { background: #eef4ff; }
.cta-banner .cta-banner-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.cta-banner-btn:hover .pricing-action-arrow { transform: translate(2px, -2px); }
.cta-banner-note { margin-top: 16px; color: rgba(255, 255, 255, .8); font-size: .8125rem; line-height: 1.5; }
.footer { padding: 48px 0 24px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: .85rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-col-title { font-size: .85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 20px; letter-spacing: 0; }
.footer-links { list-style: none; display: grid; gap: 10px; }
.footer-link { font-size: .8rem; text-decoration: none; color: var(--text-secondary); }
.footer-link:hover { color: var(--primary-hover); text-decoration: underline; }
.footer-pending { font-size: .8rem; }
.footer-bottom { padding-top: 24px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .75rem; }
@media (max-width: 1100px) { .hero-layout { gap: 32px; } .hero-title { font-size: 3rem; } .hero-cta-group { gap: 12px; } }
@media (max-width: 900px) { .hero-section { padding: 100px 0 48px; } .hero-layout { grid-template-columns: 1fr; gap: 40px; } .hero-copy { order: -1; } .hero-copy { max-width: 600px; } .hero-title { font-size: clamp(2.5rem, 6vw, 3.5rem); } .hero-meta-list { gap: 24px; } .wiki-paper { padding: 18px; } .footer-top { gap: 24px; } }
@media (max-width: 767px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .cta-banner { padding: 56px 24px; } }
@media (max-width: 480px) { .hero-section { padding-top: 92px; } .hero-title { font-size: 2.5rem; letter-spacing: -.04em; } .hero-description { font-size: 1rem; } .hero-cta-group { gap: 12px; } .hero-cta-group .chrome-btn { padding-inline: 15px; font-size: .825rem; } .hero-cta-group .btn-text { font-size: .825rem; } .hero-meta-list { gap: 14px; font-size: .75rem; } .hero-meta-item { gap: 7px; } .smart-wiki-popover { gap: 8px; } .popover-copy-btn { padding: 6px; } .popover-title { font-size: .75rem; } .cta-banner { padding: 48px 20px; } .footer-top { column-gap: 20px; } .footer-top > div:first-child { grid-column: 1 / -1; } }

.store-action-monochrome svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 1100px) { .hero-layout { gap: 32px; } .wiki-paper { padding: 22px; } .wiki-paragraph { font-size: .95rem; } }
@media (max-width: 900px) { .hero-layout { grid-template-columns: 1fr; } .hero-comparison { width: 100%; max-width: 720px; } .hero-copy { max-width: 640px; } .wiki-paragraph { font-size: 1.05rem; } }
@media (max-width: 480px) { .wiki-paper { padding: 18px; } .wiki-title { font-size: 1.35rem; } .wiki-paragraph { font-size: .95rem; line-height: 1.85; } .wiki-sub { margin-bottom: 16px; } .popover-actions { flex-wrap: wrap; gap: 8px; } .popover-url { flex-basis: 100%; } .smart-wiki-popover { padding: 12px; } .hero-layout { gap: 32px; } }

.comparison-handle { display: grid; place-items: center; }

.wiki-paragraph + .wiki-paragraph { margin-top: 14px; }
.comparison-motion { perspective: 1000px; }
.comparison-stage {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: center;
  box-shadow: 0 3px 8px -3px rgb(24 44 78 / .1), var(--tilt-shadow, 0 28px 40px -12px rgb(24 44 78 / .26));
  transition: box-shadow 180ms cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .comparison-stage { transform: none; } }

.comparison-captions { position: absolute; inset-inline: 20px; top: 16px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; line-height: 1.6; color: var(--text-secondary); font-size: .8rem; font-weight: 550; pointer-events: none; }
.comparison-captions > :last-child { padding: 3px 10px; border: 1px solid var(--primary); border-radius: 999px; color: var(--primary-hover); background: #ffffff; white-space: nowrap; }
.comparison-stage .wiki-paper { padding-top: 76px; }
/* A single moving row of HTML reconstructions with original capture geometry. */
.sample-showcase { height: 950px; display: flex; flex-direction: column; justify-content: center; gap: 32px; position: relative; background: var(--bg-secondary); }
.sample-viewport { width: 100%; max-width: 1920px; margin-inline: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overflow-anchor: none; touch-action: pan-x pan-y; scroll-behavior: auto; }
.sample-viewport::-webkit-scrollbar { display: none; }
.sample-track { display: flex; align-items: center; gap: 24px; width: max-content; padding: 12px 0; }
/* Original hotspot coordinates scale with each reconstructed page viewport. */
.sample-card { width: var(--sample-width); flex-shrink: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; overflow: hidden; }
.sample-shot { position: relative; height: var(--sample-height); }
.sample-shot .sample-link { position: absolute; display: block; padding: 0; margin: 0; border: 0; border-radius: 4px; cursor: pointer; }
.sample-link .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sample-link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; }
.sample-toolbar { display: flex; justify-content: center; align-items: center; gap: 24px; text-align: center; }
.sample-popover { position: fixed; z-index: 35; width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
@media (max-width: 900px) {
  .sample-showcase { height: auto; padding: 32px 0; gap: 24px; }
  .sample-toolbar { align-items: center; flex-direction: column; gap: 16px; }
}

/* Dynamic gallery: one depth composition, with still targets during interaction. */
.sample-showcase { overflow: clip; }
.sample-viewport { padding-block: 28px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sample-track { padding-block: 24px; }
.sample-card { transform: translateY(var(--gallery-lift, 0px)) scaleX(var(--gallery-scale, 1)); transform-origin: center; transition: transform 380ms cubic-bezier(.16,1,.3,1), box-shadow 380ms cubic-bezier(.16,1,.3,1); }
.sample-card.gallery-hover, .sample-card:focus-within { --gallery-lift: -14px; transform: translateY(var(--gallery-lift)) scaleX(1); box-shadow: 0 28px 42px -24px rgba(24,44,78,.38); border-color: transparent; }
.sample-popover:not([hidden]) { animation: link-detail-arrive 260ms cubic-bezier(.16,1,.3,1) both; }
@keyframes link-detail-arrive { from { opacity: .45; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
#features .feature-icon-box { transition: transform 350ms cubic-bezier(.16,1,.3,1); transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 900px) {
  .sample-viewport { padding-block: 8px; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  .sample-track { padding-block: 12px; }
  .sample-card { transform: none; }
  .sample-card.gallery-hover, .sample-card:focus-within { --gallery-lift: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sample-card, .sample-card.gallery-hover, .sample-card:focus-within { transform: none; transition: none; box-shadow: none; }
  .sample-popover:not([hidden]) { animation: none; }
}

/* Caption leads the gallery; autoplay has no navigation or pause toolbar. */
.sample-toolbar { flex: 0 0 auto; }

/* Gallery cards as browser windows: one shared frame, quiet until hovered. */
.sample-card { border-color: #d5dde8; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 20px 40px -28px rgba(30, 50, 80, .3); }
.sample-chrome { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; height: 36px; padding-inline: 12px; border-bottom: 1px solid #e3e8ef; background: #f6f8fb; }
.sample-dots { display: flex; gap: 6px; }
.sample-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3dae4; }
.sample-address { display: flex; align-items: center; justify-content: center; gap: 6px; justify-self: center; width: min(100%, 240px); height: 22px; padding-inline: 10px; border: 1px solid #e3e8ef; border-radius: 6px; background: #ffffff; color: #64748b; font-size: .72rem; line-height: 1; white-space: nowrap; overflow: hidden; }
.sample-address svg { width: 11px; height: 11px; flex: 0 0 11px; color: #94a3b8; }
.sample-address span { overflow: hidden; text-overflow: ellipsis; }
.sample-shot .sample-link { --hotspot-alpha: .32; opacity: 0; transition: opacity 260ms ease-out; }
.sample-card:hover .sample-link, .sample-card.gallery-hover .sample-link, .sample-card:focus-within .sample-link, .sample-shot .sample-link.hovered { opacity: 1; }
.sample-shot .sample-link:hover, .sample-shot .sample-link.hovered { --hotspot-alpha: .58; }
@media (hover: none) { .sample-shot .sample-link { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .sample-shot .sample-link { transition: none; } }
@media (max-width: 640px) {
  .cta-banner-mark { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 16px; }
  .cta-banner-mark img { width: 38px; height: 38px; }
  .cta-banner-title { font-size: clamp(1.75rem, 7.8vw, 2rem); }
  .cta-banner-desc { font-size: 1rem; }
}

/* Wide hero: owns the first screen, and the copy centers on the demo window rather than window plus steps. */
@media (min-width: 901px) {
  .hero-section { display: flex; align-items: center; min-height: min(100svh, 1080px); padding: 112px 0 72px; }
  .hero-section > .hero-layout { align-items: start; }
  .hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: 478px; }
}

/* Hero polish: a quiet lead-in, an organized assurance row and a demo with real depth. */
.hero-eyebrow { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-bottom: 24px; padding: 6px 14px 6px 10px; border: 1px solid #d9e4f5; border-radius: 999px; background: #ffffff; color: #1e40af; font-size: .8125rem; font-weight: 600; line-height: 1.4; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.hero-description { max-width: 40ch; font-size: 1.0625rem; line-height: 1.7; }
.product-principles { max-width: 520px; margin-top: 32px; padding-top: 22px; border-top: 1px solid #e3e8ef; }
.hero-meta-list { gap: 10px 18px; font-size: .8125rem; }
.hero-meta-item { gap: 8px; }
.demo-browser { box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .06), 0 44px 80px -36px rgba(37, 99, 235, .4); }
.demo-steps { counter-reset: demo-step; margin-top: 22px; }
.demo-step { border-top-color: #dfe5ee; }
.demo-step strong::before { counter-increment: demo-step; content: counter(demo-step, decimal-leading-zero); margin-right: 8px; color: #94a3b8; font-variant-numeric: tabular-nums; font-weight: 600; }
.demo-step[aria-current="step"] strong::before { color: var(--primary); }
@media (max-width: 900px) { .hero-eyebrow { margin-bottom: 20px; } }
@media (max-width: 480px) { .hero-eyebrow { font-size: .75rem; } .product-principles { margin-top: 28px; padding-top: 18px; } }
.pricing-note { margin-top: 18px; color: rgba(255, 255, 255, .72); font-size: .8125rem; line-height: 1.55; }

/* Carousel link popup: same size and colors as the extension's viewer popup (.link-preview). */
.sample-popover { width: min(360px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid #d3d3d3; border-radius: 10px; background: #ffffff; color: #242424; box-shadow: 0 10px 32px #0000001a; font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.sample-popover .popover-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.4; font-weight: 600; }
.sample-popover .popover-domain { margin-top: 3px; color: #1d4ed8; font-size: 12px; }
.sample-popover .popover-actions { flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin-top: 6px; }
.sample-popover .popover-copy-btn { min-height: 0; padding: 5px 8px; border: 1px solid #d3d3d3; border-radius: 6px; background: #efefef; color: #242424; font-size: 11px; line-height: 1.3; }
.sample-popover .popover-copy-btn:hover { background: #e2e2e2; }
.sample-popover .popover-url { flex: 1; flex-basis: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: #686868; font-size: 11px; line-height: 1.45; word-break: break-all; }

/* Buttons for things that aren't available yet: shown, but not clickable. */
.btn.is-soon, .chrome-btn.is-soon { cursor: not-allowed; pointer-events: none; }
.chrome-btn.is-soon { background: #4b6fc4; }
.cta-banner .cta-banner-btn.is-soon { background: rgba(255, 255, 255, .88); }
.pricing-card > .btn-secondary.is-soon { background: #f8fafc; color: var(--text-secondary); }
.pricing-card > .pricing-cta-pro:disabled { opacity: 1; background: rgba(255, 255, 255, .88); color: #1e40af; box-shadow: none; }
.pricing-cta.is-soon > span { text-align: center; }

/* Free vs Pro table under the pricing cards. */
.plan-compare { max-width: 880px; margin: 64px auto 0; }
.plan-compare-title { margin-bottom: 20px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; text-align: center; }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e2e8f0; border-radius: var(--radius-lg); background: #ffffff; overflow: hidden; font-size: .9375rem; }
.plan-table th, .plan-table td { padding: 13px 18px; text-align: left; vertical-align: middle; line-height: 1.5; }
.plan-table thead th { background: #f8fafc; color: var(--text-primary); font-size: .8125rem; font-weight: 600; }
.plan-table thead th:last-child { color: var(--primary); }
.plan-table tbody tr + tr th, .plan-table tbody tr + tr td, .plan-table tbody tr:first-child > * { border-top: 1px solid #eef2f6; }
.plan-table tbody th { color: #334155; font-weight: 500; }
.plan-table td { width: 28%; color: var(--text-secondary); }
.plan-table td:last-child { color: var(--text-primary); font-weight: 550; }
.plan-table .pc-yes svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #e6eefc; fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.plan-table .pc-no { color: #94a3b8; }
.pc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.plan-compare-note { max-width: 70ch; margin: 18px auto 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.6; text-align: center; }
@media (max-width: 640px) {
  .plan-compare { margin-top: 48px; }
  .plan-table { font-size: .8125rem; }
  .plan-table th, .plan-table td { padding: 11px 10px; }
  .plan-table td { width: 26%; }
}

.footer-contact { margin-top: 12px; font-size: .8rem; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 8px 1.5rem; }
.doc-section a { color: var(--primary); text-underline-offset: 2px; }

/* Launch price tag beside the Pro price. */
.pricing-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pricing-launch { padding: 4px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: .01em; }

/* Source and licence credits under the sample carousel. */
.sample-credits { max-width: 880px; margin: 4px auto 0; color: var(--text-muted); font-size: .75rem; line-height: 1.6; text-align: center; }
.sample-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sample-credits a:hover { color: var(--primary-hover); }

/* Carousel progress: one dot per sample page; the current one stretches. */
.sample-progress { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.sample-progress-dot { position: relative; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 300ms ease; }
.sample-progress-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; transform: translate(-50%, -50%); transition: width 300ms ease, background-color 300ms ease; }
.sample-progress-dot:hover::before { background: #94a3b8; }
.sample-progress-dot.is-active { width: 34px; }
.sample-progress-dot.is-active::before { width: 24px; background: var(--primary); }
.sample-progress-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .sample-progress-dot, .sample-progress-dot::before { transition: none; } }