/* Ad batch pages (/ads/, monthly plan, thank-you). From adbatch/site/site.css; header, footer, buttons, type scale and the
   sticky CTA now live in base.css. */
img, video { display: block; }
h1, h2, h3 { margin: 0 0 14px; }
.num { font-variant-numeric: tabular-nums; }


.mark { background: linear-gradient(transparent 40%, var(--color-accent) 40%, var(--color-accent) 92%, transparent 92%); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pen { position: relative; white-space: nowrap; }
.pen svg { position: absolute; left: 0; bottom: -0.18em; width: 100%; height: 0.32em; overflow: visible; pointer-events: none; }
.pen path { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; }
.tag { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; }
.lead { font-size: var(--step-1); color: var(--color-muted); margin: 0 0 24px; max-width: 36ch; line-height: 1.45; }


section + section { border-top: 1px solid var(--color-line); }
section.alt { background: var(--color-surface); border-top: 0; }
section.dark { background: #0F1115; color: #F2F1EC; border-top: 0; }
section.dark .fine, section.dark p.sub { color: #A2A6AF; }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-grid img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.hero-grid img:nth-child(3n+2) { transform: translateY(18px); }

.proof { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; font-weight: 600; font-size: 16px; }
.proof span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); margin-right: 10px; vertical-align: 2px; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--color-line); }
section.alt .card { background: var(--color-bg); }
.card b { display: block; font-size: 18px; margin-bottom: 6px; }
.stat { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }

.demo { border-left: 4px solid var(--color-accent); background: var(--color-bg); padding: 12px 16px; border-radius: var(--radius-sm); font-size: 15px; color: var(--color-muted); max-width: var(--measure); margin: 0 0 8px; }
.angle { margin-top: 34px; }
.angle h3 { margin-bottom: 4px; }
.angle h3 small { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--color-muted); letter-spacing: 0; }
.angle p { margin: 0 0 12px; color: var(--color-muted); max-width: var(--measure); font-size: 16px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery.six { grid-template-columns: repeat(6, 1fr); }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.gallery button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gallery button:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.motion { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)) 1fr; gap: 20px; align-items: start; }
.motion video { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); background: #000; aspect-ratio: 9 / 16; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step { padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); }
.step::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-weight: 700; margin-bottom: 12px; }
.step p { margin: 0; }
ol.flow { padding-left: 22px; max-width: 72ch; } ol.flow li { margin: 8px 0; }

ul.check { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 36px; }
ul.check li { padding-left: 30px; position: relative; margin: 0 0 12px; break-inside: avoid; }
ul.check li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 12px; height: 7px; border-left: 3px solid var(--color-go); border-bottom: 3px solid var(--color-go); transform: rotate(-45deg); }

.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid #2B2F38; vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-size: 18px; }
.compare th[scope=row] { color: #A2A6AF; font-weight: 500; width: 22%; }
.compare .us { background: rgba(255, 225, 77, 0.14); box-shadow: inset 2px 0 0 var(--color-accent); }
.compare thead .us { color: var(--color-accent); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 24px; background: var(--color-bg); display: flex; flex-direction: column; }
.tier.main { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); }
.tier .amt { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; margin: 6px 0; font-variant-numeric: tabular-nums; }
.tier .amt small { font-size: 18px; color: var(--color-muted); font-weight: 500; }
.tier p { margin: 0 0 16px; }
.tier > .btn, .tier > .fine:last-child, .tier > .textlink { margin-top: auto; }
.tier > .btn { text-align: center; }
.textlink { font-weight: 600; text-decoration: none; padding: 10px 0; display: inline-block; }
.stack { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin: 0 0 22px; max-width: 60ch; }
.guarantee { background: var(--color-bg); border-left: 5px solid var(--color-ink); padding: 20px 24px; border-radius: var(--radius-sm); max-width: var(--measure); }

details { border-bottom: 1px solid var(--color-line); padding: 0; max-width: var(--measure); }
summary { font-weight: 600; cursor: pointer; padding: 14px 0; min-height: 48px; display: flex; align-items: center; gap: 10px; }
summary::before { content: "+"; font-family: var(--font-display); color: var(--color-primary); width: 14px; }
details[open] summary::before { content: "\2212"; }
summary::-webkit-details-marker { display: none; } summary { list-style: none; }
details p { margin: 0 0 16px; }

.cta-band { text-align: center; border-top: 4px solid var(--color-primary) !important; }
.cta-band .lead { margin-left: auto; margin-right: auto; }


dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); }
dialog::backdrop { background: rgba(15, 17, 21, 0.85); }
dialog img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); }
dialog p { color: #fff; font-size: 14px; margin: 8px 0 0; }
dialog form { text-align: right; }
dialog .x { background: #fff; border: 0; border-radius: 99px; padding: 6px 14px; font-weight: 600; cursor: pointer; margin-bottom: 8px; font-family: inherit; }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* thank-you + monthly */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--color-line); }
.timeline li { position: relative; padding: 0 0 22px 24px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--color-bg); border: 3px solid var(--color-primary); }
.timeline b { display: block; }
.box { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 22px; background: var(--color-bg); }

@media (max-width: 900px) {
  .hero, .grid3, .steps, .price { grid-template-columns: 1fr; }
  .hero { padding-top: 28px; gap: 28px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery.six { grid-template-columns: repeat(3, 1fr); }
  ul.check { columns: 1; }
  .motion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion > div:last-child { grid-column: 1 / -1; }
  .compare { font-size: 15px; }
  .compare th[scope=row] { width: auto; }
}
@media (max-width: 700px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid #2B2F38; }
  .compare th[scope=row] { padding: 0 0 6px; border: 0; color: var(--color-accent); font-family: var(--font-display); font-size: 17px; }
  .compare td { border: 0; padding: 4px 0 4px 0; display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
  .compare td::before { content: attr(data-label); color: #A2A6AF; font-size: 14px; }
  .compare .us { background: none; color: #fff; font-weight: 600; }
}

.chip { margin: 14px 0 0; font-size: 14px; }
.chip a { display: inline-block; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 6px 12px; color: var(--color-ink); text-decoration: none; }

/* photo in -> ad out, headline trace */
.inout, .trace-row { display: grid; grid-template-columns: minmax(0, 220px) 40px minmax(0, 220px) 1fr; gap: 16px; align-items: center; margin: 26px 0 8px; }
.inout figure, .trace-row figure, .sizes figure { margin: 0; }
.inout img, .trace-row img, .sizes img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-line); }
.inout figcaption, .trace-row figcaption, .sizes figcaption { font-size: 14px; color: var(--color-muted); margin-top: 8px; }
.arrow { font-family: var(--font-display); font-size: 34px; color: var(--color-primary); text-align: center; }
.inout-note { margin: 0; max-width: 46ch; }
.trace { margin-top: 36px; }
.trace-row { grid-template-columns: minmax(0, 360px) 40px minmax(0, 220px); }
.trace blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; }
.trace cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 14px; color: var(--color-muted); margin-top: 10px; }
.sizes { margin-top: 36px; }
.sizes-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.sizes-row figure:nth-child(1) { width: 200px; } .sizes-row figure:nth-child(2) { width: 250px; } .sizes-row figure:nth-child(3) { width: 141px; }

/* gallery flags + lightbox copy */
.gallery button { position: relative; }
.gallery .flag { position: absolute; left: 8px; bottom: 8px; background: var(--color-accent); color: var(--color-on-accent); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); }
#lbcap { color: #fff; margin-top: 10px; font-size: 14px; line-height: 1.5; max-height: 30vh; overflow-y: auto; }
#lbcap p { margin: 0 0 8px; color: #fff; }
#lbcap .lb-id { font-weight: 600; color: var(--color-accent); }
#lbcap .lb-h { font-weight: 600; }
#lbcap .lb-p { white-space: pre-line; color: #D9D8D2; }
#lbcap .lb-flag { color: var(--color-accent); }
dialog img { max-height: 58vh; }

@media (max-width: 700px) {
  .inout, .trace-row { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  .inout-note { grid-column: 1 / -1; }
  .arrow { font-size: 26px; }
  .trace-row { grid-template-columns: 1fr; }
  .trace-row .arrow { transform: rotate(90deg); }
  .trace-row figure { max-width: 220px; }
  .sizes-row figure:nth-child(1) { width: 30%; } .sizes-row figure:nth-child(2) { width: 37%; } .sizes-row figure:nth-child(3) { width: 21%; }
}

/* panel round 1 fixes */
.hero h1 { margin-bottom: 26px; }
.mobile-strip { display: none; }
.circled { position: relative; white-space: nowrap; }
.circled::after { content: ""; position: absolute; left: -10px; right: -10px; top: -8px; bottom: -8px; border: 3px solid var(--color-primary); border-radius: 50%; transform: rotate(-2deg); pointer-events: none; }
dialog { background: #0F1115; padding: 12px; border-radius: var(--radius-lg); }
.lb-bar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
.lb-bar form { margin: 0; }
dialog .x, dialog .nav { min-height: 44px; padding: 10px 18px; margin: 0; background: #fff; border: 0; border-radius: 99px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 16px; }
dialog .nav { background: #2B2F38; color: #fff; }
body:has(dialog[open]) .sticky-cta { display: none; }
@media (max-width: 900px) {
  .mobile-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 18px; }
  .mobile-strip img { border-radius: var(--radius-sm); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; box-shadow: var(--shadow-sm); }
  .hero .lead { font-size: 18px; }
}
@media (max-width: 360px) {
  .pen { white-space: normal; }
  .circled { white-space: normal; }
}
.report { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--color-bg); }
.report th, .report td { text-align: left; padding: 10px; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.report td { color: var(--color-muted); } .report td:first-child { color: var(--color-ink); font-weight: 600; }