/* Sam Updater app page. Plain unlayered rules, so they sit above Tech Nova's cascade layers while using its
   tokens. Every class carries the suh2-app prefix, and fallbacks keep the page readable under another theme. */
.suh2-app {
  --suh2-text: var(--clr-text-default, #1c1d1b);
  --suh2-muted: var(--clr-text-muted, #4f504d);
  --suh2-card: var(--clr-white, #fff);
  --suh2-line: var(--clr-border-default, #d4d5d0);
  --suh2-brand: var(--clr-brand, hsl(225 72% 46%));
  --suh2-brand-dark: var(--clr-brand-dark, hsl(225 72% 36%));
  --suh2-link: var(--clr-link, var(--suh2-brand));
  --suh2-tint: hsl(225 85% 96%);
  --suh2-tint-strong: hsl(225 75% 90%);
  --suh2-navy: #0b1330;
  --suh2-shadow: 0 1px 2px hsl(0 0% 0% / .04), 0 8px 24px -12px hsl(0 0% 0% / .12);
  --suh2-lift: 0 40px 80px -40px hsl(225 60% 12% / .6);
  overflow-x: clip;
  color: var(--suh2-text);
  line-height: 1.6;
}
:root[data-theme=dark] .suh2-app {
  --suh2-card: var(--clr-bg-surface, #1c1c1c);
  --suh2-tint: hsl(225 30% 15%);
  --suh2-tint-strong: hsl(225 35% 22%);
  --suh2-shadow: 0 1px 2px hsl(0 0% 0% / .3), 0 12px 32px -16px hsl(0 0% 0% / .6);
}

/* Spacing. Containers space their children with --suh2-flow, which a child can override for itself. */
.suh2-app :where(h1, h2, h3, p, ul, ol, pre) { margin: 0; }
.suh2-app :where(p, li) { text-wrap: pretty; }
.suh2-app [id] { scroll-margin-block-start: var(--space-m, 1.5rem); }
.suh2-app > section.region { --region-space: var(--space-l-xl, 2.5rem); }
.suh2-app__hero-copy > * + *,
.suh2-app__prose > * + *,
.suh2-app__intro > * + *,
.suh2-app__feature-copy > * + *,
.suh2-app__panel > * + *,
.suh2-app__verify-body > * + *,
.suh2-app__card > * + *,
.suh2-app__cta > * + * { margin-block-start: var(--suh2-flow, var(--space-s, 1rem)); }

/* Type */
.suh2-app__title {
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.suh2-app__h2 {
  font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.suh2-app__feature h3 {
  --suh2-flow: var(--space-xs, .75rem);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.suh2-app__card h3 { font-size: var(--fs-1, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.suh2-app__lead { font-size: var(--fs-1, 1.2rem); line-height: 1.55; }
.suh2-app__hero-copy > p:not([class]),
.suh2-app__prose > p,
.suh2-app__intro > p,
.suh2-app__feature-copy > p:not([class]),
.suh2-app__panel > p:not([class]),
.suh2-app__card p,
.suh2-app__faq p { max-width: 36em; color: var(--suh2-muted); }
.suh2-app :is(p, li) > a:not([class]) {
  color: var(--suh2-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.suh2-app :is(p, li) > a:not([class]):hover { text-decoration-thickness: 2px; }
.suh2-app code {
  padding: .1em .4em;
  border-radius: 6px;
  background: var(--suh2-tint);
  color: var(--suh2-text);
  font-family: var(--font-code, ui-monospace, monospace);
  font-size: .88em;
  overflow-wrap: anywhere;
}
/* Model numbers, file names and hosts move to the next line whole instead of breaking at the hyphen.
   Only a name longer than the full line wraps inside. */
.suh2-app__nw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.suh2-app__icon { flex: none; }

/* Buttons */
.suh2-app__actions { --suh2-flow: var(--space-m, 1.5rem); display: flex; flex-wrap: wrap; gap: var(--space-xs, .75rem); }
.suh2-app__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.35em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-0, 1rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.2;
  text-decoration: none;
}
.suh2-app__btn .suh2-app__icon { width: 1.15em; height: 1.15em; }
.suh2-app__btn--primary { background: var(--suh2-brand); color: #fff; box-shadow: 0 10px 24px -10px var(--clr-brand-shadow, hsl(225 72% 36% / .4)); }
.suh2-app__btn--primary:hover { background: var(--suh2-brand-dark); color: #fff; }
.suh2-app__btn--ghost { border-color: var(--suh2-line); background: var(--suh2-card); color: var(--suh2-text); }
.suh2-app__btn--ghost:hover { border-color: var(--suh2-muted); color: var(--suh2-text); }
.suh2-app__btn--light { background: #fff; color: var(--suh2-navy); }
.suh2-app__btn--light:hover { background: hsl(225 100% 95%); color: var(--suh2-navy); }
.suh2-app__btn--outline { border-color: hsl(0 0% 100% / .35); color: #fff; }
.suh2-app__btn--outline:hover { border-color: #fff; background: hsl(0 0% 100% / .08); color: #fff; }
@media (max-width: 479px) {
  .suh2-app__actions .suh2-app__btn { flex: 1 1 100%; }
}

/* Hero */
.suh2-app__hero-grid { display: grid; gap: var(--space-l-xl, 2.5rem); align-items: center; }
@media (min-width: 960px) {
  .suh2-app__hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.suh2-app__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs, .75rem); }
.suh2-app__app-icon { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 8px 20px -10px hsl(225 60% 20% / .5); }
.suh2-app__meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.suh2-app__meta li {
  padding: .3em .85em;
  border: 1px solid var(--suh2-line);
  border-radius: 999px;
  background: var(--suh2-card);
  color: var(--suh2-muted);
  font-size: var(--fs--1, .9rem);
  font-weight: var(--fw-medium, 500);
}
.suh2-app__stage { justify-self: center; width: 100%; max-width: 34rem; }
.suh2-app__stage img { width: 100%; border-radius: clamp(20px, 3vw, 32px); box-shadow: var(--suh2-lift); }

/* Why */
.suh2-app__why-grid { display: grid; gap: var(--space-l, 2rem); align-items: center; }
@media (min-width: 860px) {
  .suh2-app__why-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-xl, 3rem); }
}
.suh2-app__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs, .75rem); }
.suh2-app__stats li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: var(--space-s-m, 1.25rem);
  border: 1px solid var(--suh2-line);
  border-radius: 20px;
  background: var(--suh2-card);
  box-shadow: var(--suh2-shadow);
}
.suh2-app__stats strong { color: var(--suh2-link); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.suh2-app__stats span { color: var(--suh2-muted); font-size: var(--fs--1, .9rem); line-height: 1.4; }

/* Feature tour */
.suh2-app__intro { max-width: 44rem; margin-inline: auto; text-align: center; }
.suh2-app__intro > p { margin-inline: auto; font-size: var(--fs-1, 1.2rem); }
.suh2-app__chips { --suh2-flow: var(--space-m, 1.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.suh2-app__chips a {
  padding: .45em 1em;
  border: 1px solid var(--suh2-line);
  border-radius: 999px;
  background: var(--suh2-card);
  font-size: var(--fs--1, .9rem);
  font-weight: var(--fw-bold, 700);
  text-decoration: none;
}
.suh2-app__chips a:hover { border-color: var(--suh2-link); color: var(--suh2-link); }
.suh2-app__feature { display: grid; gap: var(--space-l, 2rem); align-items: center; margin-block-start: var(--space-xl-2xl, 4rem); }
@media (min-width: 900px) {
  .suh2-app__feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl-2xl, 4rem); }
  .suh2-app__feature.is-flipped .suh2-app__visual { order: -1; }
}
.suh2-app__eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--suh2-link);
  font-size: var(--fs--1, .9rem);
  font-weight: var(--fw-bold, 700);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.suh2-app__eyebrow .suh2-app__icon {
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: .55rem;
  border-radius: 12px;
  background: var(--suh2-tint-strong);
}
.suh2-app__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-l-xl, 2.5rem) var(--space-s, 1rem);
  border-radius: 28px;
  background: radial-gradient(70% 60% at 50% 35%, var(--suh2-tint-strong), var(--suh2-tint));
}

/* Screenshots sit in a plain phone frame. Light and dark captures swap with the site's theme switch. */
.suh2-app__phone {
  position: relative;
  flex: none;
  width: var(--suh2-phone, min(270px, 62vw));
  padding: 7px;
  border-radius: 38px;
  background: #111318;
  box-shadow: 0 0 0 1px hsl(0 0% 100% / .06), 0 30px 60px -30px hsl(225 60% 12% / .55), 0 14px 28px -14px hsl(0 0% 0% / .3);
}
.suh2-app__phone img { width: 100%; border-radius: 31px; }
.suh2-app__phone.has-dark .is-dark,
:root[data-theme=dark] .suh2-app__phone.has-dark .is-light { display: none; }
:root[data-theme=dark] .suh2-app__phone.has-dark .is-dark { display: block; }
.suh2-app__visual--pair { --suh2-phone: min(230px, 40vw); align-items: flex-start; }
.suh2-app__visual--pair .suh2-app__phone:first-child { z-index: 1; }
.suh2-app__visual--pair .suh2-app__phone + .suh2-app__phone {
  margin-inline-start: calc(var(--suh2-phone) * -.22);
  margin-block-start: calc(var(--suh2-phone) * .35);
}

/* Cards */
.suh2-app__more .suh2-app__h2,
.suh2-app__facts .suh2-app__h2 { text-align: center; }
.suh2-app__cards { display: grid; gap: var(--space-s, 1rem); margin-block-start: var(--space-l, 2rem); }
@media (min-width: 640px) {
  .suh2-app__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 999px) {
  .suh2-app__cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .suh2-app__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.suh2-app__card {
  padding: var(--space-m, 1.5rem);
  border: 1px solid var(--suh2-line);
  border-radius: 24px;
  background: var(--suh2-card);
  box-shadow: var(--suh2-shadow);
}
.suh2-app__card > h3 + p { --suh2-flow: var(--space-2xs, .5rem); }
.suh2-app__card > .suh2-app__icon {
  display: block;
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: .7rem;
  border-radius: 14px;
  background: var(--suh2-tint);
  color: var(--suh2-link);
}
.suh2-app__list li { position: relative; padding-inline-start: 1.4rem; color: var(--suh2-muted); }
.suh2-app__list li + li { margin-block-start: .5rem; }
.suh2-app__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: .2rem;
  top: .58em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--suh2-link);
}

/* Install and set up: a surface band shaped like the theme's hero, with the two guides as cards. */
.suh2-app > section.suh2-app__how {
  --region-space: var(--space-xl-2xl, 4rem);
  border-block: 1px solid var(--suh2-line);
  border-radius: var(--space-2xl-3xl, 4rem) 0;
  background: var(--clr-bg-surface, #efefeb);
}
:root[data-theme=dark] .suh2-app__how { --suh2-card: var(--clr-bg-page, #121212); }
.suh2-app__how-grid { display: grid; gap: var(--space-m, 1.5rem); align-items: start; }
@media (min-width: 1000px) {
  .suh2-app__how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.suh2-app__panel {
  padding: clamp(1.125rem, .5rem + 2.5vw, 2.25rem);
  border: 1px solid var(--suh2-line);
  border-radius: 28px;
  background: var(--suh2-card);
  box-shadow: var(--suh2-shadow);
}
.suh2-app__panel .suh2-app__h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); }
.suh2-app__panel > :is(ol, details, .suh2-app__note) { --suh2-flow: var(--space-m, 1.5rem); }
.suh2-app__steps { counter-reset: suh2-step; }
.suh2-app__steps li { position: relative; padding: .2rem 0 var(--space-s, 1rem) 2.75rem; counter-increment: suh2-step; }
.suh2-app__steps li:last-child { padding-block-end: 0; }
.suh2-app__steps li::before {
  content: counter(suh2-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--suh2-brand);
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1;
}
.suh2-app__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(1rem - 1px);
  top: 2.35rem;
  bottom: .35rem;
  width: 2px;
  border-radius: 2px;
  background: var(--suh2-line);
}
.suh2-app__note {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: var(--space-s, 1rem);
  border: 1px solid var(--clr-border-callout-note, hsl(225 70% 80%));
  border-radius: 16px;
  background: var(--clr-bg-callout-note, var(--suh2-tint));
  color: var(--clr-text-callout-note, var(--suh2-text));
}
.suh2-app__note .suh2-app__icon { width: 1.25rem; height: 1.25rem; margin-block-start: .2em; }

/* Disclosures: the checksum box and the FAQ share one plus and minus marker. */
.suh2-app summary { position: relative; display: block; cursor: pointer; list-style: none; }
.suh2-app summary::-webkit-details-marker { display: none; }
.suh2-app summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--suh2-summary-end, 0);
  top: 50%;
  width: 1.75rem;
  height: 1.75rem;
  margin-block-start: -.875rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--suh2-link) 0 0) center / .75rem 2px no-repeat,
    linear-gradient(var(--suh2-link) 0 0) center / 2px .75rem no-repeat,
    var(--suh2-tint);
}
.suh2-app details[open] > summary::after {
  background: linear-gradient(var(--suh2-link) 0 0) center / .75rem 2px no-repeat, var(--suh2-tint);
}
.suh2-app__verify { border: 1px solid var(--suh2-line); border-radius: 18px; }
.suh2-app__verify > summary {
  --suh2-summary-end: var(--space-s, 1rem);
  padding: var(--space-xs, .75rem) 3.5rem var(--space-xs, .75rem) var(--space-s, 1rem);
  font-weight: var(--fw-bold, 700);
}
.suh2-app__verify-body { padding: 0 var(--space-s, 1rem) var(--space-s, 1rem); }
.suh2-app__verify-body p { color: var(--suh2-muted); font-size: var(--fs--1, .9rem); }
.suh2-app__verify-body > :is(pre, code) { --suh2-flow: .4rem; }
.suh2-app pre {
  padding: .8rem 1rem;
  border-radius: 12px;
  background: #0f1320;
  color: #e3e8f4;
  font-size: var(--fs--1, .9rem);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.suh2-app pre code { padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
.suh2-app code.suh2-app__hash {
  display: block;
  padding: .7rem .9rem;
  border-radius: 12px;
  font-size: var(--fs--1, .9rem);
  line-height: 1.5;
  word-break: break-all;
  user-select: all;
}
.suh2-app__faq { margin-block-start: var(--space-m, 1.5rem); border-block-start: 1px solid var(--suh2-line); }
.suh2-app__faq details { border-block-end: 1px solid var(--suh2-line); }
.suh2-app__faq summary {
  padding: var(--space-s, 1rem) 3rem var(--space-s, 1rem) 0;
  font-size: var(--fs-1, 1.2rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.35;
}
.suh2-app__faq summary:hover { color: var(--suh2-link); }
.suh2-app__faq details > p { padding: 0 3rem var(--space-s, 1rem) 0; }

/* Closing call to action */
.suh2-app__cta {
  padding: var(--space-xl, 3rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 32px;
  background:
    radial-gradient(60% 80% at 50% 0%, hsl(225 85% 55% / .45), transparent 70%),
    linear-gradient(160deg, var(--suh2-navy), #101b46);
  box-shadow: var(--suh2-lift);
  color: hsl(225 40% 86%);
  text-align: center;
}
.suh2-app__cta-icon { width: 72px; height: 72px; margin-inline: auto; border-radius: 18px; box-shadow: 0 12px 30px -10px hsl(0 0% 0% / .55); }
.suh2-app__cta .suh2-app__h2 { color: #fff; }
.suh2-app__cta > p { max-width: 34em; margin-inline: auto; }
.suh2-app__cta .suh2-app__actions { justify-content: center; }
.suh2-app__cta-help { --suh2-flow: var(--space-m, 1.5rem); font-size: var(--fs--1, .9rem); }
.suh2-app__cta :is(p, li) > a:not([class]) { color: #fff; }

/* Focus and motion */
.suh2-app :is(a, summary):focus-visible { outline: 3px solid var(--suh2-link); outline-offset: 3px; }
.suh2-app__cta a:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .suh2-app__btn { transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
  .suh2-app__btn:hover { transform: translateY(-1px); }
  .suh2-app__chips a,
  .suh2-app__faq summary { transition: color .2s, border-color .2s; }
}