/* ============================================================
   FREE PLAYBOOK — opt-in + confirmation pages
   Reuses TrustAuto's existing dark design tokens, typography, and
   button/benefit-grid patterns 1:1 from index.html so this campaign
   flow feels like a native part of the site. This is a focused,
   single-purpose funnel page (ad -> email capture -> confirmation),
   so nav, footer, and sections are intentionally minimal compared to
   the full marketing homepage.
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --ink-2:#151515;
  --ink-3:#1e1e1e;
  --line:#282828;
  --paper:#f5f2ec;
  --paper-dim:#a39c8f;
  --grey:#7d766a;
  --accent:#ff751f;
  --accent-tint:#ff9152;
  --accent-dim:#2a1810;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent);color:var(--ink);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- MINIMAL HEADER ----------
   Logo only, no nav links. This is a paid-traffic landing page with one
   job (capture the email) — every link off the page is a lost visitor,
   so the usual site nav/CTA is deliberately left out here. */
header.pb-header{padding:16px 0;}
.pb-logo{display:flex;align-items:center;justify-content:center;gap:10px;}
.pb-logo .mark{width:34px;height:34px;border-radius:8px;overflow:hidden;flex-shrink:0;}
.pb-logo .mark img{width:100%;height:100%;object-fit:contain;display:block;}
.pb-logo .name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.01em;}

/* ---------- SINGLE-SCREEN LAYOUT (opt-in page only, DESKTOP/TABLET) ----------
   Desktop-only: on any screen taller than the content needs, centering
   that block in the remaining space (instead of pinning it to the top
   and leaving a dead gap under the footer) is what makes the page feel
   intentional rather than sparse. This is gated to >=768px on purpose —
   it depends on the viewport-height units below, which is exactly the
   kind of thing that gets unreliable inside mobile in-app browsers (see
   the MOBILE OVERHAUL section at the bottom of this file for why mobile
   uses plain top-down flow instead). */
@media (min-width:768px){
  body.pb-optin-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
  body.pb-optin-page main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
  body.pb-optin-page footer.pb-footer{flex-shrink:0;}
}

/* ---------- HERO / OPT-IN ----------
   Vertical rhythm here is deliberately tight: this is paid-traffic, and
   the single job of this screen is getting the email field + CTA in front
   of the visitor without a scroll, on as many devices as possible — so
   every margin below is sized against that goal, not just aesthetics. */
.pb-hero{padding:6px 0 14px;position:relative;overflow:hidden;}
.pb-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 520px at 50% 0%, rgba(255,117,31,.10), transparent 60%);
}
.pb-hero .wrap{position:relative;z-index:1;}
.pb-hero-inner{max-width:640px;margin:0 auto;text-align:center;position:relative;}
/* Everything except the background book art sits in its own stacking
   context above it — keeps the graphic strictly decorative, never able
   to overlap or compete with the text/CTA that follow. */
.pb-hero-inner > *:not(.pb-book-stack){position:relative;z-index:1;}

.pb-hero h1{
  font-size:clamp(24px,6.4vw,50px);line-height:1.08;font-weight:700;margin:0 0 4px;
}
.pb-hero h1 .free-tag{
  display:block;color:var(--accent-tint);font-size:clamp(16px,3.6vw,28px);
  margin-top:5px;letter-spacing:.02em;
}
.pb-hero p.sub{
  font-size:15.5px;line-height:1.5;color:var(--paper-dim);max-width:440px;
  margin:8px auto 14px;
}

/* Placeholder book mockup — gives the offer real physical weight/tangibility
   before the final designed cover exists. Pure CSS, swap the front cover's
   inner markup for real cover art later without touching layout.
   Two layered "books": .pb-book-back sits behind + offset, cover-only (no
   title) purely to read as thickness/depth; .pb-book-front carries the
   actual title and is the one the eye lands on first. Each book is built
   from a cover face + a thin striped "page block" strip along the right
   edge + an inset spine shadow along the left, so it reads as a bound
   object rather than a flat card or a document/PDF icon. */
/* Playbook cover art — kept as a premium background watermark rather than
   a foreground object. It sits centered behind the hero copy, faded and
   softly blurred so it reads as texture/depth instead of competing with
   the headline, subcopy, or CTA for attention. This also frees up the
   vertical space it used to occupy in-flow, which is what gets the CTA
   above the fold on both mobile and desktop. */
.pb-book-stack{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-52%) rotate(-3deg);
  width:clamp(320px,64vw,640px);
  aspect-ratio:5/7;
  margin:0;
  z-index:0;
  opacity:.22;
  filter:blur(7px) saturate(.8);
  -webkit-mask-image:radial-gradient(closest-side, #000 50%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 50%, transparent 100%);
  pointer-events:none;
  user-select:none;
}
.pb-book{
  position:absolute;inset:0;
  border-radius:4px 10px 10px 4px;
  box-shadow:0 34px 70px -22px rgba(0,0,0,.75);
}
.pb-book::before{
  /* page block — thin striped strip standing proud of the right edge */
  content:'';position:absolute;top:3%;bottom:3%;right:-7px;width:11px;
  border-radius:0 5px 5px 0;
  background:
    repeating-linear-gradient(180deg,
      #ece6da 0px, #ece6da 1.4px,
      #d8d0c0 1.4px, #d8d0c0 2.6px);
  box-shadow:2px 0 6px rgba(0,0,0,.35);
}
.pb-book::after{
  /* spine shadow — inset gradient along the left (bound) edge */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 5px 0 10px -4px rgba(0,0,0,.6);
}
.pb-book-back{
  background:linear-gradient(155deg,#1a1815,#0a0a0a 70%);
  border:1px solid var(--line);
  transform:rotate(7deg) translate(16px,10px);
  z-index:1;
}
.pb-book-back::before{
  background:
    repeating-linear-gradient(180deg,
      #302a22 0px, #302a22 1.4px,
      #221e18 1.4px, #221e18 2.6px);
}
.pb-book-front{
  z-index:2;
  transform:rotate(-6deg);
  background:
    linear-gradient(160deg, rgba(255,117,31,.14), transparent 46%),
    linear-gradient(200deg,#1e1b17,#0a0a0a 75%);
  border:1px solid #35302a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:9% 11% 12%;text-align:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.pb-book-stack:hover .pb-book-front{transform:rotate(-2deg) translateY(-3px);}
.pb-book-front .pb-cover-owl{width:19%;height:auto;opacity:.96;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.pb-book-front .pb-cover-kicker{
  font-family:'IBM Plex Mono';font-size:clamp(8px,2vw,9.5px);letter-spacing:.16em;
  color:var(--accent-tint);text-transform:uppercase;
}
.pb-book-front .pb-cover-title{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(15px,4.2vw,18px);
  font-weight:700;line-height:1.24;color:var(--paper);
}
.pb-book-front .pb-cover-rule{
  width:34px;height:2.5px;border-radius:2px;background:var(--accent);
  margin-top:auto;
}

/* Compact, non-blurred, in-flow book graphic — MOBILE ONLY (see the
   MOBILE OVERHAUL section at the bottom of this file for where it's
   shown and why it replaces .pb-book-stack there). Hidden on desktop by
   default. */
.pb-book-mobile{display:none;}

/* Email + CTA are stacked (not side-by-side) and sized as the page's two
   primary elements — large tap targets, same width/height, centered and
   deliberately capped in width so they stay balanced on wide screens. */
.pb-form{max-width:420px;margin:0 auto;}
.pb-form-row{display:flex;flex-direction:column;gap:11px;}
.pb-input{
  width:100%;
  padding:18px 26px;border-radius:100px;border:2px solid var(--line);
  background:var(--ink-2);color:var(--paper);font-size:18px;font-family:inherit;
  transition:border-color .15s ease;
}
.pb-input::placeholder{color:var(--grey);}
.pb-input:focus{outline:none;border-color:var(--accent);}
.pb-input.err{border-color:#ff8a8a;}

.pb-submit{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:18px 26px;border-radius:100px;border:none;
  background:var(--accent);color:#fff;font-weight:700;font-size:17px;letter-spacing:.01em;
  box-shadow:0 16px 34px -10px rgba(255,117,31,.5);
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.pb-submit:hover{background:var(--accent-tint);transform:translateY(-1px);}
.pb-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}

.pb-field-err{color:#ff8a8a;font-size:12.5px;margin-top:10px;display:none;text-align:left;padding-left:10px;}
.pb-field-err.show{display:block;}

.pb-reassure{margin-top:10px;font-size:12.5px;color:var(--grey);}

/* toast (submission errors) */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1d1d1d;border:1px solid var(--accent);color:#fff;padding:14px 22px;
  border-radius:12px;font-size:14px;opacity:0;transition:opacity .3s ease, transform .3s ease;
  z-index:200; display:flex; gap:10px; align-items:center; max-width:90vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   CONFIRMATION PAGE
   ============================================================ */

.pb-confirm-hero{padding:44px 0 8px;text-align:center;position:relative;overflow:hidden;}
.pb-confirm-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(800px 460px at 50% 10%, rgba(255,117,31,.12), transparent 60%);
}
.pb-confirm-hero .wrap{position:relative;z-index:1;}

/* celebration — same particle-burst mechanic as the homepage's vehicle
   reveal moment, recolored to brand orange/white/paper instead of red. */
.pb-celebrate{position:relative;width:140px;height:140px;margin:0 auto;}
.pb-confetti{position:absolute;inset:0;z-index:2;pointer-events:none;}
.pb-confetti span{
  position:absolute;top:50%;left:50%;border-radius:1px;opacity:0;
  animation:pbConfetti .9s ease-out forwards;
}
@keyframes pbConfetti{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg);}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) rotate(var(--tr,90deg));}
}

.pb-check{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;z-index:1;
  background:var(--accent-dim);border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  animation:pbCheckPop .5s cubic-bezier(.2,.8,.2,1) both;
}
.pb-check svg{width:34px;height:34px;stroke:var(--accent-tint);}
.pb-check svg path{
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:pbCheckDraw .5s ease forwards .25s;
}
@keyframes pbCheckPop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@keyframes pbCheckDraw{to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion: reduce){
  .pb-check{animation:none;}
  .pb-check svg path{animation:none;stroke-dashoffset:0;}
}

.pb-confirm-hero h1{
  font-size:clamp(30px,5.6vw,46px);line-height:1.1;margin:0 0 14px;
  opacity:0;transform:translateY(10px);animation:pbFadeUp .55s ease forwards .2s;
}
.pb-confirm-hero p.sub{
  font-size:17.5px;line-height:1.6;color:var(--paper-dim);max-width:440px;margin:0 auto;
  opacity:0;transform:translateY(10px);animation:pbFadeUp .55s ease forwards .32s;
}
.pb-confirm-hero p.pb-confirm-note{
  font-size:13px;line-height:1.55;color:var(--grey);max-width:400px;margin:10px auto 0;
  opacity:0;transform:translateY(10px);animation:pbFadeUp .55s ease forwards .4s;
}
@keyframes pbFadeUp{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion: reduce){
  .pb-confirm-hero h1, .pb-confirm-hero p.sub, .pb-confirm-hero p.pb-confirm-note{opacity:1;transform:none;animation:none;}
}

/* ---------- INTRO ---------- */
.pb-intro{padding:56px 0 8px;}
.pb-intro-inner{max-width:640px;margin:0 auto;text-align:center;}
.pb-intro-inner p{font-size:16.5px;line-height:1.7;color:var(--paper-dim);margin:0;}
.pb-intro-inner p strong{color:var(--paper);}

/* scroll cue — points straight at the benefits section below it. The
   global prefers-reduced-motion rule at the top of this file (which sets
   every animation-duration to 0.01ms) already neutralizes the bounce for
   anyone with that preference, so no extra override is needed here. */
.pb-scroll-cue{display:flex;justify-content:center;padding:30px 0 6px;}
.pb-scroll-cue svg{
  width:26px;height:26px;color:var(--accent-tint);opacity:.85;
  animation:pbBounce 1.7s ease-in-out infinite;
}
@keyframes pbBounce{
  0%,100%{transform:translateY(0);opacity:.6;}
  50%{transform:translateY(9px);opacity:1;}
}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:56px 0;}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center;}
.kicker{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--accent-tint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:block;}
.section-head h2{font-size:clamp(24px,3.6vw,34px);font-weight:700;margin:0 0 14px;line-height:1.15;}
.section-head p{color:var(--paper-dim);font-size:15.5px;line-height:1.6;margin:0;}

/* ---------- BENEFIT GRID (copied 1:1 from homepage) ---------- */
.benefit-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;grid-template-columns:1fr;}
@media(min-width:640px){.benefit-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.benefit-grid{grid-template-columns:repeat(3,1fr);}}
.benefit-card{background:var(--ink-2);padding:26px 22px;position:relative;transition:background .2s ease;}
.benefit-card:hover{background:var(--ink-3);}
.benefit-card:hover .benefit-ico{color:var(--accent-tint);border-color:var(--accent);}
.benefit-ico{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);color:var(--paper-dim);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:color .2s ease, border-color .2s ease;
}
.benefit-ico svg{width:19px;height:19px;}
.benefit-card h4{margin:0 0 6px;font-size:15.5px;}
.benefit-card p{margin:0;color:var(--paper-dim);font-size:13.5px;line-height:1.5;}

/* ---------- CONTACT (recreated from the homepage's "Ready to find your
   deal?" graphic — same card, same photo, same CTA + contact chips, just
   rebuilt as real responsive markup instead of a static image). ---------- */
.pb-contact{padding:8px 0 56px;}
.pb-contact-card{
  position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);
  padding:72px 28px 40px;text-align:center;background:#0a0a0a;
}
.pb-contact-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.pb-contact-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block;opacity:.5;filter:brightness(.85) saturate(1.05);
}
.pb-contact-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.82) 52%, rgba(10,10,10,.98) 100%),
    radial-gradient(640px 300px at 50% 0%, rgba(255,117,31,.16), transparent 70%);
}
.pb-contact-card > *:not(.pb-contact-bg):not(.pb-contact-scrim){position:relative;z-index:2;}
.pb-contact-card h2{font-size:clamp(26px,4.6vw,38px);margin:0 0 12px;}
.pb-contact-card p.pb-contact-sub{color:var(--paper-dim);font-size:16px;margin:0 0 30px;}

.pb-contact-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;border-radius:100px;background:var(--accent);color:#fff;
  font-weight:700;font-size:15px;box-shadow:0 14px 30px -10px rgba(255,117,31,.5);
  margin-bottom:28px;transition:background .15s ease, transform .15s ease;
}
.pb-contact-cta:hover{background:var(--accent-tint);transform:translateY(-1px);}

.pb-contact-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.pb-contact-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--paper);font-size:13.5px;font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}
.pb-contact-chip svg{width:16px;height:16px;color:var(--accent-tint);flex-shrink:0;}
.pb-contact-chip:hover{border-color:var(--accent);background:rgba(255,117,31,.07);}

/* ---------- FOOTER (compact, matches homepage tone) ---------- */
footer.pb-footer{padding:48px 0 32px;border-top:1px solid var(--line);margin-top:24px;}
.pb-footer-inner{
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.pb-footer-logo{display:flex;align-items:center;gap:8px;}
.pb-footer-logo .mark{width:22px;height:22px;border-radius:6px;overflow:hidden;}
.pb-footer-logo .mark img{width:100%;height:100%;object-fit:contain;display:block;}
.pb-footer-logo .name{font-weight:700;font-size:14.5px;}
.pb-footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.pb-footer-links a{color:var(--paper-dim);font-size:13px;}
.pb-footer-links a:hover{color:var(--paper);}
.pb-footer-legal{color:var(--grey);font-size:12px;max-width:520px;}

/* section-reveal entrance animation (reused site-wide pattern) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============================================================
   EMAIL TYPO / INCOMPLETE-EMAIL MODAL
   Native to the page's own dark/orange system rather than a generic
   browser-style dialog — same card language as the rest of the funnel
   (ink-2 background, line border, accent CTA pill).
   ============================================================ */
.pb-modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(5,5,5,.72);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.pb-modal-overlay:not([hidden]){opacity:1;visibility:visible;transition:opacity .2s ease;}
body.pb-modal-open{overflow:hidden;}
.pb-modal{
  width:100%;max-width:420px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 22px;text-align:left;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:translateY(8px);
  transition:transform .2s ease;
}
.pb-modal-overlay:not([hidden]) .pb-modal{transform:translateY(0);}
.pb-modal-title{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 10px;line-height:1.28;word-break:break-word;}
.pb-modal-msg{font-size:14px;line-height:1.55;color:var(--paper-dim);margin:0 0 22px;word-break:break-word;}
.pb-modal-msg strong{color:var(--paper);}
.pb-modal-actions{display:flex;flex-direction:column;gap:10px;}
.pb-modal-btn{
  width:100%;padding:14px 18px;border-radius:100px;border:none;font-weight:700;font-size:14px;
  font-family:inherit;cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.pb-modal-btn-primary{background:var(--accent);color:#fff;}
.pb-modal-btn-primary:hover{background:var(--accent-tint);}
.pb-modal-btn-secondary{background:transparent;color:var(--paper-dim);border:1px solid var(--line);}
.pb-modal-btn-secondary:hover{border-color:var(--accent);color:var(--paper);}

/* ============================================================
   CONFIRMATION PAGE — SUCCESS / FAILURE STATE SWAP
   Both states are in the markup; JS toggles the [hidden] attribute
   depending on what the delivery-status poll reports (see
   js/playbook-thanks.js). Fading them in reuses the existing pbFadeUp
   keyframes already defined above via the same h1/p selectors.
   ============================================================ */
.pb-check.is-fail{background:#2a1414;border-color:#ff6b6b;}
.pb-check.is-fail svg{stroke:#ff8a8a;}
.pb-delivery-check{
  font-size:12px;color:var(--grey);margin:14px auto 0;opacity:0;
  animation:pbFadeUp .5s ease forwards .55s;
}
@media(prefers-reduced-motion: reduce){
  .pb-delivery-check{opacity:1;animation:none;}
}
.pb-retry-btn{margin-top:6px;}

/* ============================================================
   MOBILE OVERHAUL (<=767px)
   A deliberately different, simplified layout for phones — not the
   desktop design shrunk down. Desktop (>=768px) is untouched above.

   WHAT WAS CAUSING THE GLITCHING, and why the fixes below target it:

   1. Viewport-height-dependent centering. The single-screen layout
      above uses `min-height:100vh` (with a `100dvh` upgrade) plus
      flexbox to vertically center the hero. `dvh` exists specifically
      to fix the classic "100vh mobile bug" (address bar / chrome
      showing and hiding changes the *usable* viewport height without
      changing `100vh`, so vh-based layouts jump or clip content) — but
      it's a newer unit, and Instagram/Meta's in-app browser runs an
      older, non-standard WebView that doesn't reliably support it. When
      `dvh` silently falls back to plain `vh` there, the exact bug it
      was meant to prevent comes back: content sized/centered against a
      viewport height that doesn't match what's actually visible once
      the in-app browser's own UI chrome is accounted for — which reads
      as "elements missing", "cut off", or "the page doesn't display
      right", especially right after tapping through from an ad. Mobile
      below no longer depends on any viewport-height unit at all — it's
      plain top-to-bottom document flow, which cannot have this problem
      by construction.

   2. The decorative book background. `.pb-book-stack` combines
      `filter:blur()`, `mask-image` (a radial-gradient fade), absolute
      positioning, and rotated/translated layers, all stacked in one
      element. Each of those is individually fine; combined, they're a
      known trouble spot for exactly this class of in-app WebView —
      filter+mask+transform stacking has a history of rendering
      incorrectly (blank, mispositioned, or failing to clip) in older
      Chromium-based WebViews, which is what Instagram's Android
      in-app browser is built on. It's also just expensive to paint on a
      mid-range phone GPU for something purely decorative. Mobile hides
      it entirely and shows a small, flat, unblurred, unmasked graphic
      in normal document flow instead (`.pb-book-mobile`) — this was
      already the design goal ("shouldn't consume most of the screen,
      should support the CTA") and happens to route around the
      rendering risk at the same time.

   Everything else below is the "mobile-first lead-gen page" structure:
   logo -> headline -> short subcopy -> small graphic -> email signup
   (the primary focus) -> trust line -> simplified benefits -> CTA,
   all in a tight vertical flow with no scroll-blocking elements and no
   giant blank gaps.
   ============================================================ */
html{-webkit-text-size-adjust:100%;}
html,body{overflow-x:hidden;}
img{max-width:100%;}

@media (max-width:767px){
  .wrap{padding:0 20px;}
  section{padding:36px 0;}

  /* ---- hero: plain top-down flow, no vh/dvh, no flex centering ---- */
  body.pb-optin-page{min-height:0;}
  .pb-hero{padding:22px 0 18px;}
  .pb-hero-inner{max-width:420px;}

  /* the expensive blurred/masked background is gone on mobile — see the
     note above the media query for why */
  .pb-book-stack{display:none;}

  .pb-book-mobile{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    width:118px;margin:0 auto 16px;padding:14px 8px 12px;
    border-radius:8px 12px 12px 8px;
    background:
      linear-gradient(160deg, rgba(255,117,31,.16), transparent 46%),
      linear-gradient(200deg,#1e1b17,#0a0a0a 75%);
    border:1px solid #35302a;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.65);
  }
  .pb-book-mobile .pb-cover-owl{width:26px;height:26px;opacity:.96;}
  .pb-book-mobile .pb-cover-kicker{
    font-family:'IBM Plex Mono';font-size:7px;letter-spacing:.13em;
    color:var(--accent-tint);text-transform:uppercase;text-align:center;
  }
  .pb-book-mobile .pb-cover-title{
    font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;
    line-height:1.25;color:var(--paper);text-align:center;
  }
  .pb-book-mobile .pb-cover-rule{width:20px;height:2px;border-radius:2px;background:var(--accent);}

  .pb-hero h1{font-size:25px;line-height:1.16;margin:0 0 6px;}
  .pb-hero h1 .free-tag{font-size:15.5px;margin-top:4px;}
  .pb-hero p.sub{font-size:14px;line-height:1.5;margin:6px auto 16px;max-width:320px;}

  /* ---- signup: the primary focus, large + easy to tap, no clutter ---- */
  .pb-form{max-width:100%;}
  .pb-input{padding:16px 20px;font-size:16px;}
  .pb-submit{padding:16px 20px;font-size:15.5px;}
  .pb-reassure{font-size:12px;margin-top:12px;}

  .toast{
    left:16px;right:16px;transform:translateY(20px);max-width:none;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    justify-content:center;
  }
  .toast.show{transform:translateY(0);}

  /* ---- confirmation page: same tightened, simplified rhythm ---- */
  .pb-confirm-hero{padding:32px 0 4px;}
  .pb-confirm-hero h1{font-size:24px;}
  .pb-confirm-hero p.sub{font-size:15.5px;}
  .pb-celebrate{width:110px;height:110px;}
  .pb-check{width:62px;height:62px;}
  .pb-check svg{width:28px;height:28px;}

  .pb-intro{padding:36px 0 4px;}
  .pb-intro-inner p{font-size:15px;}

  /* ---- simplified benefits: concise single-column cards, not the
     full-size desktop grid ---- */
  .section-head{margin:0 auto 26px;}
  .section-head h2{font-size:21px;}
  .section-head p{font-size:14px;}
  .benefit-card{padding:18px 16px;}
  .benefit-ico{width:32px;height:32px;margin-bottom:12px;}
  .benefit-ico svg{width:16px;height:16px;}
  .benefit-card h4{font-size:14.5px;}
  .benefit-card p{font-size:13px;}

  /* ---- TrustAuto CTA card: present but doesn't overpower the signup ---- */
  .pb-contact-card{padding:44px 20px 30px;}
  .pb-contact-card h2{font-size:24px;}
  .pb-contact-card p.pb-contact-sub{font-size:14.5px;margin-bottom:22px;}
  .pb-contact-chips{flex-direction:column;align-items:stretch;}
  .pb-contact-chip{justify-content:center;font-size:13px;padding:12px 16px;}

  footer.pb-footer{padding:32px 0 calc(24px + env(safe-area-inset-bottom,0px));}

  .pb-modal{padding:22px 20px 18px;}
  .pb-modal-title{font-size:18px;}
}

@media (max-width:340px){
  .pb-hero h1{font-size:22px;}
  .pb-hero h1 .free-tag{font-size:14px;}
  .pb-confirm-hero h1{font-size:22px;}
}