/* ════════════════════════════════════════════════════════════════
   PEPITT — landing page stylesheet (v2 handoff, issue #1396)

   The landing page is a direct port of the design prototype
   (design_handoff_pepitt_landing/Pepitt v2.dc.html). The prototype
   carries its layout as inline styles, and the port keeps them: the
   values in the markup ARE the design. This file holds only what
   inline styles cannot express — tokens, keyframes, :hover, media
   queries, masks — i.e. the handoff's tokens.css + styles.css, plus
   the few rules the port needs to replace the prototype's runtime
   (state classes, CSS variables driven by landing.js).

   Legal pages (privacy/terms/legal) keep pepitt-site.css + legal.css;
   this sheet is the landing page only.
   ════════════════════════════════════════════════════════════════ */

/* ── tokens (handoff tokens.css, verbatim values) ─────────────── */
:root{
  --pep-cream:#FBF4E5; --pep-cream-light:#FFFDF7; --pep-sand:#EADCBE; --pep-sand-mid:#F5EBD6;
  --pep-navy:#1E2A4F; --pep-navy-deep:#16203D; --pep-navy-mid:#2B3656; --pep-navy-raised:#3A4875;
  --pep-navy-shadow:#0F1730; --pep-cream-ink:#F4E8CF; --pep-body-brown:#4c4437; --pep-muted-brown:#6E6357;
  --pep-border-sand:#D9C8A4;
  --pep-terracotta:#C2542E; --pep-terracotta-deep:#7E2E11; --pep-terracotta-light:#E8845E; --pep-terracotta-hover:#A8431F;
  --pep-gold:#C7A24E; --pep-gold-light:#E0C176; --pep-violet:#5E45A6; --pep-violet-light:#C8B6EC; --pep-green:#2E7D5B;
  --pep-eu-blue:#003399; --pep-eu-blue-deep:#00246B; --pep-eu-shadow:#001A4D; --pep-eu-shadow-2:#001233; --pep-eu-gold:#FFCC00;
  --pep-rule:#EDE2C8;
  --pep-ease-press:cubic-bezier(.2,.9,.24,1); --pep-ease-out:cubic-bezier(.22,1,.36,1);

  /* layout state the prototype computed in JS (IMPLEMENTATION.md →
     Responsive behaviour). Desktop values here, narrow ones below. */
  --navDisp:inline; --langDisp:flex;
  --copyH:70vh; --copyPad:15vh;
  --bulDesk:flex; --bulMob:none;
  --bnCols:repeat(4,minmax(0,1fr)); --bnWide:span 2; --bnTall:span 2;

  /* scroll-driven state, written by landing.js */
  --hdrOp:0; --hdrY:-100%; --hdrBlur:0px; --hdrBg:rgba(229,213,181,0); --hdrLine:rgba(217,200,164,0); --hdrPE:none; --hdrLogoOp:0;
  --heroLogoOp:1; --heroLogoSc:1;
  --stepBg:#FBF4E5; --iconOp:0; --iconTf:none; --stripY:0%;
  --phoneScale:1; --phoneBoxW:318px; --phoneBoxH:656px;
  --tRec:#C2542E; --tNotes:#9a8f7d; --tRev:#9a8f7d;
  --lvlColor:#C2542E; --tintCefr:rgba(194,84,46,.09); --lvlBar1:#C2542E; --lvlBar2:#C2542E; --lvlBar3:#EDE2C8;
}
@media(max-width:859px){
  :root{
    --navDisp:none; --langDisp:none;
    --copyH:46svh; --copyPad:12svh;   /* ~38svh of scroll per step: the phone must not feel held */
    --bulDesk:flex; --bulMob:none;
    --bnCols:minmax(0,1fr); --bnWide:span 1; --bnTall:span 1;
  }
  /* how: number and title share a row, steps get air between them */
  .pep-step{display:grid !important;grid-template-columns:auto 1fr;column-gap:14px;row-gap:.5rem;align-items:baseline}
  .pep-step>p{grid-column:2}
  .pep-step .n{font-size:2.6rem !important}
  .pep-step+.pep-step{margin-top:30px;border-left:none !important}
  /* bento flag crawl: a phone-wide crawl is tall, so the tilt is gentler and the
     eye farther, or the far rows shrink to half the tile */
  .pep-crawlwrap{perspective:5000px !important}
  .pep-crawlwrap .pep-crawl{animation-name:pepcrawl-n;max-width:100% !important}
  .pep-crawl span[data-mg]{font-size:15px !important;padding:6px 9px 6px 7px !important;gap:7px !important}
  .pep-crawl span[data-mg] img{width:24px !important;height:16px !important}
  .pep-crawl>div{gap:7px !important}
  /* privacy cards: icon on top, EU ring in the corner */
  .pep-press{flex-direction:column;gap:.9rem !important;padding:1.6rem 1.4rem !important}
  .pep-press>div>div:first-child{font-size:1.35rem !important}
  .pep-press>svg{position:absolute;top:1.1rem;right:1.1rem;width:44px;height:44px;margin:0}
}
@keyframes pepcrawl-n{from{transform:rotateX(11deg) translateY(0)}to{transform:rotateX(11deg) translateY(-50%)}}

/* ── handoff styles.css (the prototype's non-inline CSS) ──────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;background:#FBF4E5;color:#1E2A4F;font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#C2542E;text-decoration:none}
a:hover{color:#1E2A4F}
h1,h2,h3,p{margin:0}
@keyframes pepIn{0%{opacity:0;transform:translateY(9px)}16%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(9px)}}
@keyframes pepFade{0%,8%{opacity:0}26%,90%{opacity:1}100%{opacity:0}}
@keyframes pepSweep{0%{width:6%}88%,100%{width:94%}}
@keyframes pepGrow{0%{width:8%}74%,100%{width:70%}}
@keyframes pepPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes pepGap{0%,20%{background:transparent;color:#1E2A4F}36%,100%{background:#F7E3DA;color:#C2542E}}
@keyframes pep-pulse{50%{box-shadow:0 0 0 13px rgba(228,87,61,0)}}
details.pep-q>summary{list-style:none;cursor:pointer}
details.pep-q>summary::-webkit-details-marker{display:none}
details.pep-q>summary::marker{content:''}
details.pep-q .pm{color:#C2542E;font-size:1.3rem;line-height:1;transition:transform .3s cubic-bezier(.22,1,.36,1)}
details.pep-q[open] .pm{transform:rotate(45deg)}
details.pep-q.closing .pm{transform:none}
.pep-mark{transition:background .18s ease,color .18s ease}
.pep-bill button{background:none;border:none;color:rgba(244,232,207,.55);padding:.4rem 1rem;border-radius:3px;cursor:pointer;font-size:.82rem;font-weight:700;font-family:'DM Sans',sans-serif;transition:background .28s cubic-bezier(.22,1,.36,1),color .28s ease}
.pep-bill button.on{background:#3A4875;color:#F4E8CF}
.pep-store{transition:transform .14s ease,box-shadow .14s ease,background .2s ease,border-color .2s ease;box-shadow:4px 4px 0 #0F1730}
.pep-store:hover{border-color:#C7A24E;background:#3A4875;box-shadow:2px 2px 0 #0F1730}
.pep-cta{transition:.2s cubic-bezier(.22,1,.36,1)}
.pep-cta:hover{background:#A8431F;transform:translateY(-2px)}
.pep-matrix td:nth-child(3){background:rgba(194,84,46,.07);color:#E8845E}
.pep-matrix td:nth-child(4){color:#E0C176}
.pep-matrix td:nth-child(5){color:#C8B6EC}
.pep-matrix td:nth-child(2){color:rgba(244,232,207,.66)}
.pep-matrix td:first-child{color:#F4E8CF}
.pep-matrix tbody tr:hover{background:rgba(251,244,229,.03)}
.pep-plans{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:1fr;align-items:stretch;margin-top:clamp(34px,4vw,52px)}
@media(min-width:640px){.pep-plans{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.pep-plans{grid-template-columns:1.2fr 1fr 1fr 1fr}}
@keyframes pepcrawl{from{transform:rotateX(21deg) translateY(0)}to{transform:rotateX(21deg) translateY(-50%)}}
.pep-crawl{animation:pepcrawl 46s linear infinite}
.pep-hard{transition:transform .12s ease,box-shadow .12s ease}
.pep-hard,.pep-press,.pep-plan,.pep-store,[data-tile]{position:relative}
/* hover-jitter guard: transparent strips past the travel on the leading edges */
.pep-hard::before,.pep-press::before,.pep-store::before,[data-tile]::before{content:'';position:absolute;left:-9px;top:-9px;right:0;height:9px}
.pep-hard::after,.pep-press::after,.pep-store::after,[data-tile]::after{content:'';position:absolute;left:-9px;top:0;width:9px;bottom:0}
.pep-plan::before{content:'';position:absolute;left:0;right:0;bottom:-9px;height:9px}
.pep-hard:hover::before,.pep-store:hover::before{top:-13px;height:13px}
.pep-hard:hover::after,.pep-store:hover::after{left:-13px;width:13px}
.pep-press:hover::before,[data-tile]:hover::before{top:-15px;height:15px}
.pep-press:hover::after,[data-tile]:hover::after{left:-15px;width:15px}
.pep-plan:hover::before{bottom:-13px;height:13px}
/* billing switch: the variable parts fade out, swap while invisible, fade back in
   (the spans inside a .pep-price ride with their parent, not on their own) */
#pricing .pep-price,#pricing [data-v]{transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1)}
#pricing.swapping .pep-price,#pricing.swapping [data-v]{opacity:0;transform:translateY(-6px)}
#pricing .pep-price [data-v],#pricing.swapping .pep-price [data-v]{transition:none;opacity:1;transform:none}
/* the founder rate is yearly billing only (ADR 0017): the pill leaves with the struck price */
.pep-pill{transition:opacity .22s ease}
#pricing[data-billing="monthly"] .pep-pill{opacity:0}
.pep-plan{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,border-color .25s ease}
.pep-plan:hover{transform:translateY(-4px);box-shadow:9px 9px 0 #0F1730}
.pep-plan.is-hot{transform:translateY(-4px);box-shadow:9px 9px 0 #0F1730}
.pep-crawlwrap span[data-mg]{will-change:transform}
.pep-step .n{display:inline-block;transform-origin:0 100%;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pep-step .bar{display:block;height:2px;width:0;margin-top:.6rem;background:#C2542E;transition:width .5s cubic-bezier(.22,1,.36,1)}
.pep-step h3,.pep-step p{transition:color .3s ease}
.pep-step:hover .n{transform:scale(1.3) translateY(-3px)}
.pep-step.is-hot .n{transform:scale(1.3) translateY(-3px)}
.pep-step:hover .bar{width:100%}
.pep-step.is-hot .bar{width:100%}
.pep-step:hover h3{color:#C2542E}
.pep-step.is-hot h3{color:#C2542E}
.pep-step:hover p{color:#1E2A4F}
.pep-step.is-hot p{color:#1E2A4F}
.pep-picon svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pep-press:hover .pep-picon svg{transform:scale(1.16) rotate(-5deg)}
.pep-press.is-hot .pep-picon svg{transform:scale(1.16) rotate(-5deg)}
.pep-hl{background-image:linear-gradient(rgba(224,193,118,.3),rgba(224,193,118,.3));background-repeat:no-repeat;background-position:0 68%;background-size:0% .62em;color:#F4E8CF;transition:background-size .8s cubic-bezier(.22,1,.36,1),color .8s ease;padding:0 .1em;margin:0 -.1em}
.pep-hl.on{background-size:100% .62em}
.pep-hl-gold{background-image:linear-gradient(rgba(224,193,118,.28),rgba(224,193,118,.28));color:#E0C176}
.pep-hl-terra{background-image:linear-gradient(rgba(194,84,46,.55),rgba(194,84,46,.55));color:#E0C176;font-style:italic}
.pep-press:hover{box-shadow:2px 2px 0 #001233 !important}
.pep-press.is-hot{box-shadow:2px 2px 0 #001233 !important}
.pep-hard:hover{transform:translate(4px,4px) !important;box-shadow:0 0 0 rgba(0,0,0,0) !important}

/* ── bento tiles (IMPLEMENTATION.md → Bento tiles decoder table) ──
   The prototype recomputed every tile's inline style per hover; here
   each tile carries its INK / DEEP / BASE as custom properties and
   plain :hover does the flood. */
[data-tile]{--ink:#1E2A4F;--deep:#1E2A4F;--base:#FFFDF7;color:#1E2A4F;border:1px solid rgba(30,42,79,.16);background:var(--base);box-shadow:6px 6px 0 var(--deep);transition:background .35s ease,transform .16s ease,box-shadow .16s ease,border-color .35s ease}
[data-tile]:hover{background:var(--deep);border-color:var(--deep);box-shadow:2px 2px 0 var(--deep)}
[data-tile].is-hot{background:var(--deep);border-color:var(--deep);box-shadow:2px 2px 0 var(--deep)}
[data-tile="0"]{--ink:#C2542E;--deep:#8E3618}
[data-tile="1"]{--ink:#5E45A6;--deep:#4A3287}
[data-tile="2"]{--ink:#2E7D5B;--deep:#1F5B41}
[data-tile="3"]{--ink:#CC0000;--deep:#9B0F0F}
[data-tile="5"]{--ink:#8A6A1E;--deep:#6E5418}
[data-tile] .ti{min-width:36px}
[data-tile="6"]{--ink:#2E6FE0;--deep:#1B4BA8}
[data-tile] .ti{color:var(--ink);transition:color .3s ease}
[data-tile] .ti svg{width:27px;height:27px;transition:width .3s ease,height .3s ease}
[data-tile]:hover .ti{color:#FFFDF7}
[data-tile].is-hot .ti{color:#FFFDF7}
[data-tile]:hover .ti svg{width:31px;height:31px}
[data-tile].is-hot .ti svg{width:31px;height:31px}
[data-tile] .tt{color:#1E2A4F;transition:color .3s ease}
[data-tile] .tb{color:#4c4437;transition:color .3s ease}
[data-tile]:hover .tt,[data-tile]:hover .tb{color:#FFFDF7}
[data-tile].is-hot .tt,[data-tile].is-hot .tb{color:#FFFDF7}
[data-tile] .tc{color:var(--deep);transition:transform .35s cubic-bezier(.22,1,.36,1),color .3s ease}
[data-tile]:hover .tc{color:#FFFDF7;transform:translateX(3px)}
[data-tile].is-hot .tc{color:#FFFDF7;transform:translateX(3px)}
/* tile 4 is the exception: navy resting, floods to #16203D, gold ink stays gold */
[data-tile="4"]{--base:#1E2A4F;--deep:#16203D;color:#F4E8CF;border-color:rgba(199,162,78,.28);box-shadow:6px 6px 0 #0F1730}
[data-tile="4"]:hover{border-color:rgba(199,162,78,.28)}
[data-tile="4"].is-hot{border-color:rgba(199,162,78,.28)}
[data-tile="4"] .ti,[data-tile="4"]:hover .ti{color:#E0C176}
[data-tile="4"] .ti,[data-tile="4"].is-hot .ti{color:#E0C176}
[data-tile="4"] .ti svg{width:32px;height:32px}
[data-tile="4"]:hover .ti svg{width:36px;height:36px}
[data-tile="4"].is-hot .ti svg{width:36px;height:36px}
[data-tile="4"] .tt{color:#F4E8CF}
[data-tile="4"] .tb{color:rgba(244,232,207,.78)}
/* export tags: the border loosens on flood so the chips stay visible */
[data-tile="5"] .tag{border:1px solid rgba(30,42,79,.16);transition:border-color .3s ease}
[data-tile="5"]:hover .tag{border-color:rgba(255,253,247,.4)}
[data-tile="5"].is-hot .tag{border-color:rgba(255,253,247,.4)}
[data-tile="6"] img{width:34px;height:34px;transition:width .3s ease,height .3s ease}
[data-tile="6"]:hover img{width:42px;height:42px}
[data-tile="6"].is-hot img{width:42px;height:42px}

/* ── Features stage state ─────────────────────────────────────── */
.pep-glyph:not(.on){display:none}
.pep-bar{appearance:none;border:none;padding:0;cursor:pointer;width:100%;height:3px;border-radius:3px;background:linear-gradient(to right,#C2542E var(--f,0%),rgba(30,42,79,.18) 0);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-bottom:0;transition:height .34s cubic-bezier(.2,.9,.24,1),padding-bottom .34s cubic-bezier(.2,.9,.24,1),background .3s ease}
.pep-bar svg{opacity:0;transform:translateY(-20px);transition:opacity .2s ease,transform .34s cubic-bezier(.2,.9,.24,1)}
.pep-bar.near{height:32px;padding-bottom:6px;background:#C2542E}
.pep-bar.near svg{opacity:1;transform:none}

/* ── headline typewriter ─────────────────────────────────────── */
.pep-type{white-space:nowrap} /* display and alignment are set inline by landing.js */
.pep-type .pep-type-sizer{visibility:hidden}
.pep-caret{display:inline-block;width:.06em;height:.82em;background:#C2542E;margin-left:.05em;vertical-align:-.06em;animation:pepCaret 1s steps(1,end) infinite}
@keyframes pepCaret{50%{opacity:0}}
/* FAQ: landing.js animates the body's height; overflow stays clipped meanwhile */
details.pep-q>summary+div{overflow:hidden}

/* ── email capture (the prototype's input is inert; ours posts) ── */
/* ── features stage: sticky phone, flowing copy ─────────────────
   The copy blocks scroll natively; the phone column stays pinned and the
   five app screens slide as one strip under the finger (--stripY). Five
   segments (under the phone on desktop, story-style above it on phones)
   fill with --f as the stage is scrolled through. */
.pep-stagecol{position:sticky;top:0;z-index:1;height:100svh;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;padding:clamp(44px,8vh,86px) 0 clamp(16px,3vh,34px);background:var(--stepBg);transition:background .9s ease}
.pep-stagein{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.pep-phonerow{display:flex;align-items:center;justify-content:center;gap:14px}
.pep-caption{display:none;position:relative;width:100%;height:2.4em;margin-bottom:14px;font-family:'Crimson Pro',serif;font-weight:600;font-size:clamp(22px,6.4vw,27px);line-height:1.1;letter-spacing:-.015em;color:#1E2A4F;text-align:center}
.pep-caption span{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 12px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s var(--pep-ease-out);text-wrap:balance}
.pep-caption span.on{opacity:1;transform:none}
.pep-copyflow{padding:var(--copyPad) 0}
.pep-copy{min-height:var(--copyH);opacity:.3;transition:opacity .5s ease}
.pep-copy.on{opacity:1}
.pep-strip{position:absolute;inset:0;display:grid;grid-auto-rows:100%;transform:translateY(var(--stripY));will-change:transform}
@media(min-width:860px){
  .pep-track{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(18px,4vw,64px);align-items:start}
  .pep-copyflow{grid-column:1;grid-row:1;max-width:520px}
  .pep-stagecol{grid-column:2;grid-row:1}
}
@media(max-width:859px){
  /* phones: caption, then the phone between two rails; the copy flows
     underneath the pinned stage, covered, and only lends its height */
  /* the stage is the large viewport (browser bars retracted, the state
     while scrolling down through it) and its content hangs from the top,
     so the frame is as big as the screen allows and never rescales */
  .pep-stagecol{height:100lvh;padding:60px 0 8px;justify-content:flex-start}
  .pep-caption{display:block;order:1;font-size:clamp(23px,6.6vw,27px);height:2.25em;margin-bottom:8px}
  .pep-caption span{align-items:center}
  #pepBars{order:2;margin:0 0 10px !important;width:var(--phoneBoxW) !important;max-width:100% !important;height:3px !important;padding:0 !important;gap:4px !important;box-sizing:border-box !important}
  .pep-phonerow{order:3}
  /* the copy only lends its height: it is covered by the stage */
  .pep-copyflow{margin-top:-100lvh;visibility:hidden}
}
.wl-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.wl-form.sent{display:none}
.wl-note{margin:12px auto 0;font-size:13px;line-height:1.5;color:#6E6357;max-width:52ch}
#waitlist .wl-note{color:rgba(244,232,207,.55)}
.wl-success{display:none;margin:22px auto 0;padding:14px 18px;max-width:52ch;font-size:15px;line-height:1.55;border:1px solid #C7A24E;border-radius:4px;background:#FFFDF7;color:#1E2A4F;box-shadow:4px 4px 0 #C7A24E}
.wl-success.show{display:block}
.wl-next{margin:18px auto 0;display:flex;flex-direction:column;align-items:center;gap:4px;color:#C2542E}
.wl-next[hidden]{display:none}
.wl-next-t{margin:0;font-family:'Crimson Pro',serif;font-weight:600;font-style:italic;font-size:26px;line-height:1.15;letter-spacing:-.01em;color:#1E2A4F}
.wl-next-s{margin:0;font-size:15px;color:#4c4437}
.wl-arrow{margin-top:6px;animation:wlBob 1.4s ease-in-out infinite}
#waitlist .wl-next{color:#E6C97C}
#waitlist .wl-next-t{color:#F4E8CF}
#waitlist .wl-next-s{color:rgba(244,232,207,.7)}
@keyframes wlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── reduced motion (README → Reduced motion, PHONE-SCREENS.md) ── */
/* ── burger menu (fixed, independent of the header handoff) ──────── */
.pep-burger{position:fixed;top:11px;right:clamp(14px,4vw,44px);z-index:40;width:44px;height:44px;border-radius:4px;background:#FFFDF7;border:1px solid #D9C8A4;box-shadow:3px 3px 0 #1E2A4F;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0;transition:transform .14s ease,box-shadow .14s ease}
.pep-burger:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #1E2A4F}
.pep-burger span{display:block;width:20px;height:2px;background:#1E2A4F;border-radius:1px;transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.pep-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pep-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.pep-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pep-menu{position:fixed;inset:0;z-index:35;display:flex;justify-content:flex-end;visibility:hidden;transition:visibility 0s .3s}
.pep-menu.open{visibility:visible;transition-delay:0s}
.pep-menu nav{width:min(380px,88vw);height:100%;overflow:auto;background:#FBF4E5;border-left:1px solid #D9C8A4;padding:84px 30px 34px;display:flex;flex-direction:column;gap:4px;box-shadow:-1px 0 0 #D9C8A4,-8px 0 0 rgba(30,42,79,.08);transform:translateX(24px);opacity:0;transition:transform .3s var(--pep-ease-out),opacity .22s ease}
.pep-menu.open nav{transform:none;opacity:1}
.pep-menu nav>a{font-family:'Crimson Pro',serif;font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.015em;color:#1E2A4F;padding:7px 0}
.pep-menu nav>a:hover{color:#C2542E}
.pep-menu-sm{margin-top:18px;padding-top:18px;border-top:1px solid #D9C8A4;display:flex;flex-direction:column;gap:9px}
.pep-menu-sm a{font-size:15px;color:#4c4437}
.pep-menu-sm a:hover{color:#C2542E}
.pep-menu-lang{margin-top:18px;padding-top:18px;border-top:1px solid #D9C8A4;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;color:#6E6357}
.pep-menu-lang span{margin-right:4px}
.pep-menu-lang a{color:#6E6357;font-weight:600}
.pep-menu-lang a.on{color:#C2542E}
html.pep-menu-open{overflow:hidden}
@media(max-width:859px){.pep-burger{width:40px;height:40px;top:9px;right:14px}}  /* level with the header button */
/* ── mid-page CTAs ─────────────────────────────────────────────── */
.pep-midcta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(36px,5vw,56px);text-align:center}
.pep-midnote{font-size:15px;opacity:.72}
/* ── review cards: "X learns Y with Pepitt" ─────────────────────── */
.pep-rev-t{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;font-family:'Crimson Pro',serif;font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.012em;color:#1E2A4F;text-wrap:balance}
.pep-rev-t img{flex:none;width:1.3rem;height:.98rem;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.pep-rev-t em{font-style:italic;color:#C2542E}
@media(max-width:859px){.pep-matrixwrap{display:none}}  /* the plan matrix needs the width */

@media(prefers-reduced-motion:reduce){
  .pep-crawl{animation:none;transform:none}
  .pep-crawlwrap{height:auto !important;perspective:none !important;overflow:visible !important;mask-image:none !important;-webkit-mask-image:none !important}
  .pep-hl{transition:none;background-size:100% .62em}
  .pep-caret{animation:none}
  .pep-screen *{animation:none !important}
  .wl-arrow{animation:none}
  .pep-menu,.pep-menu nav,.pep-copy,.pep-caption span{transition:none}
  .pep-sweep{width:94% !important}
  .pep-grow{width:70% !important}
  .pep-step .n,.pep-step .bar,.pep-plan,.pep-hard,.pep-press,[data-tile]{transition:none}
}