.tester-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start; padding-block: 90px; }
.tester-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); gap: clamp(36px, 5vw, 72px); align-items: start; }
.tester-copy { min-width: 0; }
.tester-copy > .eyebrow { margin-top: 0; }
.tester-context { margin: 0 0 24px; color: var(--muted); font-size: .78rem; letter-spacing: .08em; }
.tester-copy .text-link { color: var(--muted); font-size: .9rem; }
.tester-copy h1 { margin: 20px 0 28px; font-size: clamp(2.7rem, 5.5vw, 4.7rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 560; }
.tester-copy .lede { color: var(--muted); font-size: 1.1rem; max-width: 38rem; margin-bottom: 30px; }
.tester-card { padding: clamp(24px, 2.5vw, 36px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); min-width: 0; }
.tester-card h2 { margin: 0 0 12px; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.03em; }
.tester-card p { color: var(--muted); }
.tester-card label:not(.consent) { display: block; margin: 25px 0 9px; font-weight: 550; }
.tester-card input:not([type=checkbox]) { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.tester-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tester-card .field-help, .privacy-note { font-size: .83rem; line-height: 1.6; }
.field-help { margin: 9px 0 24px; }
.consent { display: flex; gap: 12px; font-size: .9rem; align-items: start; margin-block: 24px; cursor: pointer; }
.consent input { accent-color: var(--accent); flex-shrink: 0; width: 19px; height: 19px; margin-top: 3px; }
.tester-card button { width: 100%; font: inherit; cursor: pointer; margin-top: 12px; transition: none; }
.tester-card button:hover { transform: none; }
.tester-card button:disabled { opacity: .5; cursor: wait; }
#form-status { font-size: .88rem; margin: 12px 0; }
.privacy-note { border-top: 1px solid var(--line); padding-top: 24px; margin: 28px 0 0; }
.privacy-note a { text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }
@media(max-width: 850px) { .tester-main { padding-block: 54px; gap: 48px; } .tester-hero { grid-template-columns: 1fr; gap: 32px; } .tester-copy h1 { max-width: 650px; } }

.tester-copy { max-width: 800px; }
.tester-card { width: 100%; max-width: 620px; margin-inline: 0; }
.sweeply-showcase { min-width: 0; padding-block: 44px 12px; border-top: 1px solid var(--line); }
.showcase-heading { max-width: 650px; margin-bottom: 24px; }
.showcase-heading .eyebrow { color: #71d9ed; }
.showcase-heading h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.13; letter-spacing: -.04em; margin: 14px 0 18px; font-weight: 560; }
.showcase-heading > p:last-child { color: var(--muted); max-width: 540px; }
.sweeply-gallery { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 28px 6px 16px; }
.sweeply-slide { flex: 1 0 0; min-width: 0; margin: 0; scroll-snap-align: center; border-radius: 14px; cursor: zoom-in; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.sweeply-slide:hover, .sweeply-slide:focus-visible { transform: translateY(-4px); outline: none; box-shadow: 0 0 0 1px #71d9ed, 0 14px 32px #0005; }
.sweeply-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1056 / 1872; border: 1px solid #263b47; border-radius: 14px; box-shadow: 0 12px 28px #0004; }
.sweeply-slide figcaption { margin-top: 16px; font-size: .9rem; color: var(--text); }
.sweeply-slide figcaption span { color: #71d9ed; margin-right: 8px; font-size: .75rem; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 14px; }
.gallery-controls button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.gallery-controls button:hover { border-color: #71d9ed; }
.gallery-controls button:disabled { opacity: .35; cursor: default; }
.gallery-controls span { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.gallery-controls button:focus-visible, .sweeply-gallery:focus-visible { outline: 2px solid #71d9ed; outline-offset: 4px; }
.gallery-lightbox { position: fixed; z-index: 10; inset: 0; width: 100%; height: 100%; padding: 6vh 8vw; border: 0; background: #090b0df2; color: var(--text); }
.gallery-lightbox figure { display: grid; place-items: center; gap: 14px; width: 100%; height: 100%; margin: 0; }
.gallery-lightbox img { display: block; width: auto; height: auto; max-width: 84vw; max-height: 82vh; object-fit: contain; border: 1px solid #263b47; border-radius: 14px; box-shadow: 0 20px 60px #0009; }
.gallery-lightbox figcaption { color: var(--text); font-size: .9rem; }
.lightbox-close, .lightbox-nav { position: absolute; z-index: 1; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.lightbox-close { top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; font-size: 1.6rem; line-height: 1; }
.lightbox-nav { top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-close:hover, .lightbox-nav:hover { border-color: #71d9ed; }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid #71d9ed; outline-offset: 4px; }
@media(max-width: 600px) {
  .tester-main { gap: 40px; }
  .sweeply-showcase { padding-top: 32px; }
  .sweeply-gallery { gap: 16px; padding-block: 8px 16px; }
  .sweeply-slide { flex: 0 0 88%; transform: none; scroll-snap-align: start; }
  .sweeply-slide figcaption { font-size: .8rem; }
}
@media(prefers-reduced-motion: reduce) { .sweeply-slide { transition: none; } .sweeply-gallery { scroll-behavior: auto; } .gallery-lightbox { scroll-behavior: auto; } }

@media(min-width: 601px) { .tester-main .gallery-controls { display: none; } }
/* Leave at least 300px for the flexible security widget on small phones. */
@media(max-width: 400px) { .tester-card { padding-inline: 13px; } }