/* ============================================================
   SHEETPOST V2 — paper world: the fold, guarantee, pricing,
   partner band, faq, cta. One deliberate theme switch:
   ink -> paper (the document becomes official) -> ink footer.
   ============================================================ */

/* ================= THE BRIDGE: document feed slide-up ================= */
/* The runway used to be 160vh, and half of it was one rectangle translating
   with every other element still at opacity 0. 132vh is enough for the whole
   choreography now that the arrival lands before the stage pins and the
   composition owns the pinned part. tests/e2e.mjs asserts that no stretch of
   this section scrolls without something changing on screen. */
.paper-bridge { position: relative; height: 132vh; background: var(--bg-0); }
.bridge-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  display: grid;
}
.bridge-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(900px circle at 50% 20%, rgba(62, 207, 142, 0.06), transparent 60%), var(--bg-0);
}
.bridge-backdrop::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(206, 244, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 244, 220, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
}
.paper-sheet {
  position: absolute; inset: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  will-change: transform;
  /* A document has a head, a body and a foot. Centring one blob left roughly
     280px of empty paper above and below it on a tall viewport, and pinned the
     caption and the document number under the fixed header where nobody saw
     them. Three rows put the furniture back on the page and use the height. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* `clip`, never `hidden`.

     This sheet covers the whole viewport, and `overflow: hidden` makes an
     element a scroll container even though the user cannot scroll it. Once
     its content was taller than the sheet, the wheel went to the sheet
     instead of the page, and `overscroll-behavior: contain` stopped it
     chaining back out: the page stopped dead at the guarantee section and
     would move neither up nor down. It measured 1011px of content in an
     844px sheet on a standard phone, and 645 in 620 on a short laptop
     window. `clip` clips exactly the same way, to the rounded corners
     included, without ever creating a scrollport. */
  overflow: clip;
  transform-origin: 50% 58%;
  /* Off-screen once the sheet is flat and full bleed, so it costs nothing at
     rest. While it is still scaled down it is what makes the thing read as a
     sheet of paper being laid onto the ink world rather than a colour swap. */
  box-shadow: 0 42px 90px -30px rgba(8, 11, 9, 0.8);
}
/* A short window cannot afford the generous document rhythm: tighten the body
   rather than let the grid overflow a sheet that clips its own corners. */
@media (max-height: 760px) {
  .fold-content { padding-block: clamp(12px, 2vh, 24px); }
  .trust-list { margin-top: 16px; gap: 9px; }
  .trust-list li { font-size: 0.92rem; }
  .lockcard { padding: 20px; }
}
/* the leading edge: the shadow the sheet casts on the ink world as it rises */
.sheet-edge {
  position: absolute; left: 0; right: 0; top: -12vh; height: 12vh;
  background: linear-gradient(to bottom, rgba(8, 11, 9, 0.62), rgba(8, 11, 9, 0.18) 55%, transparent);
  pointer-events: none;
}
.paper-sheet .guilloche { opacity: 0.35; }
/* the sheet sits OUTSIDE .paper-world — scope the paper text colors to it */
.paper-sheet h2, .paper-sheet h3 { color: var(--p-ink); }
.paper-sheet h2 em { color: var(--p-acc); }
.paper-sheet .lede { color: var(--p-fg); margin-top: 18px; }
.paper-sheet .trust-list li { color: var(--p-fg); }
.paper-sheet .trust-list li b { color: var(--p-ink); }
.paper-sheet .trust-list .ico { color: var(--p-acc); }
.fold-content {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center; align-content: center;
  padding: clamp(28px, 4vh, 56px) var(--gutter);
}
/* Narrow or short: the fold becomes an ordinary section that scrolls like any
   other. The stacked composition cannot fit one screen on a phone, and a
   pinned stage that cannot fit its own content is exactly how the scroll trap
   above got created. Same shape the reduced-motion branch already used. */
@media (max-width: 860px), (max-height: 700px) {
  .paper-bridge { height: auto; }
  .bridge-stage { position: static; height: auto; overflow: visible; }
  .bridge-backdrop { display: none; }
  .paper-sheet {
    position: static; transform: none; overflow: visible;
    box-shadow: none; border-radius: 0;
  }
  .sheet-edge { display: none; }
  .fold-content { grid-template-columns: 1fr; gap: 28px; padding-block: clamp(40px, 7vh, 72px); }
  .fold-head { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-bridge { height: auto; }
  .bridge-stage { position: static; height: auto; overflow: visible; }
  .bridge-backdrop { display: none; }
  .paper-sheet { position: static; transform: none; overflow: visible; }
  .sheet-edge { display: none; }
  .fold-head { padding-top: 28px; }
}
/* the guarantee is a document, so it carries document furniture: a caption
   and a file number, on a ruled header band clear of the fixed nav */
.fold-head {
  width: 100%;
  /* var(--wrap), not var(--wrap) + 2 * var(--gutter).

     `.wrap` is max-width var(--wrap) with padding-inline var(--gutter) and
     border-box sizing, so every other section on the page has an inner
     content column of var(--wrap) minus two gutters. Adding the gutters back
     into the max-width here made the guarantee section's column 96px wider
     than every other one, so the headline, the guarantees and the card sat
     outside the grid the rest of the page is aligned to. */
  max-width: var(--wrap);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 18px) var(--gutter) 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--p-line);
}
.fold-caption {
  font-family: var(--font-m); font-size: var(--fs-nano); letter-spacing: 0.16em;
  color: var(--p-lo); text-transform: uppercase;
}
.fold-docno {
  font-family: var(--font-m);
  font-size: var(--fs-nano); letter-spacing: 0.14em; color: var(--p-lo);
}
.fold-foot {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gutter) clamp(22px, 3.5vh, 38px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  color: var(--p-lo);
  border-top: 1px solid var(--p-line);
}
.fold-foot .mono { font-size: var(--fs-nano); letter-spacing: 0.1em; }
.fold-scribble { width: 132px; height: 26px; color: var(--p-ink); opacity: 0.55; flex: none; }
@media (max-width: 560px) { .fold-docno { display: none; } .fold-scribble { width: 96px; } }

/* paper world wrapper for everything after the fold */
.paper-world {
  background: var(--p-bg);
  color: var(--p-fg);
  position: relative;
}
/* one flat tone makes every surface look the same: separate page, band and
   card by more than a rounding error */
.paper-world .plan { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -20px rgba(20,33,26,.5); }
.paper-world .faq-item { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
.paper-world::before {             /* paper texture: faint horizontal ruled lines */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(180deg, transparent 0 34px, rgba(20,33,26,0.045) 34px 35px);
}
.paper-world > * { position: relative; }

.paper-world h2, .paper-world h3 { color: var(--p-ink); }
.paper-world h2 em { color: var(--p-acc); }
.paper-world .lede { color: var(--p-fg); }
.paper-world .kicker { color: var(--p-acc); }
.paper-world a { color: var(--p-acc); }
/* Buttons are excluded on purpose. A .btn is an <a> here, so an unscoped
   link hover repainted the primary CTA's label in the ink colour on top of
   the accent fill, which is 1.4:1: hovering the main paid button made its
   label almost disappear. */
.paper-world a:not(.btn):hover { color: var(--p-ink); }

/* ================= GUARANTEE ================= */
.trust-list { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 14px; }
.trust-list li {
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--p-fg); font-size: 0.98rem;
}
.trust-list li b { color: var(--p-ink); }
.trust-list .ico { color: var(--p-acc); margin-top: 3px; }

/* the lock card */
.lockcard-scene { perspective: 1100px; display: grid; justify-items: center; gap: 18px; }
.lockcard {
  width: min(400px, 100%);
  aspect-ratio: 1.586;
  border-radius: 18px;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  background:
    linear-gradient(135deg, #F7F8EF 0%, #EDEEE4 38%, #F2F3E9 62%, #E7E9DB 100%);
  border: 1px solid var(--p-line-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 6px rgba(20,33,26,.08),
    0 30px 60px -24px rgba(20,33,26,.35);
  display: grid;
  padding: 26px;
}
.lockcard-brand {
  font-family: var(--font-m); font-size: var(--fs-nano); font-weight: 700;
  letter-spacing: 0.18em; color: var(--p-lo);
  position: relative; z-index: 1;
}
/* banknote guilloche across the card's dead middle */
.lockcard::before {
  content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='44' viewBox='0 0 300 44'%3E%3Cg fill='none' stroke='%2314211A' stroke-opacity='0.12'%3E%3Cpath d='M0 22 Q 19 3 38 22 T 76 22 T 114 22 T 152 22 T 190 22 T 228 22 T 266 22 T 304 22'/%3E%3Cpath d='M0 22 Q 19 41 38 22 T 76 22 T 114 22 T 152 22 T 190 22 T 228 22 T 266 22 T 304 22'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 44px;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 34%, #000 62%, transparent 82%);
  mask-image: linear-gradient(180deg, transparent 18%, #000 34%, #000 62%, transparent 82%);
}
.lockcard-price, .lockcard-lock, .lockcard-seal { position: relative; z-index: 1; }
.lockcard-price {
  align-self: end;
  font-family: var(--font-d); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--p-ink); line-height: 1;
  display: flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.lockcard-price .pu {
  font-size: 0.34em; font-weight: 600; color: var(--p-lo);
  letter-spacing: 0; font-family: var(--font-b);
}
.lockcard-lock {
  position: absolute; right: 26px; bottom: 26px; top: 86px;
  display: flex; align-items: flex-end;
  font-family: var(--font-m); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.09em; color: var(--p-seal-deep);
  writing-mode: vertical-rl;
  border-left: 1px solid var(--p-line); padding-left: 9px;
  white-space: nowrap; overflow: hidden;
}
.lockcard-seal {
  position: absolute; top: 20px; right: 20px;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--p-acc);
  background: rgba(255, 255, 255, 0.5);
  display: grid; place-items: center;
  color: var(--p-acc);
  transform: rotate(8deg);
  font-family: var(--font-m); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em;
  text-align: center; line-height: 1.2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.85' intercept='0.15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.85' intercept='0.15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 120px;
}
/* the ring the seal throws off as it lands: a stamp hitting paper, not a fade */
.lockcard-ring {
  position: absolute; top: 20px; right: 20px;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--p-acc);
  opacity: 0; pointer-events: none; z-index: 1;
}
.lockcard-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,.5), transparent 42%);
  mix-blend-mode: soft-light;
}
.locknote { font-family: var(--font-m); font-size: 0.75rem; color: var(--p-lo); }

/* ================= PRICING ================= */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan {
  border: 1px solid var(--p-line);
  border-radius: var(--r-card);
  background: var(--p-panel);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: border-color var(--d2) ease, box-shadow var(--d2) var(--e-out), transform var(--d2) var(--e-out);
}
.plan:hover { border-color: var(--p-line-hi); box-shadow: 0 18px 36px -24px rgba(20, 33, 26, 0.45); transform: translateY(-3px); }
.plan .btn { margin-top: auto; }
.plan-col {
  font-family: var(--font-m); font-size: var(--fs-nano); font-weight: 700;
  color: var(--p-lo); letter-spacing: 0.14em;
  display: flex; justify-content: space-between;
}
.plan-name { font-family: var(--font-d); font-weight: 800; font-size: 1.05rem; color: var(--p-ink); letter-spacing: -0.01em; }
.plan-price {
  font-family: var(--font-d); font-weight: 800;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: var(--p-ink); letter-spacing: -0.03em;
  display: flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.plan-price .pu {
  font-size: 0.42em; font-weight: 600; color: var(--p-lo);
  letter-spacing: 0; font-family: var(--font-b);
}
.plan-desc { font-size: 0.86rem; color: var(--p-fg); min-height: 3.2em; }
.plan-feats { list-style: none; padding: 0; margin: 2px 0 6px; display: grid; gap: 8px; }
.plan-feats li { display: flex; gap: 9px; font-size: 0.85rem; color: var(--p-fg); align-items: flex-start; }
.plan-feats .ico { width: 15px; height: 15px; color: var(--p-acc); margin-top: 3px; }
.plan .btn-ghost { border-color: var(--p-line-hi); color: var(--p-ink); }
.plan .btn-ghost:hover { border-color: var(--p-ink); }
.plan .btn-primary { background: var(--p-acc); color: #F2F5EC; }
.plan-hot {
  background: var(--p-ink);
  border-color: var(--p-ink);
  /* The lift is a margin, not a transform, because the reveal system owns
     transform on this element: `[data-reveal].in { transform: none }` is
     (0,2,0) and out-specified `transform: translateY(-14px)` at (0,1,0), so
     the featured plan sat flush with its neighbours and then jumped 18px on
     hover. A negative margin also makes the card taller than the others,
     which is what "featured" should look like anyway. */
  margin-top: -14px;
  box-shadow: 0 26px 54px -30px rgba(20, 33, 26, 0.6);
}
.plan-hot:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -30px rgba(20, 33, 26, 0.7); }
.plan-hot .plan-name, .plan-hot .plan-price { color: var(--p-bg); }
/* the unit sits on the dark card too: --p-lo is unreadable there */
.plan-hot .plan-price .pu { color: rgba(237, 238, 228, .78); }
.plan-hot .plan-col { color: rgba(237,238,228,.6); }
.plan-hot .plan-desc { color: rgba(237,238,228,.75); }
.plan-hot .plan-feats li { color: rgba(237,238,228,.82); }
.plan-hot .plan-feats .ico { color: var(--acc); }
.plan-hot .stamp {
  position: absolute; top: -13px; right: 16px; font-size: var(--fs-mini); padding: 5px 12px; border-width: 0;
  opacity: 1; transform: rotate(-6deg); animation: none;
  background: var(--p-seal); color: #F2F5EC;
  mask-image: none; -webkit-mask-image: none;
}
.plan-hot .btn-ghost { border-color: rgba(237,238,228,.35); color: var(--p-bg); }
.plan-hot .btn-ghost:hover { border-color: var(--p-bg); }
.plans-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-m); font-size: var(--fs-mini); color: var(--p-lo);
  border: 1px solid var(--p-line); border-radius: var(--r-pill);
  padding: 4px;
  margin-top: 24px;
}
.pricing-head {
  max-width: none;                /* .sec-head caps at 760px; the control belongs at the table's right edge */
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.pricing-head h2 { max-width: 18ch; }
@media (max-width: 700px) { .pricing-head { align-items: flex-start; } }
.plans-toggle button { color: var(--p-lo); padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid transparent; font-family: var(--font-m); font-size: var(--fs-mini); transition: color var(--d1) ease, border-color var(--d1) ease, background var(--d1) ease; }
.plans-toggle button[aria-pressed="true"] { color: var(--p-bg); border-color: transparent; background: var(--p-ink); }
.pricing-note { margin-top: 20px; font-family: var(--font-m); font-size: var(--fs-mini); color: var(--p-lo); max-width: 76ch; }
.pricing-note + .pricing-note { margin-top: 8px; }
/* 1080px, matching the width at which the header gives up its links. At 1020
   each of the four plans was about 228px wide, which is narrower than its own
   feature list wants to be. */
@media (max-width: 1080px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .plan-hot { margin-top: 0; }
}
@media (max-width: 620px) {
  .plans { grid-template-columns: 1fr; }
}

/* ================= PARTNER BAND ================= */
.partner {
  /* the pricing section's own bottom padding IS the gap: a margin here
     stacked on top of it and produced a 240px hole */
  margin-top: 0;
  border-block: 1px solid var(--p-line);
  background: var(--p-bg-2);
}
.partner-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 80px);
}
.partner p { color: var(--p-fg); margin-top: 12px; max-width: 56ch; }
.partner-points { display: grid; gap: 10px; list-style: none; padding: 0; }
.partner-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--p-fg); font-size: 0.94rem; }
.partner-points .ico { color: var(--p-acc); margin-top: 3px; }
.partner-cta { margin-top: 22px; }
@media (max-width: 860px) { .partner-grid { grid-template-columns: 1fr; } }

/* paper-world form + faq overrides */
.paper-world .input { background: #FFFFFF; border-color: var(--p-ctl-line); color: var(--p-ink); }
/* the placeholder is a hint, never the label: both are visible now */
.paper-world .input::placeholder { color: #6B7566; }
.paper-world .input:focus { border-color: var(--p-acc); background: #FFFFFF; }
.paper-world .field label { color: var(--p-ink); }
.paper-world .checkline { color: var(--p-lo); }
.paper-world .checkline input { accent-color: var(--p-acc); }
/* The selected chip is ink on ink: it already has `background: var(--p-ink)`,
   so painting its label --p-ink on hover made the label vanish entirely. */
.paper-world .plans-toggle button:not([aria-pressed="true"]):hover { color: var(--p-ink); }
.paper-world .faq-item { background: var(--p-panel); border-color: var(--p-line); }
.paper-world .faq-item summary { color: var(--p-ink); }
.paper-world .faq-item summary:hover { background: var(--p-bg-2); }
.paper-world .faq-item summary .ico { color: var(--p-acc); }
.paper-world .faq-body { color: var(--p-fg); }
.paper-world .btn-primary { background: var(--p-acc); color: #F2F5EC; }
.paper-world .btn-primary::after { content: none; }
.paper-world .btn-primary:disabled,
.paper-world .btn-primary[aria-disabled="true"] {
  background: var(--p-bg-2); color: var(--p-fg); border-color: var(--p-line-hi);
}
.paper-world .btn-ghost { border-color: var(--p-line-hi); color: var(--p-ink); }
.paper-world .btn-ghost:hover { border-color: var(--p-ink); transform: translateY(-1px); }

/* ================= CTA ================= */
.paper-world > .section:first-child { padding-top: clamp(56px, 7vw, 96px); }
/* `.section + .section { padding-top: 0 }` is right for sections that meet
   with nothing between them, but this one draws a rule, and its heading sat
   directly on the line with no space at all. */
.cta { border-top: 1px solid var(--p-line); padding-top: clamp(56px, 8vh, 96px); }
.cta .wrap-narrow { text-align: center; }
.cta h2 { max-width: 16ch; margin-inline: auto; }
.cta .lede { margin: 18px auto 0; }
.waitlist {
  margin: 34px auto 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 720px;
  text-align: left;
}
.waitlist > * { min-width: 0; }
.waitlist .field { justify-content: flex-end; }
.waitlist select.input { height: 100%; min-height: 48px; }
.waitlist .btn { align-self: end; min-height: 48px; }
.waitlist .btn { white-space: normal; }
.waitlist-consent { max-width: 720px; margin: 12px auto 0; justify-content: center; }
.wait-ok {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-m); font-size: 0.85rem; color: var(--p-acc);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--d2) var(--e-out), transform var(--d2) var(--e-out);
}
/* hidden until it is true, so assistive tech cannot announce it early */
.wait-ok[hidden] { display: none; }
.wait-ok.show { opacity: 1; transform: none; }
.fineprint { margin-top: 18px; font-family: var(--font-m); font-size: var(--fs-mini); color: var(--p-lo); }
@media (max-width: 720px) {
  .waitlist { grid-template-columns: 1fr; }
}

/* the gate card borrows the document world's palette */
.gate-card h3 { color: var(--fg-hi); }
.modal-note { margin-top: 18px; font-family: var(--font-m); font-size: var(--fs-mini); color: var(--fg-lo); }
.modal-close { color: var(--fg-lo); border-color: transparent; }
.modal-close:hover { color: var(--fg-hi); border-color: var(--line-hi); }