/* ===========================================================================
   REVOCLE v2 — PAGE LAYER  ("screenprinted delivery sheet")
   ---------------------------------------------------------------------------
   Loaded ONLY by subpages, always AFTER revocle-v2.css and
   revocle-v2-funk.css. One job: PAGE MODE.

   The homepage is seven one-viewport plates with mandatory scroll-snap.
   Subpages carry prose, tables and forms, so they cannot be one viewport
   each — snapping is turned off here and bands size to their content.
   Because this file is subpage-only it overrides the base with bare
   `html`/`.plate` selectors and source order decides.

   The print language itself (hard rules, offset shadows, misregistration,
   halftone, tilt) lives in revocle-v2-funk.css, which the homepage loads
   too. Colour/contrast notes for the bands are in section 3 below.
   =========================================================================== */

/* ── 1 · PAGE MODE ───────────────────────────────────────────────────────── */
html{
  scroll-snap-type:none;
  scroll-padding-top:calc(var(--nav-h) + 14px);
}
.plate{
  min-height:auto;
  align-content:start;
  scroll-snap-align:none;
  scroll-snap-stop:normal;
}

/* Base type is sized against vh so a headline always fits its plate. On a
   scrolling page that is wrong — it shrinks the headline on a short window
   for no reason. Re-cut against vw and rem only. */
h1{font-size:clamp(2.4rem,7vw,6rem)}
h2{font-size:clamp(1.8rem,4.4vw,3.5rem)}
.lede{font-size:clamp(1rem,1.35vw,1.22rem)}

/* ── 2 · FUNK PRIMITIVES ─────────────────────────────────────────────────────
   Moved to revocle-v2-funk.css, which the homepage loads too. This file is
   now only what is specific to a SCROLLING page.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 3 · BANDS ───────────────────────────────────────────────────────────────
   A band is a plate that sizes to its content. Colours and their measured
   contrast ratios against the type they carry:

     indigo  #4C1FD6   paper #FFF7EA  7.98  ·  white 8.49
     paper   #FFF7EA   ink   #141109 17.73  ·  indigo  #4C1FD6 7.98
     ink     #1A0812   paper #FFF7EA 18.16  ·  lime #CCFF44 16.51
     lime    #CCFF44   ink   #141109 16.12  ·  ink is the only safe type on it

   Lime on the indigo field measures 7.26 — clear for body text too (16 Aug 2026).
   ────────────────────────────────────────────────────────────────────────── */
.band{
  position:relative;isolation:isolate;
  padding-block:clamp(56px,8vh,110px);
}
.band--top{padding-top:calc(var(--nav-h) + clamp(34px,6vh,72px))}

.band--blue{background:var(--blue);color:var(--paper);--mis:var(--lime);--fx-shadow:var(--rule);--accent:var(--blue)}
.band--vio{background:var(--vio);color:var(--paper);--mis:var(--lime);--fx-shadow:var(--rule);--accent:var(--vio)}
.band--paper{background:var(--paper);color:var(--ink);--mis:var(--vio);--fx-shadow:var(--rule)}
.band--indigo{background:var(--p-hero);color:var(--hero-ink);--mis:var(--lime);--fx-shadow:var(--lime)}
.band--lime{background:var(--lime);color:var(--ink);--mis:var(--vio);--fx-shadow:var(--rule)}

/* Section colours, so a ported page reads as part of the same system as the
   homepage plate it belongs to. All measured against the ink they carry:
     plum     #210711 / #FFEFF1 17.10  · coral  6.34
     espresso #16110C / #F5EFE2 16.37  · gold  13.54
     cobalt   #0F2BD6 / #FFFFFF  8.99  · yellow 6.58
     ink      #0E0C08 / #F6F3EA 17.61  · lime  16.71
   Every one clears AA for body text, not just for large display. */
.band--plum{background:var(--p-cms);color:var(--cms-ink);--mis:var(--coral);--fx-shadow:var(--coral)}

.band--espresso{background:var(--p-fund);color:var(--fund-ink);--mis:var(--gold);--fx-shadow:var(--gold)}
.band--cobalt{background:var(--p-price);color:var(--price-ink);--mis:var(--yellow);--fx-shadow:var(--yellow)}
.band--ink{background:var(--p-foot);color:var(--foot-ink);--mis:var(--lime);--fx-shadow:var(--lime)}

/* On any dark band the black rule would disappear, so it switches to the
   band's own light ink. */
.band--blue,.band--vio,.band--indigo,.band--plum,
.band--espresso,.band--cobalt,.band--ink{--rule:currentColor}
.band--blue .fx,.band--vio .fx,.band--indigo .fx,.band--plum .fx,
.band--espresso .fx,.band--cobalt .fx,.band--ink .fx{background:transparent;color:inherit}

/* Hard edge between bands, matching how the homepage plates meet: nothing.
   No divider device — every one of them was tried and rejected. */

/* A ported page's body band is always paper, so it has no colour of its own to
   take an accent from. The porter stamps the page's accent on it as a data
   attribute and it resolves to --accent here, which is what links, stamps and
   buttons in .pgbody read. Without this every page's links were one colour
   regardless of which section the page belonged to. */
.band--paper[data-accent="blue"]{--accent:var(--blue);--mis:var(--blue)}
.band--paper[data-accent="vio"]{--accent:var(--vio);--mis:var(--vio)}
.band--paper[data-accent="cobalt"]{--accent:var(--p-price);--mis:var(--p-price)}
.band--paper[data-accent="plum"]{--accent:var(--p-cms);--mis:var(--coral)}

.band--paper[data-accent="espresso"]{--accent:var(--p-fund);--mis:var(--p-fund)}
.band--paper[data-accent="indigo"]{--accent:var(--p-hero);--mis:var(--p-hero)}
.band--paper[data-accent="ink"]{--accent:var(--p-foot);--mis:var(--p-foot)}

/* ── 4 · PAGE HEAD ───────────────────────────────────────────────────────── */
.crumb{
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;margin-bottom:18px;
}
.crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

.phead h1{margin-bottom:6px}
.phead .lede{max-width:54ch}

/* the stat row, set as stamped tickets */
.tix{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(26px,4vh,46px);
}
.tix>div{
  border:3px solid var(--rule);padding:clamp(12px,1.6vw,20px);
  background:rgba(255,255,255,.06);
}
.tix b{font-family:var(--num);font-weight:700;display:block;
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.03em}
.tix span{font-family:var(--display);font-size:clamp(9.5px,.95vw,11.5px);
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  display:block;margin-top:8px;opacity:.82}

/* ── 5 · SPEC CARDS ──────────────────────────────────────────────────────── */
.spec{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(30px,4.4vh,52px);
}
.spec .fx{padding:clamp(18px,2.2vw,28px)}
.spec h3{
  font-family:var(--head);font-size:clamp(1.05rem,1.5vw,1.32rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.1;
  margin:14px 0 9px;
}
.spec p{font-family:var(--body);font-size:clamp(.9rem,1.05vw,1rem);line-height:1.55}
/* The index numeral is set in the band's accent, not a grey — a muted stamp
   reads as an accident. Magenta on paper measures 4.71, clears AA. */
.spec .stamp{font-size:clamp(1.6rem,2.6vw,2.3rem);color:var(--mis);opacity:.9}
.spec .more{
  display:inline-block;margin-top:12px;
  font-family:var(--display);font-weight:700;font-size:13px;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
.spec .more:hover{opacity:.65}

/* ── 6 · DELIVERY LINE ───────────────────────────────────────────────────── */
.line{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);
  margin-top:clamp(30px,4.4vh,52px);
}
.line>div{position:relative;padding-top:26px;border-top:3px solid var(--rule)}
.line .stamp{
  position:absolute;top:-.32em;right:0;
  font-size:clamp(3.2rem,7vw,6rem);opacity:.16;
}
.line h3{
  font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1rem,1.4vw,1.25rem);margin-bottom:8px;
}
.line p{font-family:var(--body);font-size:clamp(.88rem,1.02vw,.98rem);line-height:1.55}

/* ── 7 · PULL BAND ───────────────────────────────────────────────────────── */
/* Selector mirrors `.pull-grid p` and then beats it. A bare `.pull` is
   (0,1,0) against that rule's (0,1,1) and silently loses — the quote renders
   at body size. Same trap as `.page-grid>.panel` in the v1 stylesheet. */
.pull-grid .pull{
  font-family:var(--head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.02;
  max-width:16ch;
}
.pull-grid .pull .it{font-family:var(--serif);font-style:italic;font-weight:400}

.pull-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start;
}
.pull-grid p{font-family:var(--body);font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.62}
.pull-grid p+p{margin-top:14px}

/* ── 8 · FAQ ─────────────────────────────────────────────────────────────── */
/* The rules run the full width of the wrap — a half-width rule against a
   full-width colour field reads as unfinished. Only the answer text is
   measure-limited. */
.faq{margin-top:clamp(26px,4vh,44px)}
.faq details{border-top:3px solid var(--rule);padding:18px 0}
.faq details:last-of-type{border-bottom:3px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;
  font-family:var(--head);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1rem,1.35vw,1.18rem);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--num);font-weight:700;font-size:1.5rem;
  line-height:1;flex:0 0 auto;transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-family:var(--body);font-size:clamp(.92rem,1.08vw,1.02rem);
  line-height:1.6;margin-top:12px;max-width:66ch}
.faq a{border-bottom:2px solid currentColor}

/* ── 9 · CLOSING CTA ─────────────────────────────────────────────────────── */
.pcta{text-align:center}
.pcta h2{margin-bottom:10px}
.pcta .lede{margin-inline:auto;text-align:center}
.pcta .btn-row{justify-content:center}

/* ── 10 · RESPONSIVE ─────────────────────────────────────────────────────────
   Verified at each breakpoint in a real browser, not inferred. Below 820px
   the tilts and offset shadows are dialled back: at phone width a rotated
   card either overflows or forces a horizontal scrollbar, and the printed
   look does not survive being that small anyway.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .pull-grid{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:820px){
  :root{--off:5px}
  .tilt-l,.tilt-r,.tilt-lx,.tilt-rx{transform:none}
  .tix{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  :root{--off:4px}
  .spec{grid-template-columns:minmax(0,1fr)}
  .line{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .line .stamp{font-size:3rem}
  h1{font-size:clamp(2rem,9vw,2.8rem)}
}

/* Reduced motion: the funk is static anyway, but the base file animates the
   grain and the reveals, and those are already gated there. Nothing to add. */

/* ── 404 page ────────────────────────────────────────────────────────────────
   One indigo band. The popular-pages row is plain bordered chips — the two
   real actions above them stay the loudest elements. */
.nf-row{margin-top:22px}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.nf-links a{
  padding:8px 14px;border:2px solid currentColor;
  font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:inherit;
}
.nf-links a:hover,.nf-links a:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ── PLAN PICKER (/pricing) ──────────────────────────────────────────────────
   Three answers, one verdict. Pure client-side; the verdict only restates
   rows of the comparison table below it. Lives on the paper band, so
   currentColor is ink and the pressed state reverses to paper. */
.pfit{border:3px solid var(--ink);padding:18px 20px 22px;margin-bottom:34px;
  box-shadow:6px 6px 0 rgba(0,0,0,.45);background:transparent}
.pfit-q{margin-top:16px}
.pfit-q:first-child{margin-top:0}
.pfit-label{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px;color:var(--ink-2)}
.pfit-opts{display:flex;flex-wrap:wrap;gap:8px}
.pfit-opts button{
  padding:10px 16px;cursor:pointer;background:transparent;color:var(--ink);
  border:2px solid var(--ink);border-radius:0;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.02em;
}
.pfit-opts button:hover,.pfit-opts button:focus-visible{box-shadow:3px 3px 0 rgba(0,0,0,.45)}
/* 2026-08-18 phase-3: thumb-sized targets on phones */
@media (max-width:820px){
  .pfit-opts button{padding:12px 16px}
  .crumb a{display:inline-block;padding-block:6px;margin-block:-6px}
}
.pfit-opts button[aria-pressed="true"]{background:var(--ink);color:var(--paper);
  box-shadow:3px 3px 0 var(--vio)}
.pfit-res{margin-top:22px;padding-top:18px;border-top:3px solid var(--ink)}
.pfit-verdict{font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:10px}
.pfit-verdict b{color:var(--vio)}
.pfit-res ul{list-style:none;padding:0;margin:0 0 14px}
.pfit-res ul li{padding-left:22px;position:relative;margin-top:6px;font-size:.95rem}
.pfit-res ul li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--vio)}
.pfit-base{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);
  margin-bottom:16px}
.pfit-note{margin-top:14px;font-size:.9rem;color:var(--ink-2)}
.pfit-note a{color:inherit}
@media (max-width:560px){
  .pfit{padding:14px 14px 18px}
  .pfit-opts button{flex:1 1 auto;padding:11px 10px}
}