/* travo.ai Premium — the web pages in the app's look: the clouds of AppBackground, the glass of the
   stop tiles and the areas carousel, the hotel sheet's price green. One column of the phone's
   width; on a desktop that column stands centred on the clouds. Always dark, like the app's glass. */

:root {
  color-scheme: dark;
  /* Theme.swift */
  --night: #0a0e27;            /* glassBg */
  --accent: #5cb8ff;           /* accentGlow: the CTA, as in the hotel sheet */
  --on-accent: #0a0e27;
  --text: #fff;
  --text-2: rgba(255, 255, 255, .78);
  --text-3: rgba(255, 255, 255, .62);
  /* HotelSheetStyle */
  --green: #34c759;
  --green-text: #86df9c;
  --gold: #ffc83d;
  /* PriceLevelView, three steps */
  --lvl-1: #34c759; --lvl-2: #ff9500; --lvl-3: #ff3b30;
  /* GlassDesignTokens */
  --r-card: 24px;
  --r-button: 16px;
  --glass-fill: rgba(255, 255, 255, .10);
  --glass-base: rgba(0, 0, 0, .22);    /* slideGlass: the dark base under the glass */
  --glass-rim: rgba(255, 255, 255, .20);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --col: 430px;
  --gutter: 20px;
  /* The page's one system (Teil 5): the 8 pt grid with its 4 pt half step; 64 between sections. */
  --section: 64px;
  --t-h2: 700 28px/32px var(--font-display);
  --t-h3: 600 17px/24px var(--font);
  --t-body: 400 17px/24px var(--font);
  --t-sub: 400 15px/20px var(--font);
  --t-footnote: 400 13px/16px var(--font);
  --t-caption: 400 12px/16px var(--font);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* The page's own ground, where the fixed sky does not reach (the safe areas, the rubber band):
   the clouds' top colour fading into their bottom one — never the night blue. Safari 26 tints its
   bars from the ground's colour (not theme-color), so that is the clouds' top. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
  background: #0c3e61 linear-gradient(180deg, #0c3e61, #252f3e) no-repeat;
  background-size: 100% 100lvh;
}
body {
  margin: 0;
  min-height: 100svh;
  background: transparent;
  color: var(--text);
  font: 400 17px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* MARK: Sky — AppBackground: the LaunchImage blurred (12 pt), under black 35 → 45 → 60 %. */
/* The large viewport (100lvh): the sky also lies behind Safari's bars and the safe areas. */
.sky {
  position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .6) 100%),
    url("/premium/assets/img/clouds.webp") center / cover no-repeat,
    #1d63b4;
  transform: scale(1.06); /* the blur's soft edge stays outside the screen */
}
/* Where text stands on the sky itself, a little more night under it — the sky is white in places. */
.sky::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 39, 0) 0%, rgba(10, 14, 39, .18) 45%, rgba(10, 14, 39, .34) 100%);
}

/* MARK: Glass — slideGlass / the trip plan's glass: white 10 % over black 22 %, a 0.5 pt rim. */
.glass {
  background: linear-gradient(var(--glass-fill), var(--glass-fill)), var(--glass-base);
  border: .5px solid var(--glass-rim);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}

/* MARK: Layout */
.column {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter) calc(96px + env(safe-area-inset-bottom));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
main > section { margin-top: var(--section); }
main > section.hero { margin-top: 0; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: max(14px, env(safe-area-inset-top));
  min-height: 60px;
}
/* The app's icon (travo.icon, rendered by Icon Composer with its own corner mask) and the name. */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 600 17px/1 var(--font); letter-spacing: -.01em; min-height: 44px; }
.logo img { width: 28px; height: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; color: var(--text); text-decoration: none; font: 600 13px/1 var(--font);
  white-space: nowrap;
}
/* The App Store badge (Apple's look: black, 1 px light rim, never stretched or recoloured), 40 pt
   high — Apple's smallest size on screen — and the rating beside it (hero). */
.store-badge {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 8px;
  border-radius: 8px; background: #000; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.store-badge::before { content: ""; position: absolute; inset: -2px; } /* 44 pt touch target */
.store-badge svg { width: 21px; height: 21px; fill: #fff; flex: none; margin-top: -2px; }
.store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; white-space: nowrap; }
.store-text small { font: 500 10px/1 var(--font); letter-spacing: .01em; }
.store-text b { margin-top: 1px; font: 600 18px/1 var(--font-display); letter-spacing: -.02em; }
.star, .stars { color: #ffcc00; }

/* MARK: Typography (Dynamic Type sizes at the default setting) */
h1 { font: 700 34px/1.12 var(--font-display); letter-spacing: -.02em; }
.section-title { font: var(--t-h2); letter-spacing: -.015em; text-shadow: 0 1px 12px rgba(10, 14, 39, .45); }
.section-lead { margin-top: 6px; color: var(--text-2); font-size: 15px; text-shadow: 0 1px 10px rgba(10, 14, 39, .5); }
.fine { font: var(--t-footnote); line-height: 20px; color: var(--text-2); }
.fine a { color: var(--text); }
.center { text-align: center; }

/* MARK: Hero — as on the model (docs/web-design-notes.md): the full screen's width, 84 % of its
   height, the text centred over a looping video — ours is the app's own cloud wallpaper. A veil
   keeps white text at 4.5 : 1 on its brightest frame (measured); the video fades into the page's
   sky at the bottom. No phone here: the trip clip is the first card further down. */
.hero {
  position: relative; isolation: isolate; min-height: 84svh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 144px 0 48px;
}
.hero-bg {
  /* The wallpaper runs on below the hero, behind the numbers bar and into the clip section (40 svh
     further down); only its last 220 px fade into the sky, so the blurred clouds start well below the fold. */
  position: absolute; z-index: -1; top: 0; bottom: -40svh; left: 50%; width: 100vw; transform: translateX(-50%);
  overflow: hidden; background: #0c3e61;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 220px), transparent); mask-image: linear-gradient(#000 calc(100% - 220px), transparent);
}
.hero-bg video, .hero-bg .clip-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 2 pt shorter than the poster (at the top, under the veil): the video's first frame, painted
   after the load event, must not become a larger LCP than the poster that stands from the start. */
.hero-bg video { top: 2px; height: calc(100% - 2px); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 34, .7) 0%, rgba(6, 16, 34, .7) 60%, rgba(6, 16, 34, .76) 100%);
}
.hero h1 { font-size: min(44px, 10.9vw); line-height: 1.09; letter-spacing: -.01em; }
.hero-line { display: block; }
/* The headline's rotating country (rotator.js): every word in one grid cell — the slot is as wide
   as the longest, so the line never changes width. Only opacity and a 6 px travel animate. */
.rotator { display: inline-grid; justify-items: center; vertical-align: bottom; }
.rotator-word { grid-area: 1 / 1; white-space: nowrap; will-change: opacity, transform; }
/* The accent a step lighter on the video: 4.5 : 1 on the brightest frame (#5cb8ff would reach 2.5). */
.hero .rotator-word { color: #9ad2ff; }
/* In the centred hero the slot takes the whole line: when rotator.js fills it with every word, no
   box changes width — nothing shifts. */
.hero .rotator { display: grid; width: 100%; }
.sub { margin-top: 16px; max-width: 336px; font-size: 17px; line-height: 24px; color: rgba(255, 255, 255, .84); }
.kicker { color: #fff; font-weight: 600; }
.hero .cta-wrap { width: 100%; margin-top: 24px; }
.cta-note { margin-top: 8px; font-size: 13px; line-height: 16px; color: var(--text); text-align: center; }
.cta-pay { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--text-2); text-align: center; }
/* Under the button, as on the model: the badge where the model has its award, the rating beside it. */
/* Under the button, two equal halves meeting in the middle: the App Store badge on the left, the
   rating on the right, both 44 pt high, the same two-line build (small line over a big line). */
.hero-proof { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: center; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
.hero-proof .store-badge { justify-self: end; height: 44px; }
.rating { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; height: 44px; }
.rating-source { order: -1; font: 500 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.rating-score { display: flex; align-items: center; gap: 6px; font: 600 18px/1 var(--font-display); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.rating-score .stars { font-size: 13px; letter-spacing: .1em; }

/* MARK: The phone — one piece for the cards and the full screen (clips.js)
   The screen is the iPhone 17 Pro's, 402 × 874 pt (1206 × 2622 px, Xcode's device profile), its
   corners from the profile's screen mask (the curve starts 84.5 pt from each edge). On top the
   iOS 26 status bar, 54 pt high (measured in an uncut 17 Pro screen recording; exactly what the
   recordings are missing), drawn as SVG over the screen: 9:41 in 17 pt semibold, signal, Wi-Fi,
   a full battery, the Dynamic Island 126 × 37.33 pt. Its ground is the clip's colour at the top
   edge (--bar: sampled from frame 1, then live while it plays) and runs into the clip, so there is
   no edge. Below it the clip (1206 × 2460 = 402 × 820 pt), object-fit: cover — never stretched. */
.device {
  position: relative; display: block; padding: 8px;
  border-radius: 15.6% / 7.2%;
  background: linear-gradient(145deg, #3a3d4a, #121420 45%, #2a2d38);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14) inset, 0 24px 48px -18px rgba(0, 0, 0, .65), 0 0 0 .5px rgba(0, 0, 0, .8);
}
.device-screen {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 402 / 874; border-radius: 13.7% / 6.3%;
  background: var(--bar, #0a3251); transition: background-color .25s linear;
}
.device-bar { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 6.178%; color: #fff; pointer-events: none; }
.device .clip-frame { position: absolute; left: 0; right: 0; bottom: 0; top: 6.178%; overflow: hidden; background: var(--bar, #0a3251); }
/* The seam: the bar's colour runs 2 % of the screen into the clip. */
.device .clip-frame::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2.2%;
  background: linear-gradient(var(--bar, #0a3251), transparent); pointer-events: none;
}
.device .clip-frame video, .device .clip-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-poster { transition: opacity .3s var(--ease); }
.clip-frame.is-playing .clip-poster { opacity: 0; }
/* Loading: a quiet ring in glass over the poster; blocked (no autoplay, e.g. Low Power Mode): a play sign. */
.clip-state {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: none; place-items: center;
  background: rgba(255, 255, 255, .14); border: .5px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.clip-frame.is-loading .clip-state, .clip-frame.is-blocked .clip-state { display: grid; }
.clip-frame.is-loading .clip-state::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .9s linear infinite;
}
.clip-frame.is-blocked:not(.is-loading) .clip-state::after {
  content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.stop-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #0066ff, #00c9b7); color: #fff; font-weight: 700; font-size: 10px;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45);
}

/* MARK: Buttons */
.cta-wrap { display: flex; flex-direction: column; }
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 0 20px;
  border: 0; border-radius: var(--r-button);
  background: var(--accent); color: var(--on-accent);
  font: 600 17px/1.2 var(--font); text-align: center; text-decoration: none;
  cursor: pointer;
  /* The glass rim: a light top edge, a faint ring. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 10px 28px -10px rgba(92, 184, 255, .7);
  transition: transform .15s var(--ease), opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.cta:active { transform: scale(.98); }
.cta:disabled { cursor: default; }
.cta[aria-disabled="true"], body[data-sales="off"] .cta[data-cta] {
  background: rgba(255, 255, 255, .14); color: var(--text-2); box-shadow: inset 0 0 0 .5px var(--glass-rim);
}
.cta-glass {
  background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)), rgba(0, 0, 0, .2);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 .5px var(--glass-rim);
}
.cta-small { width: auto; min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 14px; }
.cta-spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
.cta[aria-busy="true"] .cta-spinner { display: inline-block; }
/* The label fills the button: a new text ("Bald verfügbar") changes no box, so nothing shifts. */
.cta-label { flex: 1 1 auto; min-width: 0; text-align: center; }
.cta.has-error { background: rgba(255, 255, 255, .92); color: var(--night); }
.cta-msg { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: rgba(255, 59, 48, .16); border: .5px solid rgba(255, 120, 110, .45); }
.cta-msg small { display: block; margin-top: 4px; color: var(--text-2); font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  border: 0; background: none; padding: 10px 4px; min-height: 44px;
  color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit;
}
.pill {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: .5px solid var(--glass-rim); background: rgba(255, 255, 255, .14); color: var(--text); font: 600 15px/1 var(--font);
}
.pill-accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.round {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; color: var(--text); padding: 0;
}
.round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.account-line { margin-top: 6px; font-size: 13px; color: var(--text-2); text-align: center; }
.account-line .link { font-size: 13px; color: var(--text); padding: 12px 4px; }

/* MARK: Modes — guest, checking, member, premium; sales open or off */
body[data-mode="member"] .cta-wrap .account-line { display: block !important; }
body[data-mode="member"] .hero .cta-pay { display: none; }
body[data-mode="premium"] .sales { display: none !important; }

/* MARK: Premium is active */
.active-card { margin-top: 24px; padding: 24px 20px 20px; border-radius: var(--r-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.active-card h2 { font: 700 26px/1.15 var(--font-display); outline: none; }
.active-card > p { color: var(--text-2); font-size: 15px; }
.active-card .cta { margin-top: 8px; }
.active-card .account-line { margin-top: 0; }
.check { width: 64px; height: 64px; }
.check circle { fill: rgba(52, 199, 89, .16); stroke: var(--green); stroke-width: 2; }
.check path { fill: none; stroke: var(--green-text); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.check.draw circle { animation: check-ring .6s var(--ease) both; }
.check.draw path { animation: check-path .6s var(--ease) .1s both; }
@keyframes check-ring { from { transform: scale(.6); opacity: 0; transform-origin: 50% 50%; } to { transform: scale(1); opacity: 1; transform-origin: 50% 50%; } }
@keyframes check-path { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* MARK: Numbers */
.stats { border-radius: var(--r-card); padding: 16px 8px; }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* Three equal columns; a label may take two lines. */
.stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 8px; font-size: 12px; line-height: 1.3; color: var(--text-2); text-align: center; text-wrap: balance; }
@media (max-width: 389px) { .stats li { padding: 0 4px; } }   /* 375 pt: still two lines at most */
.stats li + li { border-left: .5px solid rgba(255, 255, 255, .16); }
.stats b { font: 700 22px/1.1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }

/* MARK: Horizontal rows */
/* Four cards, all the same: the phone at 72 % of the screen's width, title and one sentence below
   it. They snap to the middle, the neighbours peek in on both sides. */
.snap-row {
  margin: 16px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 8px;
  display: flex; align-items: stretch; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.snap-row::-webkit-scrollbar { display: none; }
/* 62vw (249 pt on an iPhone 16 Pro, was 72vw): a card and its words fit under the pill on one screen.
   The frame keeps its 12 pt inset; the words take the card's width less 8 pt a side, so the longest
   sentence still needs no more than three lines at its full size. */
.clip-card { position: relative; flex: 0 0 min(62vw, 260px); scroll-snap-align: center; border-radius: var(--r-card); padding: 12px 8px 16px; }
.clip-open {
  display: block; width: calc(100% - 8px); margin: 0 4px; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.clip-card h3 { margin: 16px 0 0; font: var(--t-h3); }
.clip-card p { margin: 4px 0 0; font: var(--t-sub); color: var(--text-2); }
.clip-card p { font-size: 14px; min-height: 60px; }   /* one size under --t-sub; room for three lines (20 px each) under every card, so the four stay level */

/* MARK: Prices — stacked as on the model's pricing: one column, 12 pt between the cards, 20 pt
   inside each. The year is dominant (PriceCardGlass: black 40 % + green 12 %, a green rim, the
   figure light green with a glow); month and week are calm glass, the same height. A tap chooses
   (prices.js): the card lifts (1.02 in 120 ms), keeps the rim, and shows its button. */
.prices .section-title { margin-bottom: 16px; }
.plans { display: flex; flex-direction: column; gap: 12px; }
.plan {
  position: relative; border-radius: var(--r-card); padding: 20px; cursor: pointer;
  background: linear-gradient(var(--glass-fill), var(--glass-fill)), var(--glass-base);
  border: 1px solid var(--glass-rim);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  transition: transform .12s var(--ease), border-color .12s linear, box-shadow .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.plan h3 { font: var(--t-h3); }
.price { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.amount { font: 700 28px/32px var(--font-display); font-variant-numeric: tabular-nums; }
.per { font-size: 15px; line-height: 24px; color: var(--text-2); }
.plan-yearly {
  background: linear-gradient(rgba(52, 199, 89, .12), rgba(52, 199, 89, .12)), rgba(0, 0, 0, .4);
  border-color: rgba(52, 199, 89, .45);
}
.plan-yearly h3 { margin-top: 40px; }
.plan-yearly .amount { font-size: 44px; line-height: 48px; color: var(--green-text); text-shadow: 0 0 18px rgba(52, 199, 89, .55); }
.plan-yearly .price-sub { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--text); }
.plan-yearly .price-save { font-size: 15px; line-height: 24px; color: var(--green-text); }
.plan-yearly.is-lit { box-shadow: 0 0 40px -12px rgba(52, 199, 89, .55); }
.badge {
  position: absolute; top: 20px; left: 20px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center;
  background: var(--green); color: #052e12; font: 700 12px/1 var(--font); letter-spacing: .01em;
}
.plan:not(.plan-yearly) .price { margin-top: 0; }
.plan:not(.plan-yearly) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; }
.plan:not(.plan-yearly) .plan-cta { grid-column: 1 / -1; }
/* Chosen: the rim and a lifted shadow, for as long as it is chosen; the tap itself lifts the card
   to 1.02 in 120 ms and sets it down again — scaled for good it would eat the 12 pt between cards. */
.plan.is-chosen { border-color: rgba(255, 255, 255, .7); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .5); }
.plan-yearly.is-chosen { border-color: var(--green-text); }
.plan-yearly.is-chosen.is-lit { box-shadow: 0 0 40px -12px rgba(52, 199, 89, .55), 0 12px 32px -12px rgba(0, 0, 0, .5); }
/* Once they have come in, the entrance is done for good — else every lift would replay it. */
html.js .plans.in.settled .plan:not(.is-lifting) { animation: none; }
html.js .plans.in .plan.is-lifting, .plan.is-lifting { animation: plan-lift .36s cubic-bezier(.2, .8, .2, 1); }
@keyframes plan-lift { 33% { transform: scale(1.02); } }
.plan-cta { margin-top: 16px; }
.plan:not(.is-chosen) .plan-cta { display: none; }
/* Coming in: from below, one after the other (80 ms apart); then the year's glow builds up once. */
html.js .plans:not(.in) .plan { opacity: 0; transform: translateY(16px); }
html.js .plans.in .plan { animation: plan-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes plan-in { from { opacity: 0; transform: translateY(16px); } }
.trust { margin-top: 16px; display: flex; justify-content: center; align-items: center; gap: 16px; white-space: nowrap; font-size: 13px; line-height: 16px; color: var(--text-2); }
.trust a, .trust > span { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.trust svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.prices .fine { margin-top: 16px; }

/* MARK: Voices — a slow endless carousel (voices.js): cards 78 % of the screen's width, all the
   same height (four lines of quote at most), five yellow stars on each. */
.voice-row { margin: 16px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.voice-row::-webkit-scrollbar { display: none; }
.voice-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.voice {
  flex: none; width: 78vw; max-width: 340px; height: 184px; padding: 20px; border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voice .stars { font-size: 14px; line-height: 16px; letter-spacing: .12em; }
.voice-quote { height: 96px; font: var(--t-body); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.voice-quote::before, .voice-sheet blockquote::before { content: "„"; }
.voice-quote::after, .voice-sheet blockquote::after { content: "“"; }
html[lang="en"] .voice-quote::before, html[lang="en"] .voice-sheet blockquote::before { content: "“"; }
html[lang="en"] .voice-quote::after, html[lang="en"] .voice-sheet blockquote::after { content: "”"; }
.voice-by { font: var(--t-footnote); color: var(--text-2); }
.voice-row.is-static { scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); }
.voice-row.is-static .voice { scroll-snap-align: start; }
.voice-sheet .sheet { gap: 12px; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), rgba(10, 18, 36, .92); }
.voice-sheet blockquote { margin: 0; padding-right: 48px; font-size: 17px; line-height: 24px; }
.voice-sheet .stars { font-size: 14px; letter-spacing: .12em; }

/* MARK: FAQ */
.faq-list { margin-top: 16px; border-radius: var(--r-card); padding: 0 20px; }
.faq details + details { border-top: .5px solid rgba(255, 255, 255, .16); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: var(--t-h3); padding: 16px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translateY(-3px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { padding: 0 0 16px; color: var(--text-2); font: var(--t-sub); line-height: 24px; }
.faq details a { color: var(--text); }

/* MARK: Footer */
.footer {
  margin-top: var(--section); padding: 16px 0 8px; border-top: .5px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; font-size: 13px;
}
.footer a { color: var(--text-2); text-decoration: none; padding: 12px 8px; min-height: 44px; display: inline-flex; align-items: center; }
.footer a:hover { color: var(--text); }
.footer a.cancel { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* MARK: Navigation — the model's capsule (docs/web-design-notes.md): fixed 16 pt from the top
   (below the safe area in a standalone window), 16 pt from the sides, 62 pt high, always there.
   Glass that also holds over the clouds and the app's screens: white 8 % over night 55 %, blurred
   24 pt, a light rim, a soft shadow. Logo and name on the left, the purchase button on the right. */
.nav {
  position: fixed; z-index: 25; top: max(16px, calc(env(safe-area-inset-top) + 8px));
  left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), calc(var(--col) - 32px));
  height: 56px; padding: 0 6px 0 14px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(14, 16, 24, .62);
  border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35);
}
.nav .logo { font-size: 21px; font-weight: 700; letter-spacing: -.02em; gap: 9px; }
/* The menu button: three lines, 44 pt to tap; open, the outer lines cross and the middle one goes. */
.menu-button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-lines { position: relative; width: 22px; height: 16px; display: block; }
.menu-lines i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.menu-lines i:nth-child(1) { top: 0; }
.menu-lines i:nth-child(2) { top: 7px; }
.menu-lines i:nth-child(3) { top: 14px; }
.menu-button[aria-expanded="true"] .menu-lines i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines i:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-lines i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
/* The menu: a glass sheet under the capsule, the same width; a tap beside it closes it. */
.menu-backdrop { position: fixed; inset: 0; z-index: 24; }
.menu {
  position: fixed; z-index: 25; top: calc(max(16px, calc(env(safe-area-inset-top) + 8px)) + 64px);
  left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), calc(var(--col) - 32px));
  padding: 6px; border-radius: 24px;
  background: linear-gradient(var(--glass-fill), var(--glass-fill)), rgba(14, 16, 24, .72);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5);
  animation: menu-in .22s ease both;
}
@keyframes menu-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } .menu-lines i { transition: none; } }
.menu-item { display: flex; align-items: center; min-height: 50px; padding: 0 16px; border-radius: 18px; color: var(--text); text-decoration: none; font: 600 17px/1.2 var(--font); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; }
.menu-item + .menu-item { border-top: .5px solid rgba(255, 255, 255, .12); }
.menu-item:active { background: rgba(255, 255, 255, .1); }
/* Jumps (#prices, a short link's anchor, the error scroll) stop below the capsule: 16 + 56 + 20. */
main [id] { scroll-margin-top: 92px; }

/* MARK: Overlay & sheet */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(10, 14, 39, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 24px; }
.overlay-card { border-radius: var(--r-card); padding: 26px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 320px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(10, 14, 39, .6); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  position: relative; width: min(var(--col), 100%); border-radius: 28px 28px 0 0; border-bottom: 0;
  padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
  animation: rise .4s var(--ease) both;
}
.sheet h2 { font: 700 22px/1.2 var(--font-display); padding-right: 48px; }
.sheet p { color: var(--text-2); font-size: 15px; }
.sheet .link { align-self: center; }
.sheet-close { position: absolute; top: 14px; right: 14px; }

/* A clip full screen: the whole clip in its own shape on the blurred page, in a glass frame. */
.clip-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(10, 14, 39, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  touch-action: none; animation: fade-in .25s var(--ease) both;
}
.clip-dialog { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 56px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.device-big { width: min(calc(100vw - 48px), calc((100svh - 176px) * .435)); }
/* Above the phone, not on it: on the screen it would look like one of the app's own buttons. */
.clip-close { position: absolute; z-index: 3; top: 0; right: 0; }
.clip-toggle svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.clip-toggle .icon-play { margin-left: 2px; }
.clip-toggle[data-playing="true"] .icon-play, .clip-toggle[data-playing="false"] .icon-pause { display: none; }
@keyframes fade-in { from { opacity: 0; } }
html.is-locked, html.is-locked body { overflow: hidden; }

/* Before every purchase (consent.js): the plan and one consent in a compact sheet. The swipe down on
   it is ours, not a scroll (taps on the tick and the links still work). */
.buy-sheet .sheet { gap: 16px; padding-top: 32px; touch-action: none; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), rgba(10, 18, 36, .92); }
.sheet-grabber { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.buy-sheet h2 { font: 700 22px/28px var(--font-display); }
.buy-line { margin-top: -12px; font: var(--t-sub); color: var(--text-2); padding-right: 48px; }
.consent { display: flex; align-items: flex-start; gap: 12px; font: var(--t-footnote); line-height: 20px; color: var(--text); cursor: pointer; }
.consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
#buy-continue:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* A short note under the capsule (flow.js: toast), 2.5 s. */
.toast {
  position: fixed; z-index: 60; top: calc(max(16px, calc(env(safe-area-inset-top) + 8px)) + 72px); left: 50%; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 999px; font: 600 15px/20px var(--font); white-space: nowrap;
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), rgba(10, 18, 36, .9);
  animation: toast-in .25s var(--ease) both; transition: opacity .3s var(--ease);
}
.toast.is-out { opacity: 0; }
/* A failure: two lines may be needed, the code under it. */
.toast.is-error { white-space: normal; width: max-content; max-width: min(360px, calc(100vw - 32px)); border-radius: 20px; text-align: center; }
.toast small { display: block; margin-top: 2px; font: 500 12px/16px var(--font); color: var(--text-2); }

/* ?debug=1 (flow.js): the sign-in's steps, for the operator on a phone — at the top, under the
   toast, and taps go through it (the sheet's button sits at the bottom). */
.debug-panel {
  position: fixed; z-index: 55; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); max-height: 30vh; overflow: hidden; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 10px; border-radius: 14px; font: 11px/15px ui-monospace, Menlo, monospace; color: #fff; word-break: break-all;
  background: rgba(10, 18, 36, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .18);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* Premium known from an earlier visit (the <head> script): its state from the first paint. */
html.premium-known .sales { display: none !important; }
html.premium-known #active-card[hidden] { display: flex !important; }

/* TikTok, Instagram & co. (inapp.js): the guide to Safari over the whole page, in the app's look —
   the clouds stay under a light veil, the card is glass. Above the card a fixed strip holds the
   arrow: it starts at the card's top edge and ends at the page's edge, right under the app's own
   ⋯ (top right: TikTok, Instagram). Facebook has the menu at the bottom: strip and arrow flip. */
.inapp-guide {
  position: fixed; inset: 0; z-index: 58; display: flex; flex-direction: column; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(10, 14, 39, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  touch-action: none; overscroll-behavior: contain; animation: fade-in .25s var(--ease) both;
}
.inapp-space { width: 100%; height: 168px; flex: none; }
.inapp-guide[data-corner="bottom"] { flex-direction: column-reverse; justify-content: flex-start; }
.inapp-guide[data-corner="top"] .inapp-card { margin-top: 0; }
.inapp-card {
  width: min(100%, 398px); border-radius: 28px; padding: 28px 22px 24px; display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(var(--glass-fill), var(--glass-fill)), rgba(10, 18, 36, .55);
  border: .5px solid var(--glass-rim); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  outline: none;
}
.inapp-card h2 { font: 800 30px/34px var(--font-display); }
.inapp-card > p { font: var(--t-body); color: var(--text-2); }
/* The two steps: numbered, plain text, nothing that looks like a button. */
.inapp-steps, .steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.inapp-steps li, .steps li { display: flex; align-items: flex-start; gap: 14px; font: 600 20px/28px var(--font); }
.inapp-num, .step-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font: 700 16px/1 var(--font-display);
}
/* The arrow: straight, from above the card up to the page's edge — the same spot as before, the tip
   28 pt from the right, right under the app's ⋯; its foot ends well above the card. Nothing clipped. */
.inapp-arrow {
  position: absolute; right: 8px; top: calc(max(0px, env(safe-area-inset-top)) - 8px); width: 100px; height: 134px; overflow: visible;
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(92, 184, 255, .55)); animation: inapp-nudge 1.2s ease-in-out infinite;
}
.inapp-guide[data-corner="bottom"] .inapp-arrow { --flip: -1; top: auto; bottom: calc(max(0px, env(safe-area-inset-bottom)) - 8px); }
@keyframes inapp-nudge {
  0%, 100% { transform: scale(1, var(--flip, 1)) translate(0, 0); opacity: .75; }
  50% { transform: scale(1, var(--flip, 1)) translate(0, -8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .inapp-arrow { animation: none; transform: scale(1, var(--flip, 1)); }
}

/* MARK: Motion — entering from below (12 pt + fade, 0.5 s) */
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -10%); } to { opacity: 1; transform: translate(-50%, -40%); } }
.sheet { animation-name: sheet-in; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }


/* Mouse and trackpad: the carousel's arrows; on touch the finger does it. */
@media (hover: none) and (pointer: coarse) {
  .carousel-nav .round { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .city { filter: none; transform: none; }
  .cta-spinner, .spinner { animation: spin 1.6s linear infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* MARK: Desktop — the phone's column, centred on the clouds */
@media (min-width: 700px) {
  /* A wider sky of its own: the phone's image would be blown up to mush. */
  .sky { background-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .6) 100%), url("/premium/assets/img/clouds-wide.webp"); background-position: center top; }
  .hero { min-height: 720px; }
  .column { padding-bottom: 120px; }
}

/* MARK: Legal pages, success page */
.page { padding-top: 8px; }
.page .top { margin-bottom: 12px; }
.panel { border-radius: var(--r-card); padding: 22px 20px; }
.legal h1 { font-size: 28px; line-height: 1.2; margin-bottom: 8px; }
.legal h2 { font: 600 19px/1.3 var(--font-display); margin: 26px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.legal p + p { margin-top: 10px; }
.legal ul, .legal ol { padding-left: 22px; margin: 8px 0; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--accent); }
.legal blockquote { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: .5px solid var(--glass-rim); font-size: 15px; line-height: 1.55; }
.legal .small, .small { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.legal form { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.legal label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.legal input[type="text"], .legal input[type="email"], .legal input[type="date"] {
  min-height: 48px; padding: 0 14px; border-radius: 12px; font: 400 17px var(--font);
  color: var(--text); background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .28);
}
.legal input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.legal fieldset { border: .5px solid var(--glass-rim); border-radius: 14px; padding: 10px 14px 12px; margin: 0; }
.legal legend { font-weight: 600; font-size: 15px; padding: 0 6px; }
.legal label.radio { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; min-height: 44px; }
.legal input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }
.legal .btn { min-height: 56px; border-radius: var(--r-button); font: 600 17px/1.2 var(--font); cursor: pointer; border: 0; padding: 0 20px; width: 100%; }
.legal .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 28px -10px rgba(92, 184, 255, .7); }
.legal .btn-secondary { background: rgba(255, 255, 255, .16); color: var(--text); box-shadow: inset 0 0 0 .5px var(--glass-rim); }
.legal .card { border-radius: 16px; padding: 14px 16px; }
.legal .card.error { background: rgba(255, 59, 48, .16); border: .5px solid rgba(255, 120, 110, .45); }
.legal .card.ok { background: linear-gradient(rgba(52, 199, 89, .12), rgba(52, 199, 89, .12)), rgba(0, 0, 0, .4); border: 1px solid rgba(52, 199, 89, .45); }
.legal .card.ok h2 { margin-top: 0; }
.legal .actions { margin-top: 16px; }
.legal #receipt { list-style: none; padding: 0; }
.legal .footer { margin-top: 28px; }

.success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px 22px; }
.success .check, .success .wait-ring { width: 76px; height: 76px; }
.success h1 { font-size: 30px; line-height: 1.15; }
.success .lead { color: var(--text-2); font-size: 17px; }
.status-line { min-height: 24px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; }
.status-line .spinner { width: 20px; height: 20px; border-width: 2px; }
.status-line.ok { color: var(--green-text); font-weight: 600; }
.status-line.error { color: #ffb4ad; }
.success .cta-wrap { width: 100%; gap: 10px; margin-top: 6px; }
.success .steps { width: 100%; text-align: left; margin: 4px 0 8px; }
.success .steps li { font-size: 18px; line-height: 26px; }
.wait-ring circle { fill: rgba(92, 184, 255, .14); stroke: var(--accent); stroke-width: 2; }
.wait-ring path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }

@media print {
  .sky, .footer, .back, .actions { display: none !important; }
  body { background: #fff; color: #000; }
  .glass, .panel { background: none !important; border: 0 !important; backdrop-filter: none !important; }
  .legal p, .legal li { color: #000; }
}

.noscript { padding: 16px; text-align: center; }