/* SIERise screenshot layouts extend the shared Campflame components. */
.sr-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 64px; padding-top: 64px; padding-bottom: 56px; }
.sr-identity { display: flex; align-items: center; gap: 18px; margin-bottom: 38px; }
.sr-identity .icon { width: 72px; flex: 0 0 72px; box-shadow: none; }
.sr-identity .eyebrow { margin-bottom: 5px; }
.sr-name { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.sr-hero h1 { font-size: clamp(3.5rem, 6.4vw, 5.7rem); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 26px; }
.sr-hero h1 span { color: #80D0BE; }
.sr-hero .tagline { max-width: 36ch; font-size: 1.14rem; line-height: 1.7; }
.sr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 28px 0 16px; }
.sr-text-link { font-size: .95rem; color: var(--ink); }
.sr-quiet { font-size: .86rem; color: var(--muted); }
.sr-hero-screen { margin: 0; position: relative; display: grid; justify-items: center; isolation: isolate; }
.sr-orbit { position: absolute; z-index: -1; width: 112%; aspect-ratio: 1; top: 9%; border-radius: 50%; background: radial-gradient(circle, #80d0be20, #80d0be06 57%, transparent 70%); }
.sr-phone { width: min(100%, 278px); padding: 6px; background: #202b32; border: 1px solid #4d655f; border-radius: 37px; box-shadow: 0 28px 65px #0007; }
.sr-phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.sr-hero-screen figcaption { margin-top: 24px; font-size: .8rem; color: var(--muted); }
.sr-hero-screen figcaption span { color: #80D0BE; }
.sr-strip { border-block: 1px solid var(--hairline); background: #12181e; }
.sr-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-block: 23px; }
.sr-strip p { margin: 0; display: flex; flex-wrap: wrap; gap: 5px 14px; align-items: baseline; }
.sr-strip strong { font-family: var(--font-display); font-size: 1.08rem; }
.sr-strip span { color: var(--muted); font-size: .86rem; }
.sr-section-note { font-size: .95rem; }
.sr-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 36px; }
.sr-gallery figure { margin: 0; min-width: 0; }
.sr-screen-stage { padding: 28px 30px; border: 1px solid var(--hairline); border-radius: 22px; background: linear-gradient(160deg, #1c3038, #151924); }
.sr-gallery figure:nth-child(2) .sr-screen-stage { background: linear-gradient(160deg, #1e3530, #151924); }
.sr-gallery figure:nth-child(3) .sr-screen-stage { background: linear-gradient(160deg, #303137, #151924); }
.sr-screen-stage img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 14px 28px #0005; }
.sr-gallery figcaption { margin: 26px 4px 0; }
.sr-gallery .eyebrow { display: block; font-size: .7rem; }
.sr-gallery h3 { margin-block: 10px; font-size: 1.32rem; }
.sr-gallery figcaption p { font-size: .95rem; color: var(--muted); }
.sr-details { padding-top: 28px; }
.sr-wordmark { width: 100%; height: auto; border-radius: 10px; margin-bottom: 22px; }
.sr-help-brand { display: inline-flex; gap: 14px; align-items: center; color: var(--ink); font-family: var(--font-display); font-size: 1.2rem; text-decoration: none; margin-bottom: 30px; }
.sr-help-brand img { border-radius: 12px; }
@media (max-width: 900px) {
  .sr-hero { gap: 32px; }
  .sr-hero h1 { font-size: clamp(3rem, 6.9vw, 4.7rem); }
  .sr-gallery { gap: 18px; }
  .sr-screen-stage { padding: 20px 16px; }
  .sr-strip p { display: block; }
  .sr-strip span { display: block; margin-top: 5px; }
}
@media (max-width: 680px) {
  .sr-hero { grid-template-columns: 1fr; padding-top: 34px; gap: 38px; }
  .sr-identity { margin-bottom: 30px; }
  .sr-identity .icon { width: 60px; flex-basis: 60px; }
  .sr-hero h1 { font-size: clamp(3.05rem, 11.9vw, 4.5rem); }
  .sr-hero .tagline { font-size: 1.04rem; }
  .sr-hero-screen { padding-top: 8px; }
  .sr-phone { width: 248px; }
  .sr-strip .wrap { gap: 14px; }
  .sr-strip strong { font-size: .95rem; }
  .sr-strip span { font-size: .75rem; line-height: 1.5; }
  .sr-gallery { grid-template-columns: 1fr; gap: 38px; }
  .sr-screen-stage { padding: 28px; }
  .sr-screen-stage img { max-width: 250px; margin: auto; }
  .sr-gallery figcaption { margin-top: 20px; }
  .sr-orbit { width: 100%; }
}