/* Storebouncer: the hero with the film in its frame, the floating header, the number beside Adis and the painted surfaces.
   Loaded after site.css and scenes.css. */
:root {
  --glass: rgb(255 255 255 / .5);
  --glass-line: rgb(255 255 255 / .7);
  --soft: 0 0 0 1px rgb(17 18 20 / .06), 0 1px 2px rgb(17 18 20 / .06), 0 14px 34px -16px rgb(17 18 20 / .28);
}
h1, h2 { font-weight: 450; }

/* ---------- header: one floating pill of glass ---------- */
.nav { top: 10px; width: min(1136px, 100% - 24px); margin: 10px auto 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 0 0 1px rgb(17 18 20 / .06), 0 10px 30px -16px rgb(17 18 20 / .3); }
.nav.nav--solid { background: rgb(255 255 255 / .82); border-bottom-color: transparent; }
.nav.nav--hidden { transform: translateY(calc(-100% - 14px)); }
.nav .nav-in { width: auto; height: 60px; padding: 0 11px 0 22px; }
.nav .btn--sm { min-height: 38px; }
.mobile-menu { top: 0; height: 100dvh; padding-top: 86px; z-index: -1; border-radius: 0; }
html.menu-open .nav { border-radius: 30px; box-shadow: none; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* buttons: a little light on the top edge and a soft drop, so they sit on the page */
.btn { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(17 18 20 / .18), 0 8px 18px -8px rgb(39 71 214 / .65); }
.btn--quiet, .btn--light { box-shadow: 0 0 0 1px rgb(17 18 20 / .08), 0 1px 2px rgb(17 18 20 / .06), 0 8px 18px -10px rgb(17 18 20 / .25); }
.btn--quiet { background: var(--paper); }
@media (hover: hover) { .btn--quiet:hover { background: var(--card); } }

/* ---------- hero: white at the top, the painted dawn behind the frame ---------- */
.hero { padding-top: 40px; overflow: clip; border-radius: 0 0 32px 32px; background: var(--paper) url(/assets/art/dawn.webp?v=2026-11-12h) 50% 100% / 100% 70% no-repeat; }
.hero::before { display: none; }
.hero h1 { font-size: clamp(38px, 3.9vw + 8px, 66px); letter-spacing: -.048em; }
.hero-sub { max-width: 33em; margin-top: 22px; font-size: 18px; line-height: 1.5; }
/* what you get, in three: the same white pill as the badge above the headline */
.usps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; list-style: none; }
.usps li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px 8px 11px; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: 0 0 0 1px rgb(17 18 20 / .07), 0 6px 18px -10px rgb(17 18 20 / .3); font-size: 15px; font-weight: 550; line-height: 1.2; letter-spacing: -.015em; white-space: nowrap; }
.usps svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
.hero-btns { margin-top: 26px; }
.hero-badge { background: rgb(255 255 255 / .8); box-shadow: 0 0 0 1px rgb(17 18 20 / .07), 0 6px 18px -10px rgb(17 18 20 / .3); }

/* the ad products the app holds back for, under the film where the painting is dark: light on blue */
.hero-held { padding-bottom: 54px; text-align: center; }
.held { margin-top: 34px; }
.held p { font-size: 14px; line-height: 1.3; letter-spacing: -.005em; color: rgb(255 255 255 / .8); }
.held ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin-top: 16px; list-style: none; }
.held li { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -.035em; white-space: nowrap; color: rgb(255 255 255 / .92); }
.held svg { flex: none; width: 19px; height: 19px; fill: currentColor; }

/* the film: a 16:9 picture in a frame of glass, its button in the corner, and under it what the pictures are */
.film { position: relative; margin-top: 48px; }
.film-glass { position: relative; width: min(1084px, 100% - 40px); margin-inline: auto; padding: 14px; border: 1px solid var(--glass-line); border-radius: 28px; background: rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -20px 80px -30px rgb(255 255 255 / .6); }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 15px; background: #0B1150; box-shadow: 0 0 0 1px rgb(15 26 110 / .12), 0 40px 90px -30px rgb(15 26 110 / .7); }
.film-toggle { position: absolute; right: 28px; bottom: 28px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(14 16 20 / .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: opacity .25s, background-color .18s; }
.film-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; }
.film-toggle .film-play { margin-left: 2px; }
.film-toggle .film-pause, .film.is-playing .film-play { display: none; }
.film.is-playing .film-pause { display: block; }
.film.is-playing .film-toggle { opacity: 0; } /* while it plays the button keeps out of the picture, until someone points at the film or tabs to it */
.film.is-playing .film-glass:hover .film-toggle, .film .film-toggle:focus-visible { opacity: 1; }
@media (hover: hover) { .film-toggle:hover { background: rgb(14 16 20 / .8); } }
@media (hover: none) { .film.is-playing .film-toggle { opacity: .75; } }
.film-cap { max-width: calc(100% - 40px); margin: 16px auto 0; font-size: 13px; line-height: 1.4; letter-spacing: -.005em; text-align: center; text-wrap: balance; color: rgb(255 255 255 / .82); } /* it sits where the painting is blue */

/* ---------- surfaces: softer cards, bigger corners ---------- */
.bc, .plan, .duo-fact { border-radius: 20px; }
.bc { background: #F6F6F4; }
.sec { padding-top: 128px; }

/* ---------- the number beside Adis ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 12px; padding: 12px; border-radius: 30px; background: #EFEFEC; }
.duo-fact { display: flex; flex-direction: column; padding: 40px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.duo-fact h2 { max-width: 19em; font-size: clamp(26px, 1.4vw + 13px, 34px); line-height: 1.08; letter-spacing: -.04em; }
.duo-fact h2 .dim { display: block; }
.duo-num { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 44px; }
.duo-num .proof-big { font-size: clamp(84px, 7.2vw, 116px); }
.duo-num .proof-art { gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; }
.duo-fact .proof-more { max-width: 26em; margin-top: 26px; }
.duo-end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: auto; padding-top: 32px; }
.duo-end .proof-cta { margin-top: 0; }
.duo-end .src { flex: 1 1 16em; margin-top: 0; padding-top: 0; }
.duo-host { position: relative; overflow: hidden; display: block; min-height: 560px; border-radius: 20px; background: #15171B; color: #fff; text-decoration: none; }
.duo-host img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.duo-host::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url(/assets/art/grain.png?v=2026-11-12h) 0 0 / 96px 96px; mix-blend-mode: overlay; opacity: .9; pointer-events: none; }
.duo-host::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 12 16 / 0) 46%, rgb(10 12 16 / .78)); pointer-events: none; }
.duo-host-text { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 20px; justify-items: start; }
.duo-host-text b { max-width: 11em; font-size: clamp(28px, 1.6vw + 14px, 38px); font-weight: 450; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
@media (hover: hover) { .duo-host:hover img { transform: scale(1.03); } }

/* ---------- the close ---------- */
.close-card { border-radius: 30px; }

/* ---------- /priser: the three plans on the sky, then every difference in one table ---------- */
.nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: var(--ink); }
.price-hero { padding: 72px 0 96px; overflow: clip; border-radius: 0 0 32px 32px; background: var(--paper) url(/assets/art/dawn.webp?v=2026-11-12h) 50% 100% / 100% 64% no-repeat; }
.price-top { text-align: center; }
.price-top h1 { font-size: clamp(44px, 3.4vw + 16px, 68px); line-height: 1; letter-spacing: -.05em; }
.price-top p { margin-top: 20px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.plan { padding: 30px; border: 0; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgb(255 255 255 / .7), 0 30px 70px -36px rgb(11 17 80 / .6); }
.plan--pick { background: var(--paper); box-shadow: 0 0 0 1.5px var(--accent), 0 40px 80px -34px rgb(11 17 80 / .85); }
.plan-go { margin-top: auto; padding-top: 30px; }
.plan-go .btn { width: 100%; }

.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp-plan { width: 176px; }
.cmp thead th { position: sticky; top: 80px; z-index: 2; padding: 20px 0 18px 24px; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--line); text-align: left; vertical-align: bottom; font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; transition: top .3s; }
.nav--hidden ~ main .cmp thead th { top: 0; }
/* while the header floats above the stuck row, the rows passing behind it are covered */
.cmp thead th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 80px; background: var(--paper); pointer-events: none; }
.cmp thead th:first-child { padding-left: 0; }
.cmp thead h2 { font-size: clamp(22px, 1vw + 14px, 28px); line-height: 1.1; letter-spacing: -.035em; }
.cmp-group th { padding: 48px 0 14px; text-align: left; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.cmp tbody:first-of-type .cmp-group th { padding-top: 30px; }
.cmp th[scope="row"] { padding: 12px 24px 12px 0; text-align: left; font-size: 15.5px; font-weight: 400; line-height: 1.4; color: var(--ink-2); }
.cmp td { padding: 12px 0 12px 24px; border-left: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp td svg { display: block; width: 20px; height: 20px; color: var(--accent); }
.cmp-no { display: block; width: 12px; height: 1.5px; margin: 10px 4px; border-radius: 1px; background: rgb(17 18 20 / .24); }
@media (hover: hover) { .cmp tr:hover th[scope="row"] { color: var(--ink); } }
.faq p a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- footer: the logo and the store, Adis and how to reach us, the links ---------- */
.footer-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.footer-host { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.footer-host img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.footer-host p { display: grid; gap: 6px; justify-items: start; font-size: 14.5px; line-height: 1.3; }
.footer-host b { font-size: 16px; font-weight: 500; letter-spacing: -.015em; color: #fff; }
.footer-host span { margin-bottom: 6px; color: rgb(255 255 255 / .55); }
.footer-host a { color: rgb(255 255 255 / .82); text-decoration: none; transition: color .15s; }
@media (hover: hover) { .footer-host a:hover { color: #fff; } }

/* ---------- /book: the form on a painted panel ---------- */
.book-page { padding: 64px 0 112px; }
.book-main { padding: 18px; border: 0; border-radius: 30px; background: #2747D6 url(/assets/art/vik.webp?v=2026-11-12h) 50% 50% / cover; box-shadow: 0 30px 70px -40px rgb(15 26 110 / .7); }
.book-main > form, .book-main > .cal-step, .book-main > .form-done { padding: 28px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 20px 50px -24px rgb(11 17 80 / .7); }
.book-main .field { background: #F7F7F5; }
.book-main .field:focus-within { background: var(--paper); }
.book-host img { width: 64px; height: 64px; }

/* ---------- /beregner: the same sky under the questions ---------- */
.calc-page { min-height: 100dvh; background: var(--paper) url(/assets/art/dawn.webp?v=2026-11-12h) 50% 100% / 100% 46% no-repeat fixed; }
.calc-opts button { background: rgb(255 255 255 / .86); box-shadow: 0 0 0 1px rgb(17 18 20 / .07), 0 1px 2px rgb(17 18 20 / .05), 0 10px 24px -16px rgb(15 26 110 / .45); }
@media (hover: hover) { .calc-opts button:hover { background: var(--paper); box-shadow: 0 0 0 1px rgb(17 18 20 / .14), 0 1px 2px rgb(17 18 20 / .05), 0 14px 28px -16px rgb(15 26 110 / .6); } }
.calc form, .calc [data-step="result"] { padding: 22px; border-radius: 18px; background: rgb(255 255 255 / .92); box-shadow: 0 0 0 1px rgb(17 18 20 / .06), 0 20px 50px -30px rgb(15 26 110 / .6); }
.calc [data-step="result"] { padding: 32px 24px 24px; border-radius: 22px; background: rgb(255 255 255 / .96); } /* the whole answer on one card, so the note and the button never sit on the sky */
/* the platform first: four tiles, and one screen for those who are not on Shopify */
.calc-opts--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc-opts--tiles button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 136px; padding: 20px 12px; border-radius: 22px; }
.calc-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #F1F1EE; color: var(--ink); }
.calc-mark svg { width: 26px; height: 26px; }
.calc-mark--shopify { background: #EAF4E2; color: #5E8E3E; }
.calc-mark--woo { background: #F1EAF7; color: #7F54B3; }
.calc-mark--magento { background: #FDECE4; color: #EE672F; }
.calc-mark--shopify svg, .calc-mark--woo svg, .calc-mark--magento svg { fill: currentColor; }
.calc-mark--woo svg { width: 42px; height: 42px; }
.calc-face { display: block; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 14px 30px -12px rgb(15 26 110 / .5); }
.calc-lead { margin-top: 14px; font-size: 17px; line-height: 1.5; text-align: center; color: var(--ink-2); text-wrap: balance; }
.calc-go { display: grid; gap: 8px; margin-top: 30px; }
.calc-go .btn { width: 100%; min-height: 56px; }
.calc-back { margin-top: 20px; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgb(255 255 255 / .86); color: var(--ink); box-shadow: 0 0 0 1px rgb(17 18 20 / .07), 0 10px 24px -16px rgb(15 26 110 / .45); }

/* ---------- the page opens in one quiet movement: text first, then the frame ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-in > *, .film, .hero-held { animation: rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .hero h1 { animation-delay: .06s; }
  .hero-sub { animation-delay: .13s; }
  .usps { animation-delay: .17s; }
  .hero-btns { animation-delay: .22s; }
  .film { animation-duration: .9s; animation-delay: .28s; }
  .hero-held { animation-delay: .4s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 1040px) {
  .footer-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-links { grid-column: 1 / -1; }
  .held ul { gap: 10px 26px; }

  .duo { grid-template-columns: 1fr; }
  .duo-host { min-height: 440px; }
}
@media (max-width: 640px) {
  .price-hero { padding: 36px 0 44px; border-radius: 0 0 22px 22px; background-image: url(/assets/art/dawn-800.webp?v=2026-11-12h); background-size: 100% 78%; }
  .price-top p { margin-top: 14px; font-size: 16.5px; }
  .plan { padding: 24px 20px; }
  .plan-go { padding-top: 22px; }
  .plan-go .btn { min-height: 52px; }
  .cmp-plan { width: 62px; }
  .cmp thead th { top: 70px; padding: 14px 0 12px; text-align: center; font-size: 14.5px; }
  .cmp thead th:first-child { text-align: left; }
  .cmp thead th::before { height: 70px; }
  .cmp thead h2 { font-size: 19px; }
  .cmp-group th { padding: 34px 0 10px; font-size: 18px; }
  .cmp th[scope="row"] { padding: 11px 12px 11px 0; font-size: 14.5px; }
  .cmp td { padding: 11px 0; font-size: 12px; letter-spacing: -.02em; text-align: center; }
  .cmp td svg { width: 19px; height: 19px; margin-inline: auto; }
  .cmp-no { margin: 10px auto; }
  .footer-in { display: flex; }
  .book-page { padding: 28px 0 72px; }
  .book-main { margin-top: 22px; padding: 10px; border-radius: 24px; background-image: url(/assets/art/vik-800.webp?v=2026-11-12h); }
  .book-main > form, .book-main > .cal-step, .book-main > .form-done { padding: 20px 16px; }
  .calc-page { background-image: url(/assets/art/dawn-800.webp?v=2026-11-12h); background-attachment: scroll; background-size: 100% 40%; }
  .nav { top: 8px; width: calc(100% - 16px); margin-top: 8px; }
  .nav .nav-in { height: 54px; padding: 0 6px 0 16px; }
  .mobile-menu { padding-top: 76px; }
  .hero { padding-top: 34px; border-radius: 0 0 22px 22px; background-image: url(/assets/art/dawn-800.webp?v=2026-11-12h); background-size: 100% 62%; }
  .hero-sub { font-size: 16.5px; }
  .held { margin-top: 26px; }
  .held ul { gap: 10px 18px; margin-top: 12px; }
  .held li { gap: 6px; font-size: 14px; }
  .held svg { width: 15px; height: 15px; }
  .held li:nth-child(n+6) { display: none; }
  .film { margin-top: 32px; }
  .hero-held { padding-bottom: 36px; }
  .film-glass { width: calc(100% - 20px); padding: 7px; border-radius: 20px; }
  .film-video { border-radius: 13px; }
  .film-toggle { right: 15px; bottom: 15px; }
  .film-cap { max-width: calc(100% - 28px); margin-top: 12px; font-size: 12.5px; }

  .sec { padding-top: 72px; }
  .duo { padding: 8px; border-radius: 24px; }
  .duo-fact { padding: 24px 20px; }
  .duo-fact h2 { font-size: 26px; }
  .duo-num { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
  .duo-end { padding-top: 22px; }
  .duo-end .proof-cta { flex: 1 1 100%; }
  .duo-host { min-height: 400px; }
  .duo-host-text { left: 22px; right: 22px; bottom: 22px; }
  .close-card { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {

  .duo-host img { transition: none; }
}