/*
  Coverkort alpha-design
  Et varmere, mere redaktionelt lag oven på den funktionsafprøvede v17.
*/

:root{
  --bg:#fbf6ee;
  --panel:#fffdf9;
  --panel-soft:#f6eee4;
  --text:#2b2321;
  --muted:#71645f;
  --line:#dfd2c8;
  --line-strong:#cbb8ac;
  --primary:#e43461;
  --primary-dark:#bd2049;
  --primary-soft:#ffe3e9;
  --success:#28715a;
  --success-soft:#e4f1ea;
  --danger:#a52c44;
  --danger-soft:#fff0f2;
  --cream:#fbf6ee;
  --rose:#f7e4e1;
  --peach:#f6cdbd;
  --sand:#eee1d3;
  --ink:#2b2321;
  --shadow:0 24px 70px rgba(79,53,43,.13);
  --shadow-small:0 12px 34px rgba(79,53,43,.11);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Avenir Next",Avenir,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{background:var(--cream)}
body.design-v1{
  background:
    radial-gradient(circle at 88% 7%,rgba(246,205,189,.54),transparent 25rem),
    radial-gradient(circle at 3% 34%,rgba(255,255,255,.82),transparent 30rem),
    var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-feature-settings:"kern" 1,"liga" 1;
}

.design-v1 h1,
.design-v1 h2,
.design-v1 h3{
  color:var(--ink);
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.045em;
}

.design-v1 p{letter-spacing:-.005em}
.design-v1 .lead{color:var(--muted)}

.design-v1 button:focus-visible,
.design-v1 a:focus-visible,
.design-v1 input:focus-visible,
.design-v1 textarea:focus-visible{
  outline:3px solid rgba(228,52,97,.27);
  outline-offset:4px;
}

/* Brand header */
.design-v1 .topbar{
  width:100%;
  height:78px;
  padding:0 max(24px,calc((100vw - 1380px)/2));
  background:rgba(251,246,238,.9);
  border-bottom:1px solid rgba(203,184,172,.68);
  box-shadow:none;
  backdrop-filter:blur(18px) saturate(130%);
}

.design-v1 .brand-lockup{gap:12px;color:var(--ink)}
.design-v1 .brand-name{
  font-family:var(--serif);
  font-size:1.34rem;
  font-weight:700;
  letter-spacing:-.045em;
}

.design-v1 .brand-mark{
  width:32px;
  height:32px;
  border:2px solid var(--primary);
  border-radius:10px;
  background:transparent;
  transform:rotate(-4deg);
}

.design-v1 .brand-mark:before{
  width:8px;
  height:8px;
  left:5px;
  top:5px;
  border:2px solid var(--primary);
  box-shadow:10px 10px 0 -2px var(--cream),10px 10px 0 0 var(--primary);
}

.design-v1 .top-actions{gap:26px}
.design-v1 .top-link{
  color:var(--muted);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.01em;
}
.design-v1 .top-link:hover{color:var(--primary)}

/* Branded controls */
.design-v1 .btn{
  min-height:48px;
  border-radius:14px;
  padding:14px 21px;
  font-size:.93rem;
  font-weight:800;
  letter-spacing:-.012em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.design-v1 .btn.primary{
  background:var(--primary);
  color:#fffaf6;
  box-shadow:0 10px 24px rgba(228,52,97,.22);
}
.design-v1 .btn.primary:hover:not(:disabled){
  background:var(--primary-dark);
  box-shadow:0 14px 28px rgba(189,32,73,.25);
  transform:translateY(-2px);
}
.design-v1 .btn.primary:active:not(:disabled){transform:translateY(0)}
.design-v1 .btn.primary:disabled{box-shadow:none}
.design-v1 .btn.secondary{
  border:1px solid var(--line-strong);
  background:rgba(255,253,249,.62);
}

/* Landing page */
.landing-page .site-shell{max-width:1360px;padding:0 30px}
.landing-page .landing-section{
  padding:82px 0;
  border-top:1px solid rgba(203,184,172,.62);
}
.landing-page #inspiration,
.landing-page #vaer-med{
  scroll-margin-top:102px;
}
.landing-page .landing-section:first-of-type{
  min-height:0;
  padding:28px 0 38px;
  display:grid;
  align-items:center;
  overflow-x:clip;
  border-top:0;
}

.landing-page .hero-stage-grid{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:center;
}
.landing-page .hero-panel{
  min-height:650px;
  grid-template-columns:minmax(520px,1.12fr) minmax(350px,.78fr);
  gap:32px;
  padding:26px 0;
  isolation:isolate;
}
.landing-page .hero-panel:after{
  width:430px;
  height:430px;
  right:-60px;
  top:15px;
  background:radial-gradient(circle,rgba(246,205,189,.74),rgba(247,228,225,.35) 56%,transparent 70%);
  opacity:1;
  z-index:0;
}
.landing-page .hero-copy{padding:22px 0}
.landing-page .hero-title-rule,
.upload-page .section-rule{
  width:84px;
  height:4px;
  margin-bottom:22px;
  border-radius:999px;
  background:var(--primary);
  transform:rotate(-1.5deg);
}
.landing-page .hero-copy h1{
  max-width:720px;
  margin-bottom:25px;
  font-size:clamp(3.8rem,5vw,4.8rem);
  line-height:.89;
  letter-spacing:-.068em;
  white-space:nowrap;
}
.landing-page .hero-title-accent{color:var(--primary)}
.landing-page .hero-copy .lead{
  max-width:610px;
  font-size:1.08rem;
  line-height:1.66;
}
.landing-page .hero-copy .lead strong{
  color:var(--ink);
  font-weight:750;
}
.landing-page .hero-promise{
  position:relative;
  max-width:610px;
  margin-top:25px;
  padding:4px 0 4px 22px;
  border:0;
  border-left:3px solid var(--primary);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.58;
}
.landing-page .hero-promise strong{color:var(--ink)}
.landing-page .hero-actions{margin-top:30px}
.landing-page .hero-actions .btn{min-width:218px}
.landing-page .hero-micro{margin-top:13px;color:#887872;font-size:.78rem}

/* Hero phone product composition */
.landing-page .hero-visual{height:620px;isolation:isolate;z-index:1}
.landing-page .hero-visual:before{
  width:410px;
  height:410px;
  border:1px solid rgba(228,52,97,.18);
  background:radial-gradient(circle at 50% 46%,rgba(255,253,249,.92),rgba(247,228,225,.62) 58%,transparent 59%);
}
.landing-page .showcase-phone,
.upload-page .demo-phone,
.upload-page .preview-phone{
  background:linear-gradient(145deg,#403836,#171413 62%,#080706);
  box-shadow:0 30px 62px rgba(54,35,29,.28),0 3px 10px rgba(54,35,29,.2);
}
.landing-page .showcase-phone{
  width:194px;
  height:403px;
  border-radius:42px;
  padding:7px;
}
.landing-page .showcase-phone:before,
.upload-page .demo-phone:before,
.upload-page .preview-phone:before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:-1;
  border:2px solid rgba(255,255,255,.65);
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(228,52,97,.16);
  opacity:.8;
}
.landing-page .showcase-phone:after{
  inset:7px;
  border-color:rgba(255,255,255,.55);
  border-radius:34px;
}
.landing-page .showcase-art{inset:7px;border-radius:34px}
.landing-page .showcase-phone.main{left:48%;top:40px;transform:translateX(-50%) rotate(-3deg)}
.landing-page .showcase-phone.left{left:-2%;top:137px;transform:rotate(-13deg) scale(.72)}
.landing-page .showcase-phone.right{right:-1%;top:132px;transform:rotate(12deg) scale(.69)}
.landing-page .showcase-camera,
.upload-page .demo-camera,
.upload-page .preview-camera{
  background:linear-gradient(145deg,#211d1c,#080707);
  box-shadow:0 0 0 3px rgba(255,255,255,.3),0 5px 12px rgba(0,0,0,.25);
}
.landing-page .hero-note-svg{display:none!important}
.landing-page .hero-visual:after{
  content:"skift kort, når humøret skifter";
  position:absolute;
  right:-4px;
  bottom:36px;
  width:270px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32'%3E%3Cpath d='M33 29 6 3M6 3l2 14M6 3l14 2' fill='none' stroke='%23e43461' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left .05em;
  background-size:2em 1.75em;
  color:var(--primary);
  font-family:"Bradley Hand","Segoe Print",cursive;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.2;
  text-align:right;
  transform:rotate(-3deg);
}
.landing-page .hero-switcher{bottom:2px;gap:10px}
.landing-page .hero-dot{
  width:8px;
  height:8px;
  background:#bca9a0;
  border:0;
  box-shadow:none;
}
.landing-page .hero-dot.active{width:25px;border-radius:999px;background:var(--primary)}

/* Et fysisk, roligt skift af coverkortet i hero-telefonen */
.landing-page #heroArt{
  transform-origin:50% 88%;
  will-change:transform,opacity;
}
.landing-page #heroArt:after{
  background:
    linear-gradient(112deg,transparent 35%,rgba(255,255,255,.58) 48%,transparent 61%) -180% 0/68% 100% no-repeat,
    linear-gradient(140deg,rgba(255,255,255,.22),transparent 32%,transparent 74%,rgba(0,0,0,.12));
}
.landing-page #heroArt.hero-art-out{
  animation:hero-card-out 170ms cubic-bezier(.4,0,1,1) both;
}
.landing-page #heroArt.hero-art-in{
  animation:hero-card-in 350ms cubic-bezier(.16,1,.3,1) both;
}
.landing-page #heroArt.hero-art-sheen:after{
  animation:hero-cover-sheen 520ms ease-out 70ms both;
}
@keyframes hero-card-out{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(12px) scale(.985)}
}
@keyframes hero-card-in{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes hero-cover-sheen{
  from{background-position:-180% 0,0 0}
  to{background-position:280% 0,0 0}
}

/* Inspiration column */
.landing-page .hero-side-panel{
  min-height:620px;
  padding:26px 0 24px 36px;
  border-left:1px solid var(--line);
}
.landing-page .hero-side-panel h2{
  font-size:1.72rem;
  line-height:1.03;
}
.landing-page .hero-side-underline{
  width:112px;
  height:3px;
  margin:16px auto 22px;
  background:var(--primary);
}
.landing-page .hero-side-grid{gap:13px}
.landing-page .hero-side-card{
  border:0;
  border-radius:16px;
  background:#fffaf5;
  box-shadow:var(--shadow-small);
}
.landing-page .hero-side-card:hover{
  border-color:transparent;
  background:#fffdf9;
  box-shadow:0 18px 38px rgba(79,53,43,.16);
}
.landing-page .hero-side-visual{height:112px;border-radius:16px 16px 0 0}
.landing-page .hero-side-caption{
  min-height:48px;
  color:var(--ink);
  font-size:.76rem;
  font-weight:750;
}
.landing-page .hero-side-icon{color:var(--primary)}
.landing-page .side-handnote{
  margin-top:22px;
  color:var(--primary);
  font-family:"Bradley Hand","Segoe Print",cursive;
  font-size:1rem;
  font-weight:700;
  transform:rotate(-2deg);
}

/* Inspiration strip */
.landing-page #inspiration{
  position:relative;
  overflow:hidden;
  background:var(--sand);
}
.landing-page #inspiration:before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:-210px;
  bottom:-265px;
  border-radius:50%;
  background:var(--peach);
  opacity:.6;
}
.landing-page #inspiration .site-shell{position:relative;max-width:1420px}
.landing-page .centered-heading{margin-bottom:42px}
.landing-page .centered-heading:before{
  content:"ET COVER. MANGE UDTRYK.";
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.16em;
}
.landing-page .centered-heading h2{font-size:clamp(2.4rem,4vw,4rem);line-height:.96}
.landing-page .inspiration-grid-eight{gap:18px 12px}
.landing-page .inspiration-grid-eight .inspiration-card{
  flex-basis:calc((100% - 72px)/7);
  padding:7px 4px;
  transition:transform .2s ease;
}
.landing-page .inspiration-grid-eight .inspiration-card:nth-child(odd){transform:rotate(-1deg)}
.landing-page .inspiration-grid-eight .inspiration-card:nth-child(even){transform:translateY(12px) rotate(1deg)}
.landing-page .inspiration-grid-eight .inspiration-card:hover{transform:translateY(-7px) rotate(0)}
.landing-page .inspiration-grid-eight .mini-phone{
  width:136px;
  height:282px;
  border-radius:30px;
  background:linear-gradient(145deg,#403836,#171413 65%,#080706);
  box-shadow:0 20px 38px rgba(54,35,29,.2);
}
.landing-page .inspiration-grid-eight .showcase-art{border-radius:24px}
.landing-page .inspiration-grid-eight .inspiration-card p{
  margin-top:14px;
  color:#51433f;
  font-size:.83rem;
  font-weight:650;
  line-height:1.43;
}

/* Final invitation */
.landing-page .landing-section:last-of-type{padding:90px 0;background:#fffaf5}
.landing-page .early-panel{grid-template-columns:minmax(0,1fr) minmax(340px,.58fr);gap:80px}
.landing-page .early-panel > div:first-child:before{
  content:"DEN FØRSTE SERIE";
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.16em;
}
.landing-page .early-panel h2{font-size:clamp(2.4rem,4vw,3.8rem);line-height:.98}
.landing-page .early-panel .lead{margin-top:16px;font-size:1.04rem}
.landing-page .early-list{gap:13px;margin-top:25px}
.landing-page .early-item{color:var(--muted)}
.landing-page .early-check{
  width:24px;
  height:24px;
  background:var(--primary-soft);
  color:var(--primary);
}
.landing-page .first-card{
  position:relative;
  overflow:hidden;
  padding:34px;
  border-radius:24px;
  background:var(--ink);
  box-shadow:0 24px 52px rgba(54,35,29,.18);
}
.landing-page .first-card:after{
  content:"♡";
  position:absolute;
  right:18px;
  top:8px;
  color:rgba(255,255,255,.09);
  font-family:var(--serif);
  font-size:7rem;
  transform:rotate(12deg);
}
.landing-page .first-card h3{position:relative;z-index:1;color:#fffaf6;font-size:1.65rem}
.landing-page .first-card p{position:relative;z-index:1;color:#d9cbc5}
.landing-page .first-card .btn{position:relative;z-index:1}
.landing-page .site-footer{
  max-width:1360px;
  padding:30px;
  border-top:1px solid var(--line);
  color:#8b7b75;
}

/* Upload page */
.upload-page .page-shell{width:min(1380px,100%);padding:0 30px}
.upload-page .page-intro{
  position:relative;
  overflow:hidden;
  padding:70px 0 56px;
  border-bottom:1px solid var(--line);
}
.upload-page .page-intro:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-170px;
  top:-210px;
  width:570px;
  height:570px;
  border-radius:50%;
  background:rgba(246,205,189,.56);
}
.upload-page .page-intro-grid{
  grid-template-columns:minmax(0,1fr) 420px;
  gap:72px;
}
.upload-page .page-intro-grid > div:first-child:before{
  content:"GØR DET PERSONLIGT";
  display:block;
  margin-bottom:14px;
  color:var(--primary);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.16em;
}
.upload-page .page-intro .section-rule{display:none}
.upload-page .page-intro h1{
  max-width:900px;
  margin-bottom:23px;
  font-size:clamp(3.8rem,5.7vw,5.8rem);
  line-height:.9;
  letter-spacing:-.067em;
}
.upload-page .page-intro h1 .accent{color:var(--primary)}
.upload-page .page-intro h1 .title-keep{white-space:nowrap}
.upload-page .page-intro .lead{max-width:760px;font-size:1.04rem;line-height:1.66}
.upload-page .page-intro .lead + .lead{margin-top:10px}

.upload-page .phone-scene{height:400px}
.upload-page .phone-scene:before{
  width:350px;
  height:350px;
  border:1px solid rgba(228,52,97,.18);
  background:radial-gradient(circle at 50% 45%,#fffdf9,var(--rose) 61%,transparent 62%);
}
.upload-page .demo-phone{width:154px;height:320px;border-radius:34px}
.upload-page .demo-phone.main{top:12px}
.upload-page .demo-phone.left{left:8px;top:73px}
.upload-page .demo-phone.right{right:8px;top:75px}

/* Upload collection */
.upload-page .upload-gallery-section{
  position:relative;
  padding:72px 0 88px;
  background:#fffaf5;
}
.upload-page .upload-gallery-section .page-shell{width:min(1660px,100%)}
.upload-page .upload-section-heading{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}
.upload-page .upload-section-heading span{
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.upload-page .upload-section-heading h2{
  margin-bottom:12px;
  font-size:clamp(2.35rem,3.7vw,3.5rem);
  line-height:.98;
}
.upload-page .upload-section-heading p{color:var(--muted);line-height:1.58}
.upload-page .upload-gallery-section .preview-grid{gap:34px 18px}
@media(min-width:1340px){
  .upload-page .upload-gallery-section .preview-grid{flex-wrap:nowrap}
  .upload-page .upload-gallery-section .preview,
  .upload-page .upload-gallery-section .upload-phone-tile{
    width:auto;
    min-width:0;
    max-width:188px;
    flex:1 1 188px;
  }
  .upload-page .upload-gallery-section .preview-phone,
  .upload-page .upload-gallery-section .upload-phone-tile{
    width:100%;
    height:auto;
    aspect-ratio:188 / 390;
  }
}
.upload-page .preview-phone{
  overflow:hidden;
  background:#20262b;
  box-shadow:0 25px 50px rgba(31,41,51,.20);
}
.upload-page .preview-phone:before{content:none}
.upload-page .preview-phone:after{border-color:rgba(255,255,255,.42)}
.upload-page .preview-camera{
  background:#101417;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.upload-page .preview-image{overflow:hidden}
.upload-page .preview:hover .preview-phone{transform:translateY(-8px) rotate(-.7deg)}
.upload-page .remove{
  right:-9px;
  top:-9px;
  background:var(--primary);
  box-shadow:0 8px 18px rgba(228,52,97,.26);
}
.upload-page .remove:hover{background:var(--primary-dark)}
.upload-page .upload-phone-tile{
  border:2px dashed #d58ca0;
  background:linear-gradient(145deg,#fffdf9,#faeceb);
  color:var(--ink);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.52);
}
.upload-page .upload-phone-tile:hover,
.upload-page .upload-phone-tile.drag{
  border-color:var(--primary);
  background:var(--primary-soft);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.6),0 22px 44px rgba(79,53,43,.12);
}
.upload-page .upload-camera-guide{border-color:rgba(228,52,97,.32)}
.upload-page .upload-camera-guide span,
.upload-page .upload-camera-guide i{border-color:rgba(228,52,97,.42)}
.upload-page .upload-phone-tile .drop-icon{
  border:0;
  border-radius:16px;
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 24px rgba(228,52,97,.23);
}
.upload-page .upload-phone-tile h2{font-family:var(--serif);font-size:1.25rem;font-weight:650}
.upload-page .upload-phone-tile p{color:var(--muted)}
.upload-page .upload-format{color:#917e77!important}
.upload-page .validation{
  max-width:680px;
  margin:28px auto 0;
  border-color:#efbdc8;
  background:var(--danger-soft);
}

.upload-page .upload-continue-cue{
  width:max-content;
  margin:42px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:#9a8981;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:750;
  cursor:pointer;
  transition:color 180ms ease,transform 180ms ease;
}

.upload-page .upload-continue-cue svg{
  display:block;
  width:52px;
  height:27px;
  overflow:visible;
  color:var(--primary);
  animation:upload-continue-cue 1.8s ease-in-out infinite;
}

.upload-page .upload-continue-cue path{
  fill:none;
  stroke:currentColor;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.upload-page .upload-continue-cue:hover,
.upload-page .upload-continue-cue:focus-visible{
  color:var(--primary);
  transform:translateY(3px);
}

.upload-page .upload-continue-cue:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:8px;
  border-radius:8px;
}

@keyframes upload-continue-cue{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

.landing-page .section-continue-cue{
  width:max-content;
  margin:32px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:750;
  cursor:pointer;
  transition:color 180ms ease,transform 180ms ease;
}

.landing-page .hero-continue-cue{
  margin-top:-4px;
}

.landing-page .inspiration-continue-cue{
  margin-top:38px;
}

.landing-page .section-continue-cue svg{
  display:block;
  width:52px;
  height:27px;
  overflow:visible;
  color:var(--primary);
  animation:upload-continue-cue 1.8s ease-in-out infinite;
}

.landing-page .section-continue-cue path{
  fill:none;
  stroke:currentColor;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.landing-page .section-continue-cue:hover,
.landing-page .section-continue-cue:focus-visible{
  color:var(--primary);
  transform:translateY(3px);
}

.landing-page .section-continue-cue:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:8px;
  border-radius:8px;
}

/* Upload notes and continuation */
.upload-page .upload-bottom-section{
  padding:82px 0 88px;
  border-top:1px solid var(--line);
  background:var(--rose);
}
.upload-page .upload-bottom-panel{gap:80px}
.upload-page .upload-note-area h2{font-size:2.15rem}
.upload-page .upload-note-area h2 .small{
  color:var(--muted);
  font-family:var(--sans);
  font-size:.77rem;
  font-weight:650;
  letter-spacing:0;
}
.upload-page .upload-note-area textarea{
  min-height:145px;
  border:1px solid #d8beb8;
  border-radius:16px;
  background:#fffdf9;
  color:var(--ink);
  box-shadow:0 10px 28px rgba(79,53,43,.06);
}
.upload-page .upload-note-area textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(228,52,97,.11);
}
.upload-page .upload-next-card{
  position:relative;
  overflow:hidden;
  padding:36px;
  border-radius:24px;
  background:var(--ink);
  box-shadow:0 24px 52px rgba(54,35,29,.18);
}
.upload-page .upload-next-card:before{
  content:"2";
  position:absolute;
  right:22px;
  top:-24px;
  color:rgba(255,255,255,.06);
  font-family:var(--serif);
  font-size:9rem;
  line-height:1;
}
.upload-page .upload-next-card h3{position:relative;color:#fffaf6;font-size:1.75rem}
.upload-page .upload-next-card p{position:relative;color:#d9cbc5}
.upload-page .upload-next-card .btn{position:relative}
.upload-page .upload-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width:1380px;
  margin:0 auto;
  padding:28px 30px;
  color:#8b7b75;
  font-size:.8rem;
}

/* Contact page */
.contact-page .page-shell{
  width:min(1380px,100%);
  margin:0 auto;
  padding:0 30px;
}
.contact-page .page-intro{
  position:relative;
  z-index:0;
  overflow:hidden;
  padding:72px 0 58px;
  border-bottom:1px solid var(--line);
}
.contact-page .page-intro:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-130px;
  top:-220px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:rgba(246,205,189,.58);
}
.contact-page .page-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:76px;
  align-items:center;
}
.contact-page .page-intro-grid > div:first-child:before{
  content:"TRIN 3 AF 3";
  display:block;
  margin-bottom:15px;
  color:var(--primary);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.16em;
}
.contact-page .page-intro .section-rule{display:none}
.contact-page .page-intro h1{
  max-width:860px;
  margin:0 0 24px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(3.7rem,5.4vw,5.6rem);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.067em;
}
.contact-page .page-intro h1 .accent{color:var(--primary)}
.contact-page .page-intro .lead{
  max-width:730px;
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.66;
}
.contact-page .page-intro .lead + .lead{margin-top:10px}

/* The visitor's uploaded coverkort */
.contact-page .phone-scene{height:400px}
.contact-page .phone-scene:before{
  width:350px;
  height:350px;
  border:1px solid rgba(228,52,97,.18);
  background:radial-gradient(circle at 50% 45%,#fffdf9,var(--rose) 61%,transparent 62%);
}
.contact-page .demo-phone{
  width:154px;
  height:320px;
  border-radius:34px;
  background:linear-gradient(145deg,#403836,#171413 62%,#080706);
  box-shadow:0 30px 62px rgba(54,35,29,.28),0 3px 10px rgba(54,35,29,.2);
}
.contact-page .demo-phone:before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:-1;
  border:2px solid rgba(255,255,255,.65);
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(228,52,97,.16);
  opacity:.8;
}
.contact-page .demo-phone:after{border-color:rgba(255,255,255,.55)}
.contact-page .demo-camera{
  background:linear-gradient(145deg,#211d1c,#080707);
  box-shadow:0 0 0 3px rgba(255,255,255,.3),0 5px 12px rgba(0,0,0,.25);
}

/* Contact form and summary */
.contact-page .page-content{
  padding:82px 0 92px;
  background:#fffaf5;
}
.contact-page .contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(330px,.58fr);
  gap:76px;
  align-items:start;
}
.contact-page .contact-form{
  padding-right:0;
  border-right:0;
  position:relative;
}
.contact-page .contact-trap{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.contact-page .contact-form:before{
  content:"DINE OPLYSNINGER";
  display:block;
  margin-bottom:24px;
  color:var(--primary);
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.16em;
}
.contact-page .form-grid{gap:21px 18px}
.contact-page .field{gap:9px}
.contact-page .field label{
  color:var(--ink);
  font-size:.87rem;
  font-weight:800;
}
.contact-page .field label .small{
  color:var(--muted);
  font-weight:600;
}
.contact-page .field input,
.contact-page .field textarea{
  padding:17px 18px;
  border:1px solid #d8c9c0;
  border-radius:14px;
  background:#fffdf9;
  color:var(--ink);
  box-shadow:0 8px 24px rgba(79,53,43,.045);
}
.contact-page .field textarea{min-height:132px}
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder{color:#a3948d}
.contact-page .field input:focus,
.contact-page .field textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(228,52,97,.11);
}
.contact-page .checkbox{
  grid-template-columns:23px minmax(0,1fr);
  gap:12px;
  margin-top:20px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
}
.contact-page .checkbox input{
  width:19px;
  height:19px;
  accent-color:var(--primary);
}
.contact-page .checkbox strong{color:var(--ink)}
.contact-page .notice{
  margin-top:28px;
  padding:4px 0 4px 20px;
  border:0;
  border-left:3px solid var(--primary);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:.92rem;
}
.contact-page .notice strong{color:var(--ink)}
.contact-page .validation{
  border-color:#efbdc8;
  background:var(--danger-soft);
  color:var(--danger);
}
.contact-page .actions{
  justify-content:flex-start;
  gap:12px;
  margin-top:30px;
}
.contact-page .btn.secondary{
  border-color:var(--line-strong);
  background:transparent;
  color:var(--ink);
}
.contact-page .btn.secondary:hover{background:var(--sand)}

.contact-page .choice-rail{
  position:sticky;
  top:108px;
  overflow:hidden;
  padding:34px;
  border:1px solid rgba(203,184,172,.72);
  border-radius:24px;
  background:var(--sand);
  box-shadow:0 18px 44px rgba(79,53,43,.08);
}
.contact-page .choice-rail:after{
  content:"♡";
  position:absolute;
  right:15px;
  top:0;
  color:rgba(228,52,97,.11);
  font-family:var(--serif);
  font-size:6rem;
  transform:rotate(12deg);
}
.contact-page .choice-rail .section-rule{
  position:relative;
  z-index:1;
  width:66px;
  height:3px;
  margin-bottom:17px;
  background:var(--primary);
  transform:rotate(-1.5deg);
}
.contact-page .choice-rail h2{
  position:relative;
  z-index:1;
  margin-bottom:24px;
  font-size:2rem;
  line-height:1.02;
}
.contact-page .choice-details{
  position:relative;
  z-index:1;
  margin-top:0;
  border-top:1px solid rgba(178,157,145,.65);
}
.contact-page .choice-row{
  padding:17px 0;
  border-bottom:1px solid rgba(178,157,145,.65);
}
.contact-page .choice-row span:first-child{
  color:var(--muted);
  font-size:.84rem;
  font-weight:700;
}
.contact-page .choice-row span:last-child{
  color:var(--ink);
  font-size:.9rem;
  font-weight:800;
}

/* Contact confirmation */
.contact-page .success-view{
  max-width:900px;
  min-height:calc(100vh - 78px);
  display:grid;
  align-content:center;
  justify-items:center;
  margin:0 auto;
  padding:72px 30px;
  text-align:center;
}
.contact-page .success-icon{
  width:74px;
  height:74px;
  margin-bottom:22px;
  background:var(--primary-soft);
  color:var(--primary);
}
.contact-page .success-view h1{
  margin-bottom:18px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.4vw,5.2rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.06em;
}
.contact-page .success-view .lead{color:var(--muted)}
.contact-page .success-box{
  width:100%;
  margin-top:30px;
  padding:22px;
  border:1px solid #d6c7bd;
  border-radius:18px;
  background:#fffdf9;
  color:var(--muted);
  box-shadow:var(--shadow-small);
}
.contact-page .success-box strong{color:var(--ink)}
.contact-page .contact-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width:1380px;
  margin:0 auto;
  padding:28px 30px;
  color:#8b7b75;
  font-size:.8rem;
}

@media(max-width:1300px){
  .landing-page .hero-stage-grid{grid-template-columns:1fr;gap:45px}
  .landing-page .hero-side-panel{
    display:none;
    min-height:0;
    padding:44px 0 0;
    border-top:1px solid var(--line);
    border-left:0;
  }
  .landing-page .hero-side-grid{grid-template-columns:repeat(3,1fr);max-width:920px}
  .landing-page .hero-side-visual{height:150px}
  .landing-page .side-handnote{text-align:center}
}

@media(min-width:1021px) and (max-width:1200px){
  .landing-page .landing-section:first-of-type{
    padding-top:12px;
    padding-bottom:24px;
  }
  .landing-page .hero-panel{
    min-height:590px;
    align-items:start;
    padding-top:0;
    padding-bottom:0;
  }
  .landing-page .hero-copy{
    padding-top:24px;
    padding-bottom:0;
  }
  .landing-page .hero-visual{
    height:560px;
  }
}

/* Brede, men lave laptopvinduer: hold ned-linket synligt på første skærmbillede */
@media(min-width:1201px) and (max-height:900px){
  .landing-page .landing-section:first-of-type{
    padding-top:12px;
    padding-bottom:18px;
  }
  .landing-page .hero-panel{
    min-height:560px;
    padding-top:0;
    padding-bottom:0;
  }
  .landing-page .hero-copy{
    padding-top:0;
    padding-bottom:0;
  }
  .landing-page .hero-visual{
    height:540px;
  }
  .landing-page .hero-continue-cue{
    margin-top:-8px;
  }
}

@media(max-width:1020px){
  .landing-page .hero-panel{grid-template-columns:1fr;min-height:0}
  .landing-page .hero-copy{text-align:center}
  .landing-page .hero-title-rule{margin-left:auto;margin-right:auto}
  .landing-page .hero-copy h1,
  .landing-page .hero-copy .lead,
  .landing-page .hero-promise{margin-left:auto;margin-right:auto}
  .landing-page .hero-promise{text-align:left}
  .landing-page .hero-actions{justify-content:center}
  .landing-page .hero-visual{max-width:520px;width:100%;margin:0 auto}
  .landing-page .inspiration-grid-eight .inspiration-card{flex-basis:calc((100% - 36px)/4)}
  .landing-page .early-panel{grid-template-columns:1fr;gap:48px}
  .upload-page .page-intro-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .upload-page .page-intro-grid > div:first-child:before{margin-top:10px}
  .upload-page .page-intro .lead{margin-left:auto;margin-right:auto}
  .upload-page .phone-scene{max-width:440px;margin:0 auto;width:100%}
  .upload-page .upload-bottom-panel{grid-template-columns:1fr;gap:44px}
  .contact-page .page-intro-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .contact-page .page-intro .lead{margin-left:auto;margin-right:auto}
  .contact-page .phone-scene{max-width:440px;margin:0 auto;width:100%}
  .contact-page .contact-layout{grid-template-columns:1fr;gap:48px}
  .contact-page .choice-rail{position:static}
}

@media(max-width:700px){
  .design-v1 .topbar{height:68px;padding:0 17px}
  .landing-page #inspiration,
  .landing-page #vaer-med{scroll-margin-top:84px}
  .design-v1 .brand-mark{width:29px;height:29px}
  .design-v1 .brand-name{font-size:1.18rem}
  .design-v1 .top-actions .top-link{display:none}
  .design-v1 .top-cta{min-height:42px;padding:11px 14px;font-size:.78rem}
  .landing-page .site-shell,
  .upload-page .page-shell,
  .contact-page .page-shell{padding:0 17px}
  .landing-page .landing-section{padding:58px 0}
  .landing-page .landing-section:first-of-type{padding:34px 0 52px}
  .landing-page .hero-stage-grid{gap:38px}
  .landing-page .hero-panel{gap:0;padding:0}
  .landing-page .hero-copy{padding-top:14px}
  .landing-page .hero-copy h1{
    margin-bottom:22px;
    font-size:clamp(2.75rem,13.5vw,4.55rem);
    line-height:.9;
  }
  .landing-page .hero-copy .lead{font-size:.98rem;line-height:1.58}
  .landing-page .hero-promise{font-size:.87rem}
  .landing-page .hero-visual{height:535px;transform:none;margin-top:-16px}
  .landing-page .hero-visual:before{width:315px;height:315px}
  .landing-page .showcase-phone{transform-origin:center center}
  .landing-page .showcase-phone.main{left:50%;top:35px;transform:translateX(-50%) rotate(-3deg) scale(.84)}
  .landing-page .showcase-phone.left{left:-7%;top:140px;transform:rotate(-13deg) scale(.56)}
  .landing-page .showcase-phone.right{right:-7%;top:137px;transform:rotate(12deg) scale(.54)}
  .landing-page .hero-visual:after{right:4px;bottom:30px;width:234px;font-size:.95rem}
  .landing-page .hero-continue-cue{margin-top:24px}
  .landing-page .hero-side-panel{padding-top:35px}
  .landing-page .hero-side-grid{grid-template-columns:repeat(2,1fr)}
  .landing-page .hero-side-visual{height:118px}
  .landing-page .centered-heading{margin-bottom:28px}
  .landing-page .centered-heading h2{font-size:2.55rem}
  .landing-page .inspiration-grid-eight{gap:22px 10px}
  .landing-page .inspiration-grid-eight .inspiration-card{flex-basis:calc((100% - 10px)/2)}
  .landing-page .inspiration-grid-eight .inspiration-card:nth-child(even){transform:translateY(7px) rotate(1deg)}
  .landing-page .inspiration-grid-eight .mini-phone{width:126px;height:261px}
  .landing-page .early-panel h2{font-size:2.7rem}
  .landing-page .first-card{padding:28px}
  .landing-page .site-footer{padding:25px 17px;flex-direction:column}

  .upload-page .page-intro{padding:46px 0 32px}
  .upload-page .page-intro h1{font-size:3.35rem;line-height:.91}
  .upload-page .page-intro .lead{font-size:.94rem;line-height:1.58}
  .upload-page .phone-scene{height:300px;transform:scale(.84);margin-bottom:-25px}
  .upload-page .upload-gallery-section{padding:55px 0 66px}
  .upload-page .upload-section-heading{margin-bottom:34px}
  .upload-page .upload-section-heading h2{font-size:2.5rem}
  .upload-page .upload-section-heading p{font-size:.9rem}
  .upload-page .upload-gallery-section .preview-grid{gap:26px 12px}
  .upload-page .upload-continue-cue{margin-top:34px}
  .upload-page .upload-phone-tile h2{font-size:1rem}
  .upload-page .upload-bottom-section{padding:58px 0 62px}
  .upload-page .upload-note-area h2{font-size:1.85rem}
  .upload-page .upload-next-card{padding:28px}
  .upload-page .upload-footer{padding:24px 17px;flex-direction:column}

  .contact-page .page-intro{padding:46px 0 34px}
  .contact-page .page-intro h1{font-size:3.3rem;line-height:.91}
  .contact-page .page-intro .lead{font-size:.94rem;line-height:1.58}
  .contact-page .phone-scene{height:300px;transform:scale(.84);margin-bottom:-25px}
  .contact-page .page-content{padding:58px 0 66px}
  .contact-page .contact-layout{gap:40px}
  .contact-page .choice-rail{padding:28px}
  .contact-page .choice-rail h2{font-size:1.8rem}
  .contact-page .contact-footer{padding:24px 17px;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .upload-page .upload-continue-cue svg,
  .landing-page .section-continue-cue svg{animation:none}
}

/* Korte mobilskærme: lad produktet begynde på første skærmbillede uden at skjule indhold */
@media(max-width:430px) and (max-height:720px) and (orientation:portrait){
  .landing-page .landing-section:first-of-type{
    padding-top:18px;
    padding-bottom:40px;
  }
  .landing-page .hero-stage-grid,
  .landing-page .hero-panel{
    gap:0;
  }
  .landing-page .hero-copy{
    padding-top:0;
  }
  .landing-page .hero-title-rule{
    margin-bottom:14px;
  }
  .landing-page .hero-copy h1{
    margin-bottom:15px;
    font-size:clamp(2.65rem,12.3vw,3.1rem);
  }
  .landing-page .hero-copy .lead{
    line-height:1.45;
  }
  .landing-page .hero-copy .lead + .lead{
    margin-top:8px;
  }
  .landing-page .hero-promise{
    margin-top:16px;
    padding-top:2px;
    padding-bottom:2px;
    line-height:1.45;
  }
  .landing-page .hero-actions{
    margin-top:20px;
  }
  .landing-page .hero-micro{
    margin-top:8px;
  }
  .landing-page .hero-visual{
    margin-top:-25px;
  }
}

@media(max-width:360px){
  .upload-page .upload-gallery-section .preview,
  .upload-page .upload-gallery-section .upload-phone-tile{flex-basis:136px;width:136px}
  .upload-page .upload-gallery-section .preview-phone,
  .upload-page .upload-gallery-section .upload-phone-tile{width:136px;height:282px}
  .landing-page .hero-copy h1{font-size:2.75rem}
  .contact-page .page-intro h1{font-size:3rem}
}

@media(prefers-reduced-motion:reduce){
  .design-v1 *,
  .design-v1 *:before,
  .design-v1 *:after{scroll-behavior:auto!important;transition:none!important}
}