/* Versione in slide (la prima pagina, /lsk/). Ogni slide è un palco 1600×900 scalato sullo schermo
   (--k lo calcola lo script); su telefono o in verticale le slide diventano pagine che scorrono.
   Colori e font vengono dai token dei brand in style.css (.brand-magnet, .brand-harna, .brand-autodoc). */
html:has(body.deck){scroll-snap-type:y mandatory}
body.deck{margin:0;background:#151311}
.dk{position:relative}
.sl{position:relative;height:100vh;height:100svh;overflow:hidden;scroll-snap-align:start;background:var(--paper);color:var(--ink);font-family:var(--sans)}
.st{position:absolute;left:50%;top:50%;width:1600px;height:900px;box-sizing:border-box;padding:118px 120px 100px;
  transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:50% 50%}

/* barra in alto e comandi: pillole scure, leggibili su ogni slide */
.dk-top{position:fixed;z-index:20;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}
.dk-top a,.dk-ctl{background:rgba(21,19,17,.66);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dk-top a{pointer-events:auto;text-decoration:none;font:500 13px "IBM Plex Sans",-apple-system,sans-serif;border-radius:999px;padding:7px 13px;white-space:nowrap}
.dk-top a:hover{background:rgba(21,19,17,.86)}
.dk-top .dk-me{font:500 14.5px "Newsreader",Georgia,serif}
.dk-me span{opacity:.72;font:500 12.5px "IBM Plex Sans",-apple-system,sans-serif}
.dk-top nav{display:flex;gap:6px}
.dk-ctl{position:fixed;z-index:20;right:16px;bottom:16px;display:flex;align-items:center;gap:2px;border-radius:999px;padding:4px;font:500 12.5px "IBM Plex Mono",ui-monospace,monospace}
.dk-ctl button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:17px;cursor:pointer}
.dk-ctl button:hover:not(:disabled){background:rgba(255,255,255,.16)}
.dk-ctl button:disabled{opacity:.3;cursor:default}
#dk-n{min-width:64px;text-align:center;letter-spacing:.04em}

/* tipografia comune delle slide */
.sl .kick{font:600 15px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;display:flex;gap:14px;align-items:center}
.sl .kn{color:var(--acc-t);white-space:nowrap;font-size:inherit}
.sl h2{font:var(--dw) 62px/1.12 var(--display);letter-spacing:var(--dls);margin:0;color:var(--h-ink,var(--ink));display:block}
.brand-magnet.sl h2{line-height:1.34}
.dk-sm{font:600 13px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.sl .chips{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.sl .chip{font-size:17px;padding:10px 16px;background:var(--chip-bg,var(--card));border-color:var(--chip-bd,var(--rule));color:var(--chip-ink,var(--ink2))}

/* copertina e chiusura: lo stile di Daria */
.sl-cover{background:#F4F1EA;color:#1A1714}
.dk-cover{display:flex;flex-direction:column;justify-content:center}
.sl-cover .kick{font:500 17px/1 "IBM Plex Mono",ui-monospace,monospace;color:#7A7368;margin:0 0 28px}
.dk-cover h1{font:500 124px/1 "Newsreader",Georgia,serif;letter-spacing:-.028em;margin:0 0 22px;color:#1A1714;max-width:none;white-space:nowrap}
.dk-cover h1 em{font-style:italic;color:#1A1714}
.dk-by{font:400 30px/1.4 "Newsreader",Georgia,serif;color:#47423B;margin:0 0 30px}
.dk-btns{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 50px}
.dk-btn{font:600 17px/1 "IBM Plex Sans",-apple-system,sans-serif;text-decoration:none;color:#F4F1EA;background:#1A1714;border:1px solid #1A1714;border-radius:999px;padding:15px 22px}
.dk-btn:hover{background:#000}
.dk-btn2{color:#1A1714;background:#FBFAF6;border-color:#D9D2C3}
.dk-btn2:hover{background:#fff;border-color:#1A1714}
.dk-url{margin:26px 0 0;font:400 22px/1.4 "Newsreader",Georgia,serif;color:#47423B}
.dk-url a{color:#1A1714;text-underline-offset:4px}
.dk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dk-tile{position:relative;display:flex;flex-direction:column;gap:14px;min-height:218px;box-sizing:border-box;padding:26px 26px 24px;border-radius:var(--r);
  text-decoration:none;background:var(--band);color:var(--band-ink);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.dk-tile:hover{transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(26,23,20,.55)}
.dk-tile img{height:30px;width:auto;align-self:flex-start}
.dk-tn{font:600 12.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--band-ink2)}
.dk-tt{font:var(--dw) 33px/1.14 var(--display);letter-spacing:var(--dls);margin-top:auto}
.dk-tt em{font-style:var(--em-style);color:var(--band-em)}
.brand-magnet .dk-tt{line-height:1.3}
.brand-autodoc .dk-tt{font-weight:800}
.dk-go{position:absolute;right:24px;top:22px;font:400 24px/1 "IBM Plex Sans",sans-serif;color:var(--band-ink2);transition:transform .18s}
.dk-tile:hover .dk-go{transform:translateX(4px)}
.dk-tile.brand-harna{background:radial-gradient(70% 90% at 100% 0%,rgba(255,99,249,.22),rgba(255,99,249,0) 70%),radial-gradient(70% 90% at 60% -20%,rgba(118,70,255,.24),rgba(118,70,255,0) 70%),#F8F5FF;
  box-shadow:inset 0 0 0 1px #DDD4F9}
.dk-tile.brand-autodoc{box-shadow:inset 0 5px 0 #F85A00}
.dk-hint{position:absolute;left:120px;bottom:64px;margin:0;font:500 14px "IBM Plex Mono",ui-monospace,monospace;color:#7A7368;letter-spacing:.07em;text-transform:uppercase}
.dk-close .dk-by{margin-bottom:46px}
.dk-dl{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.dk-dl a{font:500 17px "IBM Plex Sans",-apple-system,sans-serif;color:#1A1714;text-decoration:none;border:1px solid #D9D2C3;background:#FBFAF6;border-radius:999px;padding:12px 20px}
.dk-dl a:hover{border-color:#1A1714}

/* slide del titolo di ogni task: la fascia del brand */
.sl-band{background:var(--band);color:var(--band-ink)}
.sl-band .kick{color:var(--band-ink2)}
.sl-band .kn{color:var(--band-em)}
.dk-title{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:70px;align-items:center}
.dk-l{position:relative;z-index:1}
.dk-head{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin:0 0 36px}
.dk-logo{height:46px;width:auto}
.brand-magnet .dk-logo{height:54px}
.brand-harna .dk-logo{height:36px}
.brand-autodoc .dk-logo{height:40px}
.dk-title h1{font:var(--dw) 104px/1.05 var(--display);letter-spacing:var(--dls);margin:0 0 30px;color:var(--band-ink);max-width:none}
.dk-title h1 em{font-style:var(--em-style);color:var(--band-em)}
.brand-magnet .dk-title h1{font-size:110px;line-height:1.22}
.brand-autodoc .dk-title h1{font-weight:800;letter-spacing:-.022em}
.dk-lede{font:400 31px/1.42 var(--read);margin:0 0 34px;color:var(--band-ink);max-width:25em;text-wrap:pretty}
.dk-r{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;gap:30px}
.dk-ph.big{width:250px;flex:none}
.dk-ph.big:nth-child(2){margin-top:76px}
.dk-ph .phone{border-radius:34px;padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.dk-ph .screen{border-radius:27px}
.dk-ph.big .cap{font-size:17px}
.dk-ph.big .sketch{padding:18px 14px}
.dk-ph.big .sketch span{font-size:15.5px}
.dk-ph.big .ec-l{font-size:19px}
.dk-ph.big .ec-b{font-size:15.5px;padding:10px 18px}
.dk-ph.big .ph-tag{font-size:11px}
/* Magnet: i "doodle" della loro home; Harna: i gradienti mesh; AUTODOC: il filo arancio */
.dk-deco{display:none}
.brand-magnet .dk-deco{display:block;position:absolute;right:50px;top:70px;width:420px;height:380px;z-index:0;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 360' fill='none' stroke-linecap='round' stroke-width='9'%3E%3Ccircle cx='72' cy='70' r='22' stroke='%23FF7E6B' stroke-width='14'/%3E%3Cpath d='M300 40l26 26M326 40l-26 26' stroke='%2352D5FF'/%3E%3Cpath d='M352 170v36M334 188h36' stroke='%23FF904F'/%3E%3Cpath d='M120 250l24 24M144 250l-24 24' stroke='%23FFD866'/%3E%3Cpath d='M236 150v28M222 164h28' stroke='%2393E3D6'/%3E%3Ccircle cx='318' cy='300' r='12' stroke='%237CE38B' stroke-width='8'/%3E%3C/svg%3E") no-repeat center/contain}
.sl-band.brand-harna::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 75% at 90% 0%,rgba(255,99,249,.24) 0%,rgba(255,99,249,0) 100%),
             radial-gradient(42% 70% at 62% -14%,rgba(118,70,255,.28) 0%,rgba(118,70,255,0) 100%),
             radial-gradient(30% 50% at 100% 80%,rgba(255,114,61,.16) 0%,rgba(255,114,61,0) 100%)}
.sl-band.brand-autodoc::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#F85A00;z-index:2}

/* slide dell'annuncio: lo storyboard in fila */
.dk-ad{display:flex;flex-direction:column;justify-content:center;gap:40px}
.dk-hd{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.dk-sb{display:grid;gap:20px;align-items:start}
.dk-sb.n7{grid-template-columns:repeat(7,minmax(0,1fr))}
.dk-sb.n8{grid-template-columns:repeat(8,minmax(0,1fr))}
.dk-f{margin:0}
.dk-f .phone{border-radius:24px;padding:6px}
.dk-f .screen{border-radius:19px}
.dk-f figcaption{padding:12px 2px 0}
.dk-f .tc{font-size:13.5px;margin:0}
.dk-u{display:block;font:500 16px/1.35 var(--sans);color:var(--ink2);margin-top:5px;text-wrap:balance}

/* slide del perché: il testo a sinistra, ganci e riferimento a destra */
.sl-why{background:var(--card)}
.dk-w{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:80px;align-items:center}
.dk-wl h2{margin:16px 0 30px}
.dk-why p{font:400 27px/1.52 var(--read);margin:0 0 16px;color:var(--ink);text-wrap:pretty}
.dk-pts{margin:0;padding-left:36px}
.dk-pts li{font:400 27px/1.45 var(--read);margin:0 0 18px;color:var(--ink);padding-left:6px}
.dk-pts li::marker{color:var(--acc-t);font-weight:700}
.dk-cta{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font:600 19px/1 var(--sans);text-decoration:none;color:#fff;background:var(--acc);padding:16px 24px;border-radius:var(--r-chip)}
.dk-cta span{transition:transform .15s}
.dk-cta:hover span{transform:translateX(4px)}
.brand-harna .dk-cta{box-shadow:0 14px 30px -14px rgba(118,70,255,.7)}
.dk-hooks{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:24px 26px 14px;margin:0 0 22px}
.dk-hk{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule2)}
.dk-hk:nth-child(2){border-top:0;padding-top:4px}
.dk-hid{flex:none;min-width:42px;height:42px;padding:0 8px;box-sizing:border-box;border-radius:999px;background:var(--acc);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--sans)}
.dk-hk b{display:block;font:var(--dsw) 20px/1.25 var(--display-sm);color:var(--h-ink,var(--ink))}
.dk-hk div span{display:block;font:400 16.5px/1.42 var(--sans);color:var(--ink2);margin-top:4px}
.dk-ref{display:flex;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px}
.dk-ref img{width:92px;aspect-ratio:9/16;object-fit:cover;border-radius:10px;flex:none}
.dk-rt{font:var(--dsw) 21px/1.3 var(--display-sm);margin:0;color:var(--h-ink,var(--ink))}
.brand-harna .dk-hooks,.brand-harna .dk-ref{border-color:transparent;box-shadow:0 14px 34px -22px rgba(58,45,95,.55)}

/* task 4: il brief per il creator */
.dk-rule{border-left:5px solid var(--band-em);padding:4px 0 4px 24px;margin:6px 0 0;max-width:26em}
.dk-rule .dk-sm{color:var(--band-em)}
.dk-rule p:last-child{font:400 25px/1.45 var(--read);margin:0;color:var(--band-ink)}
.dk-specs{display:block;margin:0;align-self:center;background:rgba(255,255,255,.04);border:1px solid #4D7187;border-radius:var(--r);padding:8px 28px}
.dk-sp{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-top:1px solid rgba(196,208,216,.22)}
.dk-sp:first-child{border-top:0}
.dk-sp dt{font:600 13px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--band-ink2)}
.dk-sp dd{margin:0;font:400 19px/1.42 var(--sans);color:var(--band-ink)}
.dk-shoot{display:flex;flex-direction:column;justify-content:center;gap:28px}
.dk-jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dk-job{background:var(--card);border:1px solid var(--rule);border-top:5px solid var(--acc);border-radius:var(--r);padding:20px 22px}
.dk-jn{font:800 34px/1 var(--display);color:var(--acc)}
.dk-job b{display:block;font:var(--dsw) 22px/1.2 var(--display-sm);margin:12px 0 6px;color:var(--h-ink,var(--ink))}
.dk-car{font:600 12.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dk-job p{font:400 17px/1.45 var(--sans);margin:12px 0 0;color:var(--ink2)}
.dk-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dk-list{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 22px 10px}
.dk-list ul{margin:0;padding-left:20px}
.dk-list li{font:400 17px/1.45 var(--sans);margin:0 0 8px;color:var(--ink)}
.dk-list.no{border-color:#F2C5AD;background:#FFF7F2}
.dk-list.no .dk-sm{color:#BD4500}
.dk-list.no li::marker{color:#BD4500}
.dk-shoot .dk-cta{align-self:flex-start;margin-top:0}

/* telefono e verticale: le slide diventano pagine che scorrono */
@media (max-width:899px),(orientation:portrait) and (max-width:1199px){
  html:has(body.deck){scroll-snap-type:none}
  .sl{height:auto;min-height:100svh;overflow:visible}
  .st{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:100svh;transform:none;padding:86px 18px 96px;
    display:flex!important;flex-direction:column;justify-content:center;align-items:stretch;gap:26px}
  .dk-ctl{display:none}
  .dk-cover h1{font-size:56px;margin-bottom:14px;white-space:normal}
  .dk-btns{margin:0 0 6px}
  .dk-btn{font-size:14px;padding:12px 16px}
  .dk-url{font-size:17px;margin-top:6px}
  .sl-cover .kick{font-size:11.5px;line-height:1.5;margin-bottom:18px}
  .dk-by{font-size:20px;margin:0 0 6px}
  .dk-close .dk-by{margin-bottom:6px}
  .dk-tiles{grid-template-columns:1fr 1fr;gap:12px}
  .dk-tile{min-height:150px;padding:16px;gap:10px}
  .dk-tile img{height:22px}
  .dk-tn{font-size:10.5px}
  .dk-tt{font-size:21px}
  .dk-go{right:14px;top:14px;font-size:18px}
  .dk-hint{position:static;font-size:11.5px}
  .dk-dl{margin-top:8px}
  .dk-dl a{font-size:14px;padding:10px 14px}
  .sl .kick{font-size:11.5px;gap:10px;flex-wrap:wrap}
  .dk-head{gap:12px 16px;margin-bottom:18px}
  .dk-logo,.brand-magnet .dk-logo{height:32px}
  .brand-harna .dk-logo{height:22px}
  .brand-autodoc .dk-logo{height:26px}
  .dk-title h1{font-size:46px;margin-bottom:16px}
  .brand-magnet .dk-title h1{font-size:50px}
  .dk-lede{font-size:19px;margin-bottom:18px}
  .sl .chip{font-size:13px;padding:7px 11px}
  .dk-r{gap:14px;justify-content:flex-start}
  .dk-ph.big{width:calc(50% - 7px);max-width:230px}
  .dk-ph.big:nth-child(2){margin-top:34px}
  .dk-ph.big .cap{font-size:12px}
  .dk-ph.big .sketch span{font-size:12px}
  .dk-ph.big .ec-l{font-size:13px}
  .dk-ph.big .ec-b{font-size:12px;padding:7px 12px}
  .dk-deco,.brand-magnet .dk-deco{display:none}
  .sl h2{font-size:36px}
  .dk-hd{flex-direction:column;align-items:flex-start;gap:10px}
  .dk-sb{display:flex!important;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 10px;-webkit-overflow-scrolling:touch}
  .dk-f{flex:0 0 min(44%,200px);scroll-snap-align:start}
  .dk-u{font-size:13.5px}
  .dk-wl h2{margin:10px 0 18px}
  .dk-why p,.dk-pts li{font-size:18px}
  .dk-pts{padding-left:24px}
  .dk-hooks{padding:16px 16px 8px;margin-bottom:14px}
  .dk-hk b{font-size:16.5px}
  .dk-hk div span{font-size:14px}
  .dk-hid{min-width:34px;height:34px;font-size:12px}
  .dk-ref{padding:12px}
  .dk-ref img{width:64px}
  .dk-rt{font-size:16.5px}
  .dk-cta{font-size:16px;padding:13px 18px;margin-top:18px}
  .dk-rule p:last-child{font-size:18px}
  .dk-specs{padding:4px 16px}
  .dk-sp{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .dk-sp dd{font-size:15px}
  .dk-jobs,.dk-lists{grid-template-columns:1fr 1fr;gap:12px}
  .dk-job{padding:14px}
  .dk-jn{font-size:24px}
  .dk-job b{font-size:17px}
  .dk-job p,.dk-list li{font-size:14px}
  .dk-top a{font-size:12px;padding:6px 11px}
  .dk-me span{display:none}
}
@media (max-width:520px){
  .dk-tiles,.dk-jobs,.dk-lists{grid-template-columns:1fr}
  .dk-tile{min-height:0}
  .dk-tt{margin-top:4px}
}

/* PDF delle slide: una pagina 1600×900 per slide */
@media print{
  @page{size:1600px 900px;margin:0}
  html:has(body.deck){scroll-snap-type:none}
  body.deck{background:#fff}
  .dk-top,.dk-ctl{display:none!important}
  .sl{width:1600px;height:900px;break-after:page;break-inside:avoid;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .st{position:absolute;left:0;top:0;transform:none}
  .dk-tile:hover{transform:none}
}