/* Glassbird's site in the manner of Apple's product pages: large type, one
   idea per section, quiet colours, the product as the picture. The system
   font on Apple devices (SF), Inter (free, self-hosted) elsewhere, then
   Helvetica and Arial; no font is loaded from anyone else's server. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter Variable"), local("Inter"), url("assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: #fff;
  --bg-alt: #f5f5f7;
  --card: #fff;
  --text: #1d1d1f;
  --secondary: #6e6e73;
  --tertiary: #86868b;
  --line: rgb(0 0 0 / 0.1);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --link: #0066cc;
  --fill: rgb(0 0 0 / 0.05);
  --shadow: 0 30px 80px rgb(0 0 0 / 0.14), 0 6px 18px rgb(0 0 0 / 0.08);
  --radius: 22px;
  --shot: url("assets/img/glassbird-mail-light.webp");
  --shot-dark: url("assets/img/glassbird-mail-dark.webp");
  --width: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --bg-alt: #101012;
    --card: #1c1c1e;
    --text: #f5f5f7;
    --secondary: #a1a1a6;
    --tertiary: #86868b;
    --line: rgb(255 255 255 / 0.12);
    --accent: #0a84ff;
    --badge: #ff9f0a;
    --accent-hover: #2b95ff;
    --link: #2997ff;
    --fill: rgb(255 255 255 / 0.08);
    --shadow: 0 30px 80px rgb(0 0 0 / 0.6), 0 6px 18px rgb(0 0 0 / 0.4);
    --shot: url("assets/img/glassbird-mail-dark.webp");
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: clamp(44px, 7.4vw, 92px); line-height: 1.04; letter-spacing: -0.04em; }
h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.07; letter-spacing: -0.035em; }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--card); }
.skip:focus { left: 8px; }

/* The navigation as a glass bar, as Glassbird's own toolbar. */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; max-width: var(--width); height: 52px; margin: 0 auto; padding: 0 22px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; font-size: 17px; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 26px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 13px; }
.nav-links a { color: var(--secondary); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 760px) { .nav-links li:not(:last-child) { display: none; } .nav-inner { gap: 18px; } }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 500; transition: background-color 0.2s ease, transform 0.2s ease; }
.button:hover { background: var(--accent-hover); text-decoration: none; }
.button:active { transform: scale(0.97); }
.button.small { min-height: 30px; padding: 0 14px; font-size: 13px; }
.button.secondary { background: var(--fill); color: var(--text); }
.button.disabled { opacity: 0.55; pointer-events: none; }
.link-arrow { font-size: 19px; }
.link-arrow::after { content: " ›"; }

.eyebrow { margin-bottom: 10px; color: var(--secondary); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.lead { max-width: 760px; margin: 22px auto 0; color: var(--secondary); font-size: clamp(19px, 2.1vw, 24px); line-height: 1.42; letter-spacing: -0.015em; }
.note { margin-top: 16px; color: var(--secondary); font-size: 14px; }
.note.center { max-width: 760px; margin-inline: auto; }
.note + .note { margin-top: 6px; }
.center { text-align: center; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; margin-top: 34px; }

.hero { padding: 96px 22px 40px; text-align: center; }
.hero-icon { display: block; margin: 0 auto 26px; filter: drop-shadow(0 12px 28px rgb(0 0 0 / 0.18)); }
.window { max-width: 1180px; margin: 64px auto 0; }
.window img { display: block; width: 100%; border-radius: 18px; }

.section { max-width: var(--width); margin: 0 auto; padding: 120px 22px; }
.section.narrow { max-width: 760px; }
.section-head { max-width: 860px; margin: 0 auto 64px; text-align: center; }

/* Details of the window, drawn larger: each tile shows a part of the same
   picture (--x, --y, --w, --h as parts of its width and height). */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: row dense; gap: 22px; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 30px; border-radius: var(--radius); background: var(--bg-alt); }
.tile.wide { grid-column: span 4; }
.tile.tall { grid-column: span 2; grid-row: span 2; }
.tile h3 { margin-top: 14px; }
.tile p { color: var(--secondary); }
.zoom {
  aspect-ratio: calc(var(--w) * 3016) / calc(var(--h) * 2056);
  border-radius: 14px;
  background: var(--shot) no-repeat;
  background-size: calc(100% / var(--w)) auto;
  background-position: calc(var(--x) / (1 - var(--w) + 0.00001) * 100%) calc(var(--y) / (1 - var(--h) + 0.00001) * 100%);
  box-shadow: 0 0 0 0.5px var(--line), 0 10px 30px rgb(0 0 0 / 0.08);
}
/* A tall tile fills its two rows: the crop grows downwards from the same top
   edge, placed by the tile's width instead of the crop's height. */
.tile.tall { container-type: inline-size; }
.tile.tall .zoom { flex: 1; aspect-ratio: auto; background-position: calc(var(--x) / (1 - var(--w) + 0.00001) * 100%) calc(var(--y) * -100cqw / var(--w) * 2056 / 3016); }
.zoom.dark { background-image: var(--shot-dark); background-size: cover; background-position: center; aspect-ratio: 3016 / 2056; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .tile.wide, .tile.tall { grid-column: auto; grid-row: auto; } .tile.tall .zoom { flex: none; aspect-ratio: calc(var(--w) * 3016) / calc(var(--h) * 2056); } }

/* The glass capsule of the spaces bar, gliding from symbol to symbol. */
.split { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 72px; }
.split .lead { margin-left: 0; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 40px; text-align: center; } .split .lead { margin-left: auto; } }
.glass-demo { position: relative; display: grid; gap: 14px; justify-items: center; padding: 18px 14px; border-radius: 30px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--bg-alt)), color-mix(in srgb, #bf5af2 26%, var(--bg-alt))); box-shadow: inset 0 0 0 0.5px var(--line); }
.glass-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; }
.glass-icon .icon { width: 26px; height: 26px; color: var(--text); }
.glass-lens { position: absolute; top: 18px; left: 50%; width: 56px; height: 52px; margin-left: -28px; border-radius: 18px; background: rgb(255 255 255 / 0.28); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 0 0 0.5px rgb(255 255 255 / 0.5), 0 8px 24px rgb(0 0 0 / 0.18); backdrop-filter: blur(2px) saturate(1.8); animation: glide 7s cubic-bezier(0.3, 1.3, 0.5, 1) infinite; }
@keyframes glide { 0%, 14% { transform: translateY(0); } 20%, 34% { transform: translateY(66px); } 40%, 54% { transform: translateY(198px); } 60%, 74% { transform: translateY(132px); } 80%, 94% { transform: translateY(264px); } 100% { transform: translateY(0); } }

/* The promises at a glance, under the hero's picture: four short facts in
   a row, each a symbol, a bold line and one sentence. */
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; max-width: var(--width); margin: 72px auto 0; padding: 0; list-style: none; text-align: left; }
.facts-strip li { display: grid; gap: 4px; align-content: start; }
.facts-strip .icon { width: 26px; height: 26px; margin-bottom: 10px; color: var(--accent); }
.facts-strip strong { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.facts-strip span:not(.icon) { color: var(--secondary); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 900px) { .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .facts-strip { grid-template-columns: 1fr; gap: 24px; } }

/* Setting up in three numbered steps. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; flex-direction: column; gap: 10px; padding: 36px 32px; border-radius: var(--radius); background: var(--bg-alt); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; }
.steps p { color: var(--secondary); text-wrap: pretty; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.icon { display: inline-block; width: 22px; height: 22px; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .duo, .trio { grid-template-columns: 1fr; } }
.panel { display: flex; flex-direction: column; gap: 14px; padding: 40px; border-radius: var(--radius); background: var(--bg-alt); }
.panel h2 { font-size: clamp(28px, 3.4vw, 40px); }
.panel p { color: var(--secondary); font-size: 19px; }
.panel.final { justify-content: center; text-align: center; }
.panel.final .actions { margin-top: 10px; }

.donate { text-align: center; }
.heart { display: block; width: 60px; height: 60px; margin: 0 auto 26px; background: linear-gradient(135deg, #ff375f, #ff9f0a); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.3 3 4.5 6.6 4.5c2.1 0 3.6 1.1 4.4 2.6.8-1.5 2.3-2.6 4.4-2.6 3.6 0 5.7 3.8 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.3 3 4.5 6.6 4.5c2.1 0 3.6 1.1 4.4 2.6.8-1.5 2.3-2.6 4.4-2.6 3.6 0 5.7 3.8 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.donate .button { margin-top: 34px; }

/* Pro on black, as Apple shows its pro products. */
.pro { --badge: #ff9f0a; background: #000; color: #f5f5f7; --secondary: #a1a1a6; --tertiary: #86868b; --line: rgb(255 255 255 / 0.12); --bg-alt: #161617; --fill: rgb(255 255 255 / 0.08); --text: #f5f5f7; --link: #2997ff; }
.pro h1, .pro h2 { background: linear-gradient(100deg, #64d2ff, #5e5ce6 45%, #bf5af2); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; }
.pro-icon { display: block; margin: 0 auto 24px; filter: drop-shadow(0 12px 30px rgb(94 92 230 / 0.45)); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 30px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.features h3 { margin: 16px 0 6px; font-size: 19px; }
.features p { color: var(--secondary); font-size: 16px; }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--tint) 18%, transparent); color: var(--tint); }
.feature-icon.big { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.feature-icon.big .icon { width: 34px; height: 34px; }
.business { display: flex; gap: 30px; align-items: flex-start; margin-top: 90px; padding: 40px; border-radius: var(--radius); background: var(--bg-alt); }
.business h2 { font-size: clamp(28px, 3.4vw, 40px); background: none; color: var(--text); }
.business p { color: var(--secondary); font-size: 19px; margin-top: 12px; }
@media (max-width: 640px) { .business { flex-direction: column; } }
.badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, #ff9f0a 16%, transparent); color: var(--badge, #b54700); font-size: 12px; font-weight: 600; vertical-align: middle; letter-spacing: 0; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 36px 32px; border-radius: var(--radius); background: var(--bg-alt); }
.plan.featured { box-shadow: 0 0 0 2px var(--accent); }
.plan .ribbon { position: absolute; top: -12px; left: 32px; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.price { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; }
.plan-text { flex: 1; color: var(--secondary); }
.plan .button { margin-top: 14px; }
/* Under the button, in the card's padding, so the buttons of all plans stay level. */
.plan .link { position: absolute; right: 0; bottom: 9px; left: 0; font-size: 13px; text-align: center; }

.compare { margin-top: 90px; }
.compare h3 { margin-bottom: 22px; font-size: 28px; text-align: center; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--bg-alt); }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { padding: 14px 20px; text-align: center; border-bottom: 0.5px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: 14px; color: var(--secondary); font-weight: 600; }
tbody th { color: var(--text); font-weight: 400; }
tbody tr:last-child > * { border-bottom: 0; }
.yes, .no { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.yes { background: var(--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.no { width: 12px; height: 2px; border-radius: 1px; background: var(--tertiary); }

.faq { margin-top: 40px; border-top: 0.5px solid var(--line); }
.faq details { border-bottom: 0.5px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 21px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--tertiary); font-weight: 400; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--secondary); font-size: 18px; }

.footer { border-top: 0.5px solid var(--line); background: var(--bg-alt); }
.footer-inner { display: grid; gap: 14px; max-width: var(--width); margin: 0 auto; padding: 40px 22px 56px; color: var(--secondary); font-size: 13px; }
.footer ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--text); }
.footer .fine { color: var(--secondary); font-size: 12px; }
.languages { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.languages [aria-current] { color: var(--text); font-weight: 600; }
/* "Withdraw from contract" (§ 356a BGB) must stand out from the links: an
   outlined capsule of its own on every page. */
.footer .withdraw { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--text) 55%, transparent); border-radius: 999px; font-weight: 500; }
.footer .withdraw:hover { background: var(--fill); text-decoration: none; }

/* Content rises in as it comes into view; with reduced motion it is simply
   there, and so it is without script. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .glass-lens { animation: none; }
}

/* Documentation pages. */
.doc { display: grid; grid-template-columns: 220px 1fr; gap: 56px; max-width: var(--width); margin: 0 auto; padding: 64px 22px 120px; }
.doc nav { position: sticky; top: 76px; align-self: start; font-size: 14px; }
.doc nav ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.doc nav a { color: var(--secondary); }
.doc article { max-width: 760px; }
.doc article h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 18px; }
.doc article h2 { font-size: 30px; margin: 56px 0 14px; letter-spacing: -0.025em; }
.doc article h3 { margin: 28px 0 8px; }
.doc article p, .doc article li { color: var(--secondary); font-size: 18px; }
.doc article p + p { margin-top: 12px; }
.doc article ol, .doc article ul { padding-left: 22px; }
.doc article li + li { margin-top: 6px; }
.doc article code { padding: 1px 6px; border-radius: 6px; background: var(--fill); font: 15px ui-monospace, "SF Mono", Menlo, monospace; }
.callout { margin: 22px 0; padding: 18px 22px; border-radius: 16px; background: var(--bg-alt); }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; gap: 24px; } .doc nav { position: static; } }
.doc.single { grid-template-columns: 1fr; max-width: 820px; }
.doc article h2 { scroll-margin-top: 80px; }
.doc article strong { color: var(--text); font-weight: 600; }
.doc article .fine { margin-top: 48px; color: var(--secondary); font-size: 14px; }

/* Printing, above all the terms and the withdrawal information: the text
   alone, black on white, whatever the screen's appearance. */
@media print {
  :root { color-scheme: light; --bg: #fff; --text: #000; --secondary: #000; --link: #000; --fill: transparent; }
  .nav, .footer, .skip { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .doc { display: block; padding: 0; }
  .doc article { max-width: none; }
  .doc article h1 { font-size: 22pt; }
  .doc article h2 { margin: 18pt 0 6pt; font-size: 14pt; break-after: avoid; }
  .doc article p, .doc article li { font-size: 11pt; orphans: 3; widows: 3; }
}

/* The Pro page: a name and a look of its own, on black like the start page's
   Pro section, then one picture for each reason to buy, the full list in
   three levels and the facts at the end. */
:root { --free: #1a7f37; --ai: #8944ab; --glyph: #5e5ce6; }
@media (prefers-color-scheme: dark) { :root { --free: #30d158; --ai: #da8fff; --glyph: #8e8cff; } }
.pro-page .nav { --bg: #000; --text: #f5f5f7; --secondary: #a1a1a6; --line: rgb(255 255 255 / 0.12); }
/* The black reaches up under the glass bar, so the bar is dark from the start. */
.pro-page #top { margin-top: -53px; padding-top: 53px; }
/* The fade below a cut picture reaches past its edges; the page does not scroll sideways for it. */
.pro-page main { overflow-x: clip; }
.pro-page h1, .pro-page h2, .pro-page h3 { text-wrap: balance; }
.pro-page .lead, .pro-page .panel p, .levels li p, .specs dd, .facts li { text-wrap: pretty; }
.pro h1 { padding-bottom: 0.14em; }
.pro-page .hero { padding: 64px 22px 110px; }
.pro-page .hero .window { margin-top: 48px; }
.platforms { margin-top: 12px; color: var(--text); font-size: clamp(21px, 2.6vw, 30px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.pro-page .soon { color: var(--text); font-size: 19px; font-weight: 500; }
.eyebrow .tag { margin-left: 6px; vertical-align: 3px; }
.pro-page .note a { white-space: nowrap; }

.shot { --mw: 1; --mx: 0; --my: 0; }
.shot img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 0 0 0.5px var(--line), 0 24px 64px rgb(0 0 0 / 0.12); }
.window.shot img { border-radius: 18px; }
/* A picture cut off at the bottom fades into the page there, shadow and all. */
.shot.fade { position: relative; }
@media (min-width: 601px) { .shot.fade::after { content: ""; position: absolute; right: -80px; bottom: -100px; left: -80px; height: calc(45% + 100px); background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 70%, transparent) calc(55% - 68px), var(--bg) calc(100% - 124px)); pointer-events: none; } }
.section-head + .window { margin-top: 0; }
.showcase, .split-shot { padding-block: 100px; }
.showcase .shot { max-width: 1080px; margin: 0 auto; }
.split-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 56px; }
.split-shot.flip { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.split-shot .shot { margin: 0; }
.split-shot h2 { font-size: clamp(32px, 3.4vw, 44px); }
.split-shot .lead { margin: 20px 0 0; font-size: 19px; }
.split-shot.flip > div { order: 2; }
@media (max-width: 900px) {
  .split-shot, .split-shot.flip { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .split-shot .lead { margin-inline: auto; }
  .split-shot.flip > div { order: 0; }
}
.split-shot + .tiles { padding-top: 0; }
.tiles { padding-bottom: 100px; }
.pro-page .panel > p { font-size: 17px; }

.band { background: var(--bg-alt); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: -24px 0 52px; padding: 0; list-style: none; color: var(--secondary); font-size: 15px; }
.legend .tag { margin-right: 3px; }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 48px 44px; }
@media (max-width: 900px) { .levels { grid-template-columns: 1fr; } }
.levels summary { display: block; list-style: none; }
@media (min-width: 901px) { .levels summary { pointer-events: none; } }
@media (max-width: 900px) {
  .levels summary { cursor: pointer; }
  .levels h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .levels h3::after { content: "+"; color: var(--tertiary); font-weight: 400; transition: transform 0.2s ease; }
  .levels details[open] h3::after { transform: rotate(45deg); }
}
.levels summary::-webkit-details-marker { display: none; }
.levels h3 { padding-bottom: 14px; border-bottom: 1px solid var(--text); }
.levels ul { margin: 0; padding: 0; list-style: none; }
.levels li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; padding: 15px 0 16px; border-bottom: 0.5px solid var(--line); }
.levels li > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--glyph); }
.levels strong { display: block; font-weight: 600; letter-spacing: -0.015em; }
.levels .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.levels .tags .badge { margin: 0; }
.levels li p { margin-top: 3px; color: var(--secondary); font-size: 15px; line-height: 1.45; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--secondary); font-size: 12px; font-weight: 500; letter-spacing: 0; vertical-align: 1px; }
.tag.free { color: var(--free); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--free) 45%, transparent); }
.tag.ai { color: var(--ai); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 45%, transparent); }

.panel .price { color: var(--text); font-size: 48px; }
.price-once { color: var(--secondary); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: start; max-width: 960px; margin: 0 auto; padding: 48px; }
.offer .eyebrow { margin-bottom: 2px; }
.offer .actions { justify-content: flex-start; margin-top: 22px; }
.facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.facts li { position: relative; padding-left: 32px; color: var(--secondary); font-size: 17px; }
.facts li::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; background: var(--accent); mask: url("assets/icons/check.svg") center / contain no-repeat; -webkit-mask: url("assets/icons/check.svg") center / contain no-repeat; }
@media (max-width: 760px) { .offer { grid-template-columns: 1fr; } }

#requirements .section-head { margin-bottom: 0; }
.specs { margin: 36px 0 0; border-top: 0.5px solid var(--line); }
.specs div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 28px; padding: 18px 0; border-bottom: 0.5px solid var(--line); }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--secondary); }
@media (max-width: 640px) { .specs div { grid-template-columns: 1fr; } }
.closing { padding-top: 0; }
.closing .panel { padding: 64px 40px; }

/* On a phone a whole window would shrink past reading: each picture shows
   one part of it instead, cut where the window has a gap (--mw: the part's
   width, --mx and --my: its left and top edge, all as parts of the picture;
   --mar: the shape of the cut). Long lines fade out at the right edge. */
@media (max-width: 600px) {
  .pro-page .section, .pro-page .band .section { padding-block: 72px; }
  .pro-page .tiles { padding-top: 0; }
  .pro-page .closing { padding-top: 0; }
  .pro-page .hero { padding-top: 40px; }
  .pro-page .panel, .pro-page .offer, .closing .panel { padding: 28px 24px; }
  .pro-page .section-head, .pro-page .split-shot > div, .legend { text-align: left; }
  .pro-page .lead { margin-inline: 0; }
  .legend { flex-direction: column; margin-top: -32px; }
  .shot { overflow: hidden; aspect-ratio: var(--mar, auto); border: 0.5px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.1); }
  .shot img, .window.shot img { width: calc(100% / var(--mw)); max-width: none; border-radius: 0; box-shadow: none; transform: translate(calc(var(--mx) * -100%), calc(var(--my) * -100%)); }
  .shot.edge { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
}