@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #061b20;
  --bg-raised: #0b2a31;
  --petrol: #0f3a43;
  --amber: #f5a93a;
  --cream: #f5eddd;
  --text: #e9f0ee;
  --muted: rgba(233, 240, 238, 0.76);
  --line: rgba(233, 240, 238, 0.12);
  --display: "Fraunces", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --max: 1160px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav: 64px;  /* height of the navigation bar */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav); }
/* Every section fills the screen under the navigation bar. When scrolling pauses between
   two sections, home.js carries on to the next one in the direction of the scroll. */
main > section {
  min-height: calc(100svh - var(--nav));
  display: flex; flex-direction: column; justify-content: center;
}
main > section > .wrap, main > section > .showroom-layout { width: min(var(--max), 100% - 40px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }

/* Word mark B, drawn as outlines by tools/build_wordmark.py. Sized by height. */
.wordmark { display: block; width: auto; }
.wordmark-sm { height: 40px; }
.wordmark-md { height: 72px; }
.wordmark-lg { height: clamp(110px, 15vw, 190px); }

.section-title {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.section-sub { margin-top: 14px; color: var(--muted); max-width: 34em; }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; gap: 28px; height: var(--nav); }
.nav-brand { display: flex; flex-shrink: 0; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/* The app icon with the rounded corners iOS gives it. */
.nav-icon { width: 40px; height: 40px; border-radius: 22.5%; }
/* Computer screens get a taller bar with a larger icon and word mark. */
@media (min-width: 1081px) {
  :root { --nav: 76px; }
  .nav-icon { width: 50px; height: 50px; }
  .nav .wordmark-sm { height: 50px; }
}
.nav-links { display: flex; gap: 16px; }
.nav-links a { position: relative; white-space: nowrap; text-decoration: none; color: var(--muted); font-size: 15px; padding: 6px 0; transition: color .2s var(--ease); }
.nav-links a:hover { color: var(--text); }
/* The section in view is marked in the menu. */
.nav-links a.current { color: var(--cream); }
.nav-links a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--amber); }

/* The language switch: a language symbol that opens a small list of the languages by their own
   names, the current one checked. On the narrowest phones it moves into the folded menu. */
.lang-menu { position: relative; flex-shrink: 0; }
.lang-menu summary { list-style: none; display: flex; padding: 8px; margin: 0 -8px; border-radius: 999px; color: var(--muted); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--cream); background: rgba(245, 237, 221, .08); }
.lang-icon { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.lang-menu ul { position: absolute; right: -8px; top: calc(100% + 10px); z-index: 1; min-width: 160px; list-style: none; margin: 0; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.lang-menu li a, .lang-item a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 8px; color: var(--muted); font-size: 15px; text-decoration: none; white-space: nowrap; }
.lang-menu li a:hover { color: var(--text); background: rgba(245, 237, 221, .06); }
.lang-menu li a[aria-current], .lang-item a[aria-current] { color: var(--cream); }
/* A check mark beside the current language. */
.lang-menu li a[aria-current]::after, .lang-item a[aria-current]::after { content: ""; width: 5px; height: 10px; margin: 0 3px 3px 0; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(45deg); }
.nav-links .lang-item, .nav.lang-folded .lang-menu { display: none; }
.nav.lang-folded .nav-links .lang-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; align-self: stretch; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
.nav.lang-folded .nav-links .lang-item a { font-size: 17px; padding: 8px 12px; }
.nav.lang-folded .nav-links .lang-item a[aria-current] { background: rgba(245, 237, 221, .08); }

/* Apple's official App Store badge, unmodified. Apple asks for at least 40 px height on screen
   and clear space of a quarter of the badge height around it. */
.store-badge { display: inline-block; padding: 0; line-height: 0; }
.store-badge img { height: 54px; width: auto; }
/* Apple does not allow the badge to be modified or animated, so it has no hover or press effect. */
/* The menu button is our own style, so it never imitates the badge. */
.nav-cta {
  display: inline-flex; flex-shrink: 0; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(245, 237, 221, .45); color: var(--cream); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.nav-cta:hover { background: rgba(245, 237, 221, .1); border-color: var(--cream); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(245, 237, 221, .4); background: none; color: var(--cream); font: 600 13px/1 var(--body); cursor: pointer;
}
.motion-toggle:hover { border-color: var(--cream); }
.motion-toggle.light { border-color: rgba(19, 39, 43, .3); color: #13272b; }
.motion-toggle.light:hover { border-color: #13272b; }
.motion-toggle.paused i::before { width: 0; height: 0; border-radius: 0; background: none; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.motion-toggle.paused i::after { display: none; }
/* Menu button for screens too narrow for the menu. Two lines that turn into a cross. */
.nav-toggle {
  display: none; position: relative; flex-shrink: 0; width: 40px; height: 40px; margin-right: -8px; padding: 0;
  border: 0; background: none; color: var(--cream); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before { position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s var(--ease); }
.nav-toggle span { top: 15px; }
.nav-toggle span::before { content: ""; left: 0; top: 8px; }
.nav.open .nav-toggle span { transform: translateY(4px) rotate(45deg); }
.nav.open .nav-toggle span::before { transform: translateY(-8px) rotate(-90deg); }

/* The app's own backdrop: a petrol gradient from top left to bottom right with a soft
   glow near the top, as behind Recipes and Bar in the app. Each section starts it over. */
.app-gradient {
  background:
    radial-gradient(ellipse 70% 60% at 70% 18%, rgba(0, 71, 82, .28), transparent 70%),
    linear-gradient(135deg, #002b34, #001d24 50%, #001116);
}

/* Hero */
.hero { padding: 48px 0; }
.hero-grid { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero-copy .lede { margin-top: 28px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--cream); max-width: 20em; }
.hero-copy .sub { margin-top: 16px; color: var(--muted); max-width: 30em; }
.hero-copy .store-badge { margin-top: 32px; }

.mark { position: relative; width: 100%; aspect-ratio: 1; }
.mark > img, .mark .die { position: absolute; }
.mark-glass, .mark-front { inset: 0; width: 100%; height: 100%; }
.mark-front {
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, transparent 32%, rgba(0, 0, 0, .55) 35.5%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 30%, transparent 32%, rgba(0, 0, 0, .55) 35.5%, #000 45%);
}
.die img { width: 100%; height: 100%; }
.die-0 img { clip-path: polygon(10% 29%, 37% 13%, 51% 39%, 46% 49%, 26% 56%, 10% 38%); }
.die-1 img { clip-path: polygon(55% 22%, 92% 32%, 83% 63%, 49% 51%); }
.crown { opacity: 0; transform-origin: 50% 100%; }

/* How it works: a recording of the real app */
.how { padding: 56px 0; }
.how-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 7vw, 110px); align-items: center; }
.how-copy .section-title { margin-bottom: 30px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.how-steps li { position: relative; padding-left: 22px; }
/* A small amber marker follows the video. Every step stays fully readable. */
.how-steps li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.how-steps li.on::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 169, 58, .18); }
.how-steps h3 { font-family: var(--display); font-size: 24px; line-height: 1.2; color: var(--cream); }
.how-steps p { margin-top: 2px; color: var(--muted); font-size: 16px; }
/* Apple's iPhone 18 Pro Max bezel, used as is. The screen area sits at 75, 66 and measures
   1320 by 2868 in the 1470 by 3000 artwork, and the bezel's own screen shape masks the corners. */
.device { position: relative; aspect-ratio: 1470 / 3000; width: min(330px, 26vw, calc((100svh - var(--nav) - 200px) * .49)); }
/* Below the phone, never over it: the pause control and Apple's shortened sequence note. */
.how-meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.how-note { font-size: 13px; color: var(--muted); }
.device-screen {
  position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; background: #000;
  -webkit-mask: url("device/screen-mask.png") 50% 50% / 111.364% 104.603% no-repeat;
  mask: url("device/screen-mask.png") 50% 50% / 111.364% 104.603% no-repeat;
}
.device-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.device-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Machines showroom */
.machines {
  padding: 36px 0; transition: background-color .7s var(--ease); background-color: #002b34;
  /* The same light to dark fall as the app backdrop, over each machine's own color. */
  background-image: radial-gradient(ellipse 70% 60% at 70% 18%, rgba(255, 255, 255, .05), transparent 70%),
                    linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .45));
}
.machines[data-theme="chrome"] { background-color: #262e33; }
.machines[data-theme="classic"] { background-color: #2c1a14; }
.machines[data-theme="digital"] { background-color: #0a1024; }
.machines[data-theme="machine"] { background-color: #2b3337; }
.showroom-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 24px; }
.showroom {
  position: relative; aspect-ratio: 3 / 2; max-height: calc(100svh - var(--nav) - 250px); width: 100%; max-width: 900px; justify-self: start; grid-column: 2; grid-row: 1;
  border-radius: 26px; overflow: hidden; perspective: 1400px; touch-action: pan-y;
  box-shadow: 0 50px 100px rgba(0, 0, 0, .45); background: #000; cursor: grab; user-select: none;
}
.showroom.dragging { cursor: grabbing; }
.showroom-tilt { position: absolute; inset: -4%; transform-style: preserve-3d; will-change: transform; }
.showroom-scene { position: absolute; inset: 0; }
.shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  will-change: transform, filter, opacity; -webkit-user-drag: none; pointer-events: none;
}
.showroom-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 36px 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62)); pointer-events: none;
}
.showroom-caption h3 { font-family: var(--display); font-size: clamp(30px, 3.6vw, 48px); line-height: 1; color: var(--cream); letter-spacing: -0.02em; }
.showroom-caption p { margin-top: 10px; color: rgba(245, 237, 221, .82); max-width: 32em; }
.machine-picker { display: flex; flex-direction: column; gap: 10px; grid-column: 1; grid-row: 1; }
.machine-picker button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 8px; text-align: center; border: 0; border-radius: 16px;
  background: none; color: var(--muted); font: 600 14px/1 var(--body); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.machine-picker button img {
  width: 96px; height: 64px; object-fit: cover; object-position: 50% 48%; border-radius: 11px;
  opacity: .6; transition: opacity .25s var(--ease), box-shadow .25s var(--ease);
}
.machine-picker button:hover { color: var(--text); transform: translateX(3px); }
.machine-picker button:hover img { opacity: .9; }
.machine-picker button[aria-selected="true"] { color: var(--cream); background: rgba(255, 255, 255, .07); }
.machine-picker button[aria-selected="true"] img { opacity: 1; box-shadow: 0 0 0 2px var(--cream); }

/* Play: the two modes and the bar they draw from */
.modes { padding: 36px 0; }
.modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 30px; }
.mode h3, .bar-copy h3 { font-family: var(--display); font-size: 30px; color: var(--cream); }
.mode p { margin-top: 10px; color: var(--muted); }
.v-known { color: #f3cb75; }
.v-promising { color: #76dba6; }
.v-risky { color: #ffc46b; }
.v-chaos { color: #e2a0f2; }
.landings { list-style: none; padding: 0; margin: 20px 0 0; display: grid; align-self: start; }
.landing { display: grid; grid-template-columns: auto 24px 46px 1fr; align-items: center; gap: 14px; height: 64px; border-top: 1px solid var(--line); }
.landing:last-child { border-bottom: 1px solid var(--line); }
.verdict-mix { display: flex; }
.verdict-mix img { width: 38px; height: 38px; border-radius: 10px; background: #f3ecde; padding: 3px; box-shadow: 0 0 0 2px var(--bg); }
.verdict-mix img + img { margin-left: -8px; }
.landing-arrow { width: 20px; height: 20px; color: var(--muted); }
.landing-photo { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.verdict-icon { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 14%, transparent); }
.verdict-icon svg { width: 24px; height: 24px; display: block; }
.landing-name { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--cream); display: grid; line-height: 1.2; }
.verdict .landing-name b { font-weight: 600; color: currentColor; }
.landing-name small { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--muted); }
/* The two columns share rows, so the heading, intro and table line up side by side. */
.modes-grid { grid-template-rows: auto auto auto; row-gap: 10px; }
.mode { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
/* Like in the app, only chaos keeps moving: a slow wobble on its tornado. */
.v-chaos .verdict-icon svg { animation: wobble 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateX(1px); } }


/* Recipes on cream, like a printed menu: one row of drinks drifting past */
.recipes { padding: 48px 0; background: #f2e9d8; overflow: hidden; color: #13272b; }
.recipes .section-title { color: #13272b; }
.parade-head { text-align: center; }
.parade-head > p { max-width: 40em; margin: 14px auto 0; color: rgba(19, 39, 43, .76); }
.recipes-kicker { margin-top: 26px; font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #85591a !important; }
.recipe-tags { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.recipe-tags span {
  display: inline-flex; align-items: center; gap: 0; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(19, 39, 43, .22);
  font: 600 14px/1 var(--body); color: rgba(19, 39, 43, .72);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), gap .4s var(--ease);
}
/* The drink passing the middle and its category share an amber dot and frame. */
.recipe-tags span::before { content: ""; width: 0; height: 6px; border-radius: 50%; background: #d98a1e; transition: width .4s var(--ease); }
.recipe-tags span.on { gap: 7px; border-color: rgba(217, 138, 30, .7); background: rgba(217, 138, 30, .1); color: #13272b; }
.recipe-tags span.on::before { width: 6px; }
/* A narrow fade at the edges. home.js shrinks, turns and softens the drinks toward the sides. */
.parade {
  margin-top: 14px; padding: 22px 0 8px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.parade-row { display: flex; gap: 22px; width: max-content; animation: drift 140s linear infinite; }
.parade-row { margin: 0; padding: 0; }
.parade:hover .parade-row, .parade-row.paused { animation-play-state: paused; }
.parade-controls { display: flex; justify-content: center; margin-top: 10px; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* A recipe card like the app's: tagline and name on the photo, category and flavours below */
.rc { margin: 0; width: clamp(200px, calc((100svh - var(--nav) - 400px) * .8), 280px); transform-origin: 50% 40%; will-change: transform; }
.rc-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #e6d9c2;
  box-shadow: 0 12px 26px rgba(60, 40, 20, .18), 0 0 0 0 rgba(217, 138, 30, 0);
  transition: box-shadow .6s var(--ease);
}
.rc.focus .rc-photo { box-shadow: 0 20px 36px rgba(60, 40, 20, .24), 0 0 0 2px rgba(217, 138, 30, .75); }
.rc-photo img { width: 100%; height: 100%; object-fit: cover; }
.rc-photo::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .78)); }
.rc-over { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fbf5ea; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.rc-line { font: 600 15px/1.3 var(--display); }
.rc-name { margin-top: 4px; font: 600 26px/1.08 var(--display); }
.rc { list-style: none; }
.rc-below { margin-top: 10px; padding: 0 4px; }
.rc-cat { display: flex; align-items: center; gap: 0; font-size: 12px; font-weight: 600; color: #85591a; transition: gap .4s var(--ease); }
.rc-cat::before { content: ""; width: 0; height: 6px; border-radius: 50%; background: #d98a1e; transition: width .4s var(--ease); }
.rc.focus .rc-cat { gap: 6px; }
.rc.focus .rc-cat::before { width: 6px; }
.rc-flavours { margin-top: 3px; font-size: 13px; color: rgba(19, 39, 43, .66); }

/* Back bar: its own section, on the teal of the Lounge cabinet */
.bar { padding: 32px 0; background: #0f3a43; }
.bar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.bar-modes { margin: 18px 0 0; display: grid; gap: 14px; }
.bar-modes dt { font-weight: 600; color: var(--cream); }
.bar-modes dd { margin: 4px 0 0; color: var(--muted); }
.shelves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.shelf-icons { display: flex; }
.shelf-icons img { width: 44px; height: 44px; border-radius: 11px; background: #f3ecde; padding: 3px; box-shadow: 0 0 0 2px #0f3a43; }
.shelf-icons img + img { margin-left: -9px; }
.shelf-col h3 { margin-top: 16px; font-family: var(--display); font-size: 24px; color: var(--cream); }
.shelf-col h3 span { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.shelf-col p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.backbar { position: relative; perspective: 1100px; min-width: 0; container-type: inline-size; padding: 10px 0; border-radius: 14px; }
.backbar[role="button"] { cursor: pointer; }
.shelf-pause {
  position: absolute; top: 0; right: 0; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; background: rgba(6, 27, 32, .78); color: var(--cream);
  font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
.backbar.paused .shelf-pause, .backbar:hover .shelf-pause, .backbar:focus-visible .shelf-pause { opacity: 1; }
.shelf-pause i, .motion-toggle i { position: relative; width: 8px; height: 10px; }
.shelf-pause i::before, .shelf-pause i::after, .motion-toggle i::before, .motion-toggle i::after {
  content: ""; position: absolute; top: 0; width: 3px; height: 10px; border-radius: 1px; background: currentColor;
}
.shelf-pause i::before, .motion-toggle i::before { left: 0; }
.shelf-pause i::after, .motion-toggle i::after { right: 0; }
/* Bottles are sized from the column width, so the whole shelf always fits. The plane
   turns away around its left edge, which only makes the far side smaller. */
.shelf-plane { --bottle: calc((100cqw - 6 * 12px) / 7 * .96); transform: rotateY(-26deg) rotateX(6deg); transform-origin: 0 50%; display: grid; gap: calc(var(--bottle) * .28); }
.shelf { display: flex; gap: 12px; padding-bottom: calc(var(--bottle) * .15); border-bottom: 3px solid rgba(245, 237, 221, .16); }
.bottle { width: var(--bottle); height: var(--bottle); border-radius: calc(var(--bottle) * .2); background: rgba(255, 255, 255, .05); display: grid; place-items: center; opacity: .38; transition: opacity .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease); }
.bottle img { width: 82%; height: 82%; }
.bottle.lit { opacity: 1; background: rgba(245, 237, 221, .1); box-shadow: 0 0 0 1px rgba(245, 237, 221, .4); }


.screens { padding: 40px 0; background: #0c2d34; }
.screens-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
/* All captions share one cell, so the column keeps the height of the longest one. */
.screen-caption { margin-top: 26px; display: grid; }
.screen-caption > div { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.screen-caption > div.on { opacity: 1; visibility: visible; }
.screen-caption h3 { font-family: var(--display); font-size: 28px; color: var(--cream); }
.screen-caption p { margin-top: 6px; color: var(--muted); max-width: 28em; }
.screen-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 28px; max-width: 520px; }
.screen-thumbs button {
  display: grid; gap: 7px; justify-items: center; padding: 5px 5px 7px; border: 0; border-radius: 12px;
  background: none; color: var(--muted); font: 600 13px/1 var(--body); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.screen-thumbs button img { width: 100%; aspect-ratio: 1320 / 2868; border-radius: 8px; opacity: .55; transition: opacity .25s var(--ease); }
.screen-thumbs button:hover { color: var(--text); transform: translateY(-2px); }
.screen-thumbs button:hover img { opacity: .9; }
.screen-thumbs button[aria-selected="true"] { color: var(--cream); background: rgba(255, 255, 255, .07); }
.screen-thumbs button[aria-selected="true"] img { opacity: 1; }
.screen-phone { position: relative; aspect-ratio: 1470 / 3000; width: min(330px, calc((100svh - var(--nav) - 80px) * .49)); }
.screen-phone img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .45s var(--ease); }

/* Closing: the facts, the call to action and the footer share the last screen */
.closing { padding: 44px 0 0; background: #0f3a43; justify-content: flex-start !important; }
.closing > .details-grid { margin-top: auto; }
.details-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 5vw, 72px); }
.details-grid dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.details-grid dt { font-weight: 600; color: var(--cream); }
.details-grid dd { margin: 4px 0 0; color: var(--muted); }
.closing-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 36px 0 44px; }
.closing-mark { width: 96px; }
.closing .sub { margin-top: 8px; color: var(--muted); }
.closing .store-badge { margin-left: auto; }
.footer { padding: 26px 0 32px; font-size: 14px; color: var(--muted); background: var(--bg); border-top: 1px solid var(--line); }
.closing > .footer { margin-top: auto; }
.footer-row { display: grid; gap: 12px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* Phones: a smaller logo and button leave room for the language symbol. */
@media (max-width: 430px) {
  .nav-row { gap: 10px; }
  .nav-brand { gap: 8px; }
  .nav-icon { width: 34px; height: 34px; }
  .nav .wordmark-sm { height: 32px; }
  .nav-cta { padding: 0 12px; font-size: 13px; }
}
.footer a { text-decoration: none; color: var(--text); }

/* Support and Privacy pages: plain reading pages in the same style */
.page .page-main > section { min-height: 0; display: block; }
.page-narrow { width: min(760px, 100% - 40px) !important; margin-inline: auto; }
.page-hero { padding: 72px 0 56px; }
.page-hero .section-sub a, .page-body a { color: var(--cream); text-underline-offset: 3px; }
.page-date { margin-top: 14px; color: var(--muted); font-size: 14px; }
.page-body { padding: 48px 0 80px; }
.page-body h2 { font-family: var(--display); font-size: 26px; color: var(--cream); margin: 44px 0 14px; }
.page-body h2:first-child { margin-top: 0; }
.page-body p { color: var(--muted); }
.prose p + p { margin-top: 12px; }
.page-body details { border-top: 1px solid var(--line); }
.page-body details:last-of-type { border-bottom: 1px solid var(--line); }
.page-body summary {
  list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative;
  font-weight: 600; color: var(--text);
}
.page-body summary::-webkit-details-marker { display: none; }
.page-body summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.page-body details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.page-body details > div { padding: 0 0 18px; }
/* Support: the three kinds of feedback, side by side where there is room */
.feedback { margin-bottom: 16px; }
.feedback > p { margin-bottom: 22px; }
.feedback-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .feedback-grid { grid-template-columns: repeat(3, 1fr); } }
.feedback-grid > div { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--line); }
.feedback-grid h3 { font-size: 17px; color: var(--cream); margin-bottom: 8px; }
.feedback-grid p { font-size: 16px; margin-bottom: 16px; }
.page-body .feedback-grid a { margin-top: auto; font-weight: 600; color: var(--amber); text-decoration: none; }
.page-body .feedback-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-contact { margin-top: 56px; padding: 28px 30px; border-radius: 18px; background: #0f3a43; }
.page-contact h2 { margin-top: 0; }
.page-footer { background: var(--bg); }
/* The story page: each chapter carries its year above the heading */
.story p.story-year { margin-top: 56px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--amber); }
.story p.story-year:first-child { margin-top: 0; }
.story .story-year + h2 { margin-top: 4px; }
.story .page-contact { margin-top: 48px; }
.story p.story-signature { margin-top: 32px; font-family: var(--display); font-size: 26px; color: var(--cream); }

/* When the menu links do not fit on one line, whatever the language, they fold into the menu
   button. nav.js and a line after the header set the compact class by measuring. */
.nav.compact .nav-row { gap: 16px; }
.nav.compact .nav-toggle { display: block; }
.nav.compact .nav-links {
  display: none; position: absolute; top: var(--nav); left: 0; right: 0;
  flex-direction: column; align-items: flex-start; gap: 0;
  padding: 8px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--line);
  max-height: calc(100svh - var(--nav)); overflow-y: auto;
}
.nav.compact.open .nav-links { display: flex; }
.nav.compact .nav-links a { font-size: 17px; padding: 12px 0; }
.nav.compact .nav-links a.current { color: var(--amber); }
.nav.compact .nav-links a.current::after { display: none; }
/* Phones: tighter spacing, so longer labels such as Hämta appen still fit beside the logo. */
@media (max-width: 430px) { .nav.compact .nav-row { gap: 10px; } }
@media (max-width: 340px) {
  .nav.compact .nav-row { gap: 8px; }
  .nav .wordmark-sm { height: 30px; }
  .nav-cta { padding: 0 10px; }
}
@media (max-width: 860px) {
  .hero-grid, .how-grid, .bar-grid, .modes-grid, .details-grid { grid-template-columns: 1fr; }
  .shelves { grid-template-columns: 1fr 1fr; }
  /* One column: the turned shelf comes toward the viewer, so a capped width keeps its near edge on screen. */
  .backbar { width: min(100%, 540px); }
  .mark { max-width: 320px; margin-inline: auto; }
  .hero-copy { text-align: center; }
  .hero-copy .wordmark { margin-inline: auto; }
  .hero-copy .lede, .hero-copy .sub { margin-inline: auto; }
  .how-media { order: -1; }
  .device { margin-inline: auto; width: min(300px, 72vw); }
  .screen-phone { width: min(300px, 72vw); }
  .details-grid dl { grid-template-columns: 1fr; }
  .showroom-layout { grid-template-columns: 1fr; }
  .showroom { aspect-ratio: 4 / 5; border-radius: 20px; justify-self: stretch; max-width: none; grid-column: 1; }
  .machine-picker { flex-direction: row; justify-content: center; flex-wrap: wrap; grid-row: 2; }
  .machine-picker button { padding: 6px; }
  /* Title, thumbnails, phone, caption. The phone shrinks so it fits under the thumbnails. */
  .screens-grid { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .screens-copy { display: contents; }
  .screens .section-title { justify-self: stretch; }
  .screen-thumbs { order: 1; max-width: none; width: 100%; margin-top: 0; gap: 6px; }
  .screen-thumbs button { padding: 4px 3px 6px; font-size: 11px; }
  .screen-thumbs button img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
  .screen-phone { order: 2; width: clamp(190px, calc((100svh - var(--nav) - 250px) * .49), min(300px, 72vw)); }
  .screen-caption { order: 3; margin-top: 0; justify-self: stretch; }
  .mode { grid-row: auto; grid-template-rows: none; }
  .showroom-caption { padding: 50px 20px 20px; }
  .machine-picker { gap: 6px; }
  .machine-picker button img { width: 58px; height: 44px; }
  .closing .store-badge { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .parade-row { animation: none; }
  .parade { overflow-x: auto; }
  .v-chaos .verdict-icon svg { animation: none; }
  html { scroll-behavior: auto; }
  .bottle, .machines { transition: none; }
}