/* Beta recruitment: the existing Lightshot palette, native captures and
   shared header/footer. Static links keep joining possible without scripts. */
.beta-page main { overflow-x: clip; }
/* The copy and the stage share a top line. Every later split on the page
   uses the FAQ's 5/7 tracks, so their second columns start on one vertical. */
.beta-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); padding-block: var(--page-top) var(--space-7); }
/* The QR note is pinned to the foot of the copy, level with the stage's
   bottom edge, so the two columns share both lines. */
.beta-hero-copy { display: flex; flex-direction: column; }
/* The shared label: no pill and no indicator dot. */
.beta-kicker { display: block; margin-bottom: var(--space-4); color: var(--accent-text); font-size: var(--text-small); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.beta-kicker > span { display: none; }
.beta-page .section-index { margin-bottom: var(--space-4); }
.beta-hero h1 { font-size: clamp(46px, 5.25vw, 80px); line-height: 1.02; letter-spacing: -.058em; text-wrap: balance; }
.beta-hero h1 > span { color: var(--accent-text); }
.beta-lede { max-width: 35em; margin-top: var(--space-5); font-size: var(--text-lead); line-height: 1.6; color: var(--muted); }
.beta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.beta-small { font-size: 13px; line-height: 1.6; color: var(--muted); }
.beta-hero-copy > .beta-small { margin-top: var(--space-4); max-width: 35em; }
.beta-desktop-note { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-5); font-size: 13px; line-height: 1.7; color: var(--muted); }
/* The code keeps a white quiet zone in both themes so phones can read it. */
.beta-desktop-note img { width: 88px; height: 88px; padding: var(--space-2); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--raise-1); }
.beta-desktop-note a { text-decoration: underline; text-underline-offset: 3px; }
.beta-desktop-note strong { color: var(--ink); font-weight: 500; }
/* The captures stand on a lit stage, as in the homepage hero. */
.beta-hero-art { position: relative; overflow: hidden; margin: 0; padding: var(--card-pad); border-radius: var(--radius-xl); background: var(--stage-light); box-shadow: var(--raise-2); }
.beta-art-label { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--muted); font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.beta-phone-composition { position: relative; width: 100%; height: clamp(380px, 34vw, 480px); margin-top: var(--space-4); }
.beta-phone-composition img { position: absolute; padding: 5px; background: var(--device-frame); border: 0; border-radius: 30px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 0 1px rgb(10 8 19 / .5), var(--shadow-device); }
.beta-phone-main { height: 92%; width: auto; left: 4%; top: 3%; transform: rotate(-6deg); z-index: 1; }
.beta-phone-back { height: 72%; width: auto; right: 4%; top: 18%; transform: rotate(9deg); }
.beta-hero-art figcaption { padding-top: var(--space-4); color: var(--muted); font-size: 13px; line-height: 1.6; }

.beta-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--section-y); padding: var(--card-pad); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--raise-1); }
.beta-summary p { display: grid; align-content: start; gap: var(--space-1); }
.beta-summary strong { font-size: 16px; font-weight: 500; }
.beta-summary span { color: var(--muted); font-size: var(--text-small); }

.beta-section { padding-block: var(--section-y); }
.beta-section-heading { max-width: 850px; }
.beta-section-heading h2, .beta-install h2, .beta-scope h2, .beta-faq h2 { font-size: clamp(36px, 4.2vw, 60px); text-wrap: balance; }
.beta-section-heading > p:last-child { margin-top: var(--space-5); max-width: 39em; font-size: 18px; line-height: 1.65; color: var(--muted); }

.beta-product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; margin-top: var(--space-7); }
.beta-editor { margin: 0; display: grid; place-items: center; padding: var(--space-7) var(--space-5) var(--space-5); border-radius: var(--radius-xl); background: var(--stage-light); box-shadow: var(--raise-2); }
.beta-editor img { width: 62%; max-width: 270px; padding: 5px; border: 0; border-radius: 32px; background: var(--device-frame); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 0 1px rgb(10 8 19 / .5), var(--shadow-device); }
.beta-editor figcaption { margin-top: var(--space-5); color: var(--muted); font-size: 13px; text-align: center; }
.beta-feature-list article { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.beta-feature-list article:first-child { padding-top: 0; border-top: 0; }
.beta-feature-list article:last-child { padding-bottom: 0; }
/* One numbered disc for the features and the install steps. */
.beta-number, .beta-step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sunken); box-shadow: var(--well); color: var(--accent-text); font-size: var(--text-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.beta-page h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.beta-feature-list p { margin-top: var(--space-3); color: var(--muted); line-height: 1.7; }
.beta-feature-list .text-link { display: inline-flex; margin-top: var(--space-4); }

/* A raised panel takes the section rhythm as margin. */
.beta-install { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); margin-block: var(--section-y); padding: clamp(var(--space-6), 4.5vw, var(--space-8)); border-radius: var(--radius-xl); background: var(--raised); box-shadow: var(--raise-2); }
.beta-install-intro > p:not(.section-index) { margin-top: var(--space-5); max-width: 32em; color: var(--muted); line-height: 1.7; }
.beta-install-intro .button { margin-top: var(--space-6); }
.beta-install-intro > p.beta-small { margin-top: var(--space-4); }
.beta-steps { list-style: none; margin: 0; padding: 0; }
.beta-steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.beta-steps li:first-child { padding-top: 0; }
.beta-steps li:last-child { border: 0; padding-bottom: 0; }
.beta-steps p { color: var(--muted); margin-top: var(--space-3); line-height: 1.7; }
.beta-steps p strong { color: var(--ink); font-weight: 500; }
.beta-steps p a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.beta-steps .text-link { display: inline-flex; margin-top: var(--space-3); }

.beta-scope { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.beta-scope > div > p:not(.section-index) { color: var(--muted); margin-top: var(--space-5); line-height: 1.7; max-width: 34em; }
.beta-scope .text-link { display: inline-flex; margin-top: var(--space-5); }
.beta-scope-detail { padding: var(--space-2) var(--card-pad); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--raise-1); }
.beta-scope-detail > div { padding-block: var(--space-5); border-top: 1px solid var(--line); }
.beta-scope-detail > div:first-child { border-top: 0; }
.beta-scope-detail p { color: var(--muted); margin-top: var(--space-3); line-height: 1.7; }
.beta-scope-detail strong { font-weight: 500; color: var(--ink); }

.beta-session { padding-block: var(--section-y); }
.beta-session-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; margin-top: var(--space-7); }
.beta-test-list ol { list-style: none; padding: 0; margin: 0; counter-reset: test-step; }
.beta-test-list li { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.beta-test-list li:first-child { padding-top: 0; }
.beta-test-list li:last-child { border: 0; }
.beta-test-list strong { font-size: 21px; font-weight: 500; }
.beta-test-list span { color: var(--muted); line-height: 1.7; }
.beta-feedback { padding: var(--card-pad); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--raise-1); }
/* The icon sits in the homepage's recessed tile. */
.beta-feedback-mark { display: grid; width: fit-content; margin-bottom: var(--space-5); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--sunken); box-shadow: var(--well); color: var(--accent-text); }
.beta-feedback p { margin-top: var(--space-4); line-height: 1.7; color: var(--muted); }
.beta-feedback strong { font-weight: 500; color: var(--ink); }
.beta-feedback .text-link { display: inline-flex; margin-top: var(--space-5); }

/* The answers are the shared FAQ list, on the same tracks as /support. */
.beta-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.beta-faq > div:first-child > p:last-child { color: var(--muted); margin-top: var(--space-5); }
/* The link inside the sentence keeps the sentence's size. */
.beta-faq > div:first-child .text-link { font-size: inherit; }

/* The closing invitation sits on the ink stage (the markup adds .tone-stage). */
.beta-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: var(--section-y);
  padding: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--stage-glow), transparent 40%), var(--stage);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(10 8 19 / .4), var(--shadow-2);
  text-align: center;
}
.beta-close h2 { font-size: clamp(40px, 5vw, 72px); text-wrap: balance; }
.beta-close > p:not(.section-index) { max-width: 38em; margin: var(--space-5) auto 0; color: var(--muted); }
.beta-close .button { margin-top: var(--space-6); }
.beta-close > p.beta-small { margin-top: var(--space-4); }
.beta-updates-link { display: inline-flex; margin-top: var(--space-4); }

@media (max-width: 1000px) {
  /* The copy outgrows the stage here, so only the tops are shared. */
  .beta-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
  .beta-hero h1 { font-size: clamp(44px, 5.7vw, 60px); }
  .beta-lede { font-size: 17px; }
  .beta-hero-art { padding: var(--space-5); }
  .beta-phone-composition { height: 390px; }
  .beta-phone-main { left: 0; top: 7%; }
  .beta-phone-back { right: 0; }
  .beta-product, .beta-install, .beta-scope, .beta-session-grid, .beta-faq { gap: var(--space-6); }
  /* The test list needs the full width for its two columns. */
  .beta-session-grid { grid-template-columns: 1fr; }
  .beta-summary { gap: var(--space-5); }
  .beta-summary span { font-size: 13px; }
}
@media (max-width: 700px) {
  .beta-hero, .beta-product, .beta-install, .beta-scope, .beta-session-grid, .beta-faq { grid-template-columns: 1fr; }
  /* A centred column on phones, matching the homepage hero. */
  .beta-hero { padding-bottom: var(--space-6); }
  .beta-hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  /* The label steps down with the shared one (base.css). */
  .beta-kicker { font-size: 13px; }
  .beta-hero h1 { font-size: clamp(42px, 10.6vw, 64px); }
  .beta-actions { align-items: center; flex-direction: column; width: 100%; gap: var(--space-3); }
  .beta-actions .button { width: min(100%, 360px); justify-content: center; }
  .beta-actions .button, .beta-install .button, .beta-close .button { padding-inline: var(--space-4); max-width: 100%; }
  .beta-close .button { width: min(100%, 360px); justify-content: center; }
  .beta-desktop-note { display: none; }
  .beta-hero-art { max-width: 480px; width: 100%; justify-self: center; border-radius: var(--radius-lg); }
  .beta-phone-composition { height: clamp(390px, 112vw, 530px); }
  .beta-phone-main { left: 6%; }
  .beta-phone-back { right: 5%; top: 24%; }
  .beta-summary { grid-template-columns: 1fr; gap: var(--space-5); }
  .beta-product { margin-top: var(--space-6); }
  .beta-editor { padding-top: var(--space-6); border-radius: var(--radius-lg); }
  .beta-editor img { max-width: 230px; }
  .beta-feature-list article { padding-block: var(--space-5); }
  .beta-install { padding: var(--space-6) var(--card-pad); border-radius: var(--radius-lg); }
  .beta-steps li { gap: var(--space-3); }
  .beta-page h3 { font-size: 24px; }
  .beta-session-grid { margin-top: var(--space-6); }
  .beta-test-list li { grid-template-columns: 80px 1fr; gap: var(--space-4); }
  .beta-test-list strong { font-size: 19px; }
  .beta-close { padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg); }
}