/* Open compositions on one continuous sheet of dotted paper. Collection copy
   and collection/offer media follow the user's approved website refreshes. */
.narrative-section {
  --narrative-subhead-size: 28px;
  --narrative-body-size: 20px;
  position: relative;
  padding: 110px 0 140px;
  scroll-margin-top: 90px;
}
.narrative-inner { position: relative; z-index: 2; width: min(860px, calc(100% - 410px)); margin: auto; }
.narrative-section h2.sticker-heading {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 64px;
}
.narrative-section h3 { font: 700 var(--narrative-subhead-size)/1.25 'Courier Prime', monospace; color: var(--ink); letter-spacing: .6px; margin: 0 0 20px; }
.narrative-section p, .narrative-section li {
  font: 400 var(--narrative-body-size)/1.4 'Courier Prime', 'Courier New', monospace;
  color: #3e2723;
  margin: 0;
}
.collect-composition { width: 100%; margin: auto; isolation: isolate; }
/* Compact photo collage: smaller screens, closer spacing and the unlock screen
   lower in front. Saved per-image edits remain relative to these base anchors. */
.collect-visuals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; width: min(660px,100%); margin: auto; min-width: 0; padding: 0 0 0 72px; }
.collect-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: var(--phone-offset) 0 0; text-align: center; }
.collect-step :is(img,video) { display: block; object-fit: contain; height: auto; width: calc(240px * var(--collect-scale,1)); max-width: none; flex-shrink: 0; border-radius: 30px; box-shadow: 0 18px 36px #30231d30, 0 5px 12px #30231d16; transform: rotate(var(--phone-angle)); transform-origin: center; }
.collect-step video { background: var(--paper); overflow: hidden; }
.collect-captions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; margin: 108px 0 0; padding: 0; list-style: none; }
.collect-captions li { position: relative; }
.collect-arrow { position: absolute; left: 40px; bottom: calc(100% + 8px); display: block; width: 112px; height: 76px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.collect-captions li:nth-child(2) .collect-arrow { left: 30px; }
.collect-captions li:nth-child(3) .collect-arrow { left: 0; }
.collect-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.collect-captions h3 { position: relative; margin: 0; font: 400 16px/1.375 'Courier Prime',monospace; color: #8a7c78; letter-spacing: .2px; transform: translate(var(--annotation-x,0px),var(--annotation-y,0px)) rotate(var(--annotation-rotation,var(--caption-angle,-2deg)))!important; transform-origin: center!important; }
.collect-captions li:nth-child(1) { --caption-angle: -3deg; }
.collect-captions li:nth-child(2) { --caption-angle: 2.5deg; }
.collect-captions li:nth-child(3) { --caption-angle: -1.5deg; }
/* Fixed column anchors with slight, stable-in-session caption tilts. */
[data-flow-align] { transform: none!important; width: 100%!important; max-width: 100%!important; text-align: left!important; }
[data-flow-align="center"] { text-align: center!important; }
.phone-trio .phone-one { --phone-offset: 32px; --phone-angle: -8deg; z-index: 1; }
.phone-trio .phone-two { --phone-offset: 92px; --phone-angle: 2deg; z-index: 3; }
.phone-trio .phone-three { --phone-offset: 0px; --phone-angle: 9deg; z-index: 2; }
.value-section { padding-top: 105px; }
.value-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 52px; width: calc(100% + 120px); margin-left: -60px; padding: 12px 0 44px; }
/* White paper, a faint adhesive band and uneven angles: physical notes rather
   than rounded UI cards. Inner text retains its original editable identities. */
.value-note { position: relative; min-width: 0; min-height: 330px; padding: 44px 28px 32px; background: #fff; border-radius: 1px 2px 3px 1px; box-shadow: 0 1px 2px rgb(58 44 29 / .04), 2px 10px 14px -7px rgb(58 44 29 / .14), 5px 22px 22px -16px rgb(58 44 29 / .14); transform: translateY(var(--note-y)) rotate(var(--note-angle)); transform-origin: center 18px; }
.value-note::before { content: ''; position: absolute; inset: 0 0 auto; height: 34px; background: linear-gradient(180deg, rgb(98 82 62 / .045), rgb(98 82 62 / .012) 75%, transparent); pointer-events: none; }
.value-note:nth-child(1) { --note-angle: -4deg; --note-y: 24px; }
.value-note:nth-child(2) { --note-angle: 2.5deg; --note-y: 0px; }
.value-note:nth-child(3) { --note-angle: -2.5deg; --note-y: 32px; }
.value-note :is(h3,p) { position: relative; width: 100%!important; max-width: 100%!important; text-align: center!important; }
.value-note h3 { min-height: 52px; }
.value-columns h3 { color: var(--gold); margin-bottom: 20px; }
.value-columns ol { margin: 0; padding: 0; list-style: none; counter-reset: benefit; }
.value-columns li { position: relative; padding-left: 33px; margin-bottom: 27px; counter-increment: benefit; }
.value-columns li::before { content: counter(benefit, decimal-leading-zero); position: absolute; left: 0; top: 3px; font: 700 14px/1.6 'Courier Prime', monospace; color: var(--gold); }
.offer-section { padding-top: 90px; }
.offer-composition { display: grid; grid-template-columns: 390px 1fr; align-items: center; gap: 60px; }
.offer-copy { display: grid; gap: 32px; }
.offer-copy h3 { color: var(--gold); }
.coming-soon { font-size: .76em; color: var(--gold); white-space: nowrap; }
.phone-pair { position: sticky; top: 160px; align-self: start; height: 735px; margin-top: 65px; }
.phone-pair :is(img,video) { position: absolute; display: block; width: 260px; height: auto; max-width: none; object-fit: contain; border-radius: var(--offer-media-radius,30px); box-shadow: var(--offer-media-shadow,0 18px 36px #30231d30,0 5px 12px #30231d16); overflow: hidden; }
.phone-pair .offer-share { left: -15px; top: 0; transform: rotate(-10deg); }
.phone-pair .offer-demo { right: -7px; top: 120px; transform: rotate(9deg); background: var(--paper); }
.phone-pair.single-video { position: relative; top: auto; height: auto; margin: 0; align-self: center; display: flex; justify-content: center; }
.phone-pair.single-video .offer-demo { position: relative; left: auto; right: auto; top: auto; transform: rotate(4deg); }
.contact-section { padding-top: 100px; padding-bottom: 180px; }
#join-title { width: 600px; letter-spacing: .6px; }
.join-heading { position: relative; width: 258px; margin: 0 auto 64px; text-align: center; transform: rotate(-4deg); }
.join-pop { display: block; transform-origin: center; }
.join-pop[data-pop-state="waiting"] { opacity: 0; }
.join-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: calc(96px * var(--join-button-scale,1)); padding: calc(18px * var(--join-button-scale,1)) calc(26px * var(--join-button-scale,1)); border: calc(6px * var(--join-button-scale,1)) solid #fff; border-radius: 999px; background: var(--gold); color: var(--paper); box-shadow: 0 5px 3px #3c28001a,0 10px 24px #3e272310; transition: transform 180ms ease,background-color 180ms ease; }
.join-label { display: inline-block; font: 700 calc(34px * var(--join-button-scale,1))/1.15 'Courier Prime','Courier New',monospace; letter-spacing: -.5px; }
.join-button:not(:disabled):hover { transform: rotate(2deg) scale(1.035); background: #bd8243; }
.join-button:not(:disabled):active { transform: rotate(2deg) scale(.98); }
.join-button:disabled { opacity: 1; cursor: default; }
.join-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.layout-editing .join-pop { opacity: 1; }
.layout-editing .join-button { transition: none; }
.contact-composition { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 80px; align-items: center; }
.contact-copy { position: relative; width: 460px; max-width: 100%; min-width: 0; text-align: left; }
.contact-copy p { max-width: 100%; font-size:20px; line-height:28px; color:#3e2723; }
.contact-copy p + p { margin-top: 24px; }
.contact-copy p.contact-closing { margin-top:36px; color:#3e2723; }
.contact-actions { display: flex; flex-direction: column; align-items: center; gap: 48px; min-width: 0; }
[data-join-element] { transform-origin: center; }
.contact-signature { margin-top: 36px; }
.contact-signature p { font-size: 20px; }
.contact-signature p:first-child { font: 700 28px/1.25 'Courier Prime', monospace; color: var(--ink); }
.contact-signature p + p { margin-top: 5px; }
.contact-signature a { display: inline-block; color: var(--gold); margin-top: 20px; font: 700 20px/1.4 'Courier Prime', monospace; text-decoration: underline; text-underline-offset: 5px; }
.download-note { position: relative; width: 200px; margin: 0; text-align: center; transform: rotate(5deg); }
.download-note a { display: block; background: #fff; padding: 16px; border: 1px solid #c88e4e40; border-radius: 16px; box-shadow: 0 5px 12px #3e272310; }
.download-note img { display: block; width: 100%; height: auto; }
/* The caption has its own line width; the QR artwork keeps its saved size. */
.download-note figcaption { width: max-content; margin: 18px 0 0 50%; transform: translateX(-50%); white-space: nowrap; font: 700 var(--narrative-body-size)/1.4 'Courier Prime', 'Courier New', monospace; color: var(--gold); }
footer { border-top: 0; }
/* The independent stamp rail shares the viewport-aligned navigation-height mask.
   Only the actual stamps can catch a pointer; the empty reading area cannot. */
.edge-stamps { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; }
.edge-stamps .flying-stamp { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; }
.edge-stamps .flying-stamp[hidden] { display: none; }
.edge-stamps .flying-stamp:disabled { pointer-events: none; }
.edge-stamps .flying-stamp:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.layout-editing .edge-stamps { display: none; }
.layout-editing .phone-pair { position: relative; top: auto; }
/* Give each desktop chapter space before the next one begins; editor geometry stays local. */
@media (min-width: 900px) {
  body:not(.layout-editing) .narrative-section {
    padding-top: clamp(100px, 13vh, 130px);
    padding-bottom: clamp(100px, 13vh, 130px);
  }
}
@media (min-width: 1700px) {
  .narrative-inner { width: 960px; }
}
/* Narrow preview safety only; a separate mobile composition remains deferred. */
@media (max-width: 1100px) {
  .narrative-inner { width: calc(100% - 100px); max-width: 820px; }
  .edge-stamps { display: none; }
  .offer-composition { grid-template-columns: 330px 1fr; gap: 35px; }
  .contact-composition { gap: 40px; }
  .value-columns { width: 100%; margin-left: 0; }
  .phone-pair :is(img,video) { width: 220px; }
  .phone-pair .offer-share { left: 0; }
  .phone-pair .offer-demo { right: 8px; }
}
@media (max-width: 900px) {
  .value-columns { grid-template-columns: minmax(0,1fr); width: min(350px,calc(100% - 20px)); margin-inline: auto; gap: 36px; padding-bottom: 20px; }
  .value-note { transform: rotate(var(--note-angle)); min-height: 310px; }
}
/* Keep the longer form instructions separate from the QR at intermediate widths. */
@media (min-width: 768px) and (max-width: 1100px) {
  .contact-composition { grid-template-columns: minmax(0,1fr); gap: 64px; }
  .contact-copy { justify-self: center; transform: rotate(-2.04deg)!important; }
  .contact-actions .download-note { transform: rotate(5deg)!important; }
}
@media (max-width: 760px) {
  .narrative-inner { width: calc(100% - 48px); }
  .narrative-section { padding: 75px 0; }
  .narrative-section h2.sticker-heading { margin-bottom: 50px; }
  .offer-composition, .value-columns, .contact-composition { grid-template-columns: 1fr; gap: 45px; }
  .contact-composition { grid-template-columns: minmax(0,1fr); }
  .contact-copy { justify-self: center; }
  .collect-step :is(img,video) { border-radius: 22px; }
  .phone-pair { position: relative; top: 0; width: min(380px, 100%); margin: auto; height: 635px; }
  .phone-pair .offer-share { left: 24px; }
  .phone-pair .offer-demo { right: 24px; }
  .download-note { margin: auto; }
}
@media (max-width: 760px) {
  .collect-composition { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .collect-visuals,.collect-captions { display: contents; }
  .collect-captions li { margin-bottom: 32px; }
  .collect-captions li .collect-arrow { left: calc(50% - 48px); width: 96px; height: 64px; }
  .phone-one { order: 1; }.collect-captions li:nth-child(1) { order: 2; }
  .phone-two { order: 3; }.collect-captions li:nth-child(2) { order: 4; }
  .phone-three { order: 5; }.collect-captions li:nth-child(3) { order: 6; }
  .phone-trio .collect-step { margin-top: 32px; margin-bottom: 32px; }
  .collect-step :is(img,video) { width: 220px; border-radius: 28px; }
}
@media print { .edge-stamps { display: none; } }