*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;max-width:100%;overflow-x:clip;color:#171514;background:linear-gradient(180deg,#f8f6f2 0%,#f4f1eb 100%);font-family:Arial,Helvetica,sans-serif}
.site{max-width:1000px;margin:0 auto;padding:0 36px}
a{color:inherit;text-decoration:none}
.wordmark,h1,h2,h3{font-family:Georgia,"Times New Roman",serif}
.wordmark{font-weight:800;font-size:25px;letter-spacing:-.065em}
.wordmark span,h1 span,h2 span{color:#BF3D3E}
.topbar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;height:72px;border:0}
.topbar:before,footer.site-footer:before{content:"";position:absolute;z-index:-1;inset-block:0;left:50%;width:100vw;transform:translateX(-50%);background-image:linear-gradient(rgba(248,246,242,.08),rgba(248,246,242,.08)),url("assets/papper.webp");background-position:center;background-size:cover}
.topbar:after,footer.site-footer:after{content:"";position:absolute;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:#d2cbc4}
.topbar:after{bottom:0}
nav{display:flex;gap:28px;font-size:13px;color:#514c47}
nav a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible{outline:2px solid #BF3D3E;outline-offset:4px}
.hero{padding:70px 0 50px;text-align:center}
.hero-copy{text-align:center;width:100%}
h1{font-size:clamp(65px,9vw,94px);line-height:1.08;letter-spacing:-.075em;margin:0 0 9px}
.tagline{font-size:12px;letter-spacing:.2em;font-weight:600;color:#56514d;margin:24px 0 0}
.intro{font-size:15px;line-height:1.6;color:#5b5651;max-width:500px;margin:16px auto 0}
.meter-section{display:flex;flex-direction:column;align-items:center;text-align:center;gap:25px;max-width:920px;margin:0 auto 8px;padding:40px 0 32px}
.meter-copy{width:100%;max-width:640px;margin:0 auto}
.meter-copy h2{max-width:620px;margin:0 auto}
.meter-copy p{color:#605a55;font-size:15px;line-height:1.6;margin:12px 0 0}
.meter-card{display:block;width:min(100%,360px);height:auto;border-radius:22px;filter:drop-shadow(0 16px 28px #17151120)}
.devices{display:flex;align-items:center;justify-content:center;gap:0;margin:10px auto 0;max-width:920px;padding:28px 12px 42px;overflow:visible}
.device{position:relative;flex:0 1 min(22vw,205px);min-width:0;padding:4px;background:#191817;border:1px solid #393735;border-radius:27px;box-shadow:0 22px 36px #17151130;transform-origin:50% 100%}
.device+.device{margin-left:clamp(-86px,-8vw,-54px)}
.device:nth-child(1){z-index:1;transform:rotate(-8deg) translateY(25px)}
.device:nth-child(2){z-index:2;transform:rotate(-3deg) translateY(5px)}
.device:nth-child(3){z-index:3;transform:rotate(3deg) translateY(5px)}
.device:nth-child(4){z-index:4;transform:rotate(8deg) translateY(25px)}
.device img{display:block;width:100%;height:auto;aspect-ratio:832/1800;object-fit:cover;border-radius:22px}
.notifications{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:920px;margin:0 auto 12px;padding:28px 0 10px}
.notifications-copy{width:100%;max-width:640px;margin:0 auto}
.notifications-copy h2{max-width:520px;margin:0 auto}
.notifications-copy>p:last-child{color:#605a55;font-size:15px;line-height:1.6;margin:12px 0 0}
.notification-cards{display:flex;flex-direction:column;align-items:center;width:min(100%,440px);padding:4px 8px 14px}
.notification-card{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 16px;background:linear-gradient(135deg,#343136,#242226);color:#fff;border:1px solid #ffffff32;border-radius:21px;box-shadow:0 12px 24px #17151125;text-align:left;width:100%}
.notification-card img{display:block;width:44px;height:44px;border-radius:13px;object-fit:cover;flex:none}
.notification-message{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.notification-message strong{font-size:14px;line-height:1.25;font-weight:650}
.notification-message span{color:#d7d3d9;font-size:11px;line-height:1.3}
.notification-card time{align-self:flex-start;color:#c3bec5;font-size:10px;white-space:nowrap}
.availability{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin:30px 0 0;background:#171514;color:#fff;padding:9px 18px 9px 10px;border-radius:42px;font-size:13px;letter-spacing:.01em;transition:transform .18s ease,background .18s ease}
.availability:hover{transform:translateY(-1px);background:#302c29}
.app-icon{display:block;width:48px;height:48px;border-radius:14px;object-fit:cover;flex:none}
.arrow{font-size:18px;line-height:1;margin-left:12px}
.kicker{margin:0;color:#df2929;font-weight:700;font-size:10px;letter-spacing:.2em}
h2{font-size:clamp(28px,4.5vw,39px);letter-spacing:-.055em;line-height:1.12;margin:12px 0 0}
.beta p:not(.beta-status){color:#605a55;font-size:14px;line-height:1.65;margin:0}
.beta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 0 36px;text-align:center}
.beta-copy{width:100%;max-width:640px;margin:0 auto}.beta h2{font-size:clamp(19px,3vw,26px);margin:0 0 10px}
.beta-availability{margin:0}
footer.site-footer{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:25px 0 35px;text-align:center}
footer.site-footer:after{top:0}
.powered-by{margin:0;color:#77716b;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:400;line-height:1.6;letter-spacing:.01em}
.powered-by span{color:#BF3D3E}
.powered-by a{color:#514c47;text-decoration:none;transition:color .18s ease}
.powered-by a:hover{color:#BF3D3E;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){
.site{padding:0 18px}.topbar{height:62px}.wordmark{font-size:22px}nav{gap:19px;font-size:12px}
.hero{padding:54px 0 34px}.hero-copy{text-align:center;width:100%}h1{font-size:clamp(54px,12vw,75px)}.tagline{font-size:10px;letter-spacing:.12em;margin-top:21px}.meter-section{gap:16px;margin:12px auto 8px;padding:30px 0 20px}.meter-copy h2{max-width:420px;margin:0 auto;font-size:clamp(27px,7.2vw,34px)}.meter-copy p{margin-top:8px;font-size:13px}.meter-card{width:min(100%,290px);border-radius:18px}
.devices{width:100%;margin:0 auto;padding:24px 0 34px}.device{flex:0 1 min(38vw,175px);padding:3px;border-radius:19px}.device+.device{margin-left:clamp(-63px,-15vw,-38px)}.device img{border-radius:15px}.device:nth-child(1){transform:rotate(-9deg) translateY(18px)}.device:nth-child(2){transform:rotate(-3deg) translateY(3px)}.device:nth-child(3){transform:rotate(3deg) translateY(3px)}.device:nth-child(4){transform:rotate(9deg) translateY(18px)}
.notifications{gap:14px;margin:0 auto 8px;padding:20px 0 6px}.notifications-copy h2{max-width:none;margin:0 auto;font-size:clamp(27px,7.2vw,34px)}.notifications-copy>p:last-child{margin-top:8px;font-size:13px}.notification-cards{margin-top:0;padding:3px 0 4px}.notification-card{gap:10px;min-height:68px;padding:10px 12px;border-radius:17px;width:min(100%,360px)}.notification-card img{width:40px;height:40px;border-radius:12px}.notification-message strong{font-size:12px}.notification-message span{font-size:10px}.notification-card time{font-size:9px}
.availability{margin-top:23px;padding:7px 16px 7px 8px;font-size:12px}.app-icon{width:48px;height:48px;border-radius:14px}.arrow{margin-left:4px}.beta{padding:24px 0 32px;gap:14px}.beta h2{font-size:clamp(18px,4.6vw,23px);margin:0 0 8px}.beta-availability{margin:0}footer{align-items:flex-start;flex-direction:column;gap:6px}
}
@media(max-width:450px){.devices{max-width:100%;overflow:visible;padding-inline:0}.device{flex-basis:min(27vw,122px)}.device+.device{margin-left:clamp(-52px,-14vw,-32px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:linear-gradient(#f8f7f4ed,#f8f7f4ed),url("assets/papper.webp") center/800px}
.device img{aspect-ratio:1320/2868;object-fit:contain}
.reading-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:50px 0;border-top:1px solid #d9d4cc}
.reading-copy h2{margin:0}
.reading-copy p{font-size:15px;line-height:1.6;color:#605a55;max-width:290px;margin:16px 0}
.web-flow-link{display:inline-block;font-size:13px;border-bottom:1px solid #BF3D3E;padding:7px 0}
.reading-phones{display:flex;justify-content:center;align-items:center;padding:20px 12px 30px}
.reading-phones .device{flex:0 1 190px;width:45%;transform:rotate(-5deg)}
.reading-phones .device+.device{margin-left:-35px;transform:rotate(5deg) translateY(12px)}
.meter-card{filter:none;border-radius:0}
@media(max-width:650px){.reading-section{grid-template-columns:1fr;gap:22px;text-align:center;padding:35px 0}.reading-copy p{margin:12px auto;max-width:310px}.reading-phones{max-width:380px;margin:auto;width:100%}.reading-phones .device{flex-basis:42%;border-radius:22px}.reading-phones .device img{border-radius:17px}}

html{scroll-padding-top:84px}
.topbar{position:sticky;top:0;z-index:20;height:64px;background:#f8f7f4f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar:before{background:linear-gradient(#f8f7f4ed,#f8f7f4ed),url("assets/papper.webp") center/800px}
.app-release{margin:32px auto 0;scroll-margin-top:90px}
.release-art{display:flex;align-items:center;justify-content:center;gap:24px}
.release-app-icon{display:block;width:58px;height:58px;object-fit:cover;border-radius:14px;border:1px solid #d9d4cc}
.app-store-badge{display:block;width:auto;height:44px}
.app-release p{font-size:13px;color:#605a55;margin:16px 0 0}
.testflight-info{display:flex;align-items:center;gap:14px;margin:4px auto 0;text-align:left}
.testflight-info img{width:48px;height:48px;border-radius:12px}
.testflight-info p{margin:0 0 4px;font-size:13px;color:#514c47}
.testflight-info span{font-size:12px;color:#77716b}
@media(max-width:650px){.topbar{height:56px}.topbar nav{gap:14px;font-size:11px}.release-art{gap:22px}.app-release{margin-top:22px}.app-store-badge{height:40px}.release-app-icon{width:52px;height:52px;border-radius:13px}.testflight-info p{font-size:12px}}

/* Fria statistikplattor: autentiska utsnitt, utan gemensam bakgrund eller ram. */
.meter-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;width:min(100%,360px);background:none;border:0;box-shadow:none}
.meter-stats svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 3px 4px #17151120)}
.meter-stats .stat-total{grid-column:1/-1}
.notification-cards{gap:12px}
.notification-screenshot{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 10px #17151125)}

/* Systerfunktioner, med samma typografi och proportioner som resten av sidan. */
.feature-panel{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:40px;min-height:364px;margin:92px 0;padding:36px 50px;border-radius:38px}
.calendar-panel{background:linear-gradient(#e9e2d5dc,#e9e2d5dc),url("assets/papper.webp") center/700px;border:1px solid #dcd4c7}
.panel-media{height:292px;display:flex;align-items:center;justify-content:center;min-width:0}
.showcase-phone{flex:none;width:220px;margin:0;padding:5px;border:1px solid #393735;border-radius:32px;background:#191817;box-shadow:0 22px 36px #17151135}
.showcase-phone img{display:block;width:100%;height:auto;border-radius:26px}
.panel-copy{min-width:0}
.panel-copy h2{margin:0}
.panel-copy p{font-size:15px;line-height:1.65;color:#605a55;margin:20px 0;max-width:355px}
.panel-link{display:inline-flex;align-items:center;gap:16px;font-size:13px;line-height:1.5;padding:7px 0;border-bottom:1px solid #BF3D3E}
.panel-link:hover{border-bottom-width:2px;padding-bottom:6px}
.binder-panel{grid-template-columns:minmax(0,1fr) 260px;background:radial-gradient(ellipse at 100% 0,#c9a96b12,transparent 65%),linear-gradient(140deg,#1c1b1a,#090909);border:1px solid #c9a96b40;color:#f4f0e8}
.binder-panel h2,.binder-panel h2 span{color:#c9a96b}
.binder-panel p{color:#d2cbc0}
.binder-panel .panel-link{color:#e0c89a;border-color:#c9a96b}
.binder-panel .showcase-phone{border-color:#c9a96b70;box-shadow:0 22px 40px #0007}
@media(max-width:760px) and (min-width:651px){.feature-panel{grid-template-columns:210px minmax(0,1fr);gap:24px;padding-inline:30px}.binder-panel{grid-template-columns:minmax(0,1fr) 210px}.showcase-phone{width:205px}}
@media(max-width:650px){
  .meter-stats{width:min(100%,290px)}
  .feature-panel{grid-template-columns:minmax(0,1fr);gap:22px;padding:30px 24px;margin:88px 0 56px;border-radius:30px;text-align:center}
  .panel-media{height:auto;margin-top:-68px}
  .showcase-phone{width:185px;padding:4px;border-radius:27px}
  .showcase-phone img{border-radius:22px}
  .panel-copy p{font-size:14px;margin:16px auto;max-width:330px}
  .panel-copy h2{font-size:clamp(27px,7.2vw,34px)}
  .binder-panel .panel-media{grid-row:1}
  .binder-panel .panel-copy{grid-row:2}
}

/* Diskret utåtlutning; skärmbilder och grundmått behålls. */
.calendar-panel .showcase-phone{transform:rotate(-4deg)}
.binder-panel .showcase-phone{transform:rotate(4deg)}

/* Små typografiska justeringar, befintlig layout och bilder behålls. */
.tagline{font:700 clamp(13px,1.9vw,17px)/1.25 Georgia,"Times New Roman",serif;letter-spacing:.005em;text-transform:none;color:#171514}
.tagline span{color:#BF3D3E}
.reading-copy p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,2.6vw,23px);line-height:1.4;letter-spacing:-.02em}
.reading-copy p span{color:#BF3D3E}
.binder-panel{border-color:#d3bb8d66;box-shadow:0 10px 28px #17151112,inset 0 1px 0 #e0c89a12}
.binder-panel h2,.binder-panel h2 span{color:#d3bb8d}
.binder-panel p{color:#ded7ca}
.binder-panel .panel-link{color:#e0c89a;border-color:#d3bb8d}
.binder-panel .panel-link:focus-visible{outline-color:#d3bb8d}

/* Återställ mockupens två sloganrader och relativa serifstorlekar. */
.hero-copy .tagline{font-size:clamp(15px,2.5vw,24px);line-height:1.25;letter-spacing:-.025em;margin:32px 0 0;text-wrap:balance}
.hero-copy .tagline-source{font-size:clamp(13px,2vw,19px);margin-top:7px}
.hero .devices{margin-top:30px}
.reading-copy p{font-weight:700;color:#171514;font-size:clamp(22px,2.8vw,28px);line-height:1.3;max-width:355px}
@media(max-width:650px){.hero-copy .tagline{margin-top:24px}.hero-copy .tagline-source{margin-top:7px}.hero .devices{margin-top:20px}}

/* Tre textrader och samordnad serif i systerappens panel. */
.reading-copy p>.reading-line{display:block;color:#171514}
.binder-panel .panel-copy p{font:700 clamp(22px,2.8vw,28px)/1.3 Georgia,"Times New Roman",serif;letter-spacing:-.02em;color:#d3bb8d}

/* Bounded family polish, 2026-10-26. */
.feature-panel{scroll-margin-top:100px}.listmeter-panel{grid-template-columns:minmax(0,1fr) 260px;background:linear-gradient(#f1f2efeb,#f1f2efeb),url("assets/papper.webp") center/700px;border:1px solid #d9d8d2}.listmeter-panel .showcase-phone{transform:rotate(4deg)}
.release-icon-crop{display:block;flex:none;width:58px;height:58px;overflow:hidden;border-radius:14px}.release-icon-crop .release-app-icon{width:116%;height:116%;max-width:none;margin:-8%;border:0;border-radius:0;box-shadow:none;filter:none}
.topbar nav{gap:18px}.accent-word{color:#BF3D3E}
@media(max-width:760px) and (min-width:651px){.listmeter-panel{grid-template-columns:minmax(0,1fr) 210px}.topbar nav{gap:10px}}
@media(max-width:650px){.topbar{height:auto;min-height:72px;flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 0}.topbar .wordmark{width:100%;text-align:center}.topbar nav{width:100%;justify-content:center;flex-wrap:wrap;gap:8px 14px;font-size:11px}.listmeter-panel{grid-template-columns:minmax(0,1fr)}.listmeter-panel .panel-media{grid-row:1}.release-icon-crop{width:52px;height:52px;border-radius:13px}}