:root{
  --bg:#FFFFFF; --card:#FFFFFF; --ink:#0C1420; --muted:#66788E;
  --line:#E2E7EE; --blue:#1E4FE0; --blue-dark:#1740B8; --blue-soft:#EDF1FE;
  --verde:#0E9F6E; --verde-soft:#E6F6F0; --amber:#B7791F; --amber-soft:#FDF3E3;
  --font:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
/* archi blu di sfondo, come WeTransfer */
body::before{
  content:"";position:fixed;top:-40vh;right:-30vw;width:90vw;height:120vh;
  background:var(--blue);border-radius:50%;z-index:-1;
  transform:translate(0,0);
}
body::after{
  content:"";position:fixed;bottom:-50vh;left:-30vw;width:80vw;height:100vh;
  background:var(--blue);border-radius:50%;z-index:-1;
}
a{color:inherit}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:14px 26px;border-radius:10px;text-decoration:none;font-weight:600;font-size:16px;border:1px solid var(--blue)}
.btn:hover{background:var(--blue-dark)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--blue-soft)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.mono{font-family:var(--mono)}

/* header con logo */
header{
  padding:20px 32px;display:flex;align-items:center;gap:26px;
  max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:34px;height:34px;object-fit:contain}
.brand .name{font-weight:800;font-size:22px;letter-spacing:-.02em}
.brand .name span{color:var(--blue)}
nav{
  margin-left:auto;display:flex;gap:20px;align-items:center;font-size:15px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 22px;
  box-shadow:0 4px 20px rgba(12,20,32,.06);
}
nav a{text-decoration:none;color:var(--muted);font-weight:500;padding:6px 8px}
nav a:hover{color:var(--ink)}
nav a.on{color:var(--ink);font-weight:600}
nav .btn{padding:9px 18px;font-size:14.5px}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font-weight:800;letter-spacing:-.035em;font-size:clamp(34px,4.6vw,54px);line-height:1.05;margin:14px 0 34px;max-width:16ch}
h1 em{font-style:normal;color:var(--blue)}
footer{max-width:1180px;margin:0 auto;padding:26px 32px 40px;color:var(--muted);font-size:13px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* home: card WeTransfer a sinistra, contenuto a destra */
.layout{
  display:grid;grid-template-columns:400px 1fr;gap:64px;
  max-width:1180px;margin:0 auto;padding:14px 32px 90px;align-items:start;
}
.spine{
  background:var(--card);border-radius:22px;
  box-shadow:0 20px 60px rgba(12,20,32,.14);
  overflow:hidden;position:sticky;top:24px;
}
.spine .head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.spine .head .st{color:var(--amber);transition:color .4s ease}
.spine.done-all .head .st{color:var(--verde)}
.states{list-style:none;margin:0;padding:10px 0}
.state{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:4px;padding:12px 22px 12px 16px;position:relative}
.state::before{content:"";position:absolute;left:37px;top:0;bottom:0;width:2px;background:var(--line)}
.state:first-child::before{top:50%}
.state:last-child::before{bottom:50%}
.bullet{width:26px;height:26px;border-radius:50%;margin:0 auto;position:relative;z-index:1;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .3s ease,background .3s ease}
.bullet svg{width:12px;height:12px;opacity:0;transition:opacity .25s ease}
.state .label{font-size:15px;font-weight:500;color:var(--muted);transition:color .3s ease}
.state .sub{grid-column:2;font-size:12.5px;color:var(--muted);opacity:0;max-height:0;overflow:hidden;transition:opacity .35s ease,max-height .35s ease}
.state.current .bullet{border-color:var(--blue)}
.state.current .bullet::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.state.current .label{color:var(--ink);font-weight:600}
.state.current .sub{opacity:1;max-height:3.2em}
.state.done .bullet{border-color:var(--verde);background:var(--verde)}
.state.done .bullet svg{opacity:1}
.state.done .label{color:var(--ink)}
.seal{margin:6px 16px 16px;padding:13px 16px;border-radius:12px;background:var(--verde-soft);color:var(--verde);font-weight:600;font-size:14px;text-align:center;opacity:0;transform:translateY(4px);transition:opacity .45s ease,transform .45s ease}
.spine.done-all .seal{opacity:1;transform:none}

/* pannello contenuto sul lato destro, staccato dagli archi */
.right{
  background:#fff;border-radius:22px;padding:36px 40px 44px;
  box-shadow:0 20px 60px rgba(12,20,32,.10);
  max-width:640px;
}
.verbs{display:grid;gap:20px;margin:0 0 30px}
.verb{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.verb .w{font-weight:800;font-size:19px;letter-spacing:.01em;min-width:120px}
.verb:nth-child(1) .w{color:var(--amber)}
.verb:nth-child(2) .w{color:var(--ink)}
.verb:nth-child(3) .w{color:var(--verde)}
.verb .d{color:var(--muted);font-size:15.5px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.strip{border-top:1px solid var(--line);padding-top:24px;display:flex;gap:34px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.strip b{display:block;color:var(--ink);font-weight:700;font-size:16px}

/* pagine interne */
.page{max-width:880px;margin:0 auto;padding:14px 32px 90px}
.paper{background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(12,20,32,.10);padding:44px 48px 48px;margin:0 0 32px}
.lead{font-size:18.5px;color:var(--muted);max-width:56ch;margin:0 0 30px}
.detail{background:var(--card);border-radius:18px;box-shadow:0 8px 40px rgba(12,20,32,.08);overflow:hidden;margin:0 0 40px}
.pass{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:24px 26px;border-bottom:1px solid var(--line)}
.pass:last-child{border-bottom:0}
.pass .n{font-family:var(--mono);font-size:14px;color:var(--blue);font-weight:500;padding-top:3px}
.pass h3{margin:0 0 6px;font-size:17.5px;font-weight:700;letter-spacing:-.01em}
.pass p{margin:0;font-size:15px;color:var(--muted)}
.pass.money .n{color:var(--amber)}
.pass.final{background:var(--verde-soft)}
.pass.final .n{color:var(--verde)}
.notice{border:1px solid var(--line);border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:12px;padding:20px 24px;margin:0 0 32px;font-size:15px;color:#6b5535}
.notice b{color:var(--ink)}
ul.plain{list-style:none;margin:0 0 30px;padding:0}
ul.plain li{padding:11px 0 11px 34px;position:relative;color:var(--muted);font-size:16px}
ul.plain li::before{content:"";position:absolute;left:2px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--verde-soft)}
ul.plain li::after{content:"";position:absolute;left:7px;top:21px;width:8px;height:5px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg)}
ul.plain li strong{color:var(--ink);font-weight:700}
.example{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(12,20,32,.07);max-width:480px;margin:0 0 18px}
.example .head{padding:15px 22px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:15.5px}
.row:last-child{border-bottom:0}
.row .mono{font-size:14.5px}
.row.total{background:var(--blue-soft)}
.row.total .mono{color:var(--blue);font-weight:600}
.row.partner .mono{color:var(--verde);font-weight:600}
.note{font-size:13px;color:var(--muted);margin:0 0 30px}

@media (max-width:900px){
  body::before{top:-30vh;right:-40vw;width:110vw}
  body::after{display:none}
  .layout{grid-template-columns:1fr;gap:32px;padding-bottom:64px}
  .spine{position:static}
  h1{max-width:none}
  nav{padding:6px 6px 6px 14px;gap:12px}
  .right{padding:28px 26px 32px}
  .paper{padding:32px 26px 36px}
}