/* Layout: the approved mockup-A look (mid-depth green bands alternating with white/mint sections), told as a scroll storyboard:
   device stack → zoom into the phone → chat story → features → tickets story → stacked ending. Single deliberate theme. */
:root {
  --dark: #164a3a; --dark2: #1c5545; --cream: #eef5ef; --muted-d: rgba(238,245,239,.82); --line-d: rgba(240,250,244,.2);
  --light: #ffffff; --mint: #f2f7f4; --ink: #11261d; --muted-l: rgba(17,38,29,.68); --line-l: rgba(17,38,29,.12);
  --leaf-d: #c4f1d6; --leaf: #15895a; --sun: #f3b63f;
  --chat-bg: #efe7dc; --bubble-in: #ffffff; --bubble-out: #d9fdd3; --chat-ink: #111b21; --chat-meta: #667781; --chat-head: #0b5c4b;
  --display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif; --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --nav: 64px; color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--dark); color: var(--cream); font-family: var(--sans); overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; line-height: 1.08; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: 999px; border: 0; text-decoration: none; font: 700 16px var(--sans); cursor: pointer; transition: transform .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-go { background: var(--leaf-d); color: #0f3a2c; }
.btn-ghost { border: 1px solid var(--line-d); color: var(--cream); background: transparent; }
.light .btn-go { background: var(--leaf); color: #fff; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-d); }
.light .kicker { color: var(--leaf); }
.h2 { font-size: clamp(32px, 4vw, 50px); }
.light { background: var(--light); color: var(--ink); }
.light.tint { background: var(--mint); }
.muted { color: var(--muted-d); } .light .muted { color: var(--muted-l); }

.mk-flag { background: var(--sun); color: #1d1503; text-align: center; font: 700 14px var(--sans); padding: 8px 16px; }
.mk-progress { position: fixed; left: 0; top: env(safe-area-inset-top, 0px); height: 3px; width: 100%; background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
.mk-motion { position: fixed; z-index: 70; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); border: 0; cursor: pointer; padding: 12px 18px; border-radius: 999px; background: var(--sun); color: #1d1503; font: 700 15px var(--sans); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(22,74,58,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-d); }
.nav .wrap { height: var(--nav); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px var(--display); }
.mark { width: 28px; height: 28px; border-radius: 9px; background: conic-gradient(from 200deg, var(--leaf-d), var(--sun), var(--leaf-d)); display: grid; place-items: center; flex: none; }
.mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dark); }
.nav nav { display: flex; gap: 24px; flex: 1; font-size: 15px; color: var(--muted-d); }
.nav nav a { text-decoration: none; } .nav nav a:hover { color: var(--cream); }
.nav .btn { height: 42px; padding: 0 18px; font-size: 15px; }

/* Shared device chrome */
.phone { position: absolute; width: 250px; height: 510px; border-radius: 38px; padding: 9px; background: #06120d; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -24px rgba(0,0,0,.55); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--chat-bg); display: flex; flex-direction: column; }
.chat-head { background: var(--chat-head); color: #fff; padding: 26px 12px 10px; display: flex; align-items: center; gap: 9px; flex: none; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: #2a1b00; display: grid; place-items: center; font: 700 12px var(--display); flex: none; }
.chat-head b { display: block; font-size: 13px; line-height: 1.2; } .chat-head small { font-size: 10px; opacity: .8; }
.chat { flex: 1; padding: 10px 9px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; background-image: radial-gradient(rgba(17,27,33,.05) 1px, transparent 1px); background-size: 14px 14px; }
.msg { max-width: 88%; padding: 7px 9px 5px; border-radius: 9px; font-size: 12.5px; line-height: 1.36; color: var(--chat-ink); box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.msg.in { background: var(--bubble-in); align-self: flex-start; border-top-left-radius: 2px; }
.msg.out { background: var(--bubble-out); align-self: flex-end; border-top-right-radius: 2px; }
.msg .t { display: block; text-align: right; font-size: 9.5px; color: var(--chat-meta); margin-top: 2px; }
.msg .link { display: block; margin-top: 5px; padding: 6px 7px; border-radius: 6px; background: #f0f2f5; font-size: 11px; color: var(--chat-head); font-weight: 600; }
.qbtns { align-self: flex-start; width: 88%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.qbtns :is(span,a) { background: #fff; color: #1f6f68; text-align: center; font-size: 11.5px; font-weight: 700; padding: 7px 2px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); transition: background .3s; }
.qbtns :is(span,a).tap { background: #e7f6ee; color: var(--chat-head); }
.typing { display: flex; gap: 4px; padding: 10px 11px; width: max-content; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa6ad; animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%,80%,100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.coupon { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; margin-top: 4px; padding: 7px; border: 1px dashed #b9c7bf; border-radius: 8px; background: #fbfcfb; position: relative; }
.coupon b { display: block; font-size: 12.5px; }
.code { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--chat-meta); }
canvas.qr { width: 54px; height: 54px; image-rendering: pixelated; display: block; }
.stamp { position: absolute; right: 6px; top: 6px; transform: rotate(-8deg); border: 2px solid var(--leaf); color: var(--leaf); font: 700 10px var(--sans); padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.9); }

/* HERO: device stack, then the camera flies into the phone */
.track-hero { position: relative; height: calc(100vh + 1700px); }
.hero { position: sticky; top: calc(var(--nav) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--nav)); overflow: hidden; }
.hero .wrap { height: 100%; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 32px; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-d); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf-d); box-shadow: 0 0 0 4px rgba(196,241,214,.25); }
h1 { font-size: clamp(40px, 5vw, 64px); } h1 em { font-style: normal; color: var(--leaf-d); }
.lede { font-size: 18px; line-height: 1.6; color: var(--muted-d); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.terms { font-size: 15px; color: var(--muted-d); } .terms strong { color: var(--sun); }
.devices { position: relative; height: 100%; perspective: 1400px; z-index: 3; }
.rig { position: absolute; left: 50%; top: 50%; width: 560px; height: 520px; margin: -260px 0 0 -280px; transform-style: preserve-3d; }
.laptop { position: absolute; left: 0; top: 30px; width: 420px; transform: translateZ(-90px); }
.lap-lid { border-radius: 14px; padding: 10px; background: #0b1a14; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.lap-screen { height: 250px; border-radius: 6px; overflow: hidden; background: #fff; color: var(--ink); }
.lap-base { height: 14px; margin: 0 -26px; border-radius: 0 0 14px 14px; background: linear-gradient(#cfd8d3, #9aa8a1); }
.site-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--dark); color: #fff; font: 700 12px var(--display); }
.site-hero { padding: 12px; background: var(--mint); }
.site-hero b { display: block; font: 700 16px var(--display); }
.site-hero span { font-size: 10.5px; color: var(--muted-l); }
.site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px; }
.site-cards div { border: 1px solid var(--line-l); border-radius: 8px; padding: 8px; font-size: 10px; }
.site-cards b { display: block; font-size: 11.5px; margin-bottom: 3px; }
.site-cards em { font-style: normal; color: var(--leaf); font-weight: 700; }
.tablet { position: absolute; left: 150px; top: 120px; width: 250px; height: 330px; border-radius: 22px; padding: 9px; background: #0b1a14; transform: translateZ(0); box-shadow: 0 30px 60px -18px rgba(0,0,0,.6); }
.tab-screen { height: 100%; border-radius: 15px; overflow: hidden; background: #0f241c; color: #fff; display: flex; flex-direction: column; }
.tab-head { padding: 10px 12px; font: 700 12px var(--display); display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.tab-head span { color: var(--leaf-d); font: 600 10px var(--sans); }
.viewfinder { margin: 12px; flex: 1; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #24433a, #0b1a14); display: grid; place-items: center; position: relative; }
.viewfinder::before { content: ""; position: absolute; inset: 22% 22%; border: 2px solid var(--leaf-d); border-radius: 10px; }
.viewfinder canvas { width: 76px; height: 76px; image-rendering: pixelated; border-radius: 4px; }
.admit { margin: 0 12px 12px; padding: 10px; border-radius: 10px; background: #1f8f5c; font-size: 11.5px; font-weight: 700; display: flex; justify-content: space-between; }
#heroPhone { left: 330px; top: 20px; transform: translateZ(90px); }
.zoom-fill { position: absolute; inset: 0; z-index: 4; background: var(--chat-bg); opacity: 0; pointer-events: none; }

/* HOW: chat story beside lifting steps */
.how { position: relative; z-index: 5; margin-top: calc(-100vh + var(--nav)); height: calc(100vh + 1800px); background: linear-gradient(transparent 0, transparent calc(100vh - var(--nav)), var(--mint) calc(100vh - var(--nav))); color: var(--ink); }
.how .stage { position: sticky; top: calc(var(--nav) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--nav)); }
.how .stage.solid { background: var(--mint); }
.how .wrap { height: 100%; display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }
.how-copy { display: flex; flex-direction: column; gap: 26px; }
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 18px; border-radius: 16px; transform-origin: 0 50%; transition: background .35s, box-shadow .35s; will-change: transform; }
.step b { font: 700 26px var(--display); color: var(--leaf); }
.step strong { display: block; font: 700 21px var(--display); }
.step span { display: block; font-size: 15px; color: var(--muted-l); margin-top: 3px; }
.step.on { background: #fff; box-shadow: 0 24px 50px -24px rgba(17,38,29,.35); }
.how .phone { position: relative; margin: 0 auto; }

/* FEATURES */
.features { padding-block: 96px; }
.features.stick { padding-block: 24px; }
.features.stick .feat-grid { margin-top: 26px; gap: 14px; }
.features.stick .feat { padding: 20px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.feat { padding: 26px; border-radius: 18px; background: var(--dark2); border: 1px solid var(--line-d); display: flex; flex-direction: column; gap: 10px; transform-style: preserve-3d; }
.feat h3 { font-size: 20px; } .feat p { color: var(--muted-d); font-size: 15px; line-height: 1.55; }
.feat .ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(196,241,214,.15); display: grid; place-items: center; color: var(--leaf-d); font-weight: 700; }

/* TICKETS: story across phone + tablet */
.tickets { height: calc(100vh + 2000px); }
.tickets .stage { position: sticky; top: calc(var(--nav) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--nav)); }
.tickets .wrap { height: 100%; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.t-devices { position: relative; height: 540px; }
.t-devices .phone { left: 40px; top: 15px; }
.layer { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.layer.first { opacity: 1; }
.evpage { background: #fff; color: var(--ink); }
.ev-top { padding: 26px 14px 12px; background: var(--dark); color: #fff; }
.ev-top b { display: block; font: 700 18px var(--display); } .ev-top span { font-size: 11px; opacity: .85; }
.ev-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.ev-row { display: flex; justify-content: space-between; padding: 10px; border: 1px solid var(--line-l); border-radius: 10px; }
.ev-cap { height: 8px; border-radius: 99px; background: var(--mint); overflow: hidden; } .ev-cap i { display: block; height: 100%; width: 72%; background: var(--leaf); }
.ev-btn { margin-top: 4px; padding: 12px; text-align: center; border-radius: 12px; background: var(--leaf); color: #fff; font-weight: 700; }
.ticket { margin-top: 4px; border-radius: 10px; overflow: hidden; background: #fbfcfb; border: 1px solid #d9e2dc; }
.ticket-top { background: var(--chat-head); color: #fff; padding: 7px 9px; font-size: 11px; } .ticket-top b { display: block; font-size: 12.5px; }
.ticket-body { display: grid; grid-template-columns: 70px 1fr; gap: 9px; padding: 8px 9px; align-items: center; font-size: 11px; color: var(--chat-meta); position: relative; }
.ticket-body canvas { width: 70px; height: 70px; }
.ticket-body b { color: var(--chat-ink); }
.checkout { background: #fff; color: var(--ink); }
.checkout .ev-body .ev-row b { font-family: var(--mono); }
.soon { position: absolute; top: 300px; left: -40px; right: -40px; transform: rotate(-14deg); background: var(--sun); color: #1d1503; text-align: center; font: 700 15px var(--display); padding: 8px; box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); letter-spacing: .04em; }
.t-tablet { position: absolute; right: 0; top: 70px; width: 270px; height: 360px; border-radius: 22px; padding: 9px; background: #0b1a14; box-shadow: 0 30px 60px -18px rgba(0,0,0,.45); }
.tag-soon { display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--sun); color: #8a5a00; font-size: 12px; font-weight: 700; }

/* STACKED ENDING */
.stack-sec { position: relative; }
/* The stack starts at What you get (owner, 2026-10-05): every later section keeps a higher layer and an opaque background. */
.features { position: relative; z-index: 1; background: var(--dark); }
.tickets { position: relative; z-index: 2; }
.plans-sec { z-index: 3; background: var(--dark); } .cust-sec { z-index: 4; } .faq-sec { z-index: 5; } .final-sec { z-index: 6; }
footer { z-index: 7 !important; }
.stick { position: sticky; top: calc(var(--nav) + env(safe-area-inset-top, 0px)); min-height: calc(100vh - var(--nav)); display: flex; flex-direction: column; justify-content: center; }
.stack-sec .wrap { padding-block: 64px; }
.setup { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; padding: 18px 22px; border-radius: 14px; background: var(--dark2); border: 1px solid var(--line-d); margin: 28px 0 20px; }
.setup strong { font: 700 28px var(--display); color: var(--sun); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan { border: 1px solid var(--line-d); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--dark); transform-style: preserve-3d; }
.plan.pick { border-color: var(--leaf-d); background: linear-gradient(180deg, rgba(196,241,214,.1), var(--dark) 60%); }
.plan h3 { font-size: 22px; display: flex; justify-content: space-between; }
.plan h3 small { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--leaf-d); }
.price { font: 700 34px var(--display); font-variant-numeric: tabular-nums; } .price span { font: 500 14px var(--sans); color: var(--muted-d); }
.plan dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; font-size: 14px; }
.plan dt { color: var(--muted-d); } .plan dd { margin: 0; font-weight: 700; text-align: right; }
.fine { margin-top: 14px; font-size: 14px; color: var(--muted-d); }
.cust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.cust-grid div { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 8px; transform-style: preserve-3d; }
.cust-grid b { font: 700 18px var(--display); } .cust-grid p { font-size: 14.5px; color: var(--muted-l); line-height: 1.5; }
.faq-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.qa { border-bottom: 1px solid var(--line-l); }
.qa button { width: 100%; background: none; border: 0; color: var(--ink); font: 700 17px var(--sans); padding: 18px 0; display: flex; justify-content: space-between; gap: 14px; cursor: pointer; text-align: left; }
.qa button em { font-style: normal; color: var(--leaf); transition: transform .3s; }
.qa[data-open="true"] button em { transform: rotate(45deg); }
.qa .ans { overflow: hidden; height: 0; } .qa .ans p { font-size: 15px; color: var(--muted-l); line-height: 1.55; padding-bottom: 18px; }
.final-sec { text-align: center; background: var(--dark); }
.final-sec .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-bottom: 110px; }
.final-sec h2 { font-size: clamp(38px, 5vw, 58px); }
.big-mark { width: 110px; height: 110px; border-radius: 32px; background: conic-gradient(from 0deg, var(--leaf-d), var(--sun), var(--leaf-d), var(--sun), var(--leaf-d)); display: grid; place-items: center; box-shadow: 0 20px 50px -18px rgba(243,182,63,.5); }
.big-mark::after { content: ""; width: 40px; height: 40px; border-radius: 50%; background: var(--dark); }
footer { position: relative; z-index: 5; background: transparent; }
footer .wrap { padding-block: 34px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted-d); font-size: 14px; }
footer a { text-decoration: none; }

@media (max-width: 900px) {
  .nav nav { display: none; }
  .track-hero, .how, .tickets { height: auto; margin-top: 0; }
  .hero, .how .stage, .tickets .stage { position: static; height: auto; }
  .hero .wrap, .how .wrap, .tickets .wrap { grid-template-columns: 1fr; padding-block: 48px; }
  .devices { height: 560px; } .rig { transform: scale(.7); }
  .feat-grid, .plans, .cust-grid, .faq-wrap { grid-template-columns: 1fr; }
  .how { background: var(--mint); }
}
@media (prefers-reduced-motion: reduce) { .mk-progress { display: none; } .typing i { animation: none; } }

[hidden] { display:none !important; }
.skip-link {position:fixed;left:16px;top:-80px;z-index:100;background:var(--sun);color:var(--ink);padding:12px;} .skip-link:focus {top:8px;}
.static-mode .track-hero,.static-mode .how,.static-mode .tickets {height:auto;margin-top:0;}
.static-mode .hero,.static-mode .stage,.static-mode .stick {position:relative;height:auto;min-height:0;}
.static-mode .hero .wrap,.static-mode .how .wrap,.static-mode .tickets .wrap {padding-block:64px;}
.static-mode .devices {height:560px;} .static-mode .how {background:var(--mint);}
.static-mode .typing {display:none;} .static-mode .step {opacity:1;transform:none;}
.static-mode .layer.checkout {opacity:1;} .static-mode .layer.first {opacity:0;}
.static-mode .mk-progress {display:none;}
@media(max-width:900px) {
.nav .wrap {gap:12px;justify-content:space-between;padding-inline:16px;} .brand {font-size:16px;} .nav .btn {font-size:13px;padding-inline:12px;}
.hero .wrap,.how .wrap,.tickets .wrap {gap:32px;} .hero-copy {gap:20px;} .eyebrow {line-height:1.5;} h1 {font-size:42px;}
.devices {height:auto !important;} .rig {position:relative;left:auto;top:auto;margin:0;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:28px;transform:none !important;}
.rig .laptop,.rig .tablet,.rig .phone {position:relative;left:auto;top:auto;transform:none;} .rig .laptop {width:min(100%,320px);} .lap-base {margin-inline:-8px;}
.t-devices {height:auto;display:flex;flex-direction:column;align-items:center;gap:28px;} .t-devices .phone,.t-tablet {position:relative;left:auto;right:auto;top:auto;}
.features {padding-block:56px;} .stack-sec .wrap {padding-block:56px;} .faq-wrap {gap:24px;} .step {padding:12px 0;grid-template-columns:32px 1fr;} .step strong {font-size:20px;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none !important;transition:none !important;scroll-behavior:auto !important;}}

.ev-btn {display:block;text-decoration:none;}
@media(max-width:900px){.rig #heroPhone{left:auto;top:auto;transform:none;}}
.msg .link{text-decoration:none;}

/* Overlap the arrival with the camera fill rather than holding an empty colour frame. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.how{margin-top:calc(-100vh + var(--nav) - 600px);}}

.qbtns a,.site-cards a {text-decoration:none;} button.ev-btn {border:0;width:100%;font:700 12px var(--sans);opacity:1;}