/* P1 — landing. Mobile-first; the dropzone must sit above the fold at 360px. */


/* hero — compact on purpose; the dropzone is the storefront */
.hero{background:var(--lime);padding:1.4rem 1rem 1.6rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),0 100%)}
.hero-in{max-width:1180px;margin:0 auto}
.hero-kicker{margin:0 0 .9rem;color:var(--ink);opacity:.85}
.hero-line{font-size:clamp(2.2rem,8vw,4.2rem);margin:0}
.hero-line .slashword{--slash:var(--ink)}
.hero-sub{margin:.6rem 0 0;font-size:.9rem;font-weight:500;max-width:34ch}

/* ticker — the promise on a loop; ink band, lime slashes */
.ticker{background:var(--ink);color:var(--chalk);overflow:hidden}
.ticker-in{display:flex;width:max-content}
.ticker-set{display:inline-flex;align-items:center;gap:1.1rem;padding:.62rem 0 .62rem 1.1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker-set i{color:var(--lime);font-style:normal;font-weight:700}
@media(prefers-reduced-motion:no-preference){
  .ticker-in{animation:tick 36s linear infinite}
  @keyframes tick{to{transform:translateX(-50%)}}
}
@media(prefers-reduced-motion:reduce){
  .ticker-in{width:100%}
  .ticker-set + .ticker-set{display:none}
  .ticker-set{width:100%;justify-content:center;flex-wrap:wrap;row-gap:.2rem}
}

/* the strike animates once on load — 250ms, the one site-wide curve */
@media(prefers-reduced-motion:no-preference){
  [data-strike].slashword::after{transform:translateY(-50%) rotate(-8deg) scaleX(0);
    transform-origin:left;animation:strike var(--t3) var(--t1) var(--ease) forwards}
  @keyframes strike{to{transform:translateY(-50%) rotate(-8deg) scaleX(1)}}
}

.upzone{padding:1rem;max-width:560px;margin:0 auto}
.srcs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.7rem 0 0}
.srcs span{font-family:var(--mono);font-size:.58rem;border:1.5px solid var(--ink-30);
  padding:.3em .6em;letter-spacing:.06em;color:var(--ink-60)}
.upzone .promise{margin-top:1rem}
/* the §13.2 objection-remover — the strongest first-order trust signal we have */
.promise--first{background:var(--lime-tint);color:var(--ink);padding:.55rem .8rem .55rem .7rem;margin-top:.7rem}

/* file rows appear when JS picks files */
.file-list:not(:empty){margin-top:.8rem;border:2px solid var(--ink);background:var(--white)}
.file-row{padding:.6rem .8rem;border-bottom:1.5px solid var(--ink-12);font-family:var(--mono);font-size:.68rem}
.file-row:last-child{border-bottom:none}
.file-row .fr-top{display:flex;justify-content:space-between;gap:.8rem}
.file-row .fr-name{overflow-wrap:anywhere;font-weight:700}
.file-row .fr-size{white-space:nowrap;color:var(--ink-60)}
.file-row .fr-note{color:var(--ink-60);margin-top:.15rem}
.file-row .fr-note--warn{color:var(--ink);font-weight:700}
.file-row .fr-note--warn::before{content:"! ";color:var(--red)}
.file-row .bar{height:6px;border:1.5px solid var(--ink);margin-top:.45rem;overflow:hidden}
.file-row .bar i{display:block;height:100%;background:var(--lime-deep);
  transform-origin:left;transform:scaleX(0);transition:transform var(--t2) var(--ease)}
.file-row.is-done .bar i{background:var(--lime-deep)}

/* sections */
.steps,.faq{max-width:720px;margin:0 auto;padding:2.4rem 1rem 0}
.steps h2,.faq h2,.trust h2{margin:0 0 1.2rem}

/* ---- how it works: each step is a card showing the actual screen ---- */
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.steps li{border:2px solid var(--ink);background:var(--white);display:flex;flex-direction:column}
.stext{padding:.85rem 1rem 1.05rem;font-size:.9rem;color:var(--ink-60)}
.stext .no{font-family:var(--mono);font-weight:700;font-size:.72rem;border-bottom:3px solid var(--lime);
  display:inline-block;padding-bottom:.1rem;margin-bottom:.45rem}
.stext b{font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-stretch:75%;
  text-transform:uppercase;display:block;font-size:.95rem;color:var(--ink);margin-bottom:.15rem}

/* the mock stage — a scrap of the real screen, drawn in CSS, no images */
.smock{background:var(--chalk);border-bottom:2px solid var(--ink);padding:1.1rem 1rem;
  min-height:178px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--mono)}

/* 01 — upload */
.smk-up{width:100%;max-width:220px;display:flex;flex-direction:column;gap:.5rem}
.smk-drop{border:2px dashed var(--ink);background:var(--lime-tint);padding:1rem .5rem;text-align:center;
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.smk-file{border:2px solid var(--ink);background:var(--white);padding:.45rem .55rem;display:block}
.smk-fr{display:flex;justify-content:space-between;gap:.5rem;font-size:.5rem}
.smk-fr i{font-style:normal;font-weight:700}
.smk-fr em{font-style:normal;color:var(--ink-60)}
.smk-bar{display:block;height:5px;border:1.5px solid var(--ink);margin-top:.35rem;overflow:hidden}
.smk-bar i{display:block;height:100%;width:100%;background:var(--lime-deep)}

/* 02 — preview */
.smk-pages{display:flex;gap:.55rem}
.smk-pg{display:flex;flex-direction:column;gap:.3rem;align-items:center}
.smk-pg em{font-style:normal;font-size:.44rem;letter-spacing:.06em;color:var(--ink-60);text-transform:uppercase}
.smk-th{width:50px;height:66px;border:2px solid var(--ink);display:block}
.smk-th--bw{background:
  linear-gradient(var(--ink-12) 2px,transparent 2px) 7px 10px/70% 9px no-repeat,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 7px 21px/56% 9px no-repeat,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 7px 32px/64% 9px no-repeat,
  var(--white)}
.smk-th--col{background:
  linear-gradient(var(--lime) 14px,transparent 14px) 7px 8px/70% 18px no-repeat,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 7px 32px/60% 9px no-repeat,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 7px 43px/52% 9px no-repeat,
  var(--white)}
.smk-th--ph{background:
  linear-gradient(135deg,var(--lime-tint) 0 55%,var(--lime) 55% 78%,var(--lime-deep) 78% 100%) 5px 5px/calc(100% - 10px) 46px no-repeat,
  var(--white)}
.smk-count{font-size:.5rem;letter-spacing:.12em;font-weight:700;text-transform:uppercase}

/* 03 — the docket */
.smk-docket{width:100%;max-width:214px;border:2px solid var(--ink);background:var(--white)}
.smk-row{display:flex;justify-content:space-between;gap:.5rem;padding:.34rem .5rem;font-size:.5rem;
  border-bottom:1.5px solid var(--ink-12)}
.smk-row i{font-style:normal}
.smk-row em{font-style:normal;font-weight:700;white-space:nowrap}
.smk-row--svc{background:var(--lime-tint)}
.smk-row--total{border-top:2px solid var(--ink);border-bottom:none;font-weight:700;font-size:.56rem}
.smk-pay{display:block;background:var(--ink);color:var(--lime);text-align:center;font-size:.55rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.6em;margin:.35rem .45rem .45rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%)}

/* 04 — the ticket */
.smk-ticket{width:156px;background:var(--white);border:2px solid var(--ink);display:flex;flex-direction:column;
  text-align:center;box-shadow:5px 5px 0 var(--ink-12)}
.smk-tt{background:var(--lime);padding:.5rem .6rem .45rem;clip-path:polygon(0 0,100% 0,100% 76%,0 100%);
  display:flex}
.smk-lbl{font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin-top:.5rem}
.smk-code{font-size:1.75rem;font-weight:700;line-height:1.15;letter-spacing:.04em}
.smk-tear{border-top:2px dashed var(--ink-30);margin:.35rem .5rem 0;position:relative;display:block}
.smk-tear::before,.smk-tear::after{content:"";position:absolute;top:-5px;width:9px;height:9px;
  border-radius:50%;background:var(--ink)}
.smk-tear::before{left:-11px}
.smk-tear::after{right:-11px}
.smk-tf{display:flex;justify-content:space-between;gap:.4rem;padding:.45rem .55rem .55rem;font-size:.42rem;
  letter-spacing:.08em;color:var(--ink-60);text-transform:uppercase}
.smk-tf i{font-style:normal}

.anchor{margin:2.4rem 0 0;background:var(--ink);color:var(--chalk)}
.anchor-in{max-width:720px;margin:0 auto;padding:2.2rem 1rem 2.4rem}
.anchor h2{color:var(--lime);margin:0 0 .8rem}
.anchor p{max-width:52ch}
.anchor .btn--ghost{color:var(--chalk);box-shadow:inset 0 0 0 2px var(--chalk);margin-top:.6rem}

/* the price poster — numbers big enough to read from the road */
.anchor-prices{margin:1.8rem 0 0;display:grid;gap:0;border:2px solid #4a4a46}
.ap{display:flex;flex-direction:column;padding:1rem 1.1rem 1.1rem;border-bottom:2px solid #4a4a46}
.ap:last-child{border-bottom:none}
.ap dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#a9a9a3;order:2}
.ap dd{margin:0 0 .15rem;order:1;color:var(--lime);font-family:var(--mono);font-weight:700;
  font-size:clamp(2rem,7vw,2.6rem);line-height:1}

.trust{max-width:1000px;margin:0 auto;padding:2.4rem 1rem 0}
.trust-grid{display:grid;gap:1rem}
@media(min-width:760px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.tcard{border:2px solid var(--ink);background:var(--white);padding:1.1rem 1.2rem}
.tcard h3{margin:0 0 .4rem}
.tcard p{margin:0;font-size:.88rem;color:var(--ink-60)}

.faq{padding-bottom:2.4rem}
.faq details{border:2px solid var(--ink);background:var(--white);margin-bottom:.6rem}
.faq summary{cursor:pointer;padding:.9rem 1rem;font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;font-stretch:75%;text-transform:uppercase;font-size:.85rem;list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 1rem .9rem;margin:0;font-size:.9rem;color:var(--ink-60);max-width:60ch}


/* (the 880px overlap rule was replaced by the desktop block below) */

/* ==================================================================
   DESKTOP — mobile rules above stay untouched; these only add width.
   Breakpoint 900px: hero and dropzone share the lime band, so the fold
   carries the promise and the storefront at the same time.
   ================================================================== */
@media(min-width:900px){
  .lp-top{
    background:var(--lime);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%);
    padding:clamp(2.4rem,4vw,4rem) clamp(1.5rem,5vw,4rem) clamp(3.4rem,5vw,5rem);
  }
  .lp-top-in{
    max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:1.02fr .98fr;
    gap:clamp(2rem,4vw,4rem);align-items:center;
  }

  /* hero: no longer its own band — the wrapper carries the lime */
  .hero{background:none;padding:0;clip-path:none}
  .hero-in{max-width:none}
  .hero-kicker{margin-bottom:1.2rem}
  .hero-line{font-size:clamp(3.6rem,5.8vw,6.4rem)}
  .hero-sub{font-size:1.1rem;max-width:30ch;margin-top:1.2rem}

  /* dropzone sits on the lime as a card you could pick up */
  .upzone{padding:0;max-width:none;margin:0}
  .upzone .dropzone{padding:3.4rem 1.6rem;background:var(--white);
    border:2px solid var(--ink);outline:2px dashed var(--ink);outline-offset:-12px;
    box-shadow:8px 8px 0 var(--ink);
    transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
  .upzone .dropzone:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}
  .upzone .dropzone.is-over{background:var(--lime-tint)}
  .upzone .dropzone .big{font-size:1.9rem}
  .upzone .dropzone .sub{font-size:.88rem}
  /* ink-60 is only 3.4:1 on lime — these go full ink out here */
  .srcs{margin-top:1.1rem}
  .srcs span{color:var(--ink);border-color:var(--ink)}
  .upzone .promise{border-left-color:var(--ink);color:var(--ink);max-width:46ch}
  .upzone .file-list:not(:empty){box-shadow:8px 8px 0 var(--ink)}

  /* generous gutters between 900 and full width */
  .steps,.faq,.trust{padding-left:clamp(1.5rem,4vw,3rem);padding-right:clamp(1.5rem,4vw,3rem)}
  .anchor-in{padding-left:clamp(1.5rem,4vw,3rem);padding-right:clamp(1.5rem,4vw,3rem)}

  /* how it works — four screen cards, read like a filmstrip of the order */
  .steps{max-width:1180px;padding-top:clamp(3.5rem,6vw,5.5rem)}
  .steps ol{grid-template-columns:repeat(4,1fr);gap:1.4rem}
  .steps li{box-shadow:6px 6px 0 var(--ink)}
  .smock{min-height:196px}
  .stext{padding:1rem 1.2rem 1.2rem}
  .stext b{font-size:1rem}

  /* price anchor — copy left, the poster of numbers right */
  .anchor{margin-top:clamp(3rem,5vw,4.5rem)}
  .anchor-in{
    max-width:1180px;display:grid;grid-template-columns:1fr 1.1fr;
    column-gap:clamp(2.5rem,5vw,5rem);align-items:center;
    padding-top:clamp(2.8rem,4vw,3.6rem);padding-bottom:clamp(3rem,4vw,4rem);
  }
  .anchor-copy h2{margin:0 0 1rem;font-size:clamp(2rem,2.6vw,2.9rem)}
  .anchor-copy p{max-width:44ch}
  .anchor-copy .btn{margin-top:1rem}
  .anchor-prices{margin:0;grid-template-columns:1fr 1fr}
  .ap{padding:1.6rem 1.6rem 1.7rem;border-bottom:none}
  .ap:nth-child(1){border-right:2px solid #4a4a46;border-bottom:2px solid #4a4a46}
  .ap:nth-child(2){border-bottom:2px solid #4a4a46}
  .ap:nth-child(3){grid-column:1/-1}
  .ap dd{font-size:clamp(2.6rem,3.4vw,3.8rem)}

  .trust{max-width:1180px;padding-top:clamp(3rem,5vw,4.5rem)}
  .trust-grid{gap:1.4rem}
  .tcard{padding:1.6rem 1.6rem 1.5rem;box-shadow:6px 6px 0 var(--ink)}

  /* FAQ — two columns under one heading */
  .faq{
    max-width:1180px;display:grid;grid-template-columns:1fr 1fr;
    column-gap:1.4rem;row-gap:.8rem;align-items:start;
    padding-top:clamp(3rem,5vw,4.5rem);
  }
  .faq h2{grid-column:1/-1}
  .faq details{margin-bottom:0}
  .faq details[open]{box-shadow:5px 5px 0 var(--ink)}
  .faq summary{font-size:.9rem;padding:1rem 1.2rem}
}

/* Very wide: let the type breathe rather than the measure stretch */
@media(min-width:1400px){
  .hero-line{font-size:6.2rem}
  .lp-top-in{gap:5rem}
}

/* Tablet (600–899px): one column, but composed like a poster — the band
   centres the promise over the centred dropzone instead of hugging the left. */
@media(min-width:600px) and (max-width:899px){
  .hero{padding:2.6rem clamp(1rem,4vw,2rem) 2.6rem;text-align:center}
  .hero-in{max-width:560px;margin:0 auto}
  .hero-line{font-size:clamp(3.4rem,8vw,4.6rem)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .upzone{max-width:620px;padding-top:1.4rem}
  .upzone .dropzone{padding:2.6rem 1.4rem}
  .steps,.faq{max-width:640px}
  .steps ol{grid-template-columns:1fr 1fr;gap:1.2rem}
  .anchor-in{max-width:640px}
  .trust{max-width:680px}
  .trust-grid{grid-template-columns:1fr 1fr}
}