/* ============================================================
   Inkperch Travel Companion — v4 additive polish
   Load after page-premium.css + page-premium-dark.css.
   ============================================================ */

/* hero kicker: hand-inked underline on the key phrase */
.u-marker{
  text-decoration:underline wavy;
  text-decoration-color:rgba(201,150,42,0.55);
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}

/* phones: warm foil glow + hand-placed tilt */
.phone-scale{ position:relative; }
.phone-scale::before{
  content:""; position:absolute; inset:-14% -20%;
  background:radial-gradient(50% 46% at 50% 44%, rgba(201,150,42,0.14), transparent 70%);
  z-index:0; pointer-events:none;
}
.phone-scale .phone{ position:relative; z-index:1; }
.beat .phone-scale{ transform:rotate(-1.4deg); }
.beat--reverse .phone-scale{ transform:rotate(1.4deg); }
@media (prefers-reduced-motion: no-preference){
  .phone-scale{ transition:transform 0.45s ease; }
  .beat-stage:hover .phone-scale{ transform:rotate(0deg); }
}

/* feature cards: quiet lift on hover */
@media (prefers-reduced-motion: no-preference){
  .feat{ transition:transform 0.25s ease, box-shadow 0.25s ease; }
  .feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); }
}

/* mid-scroll CTA */
.lp-midcta{ text-align:center; padding:10px 0 26px; }
.lp-midcta .midcta-line{
  font-family:var(--marker); font-size:23px; color:#D96A50;
  transform:rotate(-1.5deg); display:inline-block; margin-bottom:20px;
}
.lp-midcta .lp-nav-cta{ display:inline-block; }
.lp-midcta .midcta-sub{
  font-family:var(--mono); font-size:13px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); margin-top:18px;
}

/* readable measure when beats stack to one column */
@media (max-width:980px){
  .beat-copy{ max-width:640px; }
}

/* fix: .lp-section zeroes .lp-wrap's side padding (specificity tie, later rule wins) */
.lp-section.lp-wrap{ padding-left:32px; padding-right:32px; }
@media (max-width:560px){
  .lp-section.lp-wrap{ padding-left:20px; padding-right:20px; }
}

/* readability floors: body-adjacent copy up to 16px; email input at 16px
   also prevents iOS Safari's focus auto-zoom */
.feat-desc{ font-size:16px; }
.waitlist-lead{ font-size:16px; }
.waitlist-done-b{ font-size:16px; }
.waitlist-input{ font-size:16px; }

/* ── mobile web (≤560px) ──────────────────────────────── */
@media (max-width:560px){
  /* nav: wrap to two lines so logo + links never fight for the same row */
  .lp-nav-row{ flex-wrap:wrap; row-gap:8px; padding:12px 18px; }
  .lp-nav-row img{ height:36px; }
  .lp-nav-links{ width:100%; justify-content:flex-start; gap:12px; }
  .lp-nav-links a{ font-size:14.5px; letter-spacing:0.1em; }
  .lp-nav-cta{ padding:9px 14px; font-size:13px; letter-spacing:0.1em; white-space:nowrap; }

  /* hero figure: 120px floor renders ~354px wide, wider than the screen */
  .lp-hero-fig{ font-size:clamp(72px, 24vw, 120px); }
  .lp-hero-line{ font-size:24px; }

  /* duo columns: 36px side padding is too rich at 320px of content */
  .duo-col{ padding-left:8px; padding-right:8px; }
}

/* phone frames: fixed 355px width clips on small screens — step down */
@media (max-width:470px){
  .phone-scale{ width:300px; height:630px; }
  .phone-scale .phone{ transform:scale(0.7194); }
}
@media (max-width:350px){
  .phone-scale{ width:260px; height:546px; }
  .phone-scale .phone{ transform:scale(0.6235); }
}