.photo-hero { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 60px; padding-block: 72px 64px; }
.hero-copy > p:not(.eyebrow) { max-width: 460px; margin: 26px 0 30px; font-size: 17px; line-height: 1.85; color: var(--muted); }
.photo-hero h1 { font-size: clamp(42px, 4.6vw, 66px); }
.hero-capture { transform: rotate(1deg); }
.capture { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #081d29; }
.capture-label { display: flex; justify-content: space-between; gap: 12px; padding: 13px 17px; font: 10px/1.5 var(--mono); color: var(--muted); }
.capture-label > span:first-child { color: var(--tool-accent, var(--cyan)); }
.capture img { width: 100%; height: auto; }
.image-link { display: block; }
.image-link:focus-visible { outline-offset: -4px; }
.capture figcaption { padding: 14px 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.capture figcaption a { display: block; width: fit-content; min-height: 44px; align-content: center; color: var(--tool-accent, var(--cyan)); text-decoration: underline; text-underline-offset: 3px; }
.capture figcaption a:hover { color: var(--ice); }
.chapter-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.chapter-nav a { display: flex; align-items: center; gap: 15px; min-height: 65px; padding: 12px 20px; font-size: 13px; }
.chapter-nav a + a { border-left: 1px solid var(--line); }
.chapter-nav a:hover { background: rgb(44 180 251 / 7%); }
.chapter-nav span { color: var(--cyan); font: 10px var(--mono); }
.section-heading { margin-bottom: 40px; }
.section-heading > p:not(.eyebrow) { max-width: 600px; margin: 20px 0 0; font-size: 15px; line-height: 1.85; color: var(--muted); }
.flow-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; list-style: none; margin: 0 0 30px; padding: 0; }
.flow-column { position: relative; min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 21px; }
.flow-column > h3 { font-size: 14px; font-weight: 550; }
.flow-column > h3 span { margin-right: 12px; font: 11px var(--mono); color: #7595a5; }
.flow-column + .flow-column::before { content: "→"; position: absolute; top: 52%; left: -38px; width: 26px; text-align: center; color: #7595a5; font-size: 23px; }
.flow-tool { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px 12px; min-height: 112px; padding: 20px; border: 1px solid color-mix(in srgb, var(--tool-accent) 40%, transparent); border-left: 3px solid var(--tool-accent); border-radius: 5px; background: color-mix(in srgb, var(--tool-accent) 10%, #06151e); }
.flow-tool strong, .flow-tool .icon { color: var(--tool-accent); }
.flow-tool strong { font-size: 15px; }
.flow-tool p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.flow-tool:hover { background: color-mix(in srgb, var(--tool-accent) 17%, #06151e); }
.choice-label { display: block; padding: 10px; text-align: center; color: var(--muted); font: 10px var(--mono); }
.preparation { display: flex; flex-direction: column; justify-content: center; }
.saved-photo { display: flex; gap: 13px; align-items: start; padding: 24px 6px 0; color: var(--muted); }
.saved-photo p { margin: 0; font-size: 12px; line-height: 1.7; }
.saved-photo strong { display: block; margin-bottom: 5px; color: var(--ice); font-weight: 500; }
.detail-note { border-top: 1px solid var(--line); padding-top: 22px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.detail-note > h3 { color: var(--ice); font-size: 16px; line-height: 1.5; }
.detail-note p { max-width: 800px; margin: 10px 0 18px; }
.gallery-band { background: color-mix(in srgb, var(--tool-accent) 5%, #06151e); border-block: 1px solid color-mix(in srgb, var(--tool-accent) 20%, transparent); }
.identity-section, .sharing-section, .support-section, .stage-section { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 42px 70px; }
.feature-copy { min-width: 0; }
[data-tool] .feature-copy > .eyebrow, [data-tool].social-section > .section-heading > .eyebrow { color: var(--tool-accent); }
.feature-copy > p:not(.eyebrow) { margin: 21px 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.feature-copy > p.small-note, .small-note { color: #9bb9c9; font-size: 12px; line-height: 1.85; }
.identity-captures { display: grid; gap: 20px; min-width: 0; }
.capture-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.owner-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin-top: 3px; }
.owner-choices > div { border-top: 1px solid var(--line); padding-top: 22px; }
.owner-choices span { display: block; color: var(--tool-accent); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.owner-choices p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 12px 0 0; }
.sharing-footnote { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 24px; border-top: 1px solid var(--line); }
.sharing-footnote strong { font-size: 16px; font-weight: 550; }
.sharing-footnote p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.social-section { border-top: 1px solid var(--line); }
.social-showcase { display: grid; grid-template-columns: 1.4fr 1fr; align-items: start; gap: 50px; }
.destination-example { display: grid; gap: 22px; }
.destination-example .feature-copy h3 { font-size: 24px; }
.destination-example .feature-copy p { margin: 12px 0 0; }
.destination-example > .capture { max-width: 390px; width: 100%; }
.social-section > .small-note { margin: 25px 0 0; }
.support-section { border-top: 1px solid var(--line); }
.stage-band { border-block: 1px solid color-mix(in srgb, var(--tool-accent) 24%, transparent); background: color-mix(in srgb, var(--tool-accent) 5%, #06151e); }
.stage-preview { display: block; min-width: 0; border: 1px solid color-mix(in srgb, var(--tool-accent) 40%, transparent); border-radius: 6px; overflow: hidden; background: #081d29; }
.stage-preview-top { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--tool-accent); font-size: 13px; }
.stage-preview-top span { margin-left: auto; color: var(--muted); font: 10px var(--mono); }
.stage-photo { position: relative; display: flex; justify-content: center; height: 320px; background: #02070b; overflow: hidden; }
.stage-photo img { width: auto; height: 100%; object-fit: contain; }
.stage-photo > span { position: absolute; left: 20px; bottom: 20px; padding: 10px 14px; font-size: 15px; line-height: 1.5; background: rgb(6 21 30 / 88%); border-left: 2px solid var(--tool-accent); }
.stage-preview > p { margin: 0; padding: 15px 17px; color: var(--muted); font: 10px/1.6 var(--mono); }
.stage-preview:hover { border-color: var(--tool-accent); }
.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 0; margin: 0 0 34px; list-style: none; counter-reset: setup; }
.setup-steps li { counter-increment: setup; border-top: 1px solid var(--line); padding-top: 22px; }
.setup-steps li::before { content: "0" counter(setup); display: block; margin-bottom: 16px; font: 11px var(--mono); color: var(--cyan); }
.setup-steps p { color: var(--muted); font-size: 13px; line-height: 1.85; }
.setup-section > .detail-note { margin-top: 36px; }
.screenshot-credit { margin: 26px 0 0; max-width: 820px; color: #89a8b8; font-size: 11px; line-height: 1.8; }
@media (max-width: 1100px) {
  .photo-hero { gap: 35px; }
  .identity-section, .sharing-section, .support-section, .stage-section, .sharing-footnote { gap: 36px; }
  .flow-map { gap: 36px; }
  .flow-column + .flow-column::before { left: -31px; }
  .flow-tool { padding: 16px; }
  .social-showcase { gap: 32px; }
  .chapter-nav a { padding-inline: 14px; gap: 10px; }
}
@media (max-width: 850px) {
  .photo-hero { grid-template-columns: 1fr; gap: 40px; padding-block: 52px; }
  .photo-hero h1 { font-size: clamp(42px, 7vw, 66px); }
  .hero-copy > p:not(.eyebrow) { max-width: 570px; }
  .hero-capture { width: 100%; max-width: 620px; justify-self: center; transform: none; }
  .identity-section, .sharing-section, .support-section, .stage-section { grid-template-columns: 1fr; }
  .feature-copy > p:not(.eyebrow) { max-width: 640px; }
  .identity-captures { max-width: 760px; }
  .flow-map { gap: 26px; }
  .flow-column + .flow-column::before { left: -27px; }
  .flow-tool { grid-template-columns: 1fr; }
  .flow-tool strong { font-size: 14px; }
  .flow-tool p { font-size: 12px; }
  .flow-column > h3 { font-size: 12px; }
  .flow-column > h3 span { display: block; margin: 0 0 8px; }
  .sharing-footnote { grid-template-columns: 1fr; gap: 12px; }
  .chapter-nav { grid-template-columns: repeat(2, 1fr); }
  .chapter-nav a:nth-child(3) { border-left: 0; }
  .chapter-nav a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .social-showcase { grid-template-columns: 1fr; }
  .destination-example { grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
  .stage-preview { width: 100%; max-width: 650px; justify-self: center; }
}
@media (max-width: 640px) {
  .photo-hero { padding-top: 40px; }
  .photo-hero h1 { font-size: clamp(37px, 8vw, 51px); }
  .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .chapter-nav a { font-size: 12px; padding-inline: 12px; min-height: 58px; }
  .flow-map { grid-template-columns: 1fr; gap: 45px; }
  .flow-column { gap: 16px; }
  .flow-column > h3 { font-size: 15px; }
  .flow-column > h3 span { display: inline; margin-right: 12px; }
  .flow-column + .flow-column::before { content: "↓"; top: -36px; left: calc(50% - 13px); }
  .flow-tool { grid-template-columns: 24px minmax(0, 1fr); min-height: 0; padding: 19px; }
  .flow-tool p { grid-column: 2; font-size: 13px; }
  .saved-photo { padding: 19px 0 0; }
  .owner-choices, .setup-steps { grid-template-columns: 1fr; gap: 24px; }
  .owner-choices { margin-top: 0; }
  .owner-choices span { margin-bottom: 11px; }
  .owner-choices p { margin-top: 9px; }
  .destination-example { grid-template-columns: 1fr; gap: 24px; }
  .destination-example > .capture { justify-self: center; }
  .capture-label { padding: 11px 12px; font-size: 9px; }
  .capture figcaption { padding: 12px; }
  .stage-preview-top { flex-wrap: wrap; }
  .stage-preview-top > span { width: 100%; margin: 0; }
  .stage-photo { height: 260px; }
  .stage-photo > span { left: 12px; bottom: 12px; font-size: 13px; }
}
@media (max-width: 359px) {
  .chapter-nav a { gap: 7px; padding-inline: 7px; font-size: 11px; }
  .capture-label { flex-wrap: wrap; }
}
@media (forced-colors: active) {
  .flow-tool, .stage-preview, .capture { border-color: CanvasText; }
  .flow-tool strong, .flow-tool .icon, .capture figcaption a { color: LinkText; }
}