/* The Real Cost of AI: waiting-list site.
   Layout: paper page in bands; hero = text left, Tab printing his receipt right; the deal is one white card. */
:root{
  --paper:#FBF7EE; --paper-2:#F4EFE2; --ink:#141414; --red:#DE161E; --green:#1FBF63; --print:#6B665C; --bar:#9A9A9A; --white:#FFFFFF;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--sans)}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.band{padding-block:56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band--alt{background:var(--paper-2)}
.wrap{max-width:1040px;margin:0 auto}
.wrap--narrow{max-width:720px}
h1{font:900 clamp(34px,5.4vw,52px)/1.03 var(--sans);letter-spacing:-.02em;margin:14px 0 18px;text-wrap:balance}
h2{font:800 26px/1.2 var(--sans);letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
p{margin:0 0 14px;max-width:62ch}
.neg{color:var(--red);font-weight:800;white-space:nowrap}
.small{font-size:14px;color:var(--print);margin-top:10px}
.center{text-align:center;margin-inline:auto}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero__text{min-width:0}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:16px}}
.chip{display:inline-block;background:var(--ink);color:var(--paper);font:600 12px/1 var(--mono);letter-spacing:.12em;padding:7px 10px;text-transform:uppercase;margin:0}

/* sign-up form */
.signup{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:560px}
.signup input{flex:1 1 160px;min-width:0;font:400 17px var(--sans);padding:13px 14px;border:2px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink)}
.signup button{flex:1 1 100%;font:800 18px var(--sans);padding:14px 18px;background:var(--red);color:var(--white);border:2px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.signup button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.signup button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.signup button[disabled]{opacity:.7;cursor:wait}
.signup__msg{flex-basis:100%;margin:4px 0 0;font-weight:600;font-size:16px}
.signup__msg:empty{display:none}
.signup.is-done input,.signup.is-done button{display:none}
.signup.is-done .signup__msg{background:var(--white);border:2px solid var(--ink);padding:12px 14px}
.signup.is-error .signup__msg{color:var(--red)}

/* trust badges */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.badges li{display:flex;align-items:center;gap:7px;border:2px solid var(--ink);background:var(--paper);padding:6px 10px;font:600 13px/1.2 var(--mono)}
.badges svg{flex:none;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* lists */
.items{list-style:none;padding:0;margin:0}
.items li{display:grid;grid-template-columns:2.4em 1fr;gap:10px;padding:14px 0;border-bottom:2px dashed rgba(20,20,20,.35)}
.items li:last-child{border-bottom:0}
.items .qty{font:600 15px/1.6 var(--mono);color:var(--print)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:880px}
.split>div{min-width:0}
@media (max-width:720px){.split{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:900}
.ticks--no li::before{content:"✕";color:var(--red)}

/* receipt */
.rcpt{width:min(100%,340px);margin:0 auto;background:var(--white);font:400 14px/1.5 var(--mono);padding:22px 22px 30px;
  filter:drop-shadow(5px 6px 0 rgba(20,20,20,.9));
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at 50% 0,#000 90deg,transparent 0) bottom/20px 10px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at 50% 0,#000 90deg,transparent 0) bottom/20px 10px repeat-x}
.rcpt__head{text-align:center;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.rcpt__sub{text-align:center;font-size:12px;color:var(--print);margin-bottom:10px}
.rcpt hr{border:0;border-top:2px dashed var(--ink);margin:10px 0}
.rcpt hr.solid{border-top-style:solid}
.rcpt__row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.rcpt__row b{font-weight:600}
.rcpt__total{font-size:17px;font-weight:600}

/* hero art: Tab + the receipt he prints */
.art{position:relative;display:flex;align-items:flex-start;justify-content:center;min-height:380px}
.art__tab{width:150px;flex:none;margin-top:30px;z-index:2}
.art__slip{width:210px;margin-left:-18px;margin-top:118px;z-index:1}
.art__slip .rcpt{padding:14px 14px 22px;font-size:12px;filter:drop-shadow(4px 5px 0 rgba(20,20,20,.9))}
.art__slip .rcpt__total{font-size:14px}
.stamp{position:absolute;right:4%;top:30px;transform:rotate(-9deg);border:3px solid var(--red);color:var(--red);font:800 13px/1.15 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;text-align:center;background:rgba(251,247,238,.85);z-index:3}
@media (max-width:820px){.art{min-height:0;transform:scale(.92)}}

/* the deal */
.deal{max-width:560px;margin:0 auto;background:var(--white);border:3px solid var(--ink);padding:36px 32px 32px;text-align:center;overflow:hidden}
@media (max-width:480px){.deal{padding:28px 18px 24px}}
.deal__label{font:600 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--print);margin:0 auto 6px}
.prices{position:relative;display:flex;flex-direction:column;align-items:center;margin:0 auto 4px}
.price-now{margin:0;font:900 clamp(84px,22vw,120px)/1 var(--sans);color:var(--green);letter-spacing:-.03em;
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.price-later{margin:8px auto 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.price-later__amt{font:900 34px/1 var(--sans);color:var(--red);letter-spacing:-.02em}
.price-later__lbl{font:600 13px/1 var(--mono);color:var(--print);text-transform:uppercase;letter-spacing:.08em}
.deal__sub{font-size:20px;line-height:1.45;margin:14px auto 22px}
.u{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--ink)}
.deal__list{max-width:420px;margin:0 auto 22px;text-align:left}
.deal__list li{font-size:18px}
.deal .signup{margin:0 auto}
.burst{position:absolute;left:50%;top:64px;width:0;height:0;pointer-events:none}
.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:26px;background:var(--ink);border-radius:3px;opacity:0;transform-origin:3px 3px}

/* footer */
.foot{text-align:center;font:400 13px/1.6 var(--mono);color:var(--print);padding-block:32px 40px}
.foot p{margin:4px auto;max-width:none}
.foot a{color:var(--print)}
.socials{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.socials a{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);color:var(--ink);background:var(--paper)}
.socials a:hover{background:var(--ink);color:var(--paper)}

/* ===== Motion (only when the visitor's device allows it) ===== */
@media (prefers-reduced-motion:no-preference){
  /* hero: the receipt prints, the stamp lands, Tab idles */
  .art__slip .rcpt{animation:print 2.4s steps(14,end) .3s both}
  @keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  .stamp{animation:stamp .35s cubic-bezier(.2,1.6,.4,1) 2.8s both}
  @keyframes stamp{from{opacity:0;transform:rotate(-9deg) scale(2.2)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
  .tab-bob{animation:bob 2.8s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-6px)}}
  .tab-eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
  @keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
  .tab-arm{transform-box:view-box;transform-origin:120px 110px;animation:wave 2.8s ease-in-out infinite}
  @keyframes wave{50%{transform:rotate(-8deg)}}

  /* the deal: before it is seen, only a big red €97 sits in the price spot (JS adds .deal--armed) */
  .js .deal--armed .price-now{transform:translateY(-110vh) rotate(-14deg);visibility:hidden}
  .js .deal--armed .price-later{transform:translateY(-104px) scale(2.3)}
  .js .deal--armed .price-later__lbl{opacity:0}

  /* when the card scrolls into view: €47 drops, hits, €97 gets knocked into its small spot */
  .deal--go .price-now{visibility:visible;animation:drop 1.05s cubic-bezier(.55,0,1,.45) both}
  @keyframes drop{
    0%{transform:translateY(-110vh) rotate(-14deg)}
    55%{transform:translateY(0) rotate(0) scale(1.08,.86)}
    68%{transform:translateY(-26px) rotate(2deg) scale(.96,1.05)}
    82%{transform:translateY(0) scale(1.03,.97)}
    100%{transform:translateY(0) scale(1)}
  }
  .deal--go .price-later{animation:knock .7s cubic-bezier(.2,1.5,.4,1) .5s both}
  @keyframes knock{
    0%{transform:translateY(-104px) scale(2.3)}
    25%{transform:translateY(-40px) scale(1.4) rotate(7deg)}
    100%{transform:none}
  }
  .deal--go .price-later__lbl{animation:fadein .3s ease 1.1s both}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .deal--go{animation:shake .45s ease .58s}
  @keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
  .deal--go .burst i{animation:burst .5s ease-out .58s both}
  .burst i:nth-child(1){--a:-70deg}.burst i:nth-child(2){--a:-35deg}.burst i:nth-child(3){--a:0deg}
  .burst i:nth-child(4){--a:180deg}.burst i:nth-child(5){--a:215deg}.burst i:nth-child(6){--a:250deg}
  @keyframes burst{
    0%{opacity:1;transform:rotate(calc(var(--a) - 90deg)) translateY(60px) scaleY(.2)}
    40%{opacity:1}
    100%{opacity:0;transform:rotate(calc(var(--a) - 90deg)) translateY(120px) scaleY(1)}
  }
}