@font-face { font-family:"Scree Sora"; src:url("assets/Sora-VariableFont_wght.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
:root { --petrol:#075d62; --gold:#f5d683; --cream:#f3e9dc; --white:#eaeaea; --ink:var(--petrol); --paper:var(--cream); --yellow:var(--gold); --pink:var(--petrol); --blue:var(--white); --line:rgba(7,93,98,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Scree Sora",Arial,sans-serif; font-size:15px; line-height:1.45; }
body:before { content:""; position:fixed; inset:0; opacity:.27; pointer-events:none; background-image:linear-gradient(rgba(21,20,18,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(21,20,18,.08) 1px,transparent 1px); background-size:calc(100vw / 4) 100%; z-index:-1; }
a { color:inherit; text-decoration:none; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { height:86px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; position:fixed; inset:0 0 auto; z-index:10; background:rgba(243,233,220,.78); backdrop-filter:blur(8px); }
.brand { width:158px; height:56px; display:block; overflow:hidden; }.brand img { display:block; width:158px; height:56px; object-fit:cover; object-position:center; }.header-cta { font-size:13px; font-weight:700; color:var(--petrol); text-align:right; line-height:1.05; max-width:150px; }.header-cta strong { font-size:23px; letter-spacing:-.08em; }
.section-grid { display:grid; grid-template-columns:54px 1fr; border-bottom:1px solid var(--line); }.eyebrow { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin:0; }.pixel-dot { width:8px; height:8px; background:var(--yellow); display:inline-block; margin-right:5px; vertical-align:-1px; }
.hero { overflow:hidden; background:var(--cream); }.hero-copy { grid-column:1/-1; padding:123px 20px 0; }.scribble { margin:0 0 8px; color:var(--petrol); font-family:"Scree Sora",sans-serif; font-size:22px; font-style:italic; font-weight:600; letter-spacing:-.055em; transform:rotate(-3deg); }.hero h1,.intro h2,.preview-wrap h2,.founder h2,.about h2,.final-cta h2 { font-size:clamp(36px,10vw,60px); line-height:.97; letter-spacing:-.065em; margin:0; font-weight:800; }.lead { max-width:330px; font-size:15px; margin:20px 0 0; }
.journal-stage { grid-column:1/-1; height:390px; position:relative; display:grid; place-items:center; }.journal-book { width:205px; height:285px; position:relative; transform:rotate(-8deg); filter:drop-shadow(18px 18px 0 rgba(21,20,18,.14)); }.journal-cover { height:100%; background:var(--yellow); padding:18px; position:relative; border:2px solid var(--ink); overflow:hidden; }.journal-spine { height:100%; width:17px; position:absolute; background:#d0bd00; border:2px solid var(--ink); border-right:0; left:-15px; top:8px; }.cover-sticker { background:var(--ink); color:var(--yellow); display:inline-block; font-size:9px; font-weight:bold; padding:5px 7px; }.cover-title { margin-top:35px; font-size:29px; line-height:.88; letter-spacing:-.08em; font-weight:800; }.cover-title em { font-family:serif; font-size:42px; font-weight:400; }.cover-pixels { display:grid; grid-template-columns:repeat(3,16px); gap:4px; position:absolute; bottom:50px; right:19px; }.cover-pixels b { width:16px; height:16px; background:var(--ink); }.cover-pixels b:nth-child(2),.cover-pixels b:nth-child(5),.cover-pixels b:nth-child(7) { background:var(--pink); }.cover-footer { position:absolute; bottom:17px; font-size:7px; font-weight:bold; text-transform:uppercase; }.stage-tag { position:absolute; font-size:9px; font-weight:800; line-height:1.15; letter-spacing:.04em; }.tag-left { left:22px; top:82px; transform:rotate(-90deg); }.tag-right { right:20px; bottom:75px; }.spark { position:absolute; font-size:28px; }.spark-one { left:17%; top:65%; color:var(--pink); }.spark-two { right:15%; top:27%; font-size:46px; color:var(--blue); }
.hero-offer { grid-column:1/-1; background:var(--ink); color:var(--paper); padding:25px 20px 30px; }.offer-label { color:var(--yellow); font-size:10px; font-weight:bold; letter-spacing:.08em; }.hero-offer>p { margin:9px 0 20px; font-size:17px; line-height:1.25; }.signup-form input { width:100%; height:52px; padding:0 14px; border:1px solid var(--paper); border-radius:0; background:transparent; color:inherit; font:inherit; }.signup-form input::placeholder { color:currentColor; opacity:.55; }.signup-form button { border:1px solid var(--yellow); background:var(--yellow); color:var(--ink); width:100%; height:52px; font:700 13px Sora,sans-serif; text-transform:uppercase; margin-top:8px; cursor:pointer; }.signup-form button span { font-size:18px; margin-left:6px; }.form-note,.form-success { font-size:10px; margin:10px 0 0; opacity:.68; }.form-success { display:none; opacity:1; color:var(--yellow); font-weight:700; }.signup-form.is-submitted .form-success { display:block; }.signup-form.is-submitted .form-note { display:none; }
.intro { padding:0; }.section-number { border-right:1px solid var(--line); padding-top:22px; text-align:center; font-size:11px; font-weight:bold; }.intro-main { padding:50px 20px 32px; grid-column:2; }.intro h2 { font-size:31px; margin-top:13px; }.intro-text { grid-column:2; margin:0; padding:0 20px 50px; font-size:14px; max-width:410px; }
.preview-wrap { padding:55px 0 39px; overflow:hidden; border-bottom:1px solid var(--line); }.preview-heading { padding-bottom:30px; }.preview-heading>div:nth-child(2) { padding:0 20px; }.preview-heading h2 { font-size:31px; margin-top:12px; }.preview-heading>p { grid-column:2; padding:17px 20px 0; margin:0; font-size:13px; }.preview-scroller { display:flex; gap:15px; overflow-x:auto; padding:8px 20px 22px; scroll-snap-type:x mandatory; scrollbar-width:none; }.preview-scroller::-webkit-scrollbar { display:none; }.journal-page { min-width:230px; height:303px; padding:18px; border:1.5px solid var(--ink); scroll-snap-align:center; position:relative; background:#fffdf8; overflow:hidden; }.page-number { float:right; font-size:9px; font-weight:bold; }.page-kicker { font-size:10px; margin:25px 0 3px; text-transform:uppercase; font-weight:bold; }.journal-page h3 { margin:0; font-size:30px; line-height:.9; letter-spacing:-.07em; }.journal-page h3 i { font-family:serif; font-weight:400; }.page-pencil { font-family:cursive; color:#f14d3e; position:absolute; bottom:25px; left:18px; transform:rotate(-3deg); }.page-letter { background:#9bc8e8; }.page-pixels { background:var(--yellow); }.pixel-grid { margin-top:21px; width:156px; height:115px; background:repeating-linear-gradient(90deg,transparent 0 13px,var(--ink) 14px 15px),repeating-linear-gradient(transparent 0 13px,var(--ink) 14px 15px); position:relative; }.pixel-grid:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0 10%,var(--pink) 10% 20%,transparent 20% 42%,var(--blue) 42% 55%,transparent 55% 66%,var(--pink) 66% 86%,transparent 86%); mix-blend-mode:multiply; }.page-legend { position:absolute; display:flex; gap:7px; bottom:16px; font-size:7px; text-transform:uppercase; }.page-tracker { background:#f6c7d2; }.tracker-lines { margin-top:28px; }.tracker-lines i { display:block; height:1px; margin:16px 0; background:var(--ink); width:95%; }.page-doodles { background:#c6dca7; }.doodles { font-size:48px; line-height:1.25; margin-top:25px; transform:rotate(-8deg); }.swipe-hint { text-align:center; font-size:10px; font-weight:bold; letter-spacing:.04em; text-transform:uppercase; }.swipe-hint span { color:#f14d3e; padding:0 9px; }
.founder { background:var(--pink); }.founder-card { grid-column:1/-1; padding:55px 20px 25px; }.founder h2 { margin:14px 0 19px; font-size:34px; }.founder-card>p:not(.eyebrow) { max-width:380px; margin:0; font-size:14px; }.founder-stamp { margin:30px 0 0; height:93px; width:93px; border:2px solid var(--ink); border-radius:50%; display:grid; place-content:center; text-align:center; transform:rotate(-11deg); line-height:1.1; }.founder-stamp strong { font-size:13px; }.founder-stamp span { font-size:7px; margin-top:4px; font-weight:bold; }.founder-pixels { grid-column:1/-1; height:87px; display:flex; align-items:flex-end; justify-content:center; }.founder-pixels span { width:44px; height:44px; background:var(--ink); }.founder-pixels span:nth-child(2),.founder-pixels span:nth-child(5) { height:87px; }.founder-pixels span:nth-child(3) { background:var(--yellow); height:66px; }.founder-pixels span:nth-child(4) { background:var(--blue); }
.about { padding:55px 20px; gap:20px; }.about-portrait { grid-column:1/-1; height:250px; background:var(--blue); border:1px solid var(--ink); padding:16px; position:relative; font-size:10px; font-weight:bold; line-height:1.1; }.about-portrait i { position:absolute; right:33px; bottom:10px; font-size:150px; font-style:normal; line-height:1; }.about-copy { grid-column:1/-1; }.about h2 { font-size:33px; margin:13px 0 18px; }.about-copy>p:not(.eyebrow):not(.scribble) { font-size:14px; margin:0; }.small-scribble { margin-top:22px; font-size:20px; }
.final-cta { background:var(--ink); color:var(--paper); padding:55px 20px 75px; }.final-title,.final-form-wrap { grid-column:1/-1; }.final-cta h2 { margin:14px 0 30px; font-size:43px; }.final-form-wrap>p { font-size:15px; margin:0 0 20px; }.signup-form-dark button { background:var(--yellow); border-color:var(--yellow); }.final-cta .form-success { color:var(--yellow); }
footer { background:var(--ink); color:var(--paper); border-top:1px solid rgba(246,241,232,.35); min-height:75px; padding:20px; display:flex; flex-wrap:wrap; gap:7px 17px; align-content:center; font-size:9px; font-weight:bold; text-transform:uppercase; } footer a { margin-left:auto; }
.sticky-cta { position:fixed; z-index:3; bottom:12px; left:12px; right:12px; height:52px; background:var(--yellow); border:1px solid var(--ink); display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:12px; font-weight:800; text-transform:uppercase; box-shadow:4px 4px 0 var(--ink); }.sticky-cta span { font-size:20px; }
@media (min-width:700px) { body:before { background-size:25% 100%; }.site-header { padding:0 5vw; }.section-grid { grid-template-columns:10vw minmax(0,1fr) minmax(0,1fr); }.hero>.eyebrow { grid-column:1/-1; padding:20px 5vw; }.hero-copy { grid-column:2; padding:74px 5vw 55px; }.hero h1 { font-size:clamp(52px,6vw,88px); }.journal-stage { grid-column:3; grid-row:2; height:auto; min-height:490px; }.journal-book { transform:rotate(-8deg) scale(1.17); }.hero-offer { grid-column:2/-1; padding:31px 5vw; display:grid; grid-template-columns:1fr 1fr; column-gap:8vw; }.offer-label { grid-column:1; }.hero-offer>p { grid-column:1; }.hero-offer form { grid-column:2; grid-row:1 / span 2; align-self:center; }.intro-main { grid-column:2; padding:76px 5vw; }.intro h2,.preview-heading h2 { font-size:43px; }.intro-text { grid-column:3; padding:80px 5vw 0 0; }.preview-heading>div:nth-child(2) { grid-column:2; padding-left:5vw; }.preview-heading>p { grid-column:3; padding:30px 5vw 0 0; }.preview-scroller { padding-left:calc(10vw + 5vw); }.founder-card { grid-column:2; padding:80px 5vw; }.founder h2 { font-size:44px; }.founder-pixels { grid-column:3; height:auto; align-items:center; }.about { padding:80px 5vw; }.about-portrait { grid-column:2; }.about-copy { grid-column:3; align-self:center; }.final-cta { padding:80px 5vw 100px; }.final-title { grid-column:2; }.final-form-wrap { grid-column:3; align-self:center; }.sticky-cta { left:auto; right:24px; width:230px; }.journal-page { min-width:280px; height:360px; } }

/* Asset reali e palette Scree Bee: petrol #075d62, gold #f5d683, white #eaeaea. */
body:before { background-image:linear-gradient(rgba(7,93,98,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(7,93,98,.1) 1px,transparent 1px); }
.journal-stage { height:490px; overflow:hidden; }
.journal-mockup { width:min(105vw,450px); height:488px; object-fit:contain; filter:drop-shadow(12px 16px 14px rgba(7,93,98,.17)); position:relative; z-index:1; }
.stage-tag,.spark { z-index:2; }.spark-one { color:var(--gold); }.spark-two { color:var(--petrol); }
.page-letter { background:var(--white); }.page-pixels { background:var(--gold); }.page-tracker { background:var(--cream); }.page-doodles { background:var(--petrol); color:var(--white); }.page-pencil,.swipe-hint span { color:var(--petrol); font-family:"Scree Sora",sans-serif; font-size:12px; font-style:italic; font-weight:600; }.pixel-grid { background:repeating-linear-gradient(90deg,transparent 0 13px,var(--petrol) 14px 15px),repeating-linear-gradient(transparent 0 13px,var(--petrol) 14px 15px); }.pixel-grid:after { background:linear-gradient(90deg,transparent 0 10%,rgba(7,93,98,.45) 10% 20%,transparent 20% 42%,rgba(234,234,234,.85) 42% 55%,transparent 55% 66%,rgba(7,93,98,.45) 66% 86%,transparent 86%); }
.founder { background:var(--gold); }.founder-pixels span { background:var(--petrol); }.founder-pixels span:nth-child(3) { background:var(--white); }.founder-pixels span:nth-child(4) { background:var(--cream); }
.founder-cta { display:inline-flex; gap:14px; align-items:center; margin-top:28px; padding:14px 16px; border:1px solid var(--petrol); color:var(--petrol); font-size:12px; font-weight:800; text-transform:uppercase; }.founder-cta span { font-size:20px; line-height:0; }
.about-portrait { background:var(--petrol); color:var(--white); }.small-scribble { font-size:27px; }
.final-cta,footer { background:var(--petrol); }.sticky-cta { display:none; }
@media (min-width:700px) { .hero-copy { padding:150px 5vw 55px; }.journal-stage { grid-column:3; grid-row:1; height:750px; min-height:0; align-self:start; padding-top:106px; }.journal-mockup { width:min(45vw,563px); height:600px; } }

/* Allineamenti desktop della hero: gruppo journal più vicino al copy. */
@media (min-width:700px) {
  .hero-copy {
    padding:161px 0 68px 10px;
    max-width:775px;
  }
  .hero h1 {
    max-width:765px;
    font-size:clamp(76px,5.5vw,112px);
    line-height:.97;
  }
  .hero .scribble { margin-bottom:10px; font-size:28px; }
  .hero .lead {
    width:80%;
    max-width:none;
    margin-top:27px;
    font-size:19px;
    line-height:1.42;
  }
  .journal-stage { transform:translateX(calc(-10vw + 10%)); }
  .tag-left { left:112px; top:150px; }
  .tag-right { right:20px; bottom:75px; }
  .offer-label {
    font-size:200%;
    line-height:1.1;
  }
  .hero-offer > p {
    font-size:90%;
    line-height:1.32;
  }
}

.preview-wrap { background:linear-gradient(180deg,rgba(245,214,131,.16),transparent 42%); }.flipbook-stage { height:455px; min-height:0; display:grid; place-items:center; padding:0; position:relative; }.flipbook-glow { position:absolute; width:min(72vw,380px); height:285px; border-radius:50%; background:radial-gradient(ellipse,rgba(245,214,131,.68),rgba(245,214,131,0) 67%); filter:blur(10px); }.journal-flipbook { position:relative; z-index:1; width:320px; height:455px; aspect-ratio:566 / 804; filter:drop-shadow(0 18px 17px rgba(7,93,98,.18)); }.journal-flipbook .stf__item { background:#fffdf8; }.journal-flipbook .stf__item img { width:100%; height:100%; object-fit:cover; }.flipbook-controls { display:flex; align-items:center; justify-content:center; gap:18px; padding:16px 20px 18px; }.flip-control { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--petrol); background:transparent; color:var(--petrol); font:600 23px "Scree Sora",sans-serif; cursor:pointer; transition:background .2s,color .2s; }.flip-control:hover { color:var(--cream); background:var(--petrol); }.flipbook-count { min-width:70px; text-align:center; color:var(--petrol); font-size:11px; font-weight:700; letter-spacing:.08em; }.flipbook-count strong { font-size:18px; letter-spacing:-.04em; }.preview-wrap .swipe-hint { margin-top:0; color:var(--petrol); opacity:.78; }
@media (min-width:700px) { .flipbook-stage { height:455px; min-height:0; }.flipbook-glow { width:430px; height:340px; } }

/* I controlli restano sopra il canvas e ricevono sempre il tap sui dispositivi touch. */
.flipbook-controls { position:relative; z-index:5; gap:22px; }
.flip-control { width:52px; height:52px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* Respiro per i nuovi testi lunghi, senza trasformarli in un blocco compatto. */
.intro-text p { margin:0 0 16px; }
.intro-text p:last-child { margin-bottom:0; }
.founder-card > p:not(.eyebrow) { margin:0 0 16px; }
.about-copy > p:not(.eyebrow):not(.scribble) { margin:0 0 16px; }

/* Mockup della pagina interna nel blocco dedicato al primo lancio. */
.founder-pixels { padding:26px 20px 42px; height:auto; align-items:center; }
.founder-pixels img { display:block; width:min(100%,360px); height:auto; filter:drop-shadow(10px 12px 0 rgba(7,93,98,.12)); }
@media (min-width:700px) { .founder-pixels { padding:60px 5vw; justify-content:center; }.founder-pixels img { width:min(100%,430px); } }

/* Introduzione e anteprima condividono la stessa griglia tipografica desktop. */
@media (min-width:700px) {
  .preview-wrap { padding-top:0; }
  .intro,
  .preview-heading {
    min-height:18vw;
    padding-bottom:0;
  }
  .intro-main,
  .preview-heading > div:nth-child(2) {
    grid-column:2;
    padding:8% 10%;
  }
  .intro h2,
  .preview-heading h2 {
    margin-top:3%;
    font-size:clamp(2.25rem,2.1vw,3rem);
    line-height:1.05;
  }
  .intro-text,
  .preview-heading > p {
    grid-column:3;
    width:88%;
    max-width:none;
    margin:0;
    padding:8% 0;
    font-size:clamp(1rem,1.05vw,1.35rem);
    line-height:1.4;
  }
}

@media (min-width:700px) {
  .founder-card > p:not(.eyebrow) {
    width:90%;
    max-width:none;
  }
  .founder-pixels img {
    width:90%;
    max-width:none;
  }
}

.about-portrait { overflow:visible; }
.about-portrait img { position:absolute; z-index:1; left:50%; bottom:-100px; display:block; width:min(150%,520px); height:auto; transform:translateX(-50%); image-rendering:pixelated; }

/* Iscrizione: verifica umana e messaggi di invio. */
.human-check { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:11px; }
.signup-form .human-check input { width:16px; height:16px; padding:0; margin:0; border:0; accent-color:var(--yellow); flex:0 0 auto; }
.human-check label { cursor:pointer; }
.website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-error { display:none; margin:10px 0 0; color:var(--yellow); font-size:10px; font-weight:700; }
.signup-form.has-error .form-error { display:block; }
.signup-form.has-error .form-note { display:none; }