/* Konfirmasjonssiden -- stilark for den nye forsiden (skjult rute /ny).
*
* Trukket ut av masterforslag-2026-08-17/master.css 25.08.2026 av nattkjoeringen.
* Bare de selektorene som ny-landing.html faktisk bruker er med; hele
* app-mockupen fra app.html er borte, og erklaeringer som en senere regel med
* samme selektor satte paa nytt er fjernet.
*
* REDIGER IKKE denne fila for haand hvis du kan unngaa det -- den kan bygges
* paa nytt fra master.css. Tillegget nederst er derimot skrevet for haand.
*
* Fasit for farger, typografi, form og bevegelse er DESIGNSYSTEM.md.
* .reveal er SYNLIG som standard; klassen .js paa skrur paa
* startposisjonen. Uten JavaScript blir siden aldri blank.
*/
:root{color-scheme:light;--ink:oklch(29% 0.045 166);--ink-soft:oklch(43% 0.035 166);--moss:oklch(48% 0.055 160);--paper:oklch(97% 0.012 90);--paper-deep:oklch(93% 0.014 105);--sage:oklch(91% 0.035 150);--sage-deep:oklch(83% 0.052 150);--warm:oklch(69% 0.14 45);--gold:oklch(83% 0.085 82);--line:oklch(84% 0.014 145);--muted:oklch(49% 0.03 160);--white:oklch(99% 0.006 90);--danger:oklch(58% 0.17 32);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--space-3xl:48px;--space-4xl:64px;--space-5xl:96px}
*{box-sizing:border-box}
html{max-width:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px}
body{max-width:100%;margin:0;overflow-x:clip;color:var(--ink);background:var(--paper);font-family:"Familjen Grotesk",sans-serif;-webkit-font-smoothing:antialiased}
body,button,input,textarea{font-family:"Familjen Grotesk",sans-serif}
button,input,textarea{font-size:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit}
img{display:block;max-width:100%}
svg{display:block}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.skip-link{position:fixed;z-index:999;top:var(--space-sm);left:var(--space-sm);padding:10px 14px;color:var(--white);background:var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.sr-only,.sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section-pad{padding:clamp(80px,11vw,170px) clamp(20px,6.5vw,110px)}
.eyebrow{margin:0 0 var(--space-xl);color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;padding:0 25px;border:0;border-radius:3px;font-size:.9rem;font-weight:700;text-decoration:none;transition:transform 180ms var(--ease-out),background 180ms var(--ease-out),color 180ms var(--ease-out)}
.button:active,button:active{transform:scale(.97);transition-duration:100ms}
.button--small{min-height:42px;padding-inline:17px;font-size:.78rem}
.button--dark{color:var(--white);background:var(--ink)}
.button--warm{color:var(--ink);background:var(--gold)}
.text-link{font-size:.78rem;font-weight:700;text-decoration:none}
.underlined-link{display:flex;align-items:center;justify-content:space-between;max-width:1150px;margin:var(--space-2xl) auto 0;padding:18px 0 8px;border-bottom:1px solid var(--ink);font-size:.82rem;font-weight:700;text-decoration:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 650ms var(--ease-out),transform 650ms var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal--delay{transition-delay:120ms}
.site-header{position:sticky;z-index:50;top:0;min-height:80px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-2xl);padding:0 clamp(20px,5vw,80px);background:color-mix(in oklch,var(--paper) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand{width:max-content;display:inline-flex;align-items:center;gap:11px;font-size:1rem;font-weight:600;text-decoration:none}
.brand svg{width:33px;fill:none;stroke:currentColor;stroke-width:1.7}
.brand em{font-weight:400;font-style:normal}
.desktop-nav{display:flex;align-items:center;gap:clamp(22px,3vw,38px)}
.desktop-nav a{font-size:.79rem;font-weight:600;text-decoration:none}
.header-actions{justify-self:end;display:flex;align-items:center;gap:var(--space-xl)}
.menu-toggle{display:none;width:42px;height:42px;padding:10px;background:transparent;border:0;cursor:pointer}
.menu-toggle span:not(.sr-only){display:block;height:1px;margin:4px 0;background:var(--ink);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.mobile-menu{position:absolute;top:100%;left:0;right:0;display:grid;padding:var(--space-xl);background:var(--paper);border-bottom:1px solid var(--line);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.mobile-menu.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.mobile-menu a{padding:13px 0;border-bottom:1px solid var(--line);font-size:.92rem;font-weight:600;text-decoration:none}
.hero{min-height:min(820px,calc(100vh - 80px));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);align-items:center;gap:clamp(36px,4vw,72px);padding:clamp(64px,8vw,120px) clamp(20px,6.5vw,110px);overflow:hidden}
.hero__copy{max-width:760px;min-width:0}
.hero h1{margin:0;font-family:"Petrona",serif;font-size:clamp(2.4rem,3.8vw,3.9rem);font-weight:500;line-height:1.04;letter-spacing:-.035em}
.hero h1 em{color:var(--moss);font-weight:400;font-style:italic}
.hero__lead{max-width:58ch;margin:var(--space-2xl) 0 0;color:var(--ink-soft);font-size:1.08rem;line-height:1.75}
.hero__actions{display:flex;align-items:center;gap:var(--space-xl);margin-top:var(--space-2xl)}
.play-link{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:700;text-decoration:none}
.play-link span{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:.62rem}
.proof-list{display:flex;flex-wrap:wrap;gap:12px 24px;margin:var(--space-2xl) 0 0;padding:0;color:var(--muted);list-style:none;font-size:.72rem}
.proof-list li::before{content:"✓";margin-right:7px;color:var(--moss)}
.hero__visual{position:relative;min-height:600px}
.hero__shape{position:absolute;inset:-26px 38px 42px -26px;background:var(--sage);border-radius:52% 48% 44% 56% / 42% 52% 48% 58%}
.hero__visual > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;border-radius:48% 52% 46% 54% / 55% 45% 55% 45%}
.float-note{position:absolute;z-index:2;display:grid;gap:5px;padding:18px 20px;background:color-mix(in oklch,var(--white) 95%,transparent);box-shadow:0 18px 60px color-mix(in oklch,var(--ink) 13%,transparent)}
.float-note span{color:var(--muted);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.float-note strong{font-size:.92rem}
.float-note small{color:var(--muted);font-size:.67rem}
.float-note--progress{top:32px;left:-42px;width:205px}
.float-note--progress div{height:4px;margin-top:6px;overflow:hidden;background:var(--line);border-radius:99px}
.float-note--progress i{display:block;height:100%;background:var(--warm)}
.float-note--next{right:-12px;bottom:44px;width:230px}
.trust-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);padding:18px clamp(20px,6.5vw,110px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.problem{display:grid;grid-template-columns:minmax(0,.95fr) minmax(520px,1.05fr);column-gap:clamp(48px,7vw,112px);row-gap:var(--space-2xl);align-items:start}
.problem.section-pad{padding-block:clamp(80px,8vw,128px)}
.problem__title h2{max-width:10ch;margin:0;font-family:"Petrona",serif;font-size:clamp(3.2rem,4.8vw,5.4rem);font-weight:500;line-height:1;letter-spacing:-.05em}
.problem__list{align-self:start}
.problem__list p{display:grid;grid-template-columns:36px 1fr;gap:var(--space-lg);margin:0;padding:17px 0;border-top:1px solid var(--line);font-size:.94rem;line-height:1.5}
.problem__list p:last-child{border-bottom:1px solid var(--line)}
.problem__list span{color:var(--warm);font-size:.68rem;font-weight:700}
.problem__answer{grid-column:2}
.problem__answer p{max-width:35ch;margin:0;padding-top:var(--space-xl);border-top:2px solid var(--ink);font-family:"Petrona",serif;font-size:clamp(1.35rem,1.9vw,1.85rem);line-height:1.45}
.now-section{background:var(--sage)}
.section-heading{max-width:950px;margin:0 auto clamp(48px,7vw,85px)}
.section-heading h2{margin:0;font-family:"Petrona",serif;font-size:clamp(3rem,5.5vw,5.7rem);font-weight:500;line-height:.98;letter-spacing:-.05em}
.section-heading--split{max-width:1150px;display:grid;grid-template-columns:1.15fr .65fr;align-items:end;gap:clamp(50px,8vw,120px)}
.section-heading--split > p{margin:0;color:var(--ink-soft);line-height:1.75}
.product-window{max-width:1150px;margin:0 auto;overflow:hidden;background:var(--white);border:1px solid color-mix(in oklch,var(--moss) 32%,var(--white));border-radius:14px;box-shadow:0 28px 80px color-mix(in oklch,var(--ink) 12%,transparent)}
.window-top{height:44px;display:flex;align-items:center;gap:6px;padding:0 15px;background:var(--paper-deep);border-bottom:1px solid var(--line)}
.window-top > span{width:8px;height:8px;background:var(--line);border-radius:50%}
.window-top > span:first-child{background:var(--warm)}
.window-top p{margin:0 auto;padding-right:40px;color:var(--muted);font-size:.6rem}
.window-shell{min-height:540px;display:grid;grid-template-columns:190px 1fr}
.window-main{padding:26px clamp(24px,5vw,52px) 42px}
.window-greeting{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--space-xl);border-bottom:1px solid var(--line)}
.window-greeting > div{display:grid;gap:4px}
.window-greeting small{color:var(--muted);font-size:.66rem}
.window-greeting strong{font-size:.92rem}
.window-greeting > span{width:36px;height:36px;display:grid;place-items:center;color:var(--white);background:var(--warm);border-radius:50%}
.window-title{display:flex;align-items:end;justify-content:space-between;gap:var(--space-xl);margin:var(--space-2xl) 0 var(--space-xl)}
.window-title small{color:var(--muted);font-size:.6rem;font-weight:700;text-transform:uppercase}
.window-title h3{margin:5px 0 0;font-family:"Petrona",serif;font-size:2rem;font-weight:500}
.window-title > span{color:var(--muted);font-size:.66rem}
.demo-tasks{display:grid;gap:8px}
.demo-tasks button{width:100%;min-height:67px;display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:12px;padding:11px 15px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:7px;text-align:left;cursor:pointer}
.demo-tasks button > i{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--muted);border-radius:50%;font-size:.62rem;font-style:normal}
.demo-tasks button > span{display:grid;gap:3px}
.demo-tasks button small{color:var(--muted)}
.demo-tasks button em{color:var(--warm);font-size:.68rem;font-weight:700;font-style:normal}
.demo-tasks button.is-done{background:var(--paper-deep)}
.demo-tasks button.is-done b{color:var(--muted);text-decoration:line-through}
.demo-tasks button.is-done > i{color:var(--white);background:var(--moss);border-color:var(--moss)}
.demo-tasks button.is-done em{color:var(--muted)}
.demo-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-md)}
.demo-stats > div{padding:18px;background:var(--paper-deep);border-radius:7px}
.demo-stats small{color:var(--muted);font-size:.58rem;font-weight:700;text-transform:uppercase}
.demo-stats strong{display:block;margin-top:7px;font-family:"Petrona",serif;font-size:1.7rem;font-weight:500}
.demo-stats strong em{color:var(--muted);font-family:"Familjen Grotesk",sans-serif;font-size:.66rem;font-style:normal}
.demo-stats p{margin:5px 0 0;color:var(--muted);font-size:.64rem}
.journey{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(60px,10vw,160px)}
.journey__sticky{position:sticky;top:130px;align-self:start}
.journey__sticky h2{margin:0;font-family:"Petrona",serif;font-size:clamp(3rem,5vw,5.2rem);font-weight:500;line-height:1;letter-spacing:-.05em}
.journey__sticky > p:last-child{max-width:48ch;margin:var(--space-xl) 0 0;color:var(--ink-soft);line-height:1.75}
.journey__steps{margin:0;padding:0;list-style:none}
.journey__steps li{display:grid;grid-template-columns:55px 1fr;gap:var(--space-xl);padding:clamp(34px,5vw,65px) 0;border-top:1px solid var(--line)}
.journey__steps li:last-child{border-bottom:1px solid var(--line)}
.journey__steps li > span{color:var(--warm);font-size:.72rem;font-weight:700}
.journey__steps li div > p:first-child{margin:0 0 var(--space-md);color:var(--muted);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.journey__steps h3{margin:0;font-family:"Petrona",serif;font-size:clamp(2rem,3.2vw,3.4rem);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.journey__steps h3 + p{max-width:56ch;margin:var(--space-lg) 0 0;color:var(--ink-soft);line-height:1.7}
.journey__steps ul{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:var(--space-xl) 0 0;padding:0;list-style:none}
.journey__steps ul li{display:block;padding:7px 10px;border:1px solid var(--line);font-size:.66rem}
.day-section{display:grid;color:var(--ink)}
.day-section.section-pad,.memory-section.section-pad,.price-section.section-pad,.faq.section-pad{padding-block:clamp(88px,8vw,128px)}
.day-section__heading{max-width:560px}
.day-section__heading h2{margin:0;font-family:"Petrona",serif;font-size:clamp(3rem,4.2vw,4.8rem);font-weight:500;line-height:1;letter-spacing:-.045em}
.day-section__heading > p:last-child{margin:var(--space-xl) 0 0;color:var(--ink-soft);font-size:1rem;line-height:1.7}
.memory-section{grid-template-columns:repeat(12,1fr);gap:var(--space-lg)}
.memory-title h2{margin:0;font-family:"Petrona",serif;font-weight:500;line-height:1;letter-spacing:-.045em}
.price-section{color:var(--paper);background:var(--ink)}
.price-intro{max-width:900px;margin-bottom:clamp(42px,5vw,64px)}
.price-intro .eyebrow{color:var(--warm)}
.price-intro h2{margin:0;font-family:"Petrona",serif;font-size:clamp(3.4rem,6vw,6.5rem);font-weight:500;line-height:.96;letter-spacing:-.055em}
.price-intro > p:last-child{max-width:54ch;margin:var(--space-xl) 0 0;color:color-mix(in oklch,var(--paper) 70%,var(--ink));line-height:1.7}
.price-card{max-width:1050px;display:grid;grid-template-columns:.85fr 1.15fr;margin:0 auto;color:var(--ink);background:var(--paper)}
.price-card__head{padding:clamp(35px,6vw,75px);background:var(--sage)}
.price-card__head > span{color:var(--moss);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.price-card__head h3{margin:var(--space-lg) 0 var(--space-3xl);font-family:"Petrona",serif;font-size:clamp(3rem,5vw,5rem);font-weight:500}
.price-card__head p{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:var(--space-md);margin:0}
.price-card__head del{color:var(--muted);font-size:.78rem}
.price-card__head strong{grid-column:1 / -1;font-family:"Petrona",serif;font-size:clamp(3.4rem,6vw,6rem);font-weight:500;line-height:.9}
.price-card__head small{grid-column:1 / -1;color:var(--muted)}
.price-card__body{padding:clamp(35px,6vw,75px)}
.price-card__body .button{width:100%}
.price-card__body > small{display:block;margin-top:var(--space-md);color:var(--muted);text-align:center}
.price-anchor{max-width:750px;margin:clamp(45px,7vw,80px) auto 0;color:color-mix(in oklch,var(--paper) 76%,var(--ink));font-family:"Petrona",serif;font-size:clamp(1.5rem,2.8vw,2.6rem);line-height:1.35;text-align:center}
.faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(60px,10vw,160px);background:var(--paper-deep)}
.faq__title{position:sticky;top:130px;align-self:start}
.faq__title h2{margin:0;font-family:"Petrona",serif;font-size:clamp(3rem,5vw,5rem);font-weight:500}
.faq__title > p:last-child{max-width:40ch;color:var(--ink-soft);line-height:1.65}
.faq__list details{border-top:1px solid var(--line)}
.faq__list details:last-child{border-bottom:1px solid var(--line)}
.faq__list summary{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);list-style:none;font-weight:700;cursor:pointer}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary span{font-size:1.3rem;font-weight:400;transition:transform 200ms var(--ease-out)}
.faq__list details[open] summary span{transform:rotate(45deg)}
.faq__list p{max-width:65ch;margin:0;padding:0 40px var(--space-xl) 0;color:var(--ink-soft);line-height:1.7}
.final-cta{min-height:630px;display:grid;grid-template-columns:1fr .45fr;align-items:center;gap:clamp(50px,10vw,160px);padding:clamp(80px,11vw,150px) clamp(20px,7vw,120px);color:var(--paper);background:var(--moss)}
.final-cta .eyebrow{color:var(--gold)}
.final-cta h2{margin:0;font-family:"Petrona",serif;font-size:clamp(4rem,8vw,8rem);font-weight:500;line-height:.9;letter-spacing:-.06em}
.final-cta__copy > p:not(.eyebrow){margin:var(--space-xl) 0 var(--space-2xl);color:color-mix(in oklch,var(--paper) 76%,var(--moss))}
.final-cta__date{display:grid;justify-items:start;gap:var(--space-sm);padding:var(--space-2xl) 0;border-top:1px solid color-mix(in oklch,var(--paper) 48%,transparent);border-bottom:1px solid color-mix(in oklch,var(--paper) 48%,transparent)}
.final-cta__date span{color:color-mix(in oklch,var(--paper) 70%,var(--moss));font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.final-cta__date strong{font-family:"Petrona",serif;font-size:clamp(6rem,11vw,11rem);font-weight:400;line-height:.8;letter-spacing:-.08em}
.site-footer{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);padding:var(--space-4xl) clamp(20px,6.5vw,110px) var(--space-2xl);color:var(--paper);background:oklch(22% .035 165)}
.brand--light{color:var(--paper)}
.site-footer > p{justify-self:end;max-width:35ch;margin:0;color:color-mix(in oklch,var(--paper) 65%,var(--ink));text-align:right}
.site-footer nav{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--space-xl);padding:var(--space-xl) 0;border-top:1px solid oklch(38% .03 165);border-bottom:1px solid oklch(38% .03 165)}
.site-footer nav a{color:color-mix(in oklch,var(--paper) 75%,var(--ink));font-size:.72rem;text-decoration:none}
.site-footer small{grid-column:1 / -1;color:color-mix(in oklch,var(--paper) 48%,var(--ink))}
.toast{position:fixed;z-index:200;right:var(--space-xl);bottom:var(--space-xl);max-width:360px;padding:15px 18px;color:var(--paper);background:var(--ink);box-shadow:0 15px 45px color-mix(in oklch,var(--ink) 25%,transparent);font-size:.78rem;line-height:1.45;opacity:0;transform:translateY(12px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.toast.is-visible{opacity:1;transform:translateY(0)}
@keyframes view-in{from { opacity: 0; transform: translateY(7px); }}
@keyframes step-in{from { opacity: 0; transform: translateX(9px); }}
.interface-showcase{position:relative;max-width:1220px;display:grid;grid-template-columns:350px minmax(0,1fr);align-items:center;margin:0 auto}
.app-phone-demo{position:relative;z-index:2;width:338px;min-height:682px;padding:10px;border-radius:43px}
.app-phone-demo::before{content:"";position:absolute;z-index:3;top:10px;left:calc(50% - 47px);width:94px;height:22px;border-radius:0 0 14px 14px}
.app-phone-demo__top{min-height:58px;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;padding:8px 11px 0;border-radius:34px 34px 0 0}
.app-phone-demo__top button{background:transparent;border:0}
.app-phone-demo__top > div{display:flex;align-items:baseline;justify-content:center;gap:6px}
.app-phone-demo__top strong{font-family:"Petrona",serif;font-size:1.65rem;font-weight:500}
.app-phone-demo__top span{font-size:.55rem;font-weight:700}
.app-phone-demo__top > i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:.5rem;font-style:normal}
.app-phone-demo__body{min-height:535px;padding:22px 16px 18px}
.app-phone-demo__body > small{font-weight:700}
.phone-week{padding:18px 13px 10px;color:var(--ink)}
.phone-week > span{display:flex;justify-content:space-between;margin-bottom:9px;font-size:.5rem;font-weight:700}
.phone-week button{width:100%;min-height:58px;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:9px;padding:7px 0;background:transparent;border:0;border-top:1px solid var(--line);text-align:left}
.phone-week button > i{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--muted);border-radius:50%;font-size:.55rem;font-style:normal}
.phone-week button p{display:grid;gap:2px;margin:0}
.phone-week button small{color:var(--muted)}
.phone-week button.is-done b{color:var(--muted);text-decoration:line-through}
.phone-progress{margin-top:12px;padding:17px 15px}
.phone-progress span{font-size:.68rem}
.phone-progress strong{font-family:"Petrona",serif;font-size:1.8rem;font-weight:500}
.phone-progress p{margin:5px 0 0;font-size:.61rem}
.app-phone-demo__nav{min-height:69px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;border-radius:0 0 34px 34px}
.app-phone-demo__nav span{display:grid;justify-items:center;gap:3px;font-size:.9rem}
.app-phone-demo__nav b{font-size:.48rem}
.product-window--desktop{position:relative;z-index:1;width:calc(100% + 42px);margin-left:-42px;transform:scale(.92);transform-origin:left center}
.interface-showcase{--mb-cream:#FAF8F5;--mb-ink:#30251D;--mb-soft:#6B5A49;--mb-gold:#CB9D4D;--mb-gold-deep:#A97F38;--mb-line:#E7DDD0}
.app-phone-demo{color:var(--mb-ink);background:var(--mb-ink);box-shadow:0 28px 72px rgba(48,37,29,.2)}
.app-phone-demo::before{background:var(--mb-ink)}
.app-phone-demo__top{color:var(--mb-ink);background:var(--mb-cream)}
.app-phone-demo__top > i{color:var(--mb-ink);background:#fff;border:1px solid var(--mb-line)}
.app-phone-demo__body{color:var(--mb-ink);background:var(--mb-cream)}
.app-phone-demo__body > small{color:var(--mb-soft);font-family:"Cinzel",serif;font-size:.49rem;letter-spacing:.1em}
.app-phone-demo__body > h3{max-width:none;margin:9px 0 21px;color:var(--mb-ink);font-family:"Allura",cursive;font-size:2.75rem;font-weight:400;line-height:1}
.phone-week{background:#fff;border:1px solid var(--mb-line);border-radius:16px;box-shadow:0 9px 24px rgba(48,37,29,.07)}
.phone-week > span{color:var(--mb-soft);font-family:"Cinzel",serif}
.phone-week button{color:var(--mb-ink);border-color:var(--mb-line)}
.phone-week button small,.phone-week button.is-done b{color:var(--mb-soft)}
.phone-week button.is-done > i{color:#fff;background:#7D9872;border-color:#7D9872}
.phone-progress{color:var(--mb-ink);background:#fff;border:1px solid var(--mb-line);border-top:4px solid var(--mb-gold);border-radius:16px;box-shadow:0 9px 24px rgba(48,37,29,.06)}
.phone-progress p{color:var(--mb-soft)}
.app-phone-demo__nav{color:var(--mb-soft);background:var(--mb-cream);border-top:1px solid var(--mb-line)}
.app-phone-demo__nav span:first-child{color:var(--mb-gold-deep)}
.product-window--desktop{overflow:hidden;background:var(--mb-cream);border:1px solid var(--mb-line);border-radius:16px;box-shadow:0 28px 72px rgba(48,37,29,.13)}
.product-window--desktop .window-top{background:#F4EFE8;border-color:var(--mb-line)}
.product-window--desktop .window-top p{color:var(--mb-soft)}
.product-window--desktop .window-shell{min-height:530px;display:grid;grid-template-columns:1fr;background:var(--mb-cream)}
.product-window--desktop .window-main{width:min(100%,720px);margin:0 auto;padding:28px 32px 42px}
.product-window--desktop .window-greeting{align-items:start;border:0}
.product-window--desktop .window-greeting > div{gap:1px}
.product-window--desktop .window-greeting strong{color:var(--mb-ink);font-family:"Allura",cursive;font-size:2.35rem;font-weight:400;line-height:1}
.product-window--desktop .window-greeting small{color:var(--mb-soft);font-family:"Cinzel",serif;font-size:.54rem;letter-spacing:.08em;text-transform:uppercase}
.product-window--desktop .window-greeting > span{color:var(--mb-ink);background:#fff;border:1px solid var(--mb-line);font-size:.62rem}
.window-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:20px;padding:4px;background:#fff;border:1px solid var(--mb-line);border-radius:14px}
.window-tabs button{min-height:38px;color:var(--mb-soft);background:transparent;border:0;border-radius:10px;font-size:.66rem;font-weight:700}
.window-tabs button.is-active{color:var(--mb-ink);background:#F6EFE2;box-shadow:inset 3px 0 0 var(--mb-gold)}
.product-window--desktop .window-title{margin:24px 0 16px}
.product-window--desktop .window-title small{color:var(--mb-soft);font-family:"Cinzel",serif}
.product-window--desktop .window-title h3{color:var(--mb-ink)}
.product-window--desktop .window-title > span{color:var(--mb-soft)}
.product-window--desktop .demo-tasks button{color:var(--mb-ink);background:#fff;border-color:var(--mb-line);border-radius:14px;box-shadow:0 6px 18px rgba(48,37,29,.045)}
.product-window--desktop .demo-tasks button.is-done{background:#FCFAF6}
.product-window--desktop .demo-tasks button small,.product-window--desktop .demo-tasks button.is-done b,.product-window--desktop .demo-tasks button.is-done em{color:var(--mb-soft)}
.product-window--desktop .demo-tasks button.is-done > i{color:#fff;background:#7D9872;border-color:#7D9872}
.product-window--desktop .demo-tasks button em{color:var(--mb-gold-deep)}
.product-window--desktop .demo-stats > div{background:#fff;border:1px solid var(--mb-line);border-radius:14px;box-shadow:0 6px 18px rgba(48,37,29,.045)}
.product-window--desktop .demo-stats small,.product-window--desktop .demo-stats p,.product-window--desktop .demo-stats strong em{color:var(--mb-soft)}
.memory-title{grid-column:1 / 13}
.memory-title .eyebrow{color:var(--muted)}
.memory-title h2{font-size:clamp(3.2rem,4.7vw,5.2rem)}
.memory-title > p:last-child{margin:0 0 4px;color:var(--ink-soft);font-size:1rem;line-height:1.7}
@media (hover: hover) and (pointer: fine){
.button--dark:hover{background:var(--moss);transform:translateY(-2px)}
.button--warm:hover{background:color-mix(in oklch,var(--gold) 82%,var(--white));transform:translateY(-2px)}
.desktop-nav a:hover,.text-link:hover{color:var(--warm)}
}
@media (max-width: 1180px){
.desktop-nav{display:none}
.site-header{grid-template-columns:1fr auto}
.hero{grid-template-columns:minmax(0,1fr) minmax(390px,.85fr);gap:50px}
.hero__visual{min-height:520px}
.problem,.journey,.faq{gap:60px}
.interface-showcase{grid-template-columns:320px minmax(0,1fr)}
.app-phone-demo{width:310px}
.product-window--desktop{width:calc(100% + 28px);margin-left:-28px;transform:scale(.88)}
}
@media (max-width: 960px){
.hero,.problem,.section-heading--split,.journey,.day-section,.faq,.final-cta{grid-template-columns:1fr}
.hero{min-height:0;grid-template-columns:1fr}
.hero__copy{max-width:760px}
.hero__visual{min-height:600px}
.trust-line{justify-content:center;flex-wrap:wrap}
.problem__answer{grid-column:auto;max-width:700px;margin-left:0}
.section-heading--split > p{max-width:55ch}
.journey__sticky,.faq__title{position:static}
.day-section__heading{max-width:720px}
.price-card{max-width:760px}
.final-cta__date{max-width:300px}
.memory-title{grid-column:1 / 9}
}
@media (max-width: 720px){
.section-pad{padding:78px 18px}
.site-header{min-height:68px;padding-inline:16px}
.site-header .header-actions .text-link,.site-header .header-actions .button{display:none}
.menu-toggle{display:block}
.brand{font-size:.86rem}
.brand svg{width:29px}
.hero{padding:58px 18px 85px}
.hero h1{font-size:clamp(2.3rem,9vw,3.3rem)}
.hero__actions{align-items:flex-start;flex-direction:column}
.hero__visual{min-height:440px;margin-top:30px}
.float-note--progress{top:8px;left:0}
.float-note--next{right:0;bottom:12px}
.trust-line{padding-inline:16px;justify-content:flex-start;gap:10px 20px}
.trust-line span{flex:1 0 42%;line-height:1.4}
.problem{row-gap:32px}
.problem__title h2,.section-heading h2,.journey__sticky h2,.price-intro h2,.faq__title h2{font-size:clamp(2.75rem,12vw,4.5rem)}
.proof-list{display:grid;gap:9px;color:var(--ink-soft);font-size:.8rem}
.product-window{border-radius:9px}
.interface-showcase{display:grid;grid-template-columns:1fr;justify-items:center;gap:0}
.app-phone-demo{width:min(320px,94vw);min-height:670px}
.product-window--desktop{width:118%;margin:-58px -9% 0;transform:scale(.78);transform-origin:center top}
.window-shell{min-width:0;grid-template-columns:minmax(0,1fr)}
.window-main{min-width:0;padding:24px 14px 32px}
.window-title{align-items:start;flex-direction:column}
.demo-tasks button{grid-template-columns:27px 1fr}
.demo-tasks button em{grid-column:2}
.demo-stats{grid-template-columns:1fr}
.journey__steps li{grid-template-columns:42px 1fr}
.day-section{padding-inline:12px}
.day-section__heading{padding-inline:6px}
.day-section__heading h2{font-size:clamp(3rem,14vw,5rem)}
.memory-section{grid-template-columns:1fr}
.memory-title{grid-template-columns:1fr;gap:var(--space-xl);padding-bottom:var(--space-2xl)}
.memory-title h2{max-width:10ch}
.memory-title > p:last-child{margin:0}
.memory-title{grid-column:auto;grid-row:auto}
.price-card{grid-template-columns:1fr}
.price-card__head h3{margin-bottom:26px}
.faq__list summary{font-size:.86rem}
.final-cta{padding:85px 18px}
.final-cta h2{font-size:clamp(3.8rem,17vw,6rem)}
.site-footer{grid-template-columns:1fr;padding-inline:18px}
.site-footer > p{justify-self:start;text-align:left}
.site-footer nav{grid-column:auto}
.site-footer small{grid-column:auto}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
.js .reveal{opacity:1;transform:none;transition:none}
}
.day-section{grid-template-columns:minmax(280px,.7fr) minmax(560px,1.3fr);align-items:center;gap:clamp(48px,6vw,96px);background:var(--paper-deep);border-top:1px solid var(--line)}
.day-section__heading{align-self:center}
.day-section .eyebrow{color:oklch(49% .12 45)}
.day-section__heading h2{max-width:9.5ch}
.day-section__heading > p:last-child{max-width:46ch}
.day-product{position:relative;min-height:760px;display:grid;align-items:center;justify-items:start}
.day-desktop{position:absolute;z-index:1;top:52px;right:0;width:min(88%,760px);min-height:570px;overflow:hidden;color:oklch(25% .025 65);background:oklch(98% .008 78);border:1px solid oklch(85% .018 72);border-radius:18px;box-shadow:0 30px 70px rgba(62,48,35,.10)}
.day-desktop__bar{height:42px;display:flex;align-items:center;gap:6px;padding:0 14px;background:oklch(95% .012 78);border-bottom:1px solid oklch(88% .014 72)}
.day-desktop__bar > span{width:7px;height:7px;background:oklch(80% .02 72);border-radius:50%}
.day-desktop__bar > span:first-child{background:oklch(67% .105 75)}
.day-desktop__bar small{margin:0 auto;padding-right:38px;color:oklch(55% .025 65);font-size:.58rem}
.day-desktop__head{min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:15px 28px;border-bottom:1px solid oklch(89% .014 72)}
.day-desktop__head > div{display:grid;gap:3px}
.day-desktop__head b{font-family:"Allura",cursive;font-size:1.42rem;font-weight:400}
.day-desktop__head small{color:oklch(55% .025 65);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase}
.day-desktop__title{padding:30px 32px 20px 120px}
.day-desktop__title h3{margin:0;font-family:"Petrona",serif;font-size:2rem;font-weight:500}
.day-desktop__title p{margin:6px 0 0;color:oklch(58% .025 65);font-size:.68rem}
.day-desktop__cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 28px 30px 120px}
.day-desktop__cards article{padding:20px;background:oklch(99% .004 78);border:1px solid oklch(89% .014 72);border-radius:22px;box-shadow:0 10px 28px rgba(62,48,35,.045)}
.day-desktop__cards article > b{display:block;margin-bottom:8px;font-size:.72rem}
.day-desktop__cards p{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;margin:0;padding:13px 0;border-bottom:1px dashed oklch(88% .015 72)}
.day-desktop__cards p:last-child{border-bottom:0}
.day-desktop__cards p > span{width:32px;height:32px;display:grid;place-items:center;color:oklch(60% .105 75);background:oklch(96% .03 82);border-radius:10px}
.day-desktop__cards strong{display:grid;gap:3px;font-size:.66rem}
.day-desktop__cards strong small{color:oklch(58% .025 65);font-size:.56rem;font-weight:400}
.day-phone{position:relative;z-index:2;width:min(360px,100%);height:726px;margin-left:0;overflow:hidden;color:oklch(25% .025 65);background:oklch(97% .012 80);border:7px solid oklch(23% .025 55);border-radius:42px;box-shadow:0 28px 70px rgba(45,35,28,.2)}
.day-phone__status,.guest-phone__status{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:.64rem}
.day-phone__status span,.guest-phone__status span{font-size:.54rem;letter-spacing:.08em}
.day-phone__event{min-height:83px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px 13px;border-bottom:1px solid oklch(88% .016 72)}
.day-phone__event > div{display:grid;gap:1px}
.day-phone__event strong{font-family:"Allura",cursive;font-size:1.65rem;font-weight:400;line-height:1}
.day-phone__event small{color:oklch(55% .035 68);font-size:.58rem;letter-spacing:.12em}
.day-phone__event button{width:42px;height:42px;color:oklch(44% .035 62);background:oklch(99% .004 78);border:1px solid oklch(86% .02 72);border-radius:50%;cursor:pointer}
.day-phone__intro{padding:18px 20px 14px}
.day-phone__intro h3{margin:0;font-family:"Petrona",serif;font-size:1.85rem;font-weight:500}
.day-phone__intro p{margin:4px 0 0;color:oklch(58% .025 65);font-size:.68rem}
.day-tool-card{margin:0 16px 12px;padding:15px 15px 4px;background:oklch(99% .004 78);border:1px solid oklch(88% .016 72);border-radius:24px;box-shadow:0 10px 24px rgba(62,48,35,.05)}
.day-tool-card > b{display:block;margin-bottom:4px;font-size:.76rem}
.day-tool-card button{width:100%;min-height:68px;display:grid;grid-template-columns:42px 1fr 14px;align-items:center;gap:10px;padding:9px 0;background:transparent;border:0;border-bottom:1px dashed oklch(88% .015 72);text-align:left;cursor:pointer}
.day-tool-card button:last-child{border-bottom:0}
.day-tool-card button > i{width:39px;height:39px;display:grid;place-items:center;color:oklch(61% .11 75);background:oklch(96% .03 82);border-radius:12px;font-size:1rem;font-style:normal}
.day-tool-card button > span{min-width:0;display:grid;gap:3px}
.day-tool-card button strong{font-size:.76rem}
.day-tool-card button small{overflow:hidden;color:oklch(49% .03 65);font-size:.68rem;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
.day-tool-card button em{color:oklch(55% .035 68);font-size:1.25rem;font-style:normal}
.day-phone__nav{position:absolute;z-index:2;right:0;bottom:0;left:0;height:64px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:7px 8px 10px;background:oklch(99% .004 78);border-top:1px solid oklch(87% .016 72)}
.day-phone__nav span{position:relative;display:grid;justify-items:center;gap:3px;color:oklch(58% .025 65);font-size:.88rem}
.day-phone__nav b{font-size:.66rem;font-weight:500}
.day-phone__nav span.is-active{color:oklch(60% .105 75)}
.day-phone__nav span.is-active::before{content:"";position:absolute;top:-8px;width:34px;height:2px;background:oklch(65% .12 75)}
.memory-section{display:block;color:var(--ink);background:var(--paper);border-top:1px solid var(--line)}
.memory-title{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.62fr);align-items:end;gap:clamp(48px,8vw,128px);padding:0 0 clamp(36px,4vw,52px)}
.memory-title h2{max-width:13ch}
.memory-title > p:last-child{max-width:47ch}
.guest-share{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(360px,1.18fr);align-items:center;gap:clamp(38px,7vw,100px);max-width:1220px;margin:0 auto;padding:clamp(28px,5vw,72px);background:color-mix(in oklch,var(--sage) 58%,var(--paper))}
.guest-phone{width:min(380px,100%);height:760px;justify-self:end;overflow:hidden;color:oklch(32% .025 62);background:oklch(98% .009 78);border:7px solid oklch(23% .025 55);border-radius:44px;box-shadow:0 28px 70px rgba(45,35,28,.18)}
.guest-phone__date{margin:6px 0 0;color:oklch(49% .10 75);font-family:"Cinzel",serif;font-size:.64rem;letter-spacing:.34em;text-align:center}
.guest-phone__ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:7px 0 11px;color:oklch(67% .10 75)}
.guest-phone__ornament i{width:42px;height:1px;background:oklch(74% .08 75)}
.guest-phone__ornament span{font-size:.65rem}
.guest-phone > h3{max-width:300px;margin:0 auto 13px;font-family:"Petrona",serif;font-size:1.25rem;font-weight:400;line-height:1.38;text-align:center}
.guest-phone > a{width:calc(100% - 40px);min-height:44px;display:grid;place-items:center;margin:0 auto 14px;color:oklch(48% .095 75);border:1px solid oklch(80% .045 75);border-radius:99px;font-size:.7rem;font-weight:700;text-decoration:none}
.guest-upload{margin:0 18px;padding:15px;background:oklch(99% .004 78);border:1px solid oklch(87% .018 72);border-radius:22px;box-shadow:0 10px 24px rgba(62,48,35,.05)}
.guest-upload input{width:100%;min-height:44px;padding:0 13px;color:oklch(34% .025 62);background:transparent;border:1px solid oklch(87% .018 72);border-radius:12px;font-family:"Petrona",serif}
.guest-upload input::placeholder{color:oklch(70% .02 65)}
.guest-upload button{width:100%;min-height:46px;margin-top:9px;color:oklch(99% .004 78);background:oklch(58% .12 75);border:1px solid oklch(58% .12 75);border-radius:12px;font-family:"Cinzel",serif;font-size:.7rem;letter-spacing:.04em;cursor:pointer}
.guest-upload button + button{color:oklch(57% .09 75);background:transparent;border-color:oklch(84% .04 75)}
.guest-share__side{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(230px,1.1fr);align-items:center;gap:clamp(20px,3vw,38px)}
.qr-poster{min-height:500px;display:grid;justify-items:center;align-content:center;padding:28px 22px;color:oklch(30% .025 62);background:oklch(99% .004 78);border:1px solid oklch(64% .095 75);text-align:center}
.qr-poster > p{margin:0 0 16px;color:oklch(48% .095 75);font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.24em}
.qr-poster > h3{margin:0;font-family:"Allura",cursive;font-size:3.35rem;font-weight:400;line-height:1}
.qr-poster > small{margin-top:5px;color:oklch(48% .095 75);font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.08em}
.qr-poster__line{width:72px;height:1px;margin:17px 0;background:oklch(65% .095 75)}
.qr-poster > em{max-width:22ch;font-family:"Petrona",serif;font-size:.92rem;font-weight:400}
.qr-grid{width:154px;height:154px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:22px 0 10px;padding:10px;background:oklch(99% .004 78);border:1px solid oklch(76% .045 72)}
.qr-grid i{background:transparent}
.qr-grid i.on{background:oklch(25% .025 62)}
.qr-poster > span{color:oklch(47% .03 65);font-size:.66rem}
.letter-later{align-self:end;padding:28px;color:var(--ink);background:var(--paper);border:1px solid var(--line)}
.letter-later > span{color:var(--muted);font-size:.62rem;font-weight:700;letter-spacing:.14em}
.letter-later h3{max-width:10ch;margin:14px 0 12px;font-family:"Petrona",serif;font-size:clamp(1.75rem,2.6vw,2.55rem);font-weight:500;line-height:1.04}
.letter-later p{margin:0;color:var(--ink-soft);font-size:.82rem;line-height:1.6}
.letter-options{display:grid;gap:6px;margin-top:22px}
.letter-options button{min-height:42px;padding:0 12px;color:var(--ink);background:transparent;border:1px solid var(--line);font-size:.72rem;text-align:left;cursor:pointer}
.letter-options button.is-selected{background:color-mix(in oklch,var(--gold) 52%,var(--paper));border-color:color-mix(in oklch,var(--warm) 45%,var(--line));font-weight:700}
@media (hover: hover) and (pointer: fine){
.day-tool-card button:hover{transform:translateX(3px)}
.guest-phone > a:hover,.guest-upload button:hover,.letter-options button:hover{transform:translateY(-2px)}
}
@media (max-width: 1120px){
.day-section{grid-template-columns:minmax(250px,.64fr) minmax(500px,1.36fr)}
.day-desktop{width:82%}
.day-desktop__title,.day-desktop__cards{padding-left:100px}
.guest-share{grid-template-columns:minmax(320px,.78fr) minmax(320px,1.22fr);padding-inline:34px}
.guest-share__side{grid-template-columns:1fr}
.qr-poster{width:min(330px,100%);justify-self:center}
.letter-later{width:min(330px,100%);justify-self:center}
}
@media (max-width: 960px){
.day-section{grid-template-columns:1fr;padding-inline:clamp(20px,6.5vw,64px)}
.day-section__heading h2{max-width:13ch}
.day-product{width:100%;max-width:820px;min-height:740px;margin:0 auto}
.day-desktop{width:78%}
.memory-title{grid-template-columns:1fr;gap:24px}
.memory-title h2{max-width:14ch}
.guest-share{grid-template-columns:minmax(320px,.9fr) minmax(280px,1.1fr);gap:34px}
}
@media (max-width: 720px){
.day-product{min-height:726px;justify-items:center}
.day-desktop{display:none}
.day-phone{margin:0 auto}
.guest-share{grid-template-columns:1fr;padding:30px 18px}
.guest-phone{justify-self:center}
.guest-share__side{grid-template-columns:1fr 1fr;align-items:stretch}
.qr-poster,.letter-later{width:100%}
.qr-poster{min-height:460px}
.letter-later{align-self:stretch}
}
@media (max-width: 560px){
.day-section{gap:28px}
.memory-title{padding-bottom:24px}
.day-section__heading h2,.memory-title h2{font-size:clamp(2.75rem,13vw,4rem)}
.day-phone{height:704px}
.day-tool-card button{min-height:64px}
.day-tool-card button small{font-size:.58rem}
.guest-share{margin-inline:-2px}
.guest-phone{height:735px}
.guest-share__side{grid-template-columns:1fr}
.qr-poster{max-width:350px;min-height:490px}
.letter-later{max-width:350px}
}
/* ==================================================================
TILLEGG — det kommersielle maskineriet
Ingenting under her finnes i masterforslaget. Det er kjøpsknapper,
Vipps, samtykke, kontaktskjema og den klebrige mobil-CTA-en, tegnet
i DESIGNSYSTEM.md sine tokens. Hex-verdiene i tabellen brukes bare i
e-post og PDF; her er oklch-variablene fasit.
================================================================== */
/* Overstreket førpris. Serveren skriver 499 bare
når et kampanjevindu er åpent. I dag er det aldri åpent, men mangler
regelen den dagen det skjer, rendres tallet nakent midt i beløpet. */
.foerpris{margin-right:.28em;color:var(--muted);font-size:.42em;font-weight:400;text-decoration:line-through}
/* __BELOP_KOMPLETT__ leverer «499 kr». Uten denne blir «kr»
like stort som tallet. */
.price-card__head strong span{font-size:.3em;font-weight:400;letter-spacing:0}
.price-card__head p small{color:var(--muted)}
/* Knappevarianter som ikke finnes i masteren */
.button--vipps{width:100%;margin-top:var(--space-sm);color:var(--white);background:oklch(62% .21 32);border:0;cursor:pointer}
.button--vipps[disabled]{opacity:.65;cursor:default}
.button--blank{color:inherit;background:transparent;border:1px solid var(--line)}
.lenkeknapp{padding:0;color:inherit;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;cursor:pointer}
/* Vipps: navnet på konfirmanten spørres på siden, fordi Vipps-appen ikke
har noe sted å spørre. Skjemaet legges rett under knappen som ble trykket. */
.vipps-navn{margin-top:var(--space-md);text-align:left}
.vipps-navn label{display:block;margin-bottom:6px;font-size:.78rem;font-weight:700}
.vipps-navn input{width:100%;padding:13px 14px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:3px;font-size:1rem}
.vipps-navn input[aria-invalid="true"]{border-color:var(--danger)}
.vipps-navn-feil,.vipps-beskjed{margin:var(--space-sm) 0 0;color:var(--ink-soft);font-size:.78rem;line-height:1.5}
.vipps-navn-feil:empty{margin:0}
/* Samtykkebanner. Ett samtykke slår på Meta-pikselen, Clarity og GA4. */
.samtykke{position:fixed;z-index:300;right:var(--space-lg);bottom:var(--space-lg);left:var(--space-lg);max-width:560px;margin:0 auto;padding:20px 22px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 28px 80px color-mix(in oklch,var(--ink) 18%,transparent)}
.samtykke p{margin:0 0 var(--space-lg);font-size:.86rem;line-height:1.6}
.samtykke__valg{display:flex;flex-wrap:wrap;gap:var(--space-md)}
/* Kontaktskjema. Adressen meldingen går til finnes bare på serveren. */
.price-section .kontakt{max-width:620px;margin:var(--space-3xl) auto 0;padding:clamp(26px,4vw,48px);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:14px}
.kontakt h3{margin:0;font-family:"Petrona",serif;font-size:1.7rem;font-weight:500}
.kontakt-hjelp{margin:var(--space-md) 0 var(--space-xl);color:var(--ink-soft);font-size:.84rem;line-height:1.65}
.kontakt label{display:block;margin:var(--space-lg) 0 6px;font-size:.78rem;font-weight:700}
.kontakt input,.kontakt textarea{width:100%;padding:13px 14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:3px;font-size:1rem;line-height:1.5}
.kontakt textarea{resize:vertical}
.kontakt button[type="submit"]{width:100%;margin-top:var(--space-xl)}
.kontakt-felle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.kontakt-svar{margin:var(--space-md) 0 0;font-size:.84rem;line-height:1.6}
.kontakt-svar:empty{margin:0}
.kontakt-svar.ok{color:var(--moss)}
.kontakt-svar.feil{color:var(--danger)}
/* Klebrig mobil-CTA. Vises etter heroen, forsvinner ved prisseksjonen.
Aldri display-veksling: opacity + transform + pointer-events, slik
designsystemet krever. */
.m-cta{position:fixed;z-index:80;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:12px 16px;background:color-mix(in oklch,var(--white) 96%,transparent);border-top:1px solid var(--line);box-shadow:0 -12px 40px color-mix(in oklch,var(--ink) 12%,transparent);opacity:0;pointer-events:none;transform:translateY(100%);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.m-cta.vis{opacity:1;pointer-events:auto;transform:translateY(0)}
.m-cta__info{display:grid;gap:2px;line-height:1.2}
.m-cta__info b{font-size:1rem}
.m-cta__info span{color:var(--muted);font-size:.66rem}
@media (max-width:720px){
.m-cta{display:flex}
.site-footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
.m-cta{transition:none}
}
/* E-postfangst. UTKAST -- teksten er ikke godkjent. Var en egen seksjon
paa 513 px mellom spoersmaalene og siste kjoepsknapp, altsaa der den ba
leseren utsette kjoepet. Naa én linje med felt i bunnteksten, 27.08.2026.
Bunnteksten er moerk, saa svarlinja maa ha egne lyse farger: .kontakt-svar.ok
er --moss, som er umulig aa lese paa oklch(22%). */
.fotfang{grid-column:1 / -1;display:grid;gap:11px;max-width:620px;margin:0}
.fotfang__linje{margin:0;color:color-mix(in oklch,var(--paper) 72%,var(--ink));font-size:.82rem;line-height:1.6}
.fotfang__rad{display:flex;flex-wrap:wrap;gap:9px}
.fotfang input[type="email"]{flex:1 1 150px;min-width:0;min-height:44px;padding:0 14px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:3px;font-size:.95rem}
.fotfang .button{flex:none}
.fotfang__samtykke{display:flex;align-items:flex-start;gap:9px;color:color-mix(in oklch,var(--paper) 52%,var(--ink));font-size:.7rem;line-height:1.5}
.fotfang__samtykke input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--moss)}
.fotfang__samtykke a{color:inherit}
.fotfang .kontakt-svar{margin:0;font-size:.78rem}
.fotfang .kontakt-svar.ok{color:oklch(86% .09 152)}
.fotfang .kontakt-svar.feil{color:oklch(78% .12 32)}
/* ==================================================================
PAKKELISTA I PRISKORTET OG TRYGGHETSLINJENE — 26.08.2026
«Alt inkludert» og prisen sto som to seksjoner som sa mye av det
samme, og trygghet som en tredje med egen overskrift og egen luft.
Alle tre er naa én seksjon. Ingen punkter er borte; de fire gruppene
dekker de seks kulepunktene priskortet hadde.
================================================================== */
.pakke-liste__tittel{margin:0 0 var(--space-md);color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pakke-liste{display:grid;margin:0 0 var(--space-2xl);padding:0;list-style:none;border-bottom:1px solid var(--line)}
.pakke-liste li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:var(--space-lg);padding:18px 0;border-top:1px solid var(--line)}
.pakke-liste li > span{padding-top:5px;color:var(--warm);font-size:.68rem;font-weight:700}
.pakke-liste h4{margin:0;font-family:"Petrona",serif;font-size:clamp(1.35rem,1.7vw,1.8rem);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.pakke-liste p{max-width:60ch;margin:var(--space-sm) 0 0;color:var(--ink-soft);font-size:.86rem;line-height:1.6}
/* Fire korte linjer paa den moerke flata rett under prisen. */
.trygghet{max-width:1050px;display:grid;gap:var(--space-md);margin:clamp(30px,4vw,48px) auto 0}
.trygghet p{margin:0;padding-top:var(--space-md);color:color-mix(in oklch,var(--paper) 70%,var(--ink));border-top:1px solid color-mix(in oklch,var(--paper) 22%,transparent);font-size:.84rem;line-height:1.55}
.trygghet b{color:var(--paper)}
.trygghet .lenkeknapp{color:var(--gold)}
/* ==================================================================
KOMPRIMERING AV /ny PAA MOBIL — 26.08.2026
Maalt foer: 18 828 px paa 390 x 844, altsaa 22,3 skjermhoeyder mot
forsidens 10,9. Alt under strammer FORMEN. Ingen setning og ingen
seksjon er fjernet -- to seksjoner er slaatt inn i prisseksjonen.
Alt ligger bak 720 px, saa desktop staar uroert. Blokka staar sist i
fila med vilje: den skal vinne paa rekkefoelge over reglene over,
som har samme spesifisitet.
================================================================== */
@media (max-width: 720px){
/* 1. Seksjonsluften. Ni seksjoner à 76-88 px topp og bunn var ~1 500 px. */
.section-pad,
.problem.section-pad,.now-section.section-pad,.journey.section-pad,
.day-section.section-pad,.memory-section.section-pad,
.price-section.section-pad,.faq.section-pad{padding-block:48px}
/* 2. Produktvisningen. Skrivebordsvinduet er uleselig paa 390 px og
kostet 723 px. Telefonen staar igjen alene; begge paa desktop. */
.interface-showcase .product-window--desktop{display:none}
.app-phone-demo{min-height:0}
.app-phone-demo__body{min-height:0;padding-bottom:14px}
.app-phone-demo__body > h3{margin:7px 0 15px;font-size:2.4rem}
.now-section .section-heading{margin-bottom:26px}
.now-section .underlined-link{margin-top:20px}
/* 3. Reisen. Nummeret staar paa samme linje som steget, og avstanden
mellom stegene er halvert. All tekst er beholdt. */
.journey{row-gap:30px}
.journey__sticky > p:last-child{margin-top:14px;font-size:.92rem;line-height:1.6}
.journey__steps li{grid-template-columns:auto minmax(0,1fr);column-gap:10px;padding:16px 0}
.journey__steps li div > p:first-child{margin-bottom:6px}
.journey__steps h3{font-size:1.5rem;line-height:1.12}
.journey__steps h3 + p{margin-top:10px;font-size:.9rem;line-height:1.55}
.journey__steps ul{gap:6px;margin-top:12px}
.journey__steps ul li{padding:5px 8px;font-size:.62rem}
/* 4-5. Familie- og invitasjonsseksjonen er TATT UT 27.08.2026 -- de sa
det samme som reisen, dagen og pakkelista. Reglene deres fulgte med.
6. Dagen. Samme grep: telefonen foelger innholdet, og menylinja
ligger absolutt plassert, saa bunnen maa reserveres. */
.day-phone{width:min(322px,88vw);height:auto;padding-bottom:72px}
.day-phone__intro{padding:14px 20px 10px}
.day-product{min-height:0}
.day-section__heading > p:last-child{margin-top:14px;font-size:.92rem;line-height:1.6}
/* 7. Minnene. QR-plakaten alene var 490 px, gjestetelefonen 735 px. */
.memory-title{padding-bottom:20px;gap:16px}
.memory-title > p:last-child{font-size:.92rem;line-height:1.6}
.guest-share{padding:20px 14px;gap:20px}
.guest-phone{width:min(286px,80vw);height:auto;padding-bottom:16px;aspect-ratio:9 / 17.5;justify-self:center}
.guest-phone > h3{margin-bottom:11px;font-size:1.12rem}
.guest-upload{margin:0 14px;padding:12px}
.qr-poster{max-width:268px;min-height:0;padding:20px 18px;aspect-ratio:1 / 1.414;justify-self:center}
.qr-poster > h3{font-size:2.3rem}
.qr-poster > p{margin-bottom:11px}
.qr-poster__line{margin:11px 0}
.qr-grid{width:118px;height:118px;margin:14px 0 8px;padding:7px}
.letter-later{max-width:300px;padding:20px;justify-self:center}
.letter-later h3{margin:10px 0 8px;font-size:1.5rem}
.letter-later p{font-size:.8rem}
.letter-options{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:14px}
.letter-options button{min-height:38px;padding:0 8px;font-size:.66rem;text-align:center}
/* 8. Prisen med pakkelista og trygghetslinjene. */
.problem{row-gap:24px}
.problem__list p{padding:12px 0;font-size:.9rem;line-height:1.45}
.problem__answer p{padding-top:16px;font-size:1.2rem;line-height:1.4}
.price-intro{margin-bottom:24px}
.price-intro > p:last-child{margin-top:14px;font-size:.92rem;line-height:1.6}
.price-card__head{padding:24px 20px}
.price-card__head h3{margin:10px 0 16px;font-size:2.4rem}
.price-card__body{padding:22px 20px 26px}
.pakke-liste{margin-bottom:20px}
.pakke-liste li{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:14px 0}
.pakke-liste h4{font-size:1.15rem}
.pakke-liste p{margin-top:6px;font-size:.82rem;line-height:1.5}
.trygghet{margin-top:24px;gap:10px}
.trygghet p{padding-top:10px;font-size:.8rem;line-height:1.5}
.price-anchor{margin-top:26px;font-size:1.25rem;line-height:1.3}
.price-section .kontakt{margin-top:24px;padding:20px}
/* 9. Resten: sporsmaal, slutt-CTA og bunn. */
.faq{row-gap:24px}
.faq__title > p:last-child{margin-top:12px;font-size:.9rem}
.faq__list summary{min-height:56px;font-size:.84rem}
.faq__list p{padding:0 26px 16px 0;font-size:.88rem;line-height:1.6}
.final-cta{min-height:0;padding:52px 18px;row-gap:26px}
.final-cta h2{font-size:clamp(3rem,14vw,4.6rem)}
.final-cta__copy > p:not(.eyebrow){margin:14px 0 20px;font-size:.92rem}
.final-cta__date{padding:18px 0}
.final-cta__date strong{font-size:clamp(4rem,20vw,6rem)}
.site-footer{padding-top:40px;gap:24px}
/* Overskriftene. 12vw ga 47 px paa 390 og tre linjer paa hver eneste h2. */
.problem__title h2,.section-heading h2,.journey__sticky h2,.faq__title h2,
.day-section__heading h2,.memory-title h2{font-size:clamp(2.3rem,10vw,3.4rem)}
.price-intro h2{font-size:clamp(2.6rem,11vw,3.8rem)}
}
/* ==================================================================
STEMNINGSREVAMPEN — 08.09.2026
Stians dom: «Kunne like gjerne vært en app for begravelser.» Siden
hadde ett fotografi og ni tegnede flater. Alt under legger til bilder
og luft; ikke én setning er ny. Alle bilder er webp i tre bredder
under assets/landing-master/, fargegradert mot paletten. Blokka staar
sist med vilje: den skal vinne paa rekkefoelge over reglene over.
================================================================== */
/* Fullbredde-oeyeblikk uten tekst. */
.bleed{margin:0;padding:0;background:var(--paper-deep)}
.bleed img{width:100%;height:auto;aspect-ratio:2 / 1;object-fit:cover}
/* Reisen: en detalj over hvert steg. */
.step-photo{margin:0 0 var(--space-xl);overflow:hidden;border-radius:14px;background:var(--paper-deep)}
.step-photo img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.journey__steps li{padding-block:clamp(44px,6vw,80px)}
/* Dagen: lokalet klart, under overskriften. */
.day-photo{margin:clamp(28px,4vw,48px) 0 0;overflow:hidden;border-radius:14px;background:var(--paper)}
.day-photo img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
/* Bildedeling: et bord i bruk, over gjestetelefonen og QR-plakaten. */
.memory-photo{max-width:1220px;margin:0 auto clamp(28px,4vw,52px);overflow:hidden;border-radius:14px;background:var(--paper-deep)}
.memory-photo img{width:100%;height:auto;aspect-ratio:21 / 9;object-fit:cover}
/* Gjesteboka: papir, penn, haand -- oeverst i kortet, helt ut til kanten. */
.letter-later{--pad:28px;padding:var(--pad);overflow:hidden}
.letter-later__photo{width:calc(100% + 2 * var(--pad));max-width:none;height:auto;margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--space-xl);aspect-ratio:3 / 2;object-fit:cover}
/* Prisen: far og konfirmanten, ved siden av overskriften. */
.price-intro{max-width:1050px;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:end;gap:clamp(32px,5vw,80px)}
.price-photo{margin:0;overflow:hidden;border-radius:14px}
.price-photo img{width:100%;height:auto;aspect-ratio:2 / 3;object-fit:cover}
/* Slutten: konfirmanten mellom bjoerkene, over datoen. */
.final-cta__side{display:grid;gap:var(--space-2xl);align-self:center}
.final-cta__photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px}
.final-cta{align-items:center}
/* Heroen: portrett i staaende format, ansiktet oeverst i den myke formen. */
.hero__visual > img{object-position:center 28%}
@media (max-width: 960px){
.price-intro{grid-template-columns:minmax(0,1fr) 260px}
.final-cta__side{max-width:420px}
.final-cta__date{max-width:none}
}
@media (max-width: 720px){
/* Mer luft: seksjonsavstanden opp fra 48 til 64 px, overskriftene litt stoerre. */
.section-pad,
.problem.section-pad,.now-section.section-pad,.journey.section-pad,
.day-section.section-pad,.memory-section.section-pad,
.price-section.section-pad,.faq.section-pad{padding-block:54px}
.problem__title h2,.section-heading h2,.journey__sticky h2,.faq__title h2,
.day-section__heading h2,.memory-title h2{font-size:clamp(2.5rem,11vw,3.6rem)}
/* Heroen gaar helt ut til kanten, uten den myke formen. */
.hero{padding-bottom:0}
.hero__visual{min-height:0;margin:24px -18px 0}
.hero__shape{display:none}
.hero__visual > img{position:static;width:100%;height:auto;aspect-ratio:1;border-radius:0;object-position:center 0}
/* Lappene ligger nederst, saa de ikke dekker ansiktet. */
.float-note--progress{top:auto;left:14px;bottom:118px}
.float-note--next{right:14px;bottom:18px}
.trust-line{border-top:0}
/* Fullbredde: 2:1 blir en stripe paa 390 px. Egen 4:3-beskjaering via . */
.bleed img{aspect-ratio:3 / 2}
/* Reisen og dagen: bildene helt ut til kanten, lavere format. Nummeret
staar over bildet i stedet for i en egen kolonne, ellers dekker bildet det. */
.journey__steps li{display:block;padding-block:20px}
.journey__steps li > span{display:block;margin-bottom:10px}
.step-photo{margin:0 -18px 18px;border-radius:0}
.step-photo img{aspect-ratio:16 / 9}
.day-photo{margin:20px -12px 0;border-radius:0}
.day-section__heading{padding-inline:0}
.day-photo img{aspect-ratio:16 / 9}
.memory-photo{margin:0 -18px 20px;border-radius:0}
.memory-photo img{aspect-ratio:16 / 9}
.letter-later{--pad:20px}
.letter-later__photo{margin-bottom:16px}
.price-intro{grid-template-columns:1fr;gap:20px}
.price-photo{margin:0 -18px;border-radius:0}
.price-photo img{aspect-ratio:4 / 3;object-position:center 22%}
.final-cta__side{max-width:none;gap:16px}
.final-cta__photo{width:calc(100% + 36px);max-width:none;margin:0 -18px;aspect-ratio:4 / 3;border-radius:0}
}
/* Ingressen i prisseksjonen ligger naa i en ved siden av bildet, saa
den gamle regelen paa .price-intro > p:last-child treffer ikke lenger. */
.price-intro > div > p:last-child{max-width:54ch;margin:var(--space-xl) 0 0;color:color-mix(in oklch,var(--paper) 70%,var(--ink));line-height:1.7}
@media (max-width: 720px){
.price-intro > div > p:last-child{margin-top:14px;font-size:.92rem;line-height:1.6}
}