/* The free-tier paywall: dark panel on the dashboard, mirrors the
   gallery CTA panel. Plan cards come from the shared pricing surface
   (shared/_pricing_plans), stacked to fit the narrow dashboard column. */

.paywall {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-4);
}

.paywall-kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent-soft);
}

.paywall h2 {
  font-size: var(--text-xl);
}

.paywall-sub {
  opacity: 0.85;
  max-width: 36rem;
}

.paywall-unlocks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.paywall-unlocks li::before {
  content: "✓ ";
  color: var(--accent-soft);
  font-weight: 600;
}

.paywall-pricing {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

.paywall-pricing .plan-grid {
  grid-template-columns: 1fr;
  max-width: 30rem;
}

/* Stacked cards: the featured card's upward break is a 3-column move,
   it just cramps a single column. */
.paywall-pricing .plan-card.is-featured {
  margin-top: 0;
  padding-top: var(--space-5);
}

.paywall-pricing .hero-note {
  font-size: var(--text-sm);
  opacity: 0.75;
  text-align: center;
  max-width: 36rem;
}

/* The two-card ladder (USAGE.md, 2026-09-08): Yearly access and the
   3-day trial, the trial preselected. Shared by /paywall and the
   homepage pricing section. Each card is the competitors' row: title
   and sub on the left, the face number on the right; no counts, no
   anchors. Selection is pure CSS: the card highlights via
   :has(:checked) with the accent ring and a faint accent wash; the
   paywall Stimulus controller only swaps the CTA label, so the form
   works without JS either way. No scale on selection any more: a
   full-width phone card grown by 6 percent overflowed the viewport. */

.ladder-form {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  width: 100%;
}

.ladder-cta {
  width: 100%;
  max-width: 24rem;
  position: relative;
  overflow: hidden;
}

/* The sheen sweep that crossed the CTA since 2026-08-25 left with the
   relaunch (2026-09-15): the loud pill lights from under the pointer now
   (buttons.css), and the two shared one pseudo-element. */

.ladder-trust {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-align: center;
}

.ladder-fine {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-align: center;
  max-width: 34rem;
}

.ladder-fine a {
  color: inherit;
}

/* The /paywall page shell. Since 2026-08-26 it renders in the funnel
   layout with bare chrome (no header, no footer): the section takes
   back the funnel-main padding and supplies its own clearances, so the
   geometry matches the old application-layout render exactly, minus
   the header. */
/* Block, not the funnel's centering grid: as a grid item the section's
   automatic minimum size balloons to the drifting strips' max-content
   track (4,360px wide, QC find 2026-08-26), shoving the page sideways.
   Block layout clips them exactly like the application layout did. */
.funnel-main:has(.paywall-page) {
  display: block;
  padding: 0;
}

.funnel-main .paywall-page {
  width: 100%;
  /* Clears the absolutely-placed X; also the whole top offset now
     that .section's band padding is for pages below a site header. */
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.paywall-page-head {
  text-align: center;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  margin-bottom: var(--space-5);
}

.paywall-page-sub {
  color: var(--ink-soft);
}

/* The benefits checklist above the ladder (owner ask 2026-08-10). The
   proof strips that rode above it left 2026-09-15 (R4 review). */

.paywall-benefits {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  width: fit-content;
  margin: 0 auto var(--space-2);
  text-align: left;
  font-weight: 500;
}

/* Hanging indent (2026-09-09): the inline check is 1.05em plus its
   0.45em gap, so a line that wraps on a 320px phone starts under the
   text, not under the check. */
.paywall-benefits li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

/* The checks draw themselves once on arrival (2026-09-09): the same
   stroke draw the proof-wall tool icons use (pathLength 1, one keyframe
   on the dash offset), staggered down the list, never repeated, parked
   under reduced motion. Delays are per position because the CSP blocks
   inline styles, so no per-item custom property. */
.paywall-benefits .check-icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: check-draw 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms forwards;
}

.paywall-benefits li:nth-child(2) .check-icon path { animation-delay: 190ms; }
.paywall-benefits li:nth-child(3) .check-icon path { animation-delay: 260ms; }
.paywall-benefits li:nth-child(4) .check-icon path { animation-delay: 330ms; }
.paywall-benefits li:nth-child(5) .check-icon path { animation-delay: 400ms; }
.paywall-benefits li:nth-child(6) .check-icon path { animation-delay: 470ms; }

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .paywall-benefits .check-icon path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* The drawn check (2026-08-25): the helper's inline svg in the tool
   icons' stroke family, replacing the platform-dependent U+2713
   glyph. */
.paywall-benefits .check-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  color: var(--accent);
  margin-right: 0.45em;
  vertical-align: -0.15em;
}

/* The X (the app pattern): quiet, top-left, a plain link back to the
   studio since REVEAL.md (2026-09-03). */

.paywall-close {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 200ms, background-color 200ms;
}

.paywall-close:hover { color: var(--ink); background: var(--tint); }

.paywall-close:hover {
  color: var(--ink);
}

.paywall-page {
  position: relative;
}

/* The phone fold (owner report 2026-08-26, iPhone 13 Pro Max): the
   CTA sat below the fold, worse on smaller phones. Three moves at
   phone widths: the proof strips and page head compress, the ladder
   cards shorten, and the dock pins to the viewport bottom, full-bleed
   with a hairline top rule, so the CTA is on screen from first paint.
   It unsticks into the flow once the trust and legal lines arrive. */
@media (max-width: 640px) {
  .paywall-page-head {
    margin-bottom: var(--space-4);
  }

  .paywall-page-head h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .paywall-benefits {
    font-size: var(--text-sm);
    gap: var(--space-1);
  }
}

/* The visitor's own held design leading the page (REVEAL.md decision
   4, 2026-09-03): the server-side blurred preview in the card language,
   a mono tag over it naming the style. Clears the X above it. */

.paywall-reveal {
  position: relative;
  overflow: hidden;
  border: var(--border-hard);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  background: var(--ink);
  min-height: 10rem;
  margin: calc(var(--space-4) + 44px) 0 var(--space-5);
}

/* The design shows whole (owner call 2026-09-07, after the tall-photo
   repro): under the height cap a portrait render used to be
   center-cropped, which cut a 9:19.5 phone photo to its middle 45
   percent, ceiling and floor gone, and with the blur nothing said
   "room". Now the photo letterboxes inside the cap and a second copy
   of the same preview stretches behind it, cover and dimmed, so the
   side bands read as a wash of the room's own light. A landscape
   render fills the box and hides the backdrop entirely. */
.paywall-reveal-photo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
}

.paywall-reveal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.paywall-reveal-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2 * var(--space-4));
  background: var(--paper-card);
  border: var(--border-hard);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-align: center;
  color: var(--ink);
}

/* With a design waiting, photo and head share a row on wide screens so
   the ladder starts inside the first screen at 1280x800. */

.paywall-reveal-row {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: calc(var(--space-4) + 44px);
}

.paywall-reveal-row .paywall-reveal {
  margin: 0;
}

.paywall-reveal-row .paywall-page-head {
  margin-bottom: 0;
}

@media (min-width: 720px) {
  .paywall-reveal-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: var(--space-5);
  }

  .paywall-reveal-row .paywall-page-head {
    text-align: left;
    justify-items: start;
  }

  .paywall-reveal-row .paywall-reveal-photo {
    max-height: 34vh;
  }
}

/* Lock, then the line, balanced over two rows on phones; a style's
   hyphen never breaks. */
.paywall-reveal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  /* width: max-content, not shrink-to-fit: with left: 50% an absolute
     box would size itself to the half it sits in and wrap four times. */
  width: max-content;
  max-width: min(22rem, calc(100% - 2 * var(--space-4)));
  white-space: normal;
  text-align: left;
  text-wrap: balance;
  line-height: 1.5;
}

.paywall-reveal-tag .nowrap {
  white-space: nowrap;
}

.paywall-reveal-tag .lock-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

/* The scratched state on the paywall (SCRATCH.md decision 7): the
   photo's own box, the canvas over it, read-only. */
.paywall-reveal-stage {
  position: relative;
  line-height: 0;
}

.paywall-reveal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The relaunch ladder (RELAUNCH.md section 4) is styled in ladder.css:
   the panel, the cards, the faces and the feature lines. What stays here
   is the page furniture the ladder partial still uses: the form grid,
   the CTA, the dock and the note.
   The two-card rules of the 2026-09-08 paywall left with R4 (2026-09-15)
   because they loaded after ladder.css and collapsed the panel. */