/* ===== CONTISTA — varm vykortskänsla (enligt brand guideline) ===== */
:root{
  --rosa:#FDCDC2;        /* Brev Rosa – primär */
  --rosa-dyp:#F7B3A6;
  --rosa-deep:#A8432E;   /* mörk terrakotta för text på varm bakgrund (kontrast) */
  --solsand:#FDEDC5;     /* Solsand – sekundär */
  --skog:#063432;        /* Djup skog – text/accent */
  --frimarke:#C6D9A6;    /* Frimärksgrönt – accent */
  --papper:#FFFFFF;      /* Brevpapper – neutral */
  --ink:#063432;
  --muted:#4a615e;
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--papper);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
em{font-style:italic}
h1,h2,h3,h4,legend{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.12;color:var(--skog)}
.kicker{font-family:'Arial Black','Arial',sans-serif;font-weight:900;font-size:.74rem;letter-spacing:.18em;color:var(--skog);margin-bottom:16px;opacity:.85}
.kicker.light{color:var(--frimarke);opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:999px;font-family:'DM Sans';font-weight:700;font-size:.95rem;cursor:pointer;border:2px solid var(--skog);transition:.32s var(--ease);color:var(--skog)}
.btn-primary{background:var(--solsand)}
.btn-primary:hover{background:var(--skog);color:var(--solsand);transform:translateY(-2px)}
.btn-secondary{background:var(--rosa)}
.btn-secondary:hover{background:var(--skog);color:var(--rosa);transform:translateY(-2px)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(6,52,50,.1)}
.nav{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.8rem;font-weight:700;color:var(--skog)}
.nav-links{list-style:none;display:flex;gap:32px;align-items:center}
.nav-links a{font-size:.93rem;font-weight:600;color:var(--muted);transition:color .3s}
.nav-links a:hover{color:var(--skog)}
.nav-cta{padding:9px 20px;background:var(--solsand);color:var(--skog)!important;border-radius:999px;border:2px solid var(--skog)}
.nav-cta:hover{background:var(--skog);color:var(--solsand)!important}
.nav-toggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--skog);cursor:pointer}

/* Hero */
.hero{background:linear-gradient(165deg,var(--rosa) 0%,var(--solsand) 100%);padding:84px 28px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;max-width:1300px;margin:0 auto}
.hero-inner{max-width:580px}
.sticker{display:inline-block;background:var(--frimarke);color:var(--skog);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;padding:5px 16px;border-radius:999px;border:1.5px solid var(--skog);transform:rotate(-3deg);margin-bottom:20px}
.hero h1{font-size:clamp(2.7rem,6vw,4.6rem);margin-bottom:22px}
.hero h1 em{color:var(--rosa-deep)}
.hero-sub{font-size:1.14rem;color:var(--muted);margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hero-note{font-size:.88rem;color:var(--muted);font-weight:500}

.hero-postcard{position:relative;background:var(--papper);border:2px dashed var(--skog);border-radius:16px;padding:38px 32px;transform:rotate(2.5deg);box-shadow:0 24px 50px -30px rgba(6,52,50,.5)}
.hero-postcard .stamp{position:absolute;top:-16px;right:24px;width:48px;height:54px;background:var(--rosa);border:2px solid var(--skog);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;transform:rotate(6deg)}
.pc-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem;color:var(--skog);margin-bottom:14px}
.pc-body{font-size:1.05rem;color:var(--muted);margin-bottom:18px}
.pc-sign{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--rosa-dyp)}

/* Hero visuals (postcard + polaroid) */
.hero-visuals{display:flex;flex-direction:column;gap:26px;align-items:center}

/* Polaroid (fysisk bild, uppnålad) */
.polaroid{background:#fff;padding:9px 9px 32px;border-radius:4px;box-shadow:0 18px 38px -16px rgba(6,52,50,.55);position:relative;display:block;width:100%;max-width:360px;transition:transform .35s var(--ease)}
.polaroid img{display:block;width:100%;height:auto;border-radius:2px;border:1px solid rgba(6,52,50,.07)}
.polaroid figcaption{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:var(--skog);text-align:center;margin-top:10px}
.polaroid .pin{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#f7b9aa,var(--rosa-deep));box-shadow:0 4px 7px rgba(6,52,50,.4);border:2px solid #fff;z-index:2}
.polaroid.tilt-l{transform:rotate(-3.5deg)}
.polaroid.tilt-r{transform:rotate(3deg)}
.polaroid.tilt-s{transform:rotate(-1.5deg)}
.polaroid:hover{transform:rotate(0) scale(1.02)}
.hero-polaroid{max-width:330px}

/* Smygtitt-sektion */
.peek{padding:82px 28px;background:var(--papper)}
.peek-grid{max-width:920px;margin:0 auto;display:flex;gap:54px;justify-content:center;flex-wrap:wrap}
.peek .polaroid{max-width:400px}

.marquee{background:var(--skog);color:var(--solsand);overflow:hidden;padding:14px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:24px;align-items:center;animation:scroll 24s linear infinite;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem}
@keyframes scroll{to{transform:translateX(-50%)}}

.section-head{max-width:820px;margin:0 auto 44px;padding:0 28px;text-align:center}
.section-head h2{font-size:clamp(2rem,4.4vw,3.1rem)}

/* Advantage / founding members */
.advantage{background:var(--skog);color:var(--solsand);padding:84px 28px}
.advantage-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.kicker.on-dark{color:var(--frimarke);opacity:1}
.advantage h2{color:var(--solsand);font-size:clamp(2rem,4.4vw,3rem);max-width:780px;margin:0 auto 16px}
.advantage-lead{color:rgba(253,237,197,.82);max-width:620px;margin:0 auto 44px;font-size:1.1rem}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;margin-bottom:40px}
.perk{background:rgba(253,237,197,.07);border:1px solid rgba(253,237,197,.22);border-radius:14px;padding:28px 24px}
.perk-num{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--rosa);letter-spacing:.1em}
.perk h4{color:var(--solsand);font-size:1.45rem;margin:8px 0 10px}
.perk p{color:rgba(253,237,197,.78);font-size:.96rem}

/* Features */
.features{padding:86px 28px;background:var(--papper)}
.features-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{background:var(--solsand);border:2px solid var(--skog);border-radius:18px;padding:36px 30px;transition:.4s var(--ease)}
.feature-card.alt{background:var(--rosa)}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 24px 46px -28px rgba(6,52,50,.5)}
.feature-emoji{font-size:2.1rem;margin-bottom:14px}
.feature-card h3{font-size:1.85rem;margin-bottom:10px}
.feature-card p{font-size:1.02rem;color:var(--muted)}

/* How */
.how{padding:86px 28px;background:var(--frimarke)}
.how .section-head h2{color:var(--skog)}
.how-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.how-step{background:var(--papper);border:2px solid var(--skog);border-radius:18px;padding:32px 28px;text-align:center}
.how-num{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--rosa);border:2px solid var(--skog);font-family:'Cormorant Garamond',serif;font-size:1.5rem;margin-bottom:16px}
.how-step h4{font-size:1.5rem;margin-bottom:8px}
.how-step p{font-size:.98rem;color:var(--muted)}

/* Waitlist / form */
.waitlist{padding:90px 28px;background:linear-gradient(180deg,var(--solsand),var(--rosa))}
.waitlist-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.waitlist-intro h2{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:6px 0 18px}
.waitlist-intro h2 em{color:var(--rosa-deep)}
.waitlist-lead{font-size:1.08rem;color:var(--muted);margin-bottom:20px}
.waitlist-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.waitlist-badges span{font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--skog);border:2px solid var(--skog);border-radius:999px;padding:5px 14px}
.waitlist-mail{color:var(--muted)}
.waitlist-mail a{color:var(--skog);font-weight:700;border-bottom:2px solid currentColor}

.form-shell{background:var(--papper);border:2px solid var(--skog);border-radius:20px;padding:40px;position:relative;min-height:440px;box-shadow:0 34px 70px -38px rgba(6,52,50,.6)}
.form-progress{height:5px;background:var(--solsand);border:1px solid rgba(6,52,50,.2);border-radius:999px;overflow:hidden}
.form-progress-bar{height:100%;width:20%;background:var(--skog);border-radius:999px;transition:width .45s var(--ease)}
.form-step-label{font-family:'Arial Black','Arial',sans-serif;font-size:.76rem;letter-spacing:.1em;color:var(--muted);margin:14px 0 24px}

.step{border:none;display:none;animation:fade .45s var(--ease)}
.step.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step legend{font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--skog);margin-bottom:20px;font-weight:600;line-height:1.15}
.step legend .multi{font-family:'DM Sans';font-size:.85rem;font-weight:500;color:var(--muted);display:inline-block}

.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option-grid.one-col{grid-template-columns:1fr}
.option{position:relative;cursor:pointer}
.option input{position:absolute;opacity:0}
.option span{display:block;padding:15px 18px;border:2px solid rgba(6,52,50,.25);border-radius:12px;font-weight:600;transition:.25s;font-size:.95rem}
.option:hover span{border-color:var(--skog)}
.option input:checked+span{background:var(--skog);color:var(--solsand);border-color:var(--skog)}

.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:7px;color:var(--skog)}
.field .opt{color:var(--muted);font-weight:400}
input[type=text],input[type=email],textarea{width:100%;padding:14px 16px;border:2px solid rgba(6,52,50,.25);border-radius:12px;font-family:'DM Sans';font-size:1rem;color:var(--ink);background:var(--papper);transition:.25s}
input:focus,textarea:focus{outline:none;border-color:var(--skog);background:#fffdf8}
textarea{resize:vertical}

.form-error{color:#9a2b2b;font-size:.9rem;font-weight:600;margin-top:14px;min-height:20px}
.form-nav{display:flex;gap:12px;justify-content:space-between;margin-top:28px}
#btnNext,#btnSubmit{margin-left:auto}

.form-success{position:absolute;inset:0;background:var(--papper);border-radius:18px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;animation:fade .5s var(--ease)}
.form-success:not([hidden]){display:flex}
.success-mark{width:70px;height:70px;border-radius:50%;background:var(--frimarke);border:2px solid var(--skog);color:var(--skog);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:20px}
.form-success h3{font-size:2.1rem;margin-bottom:12px}
.form-success p{color:var(--muted);max-width:380px}

.site-footer{background:var(--skog);color:var(--solsand);padding:64px 28px 36px}
.footer-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.footer-brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2.3rem;margin-bottom:10px}
.footer-tag{color:rgba(253,237,197,.78);margin-bottom:24px}
.footer-links{display:flex;gap:26px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}
.footer-links a{color:var(--rosa);font-size:.95rem;font-weight:600;transition:color .3s}
.footer-links a:hover{color:#fff}
.footer-copy{font-size:.82rem;color:rgba(253,237,197,.5);border-top:1px solid rgba(253,237,197,.2);padding-top:24px}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 22px;background:var(--skog);box-shadow:0 -10px 30px -18px rgba(0,0,0,.5);transform:translateY(130%);transition:transform .42s var(--ease)}
.sticky-cta.visible{transform:none}
.sticky-cta span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:var(--solsand)}
.sticky-cta .btn{background:var(--solsand);color:var(--skog);border:2px solid var(--solsand);padding:10px 26px}
.sticky-cta .btn:hover{background:var(--rosa);border-color:var(--rosa);color:var(--skog)}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--papper);padding:20px 28px;gap:16px;border-bottom:1px solid rgba(6,52,50,.12)}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-inner{max-width:none}
  .hero-actions{justify-content:center}
  .hero-postcard{max-width:420px;margin:10px auto 0}
  .features-grid,.how-grid{grid-template-columns:1fr}
  .waitlist-grid{grid-template-columns:1fr;gap:38px}
  .perks-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hero{padding:64px 22px}
  .option-grid{grid-template-columns:1fr}
  .form-shell{padding:28px 22px}
  .perks-grid{grid-template-columns:1fr}
  .sticky-cta span{display:none}
  .sticky-cta{padding:12px 16px}
}