/* whypiccolo-v2.css — "Why Piccolo" rebuilt on the v3 (Loos / Normalidad) system.
   Extends piccolo-v3.css. Only page-specific pieces live here. */

/* progress bar */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:120;transition:width .1s linear}

/* tighter vertical rhythm on this page */
.section{padding:clamp(52px,6.5vw,108px) 0}
.sec-head{margin-bottom:clamp(30px,3.4vw,56px)}

/* reveal system (JS adds .is-in) */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .85s cubic-bezier(.65,0,.35,1),transform .85s cubic-bezier(.65,0,.35,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay]{transition-delay:var(--d,0s)}
.wipe .ln{transform:translateY(112%)}
.wipe.is-in .ln{transform:none;transition:transform .95s cubic-bezier(.65,0,.35,1)}
.wipe.is-in .ln.d2{transition-delay:.09s}
.no-motion [data-reveal],.no-motion .wipe .ln{opacity:1!important;transform:none!important;transition:none!important}

/* ── hero (dark, split) ─────────────────────────────────── */
.wp-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-top:clamp(140px,18vh,232px);padding-bottom:clamp(56px,7vw,116px)}
.wp-hero::before{content:"";position:absolute;right:-12vw;top:-16vw;width:60vw;height:60vw;
  max-width:720px;max-height:720px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(87,6,143,.95),rgba(87,6,143,0) 66%)}
.wp-hero::after{content:"";position:absolute;left:-10vw;bottom:-16vw;width:40vw;height:40vw;
  max-width:480px;max-height:480px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,120,0,.2),rgba(255,120,0,0) 64%)}
.wp-hero-in{position:relative;z-index:2}
.wp-klabel{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,3.4vw,46px)}
.wp-klabel .kicker{color:rgba(255,255,255,.8)}
.wk-mark{display:flex;align-items:flex-start;gap:5px;flex:none}
.wk-mark .eye{width:22px;height:22px;border-radius:50%;background:var(--yellow);position:relative}
.wk-mark .eye::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:36%;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%)}
.wk-mark .nose{width:9px;height:30px;background:var(--yellow);border-radius:0 0 0 7px}
.wp-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,4.4vw,84px);align-items:center}
.wp-hero h1{margin-bottom:clamp(24px,2.8vw,40px)}
.wp-hero .lead{color:rgba(255,255,255,.82)}
.wp-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,42px)}
.wp-hero-visual{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/5;
  background:var(--panel);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.wp-hero-visual img,.wp-hero-visual video{width:100%;height:100%;object-fit:cover}
.wp-hero-visual .cap{position:absolute;left:16px;bottom:16px;z-index:2;font-family:var(--display);
  font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(16,16,20,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:8px 13px;border-radius:99px}
@media(max-width:900px){.wp-hero-grid{grid-template-columns:1fr}
  .wp-hero-visual{aspect-ratio:16/11;order:-1}}

/* thesis strip */
.wp-thesis{background:var(--yellow);color:var(--ink);padding:clamp(30px,4vw,64px) 0}
.wp-thesis .wrap{display:flex;align-items:baseline;gap:clamp(18px,3vw,48px);flex-wrap:wrap}
.wp-thesis .lbl{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(16,16,20,.62);flex:none}
.wp-thesis p{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.02;font-size:clamp(24px,3.6vw,58px);max-width:22ch}
.wp-thesis em{font-style:normal;color:var(--purple)}

/* ── the fork (generic vs custom) ───────────────────────── */
/* the fork (generic vs custom) */
.wp-fork-sec{padding-top:clamp(36px,4vw,64px);padding-bottom:clamp(32px,3.4vw,56px)}
.wp-fork{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,32px)}
@media(max-width:820px){.wp-fork{grid-template-columns:1fr}}
.fork-card{border-radius:30px;padding:clamp(28px,3.2vw,52px);display:flex;flex-direction:column;
  gap:clamp(22px,2.6vw,36px);position:relative;overflow:hidden}
.fork-card.generic{background:var(--panel);color:var(--ink)}
.fork-card.piccolo{background:var(--purple);color:#fff}
.fork-card.piccolo::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;border:2px dashed rgba(255,229,0,.4);pointer-events:none}
.fork-head .kicker{color:var(--grey)}
.fork-card.piccolo .fork-head .kicker{color:var(--yellow)}
.fork-head h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.96;
  letter-spacing:-.01em;font-size:clamp(30px,3.6vw,58px);margin-top:10px}
.fork-list{list-style:none;display:flex;flex-direction:column}
.fork-list li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  padding:clamp(13px,1.4vw,17px) 0;font-size:clamp(15px,1.15vw,18px);line-height:1.45}
.fork-list li + li{border-top:1px solid rgba(16,16,20,.12)}
.fork-card.piccolo .fork-list li + li{border-top-color:rgba(255,255,255,.16)}
.fork-mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.generic .fork-mk{background:rgba(16,16,20,.08);color:var(--grey)}
.piccolo .fork-mk{background:var(--yellow);color:var(--purple)}
.fork-mk svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}
.fork-card.generic .fork-list li{color:#6a666f}
.fork-card.piccolo .fork-list li{color:rgba(255,255,255,.92)}

/* ── inputs grid ────────────────────────────────────────── */
.wp-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:900px){.wp-ins{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wp-ins{grid-template-columns:1fr}}
.in-card{background:var(--paper);border:1px solid rgba(16,16,20,.12);border-radius:24px;
  padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;
  transition:transform .4s cubic-bezier(.65,0,.35,1),border-color .3s,box-shadow .4s}
.in-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 26px 60px -34px rgba(87,6,143,.4)}
.in-ic{width:52px;height:52px;border-radius:16px;background:var(--ink);display:grid;place-items:center}
.in-ic svg{width:26px;height:26px;stroke:var(--yellow);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.in-card:nth-child(3n+2) .in-ic{background:var(--purple)}
.in-card:nth-child(3n+3) .in-ic{background:var(--orange)}
.in-card:nth-child(3n+3) .in-ic svg{stroke:var(--ink)}
.in-card h3{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.4vw,22px);
  text-transform:uppercase;line-height:1.1}

/* ── pipeline (ink, numbered) ───────────────────────────── */
.wp-pipe .step{grid-template-columns:clamp(72px,7vw,120px) clamp(56px,5vw,80px) 1fr 1.15fr}
.wp-pipe .step .sn{font-family:var(--cond);font-weight:700;font-size:clamp(40px,5vw,84px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(251,250,248,.5);transition:color .4s,-webkit-text-stroke .4s}
.wp-pipe .step:hover .sn{color:var(--yellow);-webkit-text-stroke:1.5px var(--yellow)}
.wp-pipe .step .pic{width:clamp(46px,4.4vw,66px);height:clamp(46px,4.4vw,66px);border-radius:16px;
  border:1.5px solid rgba(251,250,248,.28);display:grid;place-items:center;transition:border-color .4s,background .4s}
.wp-pipe .step:hover .pic{border-color:var(--yellow);background:rgba(255,229,0,.08)}
.wp-pipe .step .pic svg{width:26px;height:26px;stroke:var(--yellow);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.wp-pipe .step h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,32px);text-transform:uppercase}
.wp-pipe .step .body-t{color:rgba(251,250,248,.62)}
@media(max-width:820px){
  .wp-pipe .step{grid-template-columns:56px 56px 1fr;gap:16px 20px}
  .wp-pipe .step .body-t{grid-column:1 / -1}
}

/* feature band (image + copy) */
.wp-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center}
@media(max-width:900px){.wp-feature{grid-template-columns:1fr}}
.wp-feat-media{border-radius:28px;overflow:hidden;aspect-ratio:4/5;position:relative;background:var(--panel)}
.wp-feat-media img,.wp-feat-media video{width:100%;height:100%;object-fit:cover;object-position:center top}
.wp-feat-media image-slot{position:absolute;inset:0;width:100%;height:100%}
.wp-feat-copy .sec-no{margin-bottom:22px}
.wp-feat-copy h2{margin-bottom:clamp(18px,2vw,28px)}
.wp-feat-copy .lead{margin-bottom:clamp(20px,2.4vw,34px)}
.wp-quote{border-left:3px solid var(--orange);padding-left:clamp(18px,2vw,26px);
  font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.1;
  font-size:clamp(20px,1.9vw,30px)}
.wp-quote em{font-style:normal;color:var(--purple)}

/* ── compare table ──────────────────────────────────────── */
.wp-compare{border-top:2px solid var(--ink)}
.wp-row{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;align-items:center;
  border-bottom:1px solid rgba(16,16,20,.14)}
.wp-row.head .wp-c{padding-block:clamp(16px,1.8vw,24px)}
.wp-c{padding:clamp(16px,1.9vw,26px) clamp(14px,1.8vw,28px)}
.wp-c.attr{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.1vw,17px);
  text-transform:uppercase;letter-spacing:.02em}
.wp-c.gen{color:#6a666f;font-size:clamp(14px,1.1vw,17px);text-align:center}
.wp-c.pic{color:var(--ink);font-size:clamp(14px,1.1vw,17px);background:rgba(87,6,143,.05);position:relative;text-align:center}
.wp-row.head .wp-c.gen,.wp-row.head .wp-c.pic{font-family:var(--display);font-weight:700;
  font-size:clamp(12px,1vw,15px);letter-spacing:.14em;text-transform:uppercase}
.wp-row.head .wp-c.gen{color:var(--grey)}
.wp-row.head .wp-c.pic{color:var(--purple)}
.wp-c.pic::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--yellow)}
.wp-row.head .wp-c.pic::before{background:var(--purple)}
.plbl{display:none}
@media(max-width:760px){
  .wp-row{grid-template-columns:1fr}
  .wp-c.gen,.wp-c.pic{text-align:left}
  .wp-row .wp-c.attr{background:var(--ink);color:#fff;font-size:12px;letter-spacing:.14em}
  .wp-row.head{display:none}
  .wp-c.gen::before{content:"Generic — ";font-weight:700;color:var(--grey)}
  .wp-c.pic::before{width:100%;height:0;background:none}
  .wp-c.pic{padding-left:clamp(14px,1.8vw,28px)}
  .wp-c.pic .plbl{font-weight:700;color:var(--purple);display:inline}
}

/* ── CTA ────────────────────────────────────────────────── */
.wp-cta{background:var(--panel);border-top:1px solid rgba(16,16,20,.1);
  padding-block:clamp(72px,9vw,140px);text-align:center}
.wp-cta .kicker{color:var(--orange);margin-bottom:18px}
.wp-cta .display{font-size:clamp(40px,7vw,116px);margin-bottom:clamp(28px,3.4vw,48px);line-height:.94}
.wp-cta .hero-cta{justify-content:center}

/* compare heading — keep each line intact */
#cmp-h{font-size:clamp(30px,4.2vw,66px)}

/* marquee tint for this page */
.proof-video{padding-bottom:0}
.proof-band{margin-bottom:0;margin-top:clamp(48px,6vw,100px);padding:clamp(13px,1.5vw,24px) 0}
.wp-marq{background:var(--purple);color:#fff;padding:clamp(10px,1.4vw,20px) 0;overflow:hidden}
.wp-marq .marq-t span::after{background:var(--yellow)}