/* ==========================================================================
   App product-page layouts (Admin > Appearance > App Page Layout)
   --------------------------------------------------------------------------
   Every app page shares identical markup; js/app-layout-config.js (generated
   by the admin) sets these attributes on <html> before first paint:
     data-app-layout   classic | spotlight | sheet | editorial | bento | cinematic | minimalist | appstore | showroom | settings | widgets | glass
     data-app-frame    none | window | glow
     data-app-highlights="off"  (optional)
   "classic" is the original look and gets no rules here at all; "appstore"
   is unchanged since round 17. Every other layout was redesigned in round 24.
   ========================================================================== */

/* ---------- Shared: highlight toggle + screenshot frames ------------------ */

html[data-app-highlights="off"] .app-highlights { display: none; }
html[data-app-highlights="off"] .app-details-grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }

/* macOS window chrome around the hero screenshot */
html[data-app-frame="window"] .app-hero-visual-frame {
  box-sizing: content-box;
  padding: 34px 0 0;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
html[data-app-frame="window"] .app-hero-visual-frame::before {
  content: "";
  position: absolute;
  top: 12px; left: 14px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
  z-index: 2;
}
html[data-app-frame="window"] .app-hero-visual-frame::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 34px;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
}
html[data-app-frame="window"] .app-hero-visual img {
  max-height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* Soft glowing card */
html[data-app-frame="glow"] .app-hero-visual-frame {
  box-sizing: content-box;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
              var(--accent-gradient) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 30px 90px -20px rgba(124, 92, 255, 0.45);
}
html[data-app-frame="glow"] .app-hero-visual img { max-height: 100%; border-radius: 12px; }

/* Screenshots never spill out of their frame (main.js sizes the frame to
   the tallest screenshot, capped at 560px) — so the gallery dots/arrows
   underneath can't be overlapped by the image. */
html[data-app-layout] .app-hero-visual-frame img { max-height: 100%; }
html[data-app-layout] .app-gallery-progress { position: relative; z-index: 2; }
/* ---- Guide steps -----------------------------------------------------------
   The admin rich-text block saves the steps as <ol class="howto-list"><ul><li>…
   so the <ul> (with its browser-default 40px indent) sat between the list and
   its items, pushing the numbered badges off the connector line. Flatten it
   once for every layout, then style the real list. */
.howto-list > ul,
.howto-list > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* ==========================================================================
   APPLE-STYLE LAYOUTS (round 17): appstore · showroom · settings · widgets · glass
   Built on Apple's Human Interface Guidelines: SF type scale, system colours,
   44pt controls, continuous-corner icons, materials, generous whitespace.
   Same markup as every other layout — pure CSS on html[data-app-layout].
   ========================================================================== */

html[data-app-layout="appstore"] {
  --ap-bg: #ffffff; --ap-bg2: #f5f5f7; --ap-grouped: #f2f2f7; --ap-elev: #ffffff;
  --ap-label: #1d1d1f; --ap-label2: #6e6e73; --ap-label3: #86868b; --ap-sep: rgba(0, 0, 0, 0.12);
  --ap-blue: #0071e3; --ap-blue-hover: #0077ed; --ap-link: #0066cc;
  --ap-red: #ff3b30; --ap-orange: #ff9500; --ap-green: #34c759; --ap-teal: #30b0c7; --ap-purple: #af52de; --ap-pink: #ff2d55;
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
  --ap-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}
html[data-theme="dark"][data-app-layout="appstore"] {
  --ap-bg: #000000; --ap-bg2: #1d1d1f; --ap-grouped: #000000; --ap-elev: #1c1c1e;
  --ap-label: #f5f5f7; --ap-label2: #a1a1a6; --ap-label3: #86868b; --ap-sep: rgba(255, 255, 255, 0.16);
  --ap-blue: #0a84ff; --ap-blue-hover: #409cff; --ap-link: #2997ff;
  --ap-red: #ff453a; --ap-orange: #ff9f0a; --ap-green: #30d158; --ap-teal: #40c8e0; --ap-purple: #bf5af2; --ap-pink: #ff375f;
}

/* Shared: quiet the decorative layers, neutralise accent-word gradients, Apple buttons + focus */
html[data-app-layout="appstore"] main { font-family: var(--ap-font); }
html[data-app-layout="appstore"] .app-hero-glow, html[data-app-layout="appstore"] .app-hero-blob { display: none; }
html[data-app-layout="appstore"] .app-details-text h2 [class*="gradient"], html[data-app-layout="appstore"] .app-details-text h2 span { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
html[data-app-layout="appstore"] .app-hero-icon { border-radius: 22.37%; }
html[data-app-layout="appstore"] .app-hero-icon img { border-radius: inherit; }
html[data-app-layout="appstore"] .btn-primary {
    min-height: 44px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ap-blue); color: #fff; border: 0; border-radius: 980px; box-shadow: none;
    font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; transition: background .2s ease, transform .2s ease;
  }
html[data-app-layout="appstore"] .btn-primary:hover { background: var(--ap-blue-hover); transform: none; }
html[data-app-layout="appstore"] .btn-primary:active { transform: scale(0.98); }
html[data-app-layout="appstore"] .btn-plain { min-height: 44px; display: inline-flex; align-items: center; color: var(--ap-link); font-size: 1.0625rem; background: none; border: 0; box-shadow: none; padding: 0 8px; }
html[data-app-layout="appstore"] .btn-plain:hover { text-decoration: underline; }
html[data-app-layout="appstore"] a:focus-visible, html[data-app-layout="appstore"] .btn:focus-visible, html[data-app-layout="appstore"] .app-hero-visual:focus-visible { outline: 4px solid rgba(0, 125, 250, 0.6); outline-offset: 2px; border-radius: 980px; }
html[data-app-layout="appstore"] .app-hero-actions .download-count { color: var(--ap-label2); font-size: 0.9375rem; font-weight: 400; }

/* ==========================================================================
   1. APP STORE — the product page as the App Store draws it: lockup, a stat
      ribbon, the preview, description, then plain list rows.
   ========================================================================== */
html[data-app-layout="appstore"] main { background: var(--ap-bg); color: var(--ap-label); }
html[data-app-layout="appstore"] .app-hero { padding-bottom: 8px; }
html[data-app-layout="appstore"] .app-hero-grid { grid-template-columns: 1fr; gap: 40px; max-width: 980px; margin-inline: auto; }
html[data-app-layout="appstore"] .app-hero-grid > div:first-child {
  display: grid; grid-template-columns: 152px minmax(0, 1fr); column-gap: 32px; align-content: start;
}
html[data-app-layout="appstore"] .app-hero-icon { grid-column: 1; grid-row: 1 / span 5; width: 152px; height: 152px; margin: 0; box-shadow: 0 0 0 0.5px var(--ap-sep), 0 4px 14px rgba(0, 0, 0, 0.14); }
html[data-app-layout="appstore"] .app-hero-title { grid-column: 2; grid-row: 1; font-size: clamp(1.75rem, 3.2vw, 2.125rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; margin: 2px 0 6px; color: var(--ap-label); max-width: 22ch; }
html[data-app-layout="appstore"] .app-hero-eyebrow { grid-column: 2; grid-row: 2; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; font-weight: 400; color: var(--ap-label2); margin: 0 0 14px; }
html[data-app-layout="appstore"] .app-hero-tagline { grid-column: 2; grid-row: 3; font-size: 1.0625rem; line-height: 1.47; color: var(--ap-label); max-width: 56ch; margin: 0 0 18px; }
html[data-app-layout="appstore"] .app-hero-actions { grid-column: 2; grid-row: 4; margin: 0 0 16px; gap: 14px; }
html[data-app-layout="appstore"] .app-hero-badges { grid-column: 2; grid-row: 5; gap: 8px; }
html[data-app-layout="appstore"] .app-hero-badge { background: var(--ap-bg2); color: var(--ap-label2); border: 0; border-radius: 980px; font-size: 0.8125rem; font-weight: 500; padding: 6px 12px; }
html[data-app-layout="appstore"] .app-hero-badge--free { color: var(--ap-green); }
html[data-app-layout="appstore"] .app-hero-visual { align-items: center; }
html[data-app-layout="appstore"] .app-detail-body-v2 { max-width: 980px; margin-inline: auto; gap: 48px; padding-top: 40px; }
html[data-app-layout="appstore"] .app-detail-body-v2 > section + section { border-top: 1px solid var(--ap-sep); padding-top: 32px; }
html[data-app-layout="appstore"] .app-details-grid { grid-template-columns: 1fr; gap: 32px; }
html[data-app-layout="appstore"] .app-highlights { order: -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
html[data-app-layout="appstore"] .app-highlight-card { background: none; border: 0; border-left: 1px solid var(--ap-sep); border-radius: 0; box-shadow: none; text-align: center; padding: 6px 14px; display: flex; flex-direction: column; justify-content: flex-start; }
html[data-app-layout="appstore"] .app-highlight-card:first-child { border-left: 0; }
html[data-app-layout="appstore"] .app-highlight-num { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ap-label2); margin: 0 0 4px; }
html[data-app-layout="appstore"] .app-highlight-label { font-size: 0.8125rem; line-height: 1.3; color: var(--ap-label3); }
html[data-app-layout="appstore"] .app-details-text h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ap-label); }
html[data-app-layout="appstore"] .app-details-text p { font-size: 1.0625rem; line-height: 1.47; color: var(--ap-label); max-width: 70ch; }
html[data-app-layout="appstore"] .app-details-text code { background: var(--ap-bg2); border: 0; border-radius: 6px; }
html[data-app-layout="appstore"] .app-section-head { text-align: left; max-width: none; margin: 0 0 20px; }
html[data-app-layout="appstore"] .app-section-eyebrow { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--ap-label); margin: 0; }
html[data-app-layout="appstore"] .app-section-title { font-size: 0.9375rem; font-weight: 400; color: var(--ap-label2); margin: 2px 0 0; }
html[data-app-layout="appstore"] .app-section-sub { color: var(--ap-label2); font-size: 0.9375rem; }
html[data-app-layout="appstore"] .app-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; }
html[data-app-layout="appstore"] .feature-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
html[data-app-layout="appstore"] .feature-card:hover { background: none; transform: none; box-shadow: none; }
html[data-app-layout="appstore"] .feature-icon { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; border-radius: 22.37%; background: currentColor !important; }
html[data-app-layout="appstore"] .feature-icon svg { width: 24px; height: 24px; stroke: #fff; }
html[data-app-layout="appstore"] .feature-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ap-label); margin: 2px 0 4px; }
html[data-app-layout="appstore"] .feature-desc { font-size: 0.9375rem; line-height: 1.45; color: var(--ap-label2); }
html[data-app-layout="appstore"] .howto-list { max-width: none; padding: 0; gap: 0; }
html[data-app-layout="appstore"] .howto-list::before { display: none; }
html[data-app-layout="appstore"] .howto-list > ul, html[data-app-layout="appstore"] .howto-list > ol { gap: 0; }
html[data-app-layout="appstore"] .howto-list li { padding: 14px 0 14px 48px; border-bottom: 1px solid var(--ap-sep); color: var(--ap-label); font-size: 1.0625rem; line-height: 1.47; }
html[data-app-layout="appstore"] .howto-list li:first-child { border-top: 1px solid var(--ap-sep); }
html[data-app-layout="appstore"] .howto-list li::before { left: 0; top: 13px; width: 28px; height: 28px; background: color-mix(in srgb, var(--ap-blue) 14%, transparent); color: var(--ap-blue); font-size: 0.875rem; font-weight: 600; }
html[data-app-layout="appstore"] .app-reqs-grid { display: block; }
html[data-app-layout="appstore"] .req-card { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 13px 0; background: none; border: 0; border-bottom: 1px solid var(--ap-sep); border-radius: 0; box-shadow: none; }
html[data-app-layout="appstore"] .req-card:first-child { border-top: 1px solid var(--ap-sep); }
html[data-app-layout="appstore"] .req-lbl { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-weight: 400; color: var(--ap-label2); }
html[data-app-layout="appstore"] .req-lbl::after { content: none; }
html[data-app-layout="appstore"] .req-val { font-size: 0.9375rem; font-weight: 400; color: var(--ap-label); text-align: right; }
html[data-app-layout="appstore"] .req-val.free { color: var(--ap-green); font-weight: 600; }
html[data-app-layout="appstore"] .app-cta { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 40px 0 24px; }
html[data-app-layout="appstore"] .app-cta-eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-weight: 400; color: var(--ap-label2); }
html[data-app-layout="appstore"] .app-cta h2 { font-size: clamp(1.75rem, 3.4vw, 2.125rem); font-weight: 700; letter-spacing: -0.022em; color: var(--ap-label); }
html[data-app-layout="appstore"] .app-cta p { color: var(--ap-label2); font-size: 1.0625rem; }
@media (max-width: 760px) {
  html[data-app-layout="appstore"] .app-hero-grid > div:first-child { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; }
  html[data-app-layout="appstore"] .app-hero-icon { width: 96px; height: 96px; grid-row: 1 / span 2; }
  html[data-app-layout="appstore"] .app-hero-tagline, html[data-app-layout="appstore"] .app-hero-actions, html[data-app-layout="appstore"] .app-hero-badges { grid-column: 1 / -1; }
  html[data-app-layout="appstore"] .app-hero-tagline { grid-row: 3; margin-top: 16px; }
  html[data-app-layout="appstore"] .app-hero-actions { grid-row: 4; }
  html[data-app-layout="appstore"] .app-hero-badges { grid-row: 5; }
  html[data-app-layout="appstore"] .app-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  html[data-app-layout="appstore"] .app-highlight-card:nth-child(odd) { border-left: 0; }
  html[data-app-layout="appstore"] .app-features-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   REDESIGNED LAYOUTS (round 24)
   spotlight · sheet · editorial · bento · cinematic · minimalist ·
   showroom · settings · widgets · glass
   --------------------------------------------------------------------------
   Built on Apple's Human Interface Guidelines: the system type scale (SF Pro
   Display / Text with Inter as the fallback), system label and separator
   colours for light and dark, 44pt controls, continuous-corner icons,
   concentric radii and restrained motion that switches off under
   prefers-reduced-motion. Classic and App Store are untouched.

   Every layout is still pure CSS over the same markup, so admin:block
   editing keeps working. --app-tint is the app's own accent colour, read
   from the hero glow by js/main.js; without JS it falls back to blue.
   The hero screenshot / slider is never framed (see GLOBAL FIXES).
   ========================================================================== */

html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) {
  --lx-tint: var(--app-tint, #0a84ff);
  --lx-tint-ink: color-mix(in srgb, var(--lx-tint) 72%, #000);
  --lx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --lx-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --lx-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --lx-serif: "New York", ui-serif, "Iowan Old Style", "Charter", "Georgia", serif;
  --lx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --lx-bg: #ffffff; --lx-bg2: #f5f5f7; --lx-elev: #ffffff;
  --lx-label: #1d1d1f; --lx-label2: #6e6e73; --lx-label3: #86868b;
  --lx-sep: rgba(0, 0, 0, 0.1); --lx-fill: rgba(120, 120, 128, 0.12);
  --lx-blue: #0071e3; --lx-blue-hover: #0077ed; --lx-link: #0066cc; --lx-green: #248a3d;
  --lx-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --lx-spring: cubic-bezier(0.32, 0.72, 0, 1);
}
html[data-theme="dark"]:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) {
  --lx-tint-ink: color-mix(in srgb, var(--lx-tint) 80%, #fff);
  --lx-bg: #000000; --lx-bg2: #161617; --lx-elev: #1c1c1e;
  --lx-label: #f5f5f7; --lx-label2: #a1a1a6; --lx-label3: #6e6e73;
  --lx-sep: rgba(255, 255, 255, 0.12); --lx-fill: rgba(120, 120, 128, 0.24);
  --lx-blue: #0a84ff; --lx-blue-hover: #409cff; --lx-link: #2997ff; --lx-green: #30d158;
}

/* ---- shared resets ------------------------------------------------------ */
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) main {
  font-family: var(--lx-font);
  -webkit-font-smoothing: antialiased;
  color: var(--lx-label);
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) :is(.app-hero-glow, .app-hero-blob) { display: none; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-details-text h2 :is(span, [class*="gradient"]) {
  background: none; -webkit-text-fill-color: currentColor; color: var(--lx-tint-ink);
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-hero-icon { border-radius: 22.37%; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-hero-icon img { border-radius: inherit; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .btn-primary {
  min-height: 44px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--lx-blue); color: #fff; border: 0; border-radius: 980px; box-shadow: none;
  font-family: var(--lx-font); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  transition: background 0.2s var(--lx-ease), transform 0.2s var(--lx-ease), box-shadow 0.2s var(--lx-ease);
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .btn-primary:hover { background: var(--lx-blue-hover); transform: none; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .btn-primary:active { transform: scale(0.97); }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .btn-plain {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px;
  background: none; border: 0; box-shadow: none; color: var(--lx-link); font-size: 1.0625rem; font-weight: 400;
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .btn-plain:hover { text-decoration: underline; text-underline-offset: 3px; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) main :is(a, .btn, .app-hero-visual):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lx-blue) 70%, transparent); outline-offset: 3px;
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-hero-actions .download-count { color: var(--lx-label2); font-size: 0.9375rem; font-weight: 400; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .feature-card:hover { transform: none; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .feature-icon svg { color: #fff; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .req-lbl::after { content: none; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .req-val.free { color: var(--lx-green); }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .req-val { overflow-wrap: anywhere; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-hero-badge--free { color: var(--lx-green); }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .howto-list { max-width: none; padding: 0; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .howto-list::before { display: none; }
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-details-text code { background: var(--lx-fill); border: 0; border-radius: 6px; color: inherit; }
/* Apple-style section heads: small tinted kicker, big title, quiet subtitle */
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-section-eyebrow {
  display: block; margin: 0 0 8px; font-family: var(--lx-font); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; color: var(--lx-tint-ink);
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-section-title {
  margin: 0 0 12px; font-family: var(--lx-display); font-size: clamp(1.75rem, 3.4vw, 2.625rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.028em; color: var(--lx-label); text-wrap: balance;
}
html:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-section-sub { font-size: 1.125rem; line-height: 1.45; color: var(--lx-label2); }
/* "Show highlights" off: the text always takes the whole row */
html[data-app-highlights="off"]:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-details-grid { display: block; max-width: none; }
html[data-app-highlights="off"]:is([data-app-layout="spotlight"], [data-app-layout="sheet"], [data-app-layout="editorial"], [data-app-layout="bento"], [data-app-layout="cinematic"], [data-app-layout="minimalist"], [data-app-layout="showroom"], [data-app-layout="settings"], [data-app-layout="widgets"], [data-app-layout="glass"]) .app-details-text { grid-column: auto; grid-row: auto; }

@keyframes lx-rise { from { transform: rotateX(14deg) scale(0.93); } to { transform: none; } }
@keyframes lx-grow { from { transform: scale(0.86); } to { transform: none; } }
@keyframes lx-drift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.1); } }
@keyframes lx-pan { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } 100% { background-position: 30% 20%, 70% 30%, 40% 70%, 0 0; } }


/* ==========================================================================
   SPOTLIGHT — keynote stage. A light beam falls on a centred hero, the
   screenshot tilts up into place as you scroll, numbers glow in a ruled
   strip, features sit on lit tiles and the guide reads as a stepper.
   ========================================================================== */
html[data-app-layout="spotlight"] main {
  background: var(--lx-bg); overflow-x: clip;
}
html[data-app-layout="spotlight"] .app-hero {
  text-align: center; padding-bottom: 72px; isolation: isolate; overflow: visible;
}
html[data-app-layout="spotlight"] .app-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(980px, 120vh); z-index: -1; pointer-events: none;
  background:
  radial-gradient(38% 34% at 50% 0%, color-mix(in srgb, var(--lx-tint) 30%, transparent), transparent 72%),
  conic-gradient(from 180deg at 50% -12%, transparent 166deg, color-mix(in srgb, var(--lx-tint) 13%, transparent) 180deg, transparent 194deg);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
}
html[data-app-layout="spotlight"] .app-hero::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; width: min(1000px, 92vw); height: 180px; z-index: -1; pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lx-tint) 26%, transparent), transparent 72%);
}
html[data-app-layout="spotlight"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 64px; justify-items: center;
}
html[data-app-layout="spotlight"] .app-hero-grid > div:first-child {
  display: flex; flex-direction: column; align-items: center; max-width: 920px;
}
html[data-app-layout="spotlight"] .app-hero-icon {
  width: 104px; height: 104px; margin: 0 0 28px;
  box-shadow: 0 0 0 0.5px var(--lx-sep), 0 26px 60px -14px color-mix(in srgb, var(--lx-tint) 70%, transparent);
}
html[data-app-layout="spotlight"] .app-hero-eyebrow {
  margin: 0 0 12px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="spotlight"] .app-hero-title {
  margin: 0 0 22px; max-width: 17ch; font-family: var(--lx-display); font-size: clamp(2.25rem, 5.6vw, 4.75rem); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.038em; text-wrap: balance;
  background: linear-gradient(180deg, var(--lx-label) 40%, color-mix(in srgb, var(--lx-label) 62%, var(--lx-tint)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="spotlight"] .app-hero-tagline {
  margin: 0 auto 32px; max-width: 40ch; font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); line-height: 1.38; letter-spacing: -0.012em; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .app-hero-actions {
  justify-content: center; gap: 18px; margin: 0 0 22px;
}
html[data-app-layout="spotlight"] .app-hero-actions .btn-primary {
  min-height: 50px; padding: 0 32px; font-size: 1.125rem;
}
html[data-app-layout="spotlight"] .app-hero-badges {
  justify-content: center; gap: 0;
}
html[data-app-layout="spotlight"] .app-hero-badge {
  padding: 0 14px; background: none; border: 0; border-radius: 0; font-size: 0.9375rem; font-weight: 500; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .app-hero-badge + .app-hero-badge {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="spotlight"] .app-hero-visual {
  width: 100%; align-items: center !important; perspective: 1800px;
}
html[data-app-layout="spotlight"] .app-hero-visual img {
  filter: drop-shadow(0 40px 60px color-mix(in srgb, #000 30%, transparent));
}
html[data-app-layout="spotlight"] .app-detail-body-v2 {
  max-width: 1080px; margin-inline: auto; gap: 128px; padding-top: 40px; padding-bottom: 128px;
}
html[data-app-layout="spotlight"] .app-details-grid {
  grid-template-columns: 1fr; gap: 96px; text-align: center;
}
html[data-app-layout="spotlight"] .app-highlights {
  order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 40px 0; border-block: 1px solid var(--lx-sep);
}
html[data-app-layout="spotlight"] .app-highlight-card {
  display: flex; flex-direction: column; gap: 10px; padding: 4px 22px; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center;
}
html[data-app-layout="spotlight"] .app-highlight-card + .app-highlight-card {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="spotlight"] .app-highlight-num {
  margin: 0; font-family: var(--lx-display); font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em;
  text-wrap: balance;
  background: linear-gradient(135deg, var(--lx-label) 25%, var(--lx-tint) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="spotlight"] .app-highlight-label {
  font-size: 0.9375rem; line-height: 1.35; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .app-details-text {
  max-width: 760px; margin-inline: auto;
}
html[data-app-layout="spotlight"] .app-details-text h2 {
  margin-bottom: 26px; font-family: var(--lx-display); font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.032em; text-wrap: balance;
}
html[data-app-layout="spotlight"] .app-details-text p {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.58; letter-spacing: -0.01em; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .app-section-head {
  max-width: 780px; margin: 0 auto 56px; text-align: center;
}
html[data-app-layout="spotlight"] .app-features-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
html[data-app-layout="spotlight"] .feature-card {
  flex: 0 1 calc((100% - 40px) / 3); position: relative; overflow: hidden; isolation: isolate;
  padding: 44px 30px 40px; text-align: center; background: var(--lx-bg2); border: 0; border-radius: 28px; box-shadow: none;
  transition: transform 0.5s var(--lx-spring), box-shadow 0.5s var(--lx-ease);
}
html[data-app-layout="spotlight"] .feature-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.75; transition: opacity 0.5s var(--lx-ease);
  background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--lx-tint) 22%, transparent), transparent 72%);
}
html[data-app-layout="spotlight"] .feature-card:hover {
  transform: translateY(-4px); background: var(--lx-bg2); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--lx-tint) 70%, transparent);
}
html[data-app-layout="spotlight"] .feature-card:hover::before {
  opacity: 1;
}
html[data-app-layout="spotlight"] .feature-icon {
  width: 60px; height: 60px; margin: 0 auto 24px; border-radius: 22.37%; background: currentColor !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 24px -10px currentColor;
}
html[data-app-layout="spotlight"] .feature-icon svg {
  width: 28px; height: 28px;
}
html[data-app-layout="spotlight"] .feature-title {
  margin-bottom: 8px; font-family: var(--lx-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.018em; color: var(--lx-label);
}
html[data-app-layout="spotlight"] .feature-desc {
  font-size: 1rem; line-height: 1.5; color: var(--lx-label2);
}
/* guide: a horizontal stepper joined by a tinted rail */
html[data-app-layout="spotlight"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px;
}
html[data-app-layout="spotlight"] .howto-list li {
  position: relative; padding: 78px 6px 0; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .howto-list li::before {
  left: 50%; top: 0; z-index: 1; width: 54px; height: 54px; transform: translateX(-50%);
  background: var(--lx-bg); color: var(--lx-label); border: 1.5px solid var(--lx-tint);
  font-family: var(--lx-display); font-size: 1.25rem; font-weight: 600;
  box-shadow: 0 0 0 8px var(--lx-bg), 0 10px 28px -10px color-mix(in srgb, var(--lx-tint) 80%, transparent);
}
html[data-app-layout="spotlight"] .howto-list li::after {
  content: ""; position: absolute; top: 27px; left: calc(50% + 27px); width: calc(100% + 20px - 54px); height: 1.5px;
  background: linear-gradient(90deg, var(--lx-tint), color-mix(in srgb, var(--lx-tint) 25%, var(--lx-sep)));
}
html[data-app-layout="spotlight"] .howto-list li:last-child::after {
  display: none;
}
html[data-app-layout="spotlight"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; border-block: 1px solid var(--lx-sep);
}
html[data-app-layout="spotlight"] .req-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 18px; text-align: center; background: none; border: 0; border-radius: 0; box-shadow: none; min-width: 0;
}
html[data-app-layout="spotlight"] .req-card + .req-card {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="spotlight"] .req-lbl {
  font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .req-val {
  font-family: var(--lx-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.018em; color: var(--lx-label);
}
html[data-app-layout="spotlight"] .app-cta {
  position: relative; isolation: isolate; overflow: hidden; padding: 112px 24px 120px; text-align: center; background: none; border: 0; border-radius: 36px; box-shadow: none;
}
html[data-app-layout="spotlight"] .app-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(64% 80% at 50% 100%, color-mix(in srgb, var(--lx-tint) 30%, transparent), transparent 72%), var(--lx-bg2);
}
html[data-app-layout="spotlight"] .app-cta-eyebrow {
  margin-bottom: 10px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="spotlight"] .app-cta h2 {
  font-family: var(--lx-display); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.036em; text-wrap: balance; color: var(--lx-label);
}
html[data-app-layout="spotlight"] .app-cta p {
  max-width: 40ch; margin: 0 auto 34px; font-size: 1.25rem; line-height: 1.45; color: var(--lx-label2);
}
html[data-app-layout="spotlight"] .app-cta-actions .btn-primary {
  min-height: 50px; padding: 0 30px; font-size: 1.125rem;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-app-layout="spotlight"] .app-hero-visual-inner {
      transform-origin: 50% 0; animation: lx-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
    }
  }
}
@media (max-width: 980px) {
  html[data-app-layout="spotlight"] .feature-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}
@media (max-width: 760px) {
  html[data-app-layout="spotlight"] .app-hero-title {
    font-size: clamp(2.125rem, 9vw, 2.75rem);
  }
  html[data-app-layout="spotlight"] .app-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; padding: 28px 0;
  }
  html[data-app-layout="spotlight"] .app-highlight-card:nth-child(3) {
    border-left: 0;
  }
  html[data-app-layout="spotlight"] .app-detail-body-v2 {
    gap: 88px;
  }
  html[data-app-layout="spotlight"] .feature-card {
    flex-basis: 100%; padding: 36px 24px 32px;
  }
  html[data-app-layout="spotlight"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
    grid-auto-flow: row; grid-auto-columns: auto; gap: 26px;
  }
  html[data-app-layout="spotlight"] .howto-list li {
    padding: 12px 0 0 72px; min-height: 54px; text-align: left;
  }
  html[data-app-layout="spotlight"] .howto-list li::before {
    left: 0; transform: none; box-shadow: 0 0 0 6px var(--lx-bg);
  }
  html[data-app-layout="spotlight"] .howto-list li::after {
    top: 54px; left: 27px; width: 1.5px; height: calc(100% - 54px + 26px); background: linear-gradient(180deg, var(--lx-tint), color-mix(in srgb, var(--lx-tint) 25%, var(--lx-sep)));
  }
  html[data-app-layout="spotlight"] .req-card:nth-child(odd) {
    border-left: 0;
  }
  html[data-app-layout="spotlight"] .req-card:nth-child(n + 3) {
    border-top: 1px solid var(--lx-sep);
  }
  html[data-app-layout="spotlight"] .app-reqs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="spotlight"] .app-cta {
    padding: 80px 20px 88px; border-radius: 28px;
  }
}


/* ==========================================================================
   PRODUCT SHEET — a Mac inspector. A sticky info sheet (icon, Get button,
   information rows) rides along the left while the screenshot and every
   section scroll past it on the right.
   ========================================================================== */
html[data-app-layout="sheet"] .app-hero-grid > div:first-child {
  padding: 30px 28px 26px; border-radius: 26px; border: 1px solid var(--lx-sep);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lx-tint) 13%, var(--lx-elev)) 0, var(--lx-elev) 220px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 24px 60px -30px rgba(0, 0, 0, 0.35);
}
html[data-app-layout="sheet"] .app-hero-icon {
  width: 96px; height: 96px; margin: 0 0 20px; box-shadow: 0 0 0 0.5px var(--lx-sep), 0 12px 28px -8px color-mix(in srgb, var(--lx-tint) 60%, transparent);
}
html[data-app-layout="sheet"] .app-hero-eyebrow {
  margin: 0 0 6px; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .app-hero-title {
  margin: 0 0 12px; font-family: var(--lx-display); font-size: clamp(1.625rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.025em; color: var(--lx-label);
}
html[data-app-layout="sheet"] .app-hero-tagline {
  margin: 0 0 24px; font-size: 1rem; line-height: 1.5; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .app-hero-actions {
  flex-direction: column; align-items: stretch; gap: 10px; margin: 0;
}
html[data-app-layout="sheet"] .app-hero-actions .btn {
  width: 100%; min-height: 48px; justify-content: center;
}
html[data-app-layout="sheet"] .app-hero-actions .download-count {
  text-align: center; font-size: 0.875rem; color: var(--lx-label3);
}
html[data-app-layout="sheet"] .app-hero-badges {
  flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 22px; text-align: left;
}
html[data-app-layout="sheet"] .app-hero-badges::before {
  content: "Information"; display: block; padding: 0 0 8px; border-bottom: 1px solid var(--lx-sep);
  font-size: 0.8125rem; font-weight: 600; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .app-hero-badge {
  position: relative; display: block; padding: 12px 0 12px 30px; background: none; border: 0; border-bottom: 1px solid var(--lx-sep); border-radius: 0;
  font-size: 0.9375rem; font-weight: 400; color: var(--lx-label);
}
html[data-app-layout="sheet"] .app-hero-badge:last-child {
  border-bottom: 0;
}
html[data-app-layout="sheet"] .app-hero-badge::before {
  content: "✓"; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, var(--lx-tint) 18%, transparent); color: var(--lx-tint-ink);
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
html[data-app-layout="sheet"] .app-hero-badge--free {
  color: var(--lx-green);
}
html[data-app-layout="sheet"] .app-detail-body-v2 {
  gap: 0;
}
html[data-app-layout="sheet"] .app-detail-body-v2 > section {
  padding: 56px 0;
}
html[data-app-layout="sheet"] .app-detail-body-v2 > section + section {
  border-top: 1px solid var(--lx-sep);
}
html[data-app-layout="sheet"] .app-detail-body-v2 > section:first-child {
  padding-top: 24px;
}
html[data-app-layout="sheet"] .app-section-head {
  max-width: none; margin: 0 0 28px; text-align: left;
}
html[data-app-layout="sheet"] .app-section-title {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}
html[data-app-layout="sheet"] .app-section-sub {
  font-size: 1.0625rem;
}
html[data-app-layout="sheet"] .app-details-grid {
  grid-template-columns: 1fr; gap: 40px;
}
html[data-app-layout="sheet"] .app-highlights {
  order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 18px 0; border-block: 1px solid var(--lx-sep);
}
html[data-app-layout="sheet"] .app-highlight-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 14px; text-align: center; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-app-layout="sheet"] .app-highlight-card + .app-highlight-card {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="sheet"] .app-highlight-num {
  margin: 0; font-family: var(--lx-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--lx-label);
}
html[data-app-layout="sheet"] .app-highlight-label {
  font-size: 0.8125rem; line-height: 1.3; color: var(--lx-label3);
}
html[data-app-layout="sheet"] .app-details-text h2 {
  font-family: var(--lx-display); font-size: clamp(1.625rem, 2.6vw, 2.125rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12;
}
html[data-app-layout="sheet"] .app-details-text p {
  font-size: 1.0625rem; line-height: 1.6; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .app-features-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
html[data-app-layout="sheet"] .feature-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 22px 22px 24px;
  background: var(--lx-elev); border: 1px solid var(--lx-sep); border-radius: 20px; box-shadow: none;
  transition: border-color 0.25s var(--lx-ease), box-shadow 0.25s var(--lx-ease);
}
html[data-app-layout="sheet"] .feature-card:hover {
  background: var(--lx-elev); border-color: color-mix(in srgb, var(--lx-tint) 45%, var(--lx-sep)); box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--lx-tint) 80%, transparent);
}
html[data-app-layout="sheet"] .feature-icon {
  grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; border-radius: 12px; background: currentColor !important;
}
html[data-app-layout="sheet"] .feature-card:not(:has(> .feature-icon)) {
  grid-template-columns: minmax(0, 1fr);
}
html[data-app-layout="sheet"] .feature-icon svg {
  width: 22px; height: 22px;
}
html[data-app-layout="sheet"] .feature-title {
  margin: 1px 0 4px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; color: var(--lx-label);
}
html[data-app-layout="sheet"] .feature-desc {
  font-size: 0.9375rem; line-height: 1.5; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .howto-list {
  overflow: hidden; background: var(--lx-elev); border: 1px solid var(--lx-sep); border-radius: 20px;
}
html[data-app-layout="sheet"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 0;
}
html[data-app-layout="sheet"] .howto-list li {
  padding: 18px 22px 18px 66px; font-size: 1rem; line-height: 1.55; color: var(--lx-label);
}
html[data-app-layout="sheet"] .howto-list li + li {
  border-top: 1px solid var(--lx-sep);
}
html[data-app-layout="sheet"] .howto-list li::before {
  left: 22px; top: 17px; width: 28px; height: 28px; background: color-mix(in srgb, var(--lx-tint) 16%, transparent); color: var(--lx-tint-ink); font-size: 0.875rem; font-weight: 700;
}
html[data-app-layout="sheet"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; background: var(--lx-elev); border: 1px solid var(--lx-sep); border-radius: 20px;
}
html[data-app-layout="sheet"] .req-card {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 22px; background: none; border: 0; border-radius: 0; min-width: 0;
}
html[data-app-layout="sheet"] .req-card:nth-child(n + 3) {
  border-top: 1px solid var(--lx-sep);
}
html[data-app-layout="sheet"] .req-card:nth-child(even) {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="sheet"] .req-lbl {
  font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .req-val {
  font-size: 0.9375rem; font-weight: 600; color: var(--lx-label); text-align: right;
}
html[data-app-layout="sheet"] .app-detail-body-v2 > section.app-cta {
  margin-top: 24px; padding: 44px 44px 46px; border: 0; border-radius: 26px; text-align: left; box-shadow: none; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--lx-tint) 24%, transparent), transparent 62%), var(--lx-bg2);
}
html[data-app-layout="sheet"] .app-cta-eyebrow {
  margin-bottom: 8px; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="sheet"] .app-cta h2 {
  font-family: var(--lx-display); font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; color: var(--lx-label);
}
html[data-app-layout="sheet"] .app-cta p {
  max-width: 52ch; margin: 0 0 26px; font-size: 1.0625rem; color: var(--lx-label2);
}
html[data-app-layout="sheet"] .app-cta-actions {
  justify-content: flex-start;
}
@media (min-width: 1001px) {
  html[data-app-layout="sheet"] main {
    display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 64px; max-width: 1240px; margin: 0 auto; padding: var(--app-nav-safe) 24px 0;
  }
  html[data-app-layout="sheet"] .app-hero,
  html[data-app-layout="sheet"] .app-hero > .container,
  html[data-app-layout="sheet"] .app-hero-grid {
    display: contents;
  }
  html[data-app-layout="sheet"] .app-hero-grid > div:first-child {
    grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 104px; z-index: 2;
  }
  html[data-app-layout="sheet"] .app-hero-visual {
    grid-column: 2; grid-row: 1; align-items: flex-start !important; padding: 0 0 8px;
  }
  html[data-app-layout="sheet"] .app-detail-body-v2 {
    grid-column: 2; grid-row: 2; width: auto; max-width: none; margin: 0; padding: 24px 0 112px;
  }
}
@media (max-width: 1000px) {
  html[data-app-layout="sheet"] .app-hero-grid {
    grid-template-columns: 1fr; gap: 40px;
  }
  html[data-app-layout="sheet"] .app-hero-grid > div:first-child {
    max-width: 560px; width: 100%; justify-self: center;
  }
  html[data-app-layout="sheet"] .app-hero-visual {
    align-items: center !important;
  }
}
@media (max-width: 700px) {
  html[data-app-layout="sheet"] .app-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px;
  }
  html[data-app-layout="sheet"] .app-highlight-card:nth-child(3) {
    border-left: 0;
  }
  html[data-app-layout="sheet"] .app-features-grid,
  html[data-app-layout="sheet"] .app-reqs-grid {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="sheet"] .req-card:nth-child(even) {
    border-left: 0;
  }
  html[data-app-layout="sheet"] .req-card:nth-child(n + 2) {
    border-top: 1px solid var(--lx-sep);
  }
  html[data-app-layout="sheet"] .app-detail-body-v2 > section.app-cta {
    padding: 32px 24px;
  }
}


/* ==========================================================================
   EDITORIAL — a magazine feature. Serif masthead between heavy rules,
   two-column body copy with a drop cap, numbered chapters, "No." features
   on a hairline grid and a spec ledger with dotted leaders.
   ========================================================================== */
html[data-app-layout="editorial"] {
  --ed-paper: #fbfaf7; --ed-rule: #1d1d1f; --ed-indent: 220px;
}
html[data-app-layout="editorial"][data-theme="dark"] {
  --ed-paper: #0b0b0c; --ed-rule: #f5f5f7;
}
html[data-app-layout="editorial"] main {
  background: var(--ed-paper);
}
html[data-app-layout="editorial"] .app-hero {
  padding-bottom: 40px;
}
html[data-app-layout="editorial"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 56px;
}
html[data-app-layout="editorial"] .app-hero-grid > div:first-child {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "rule rule rule" "eyebrow eyebrow badges" "title title title" "icon tagline actions";
  column-gap: 28px; align-items: center;
}
html[data-app-layout="editorial"] .app-hero-grid > div:first-child::before {
  content: ""; grid-area: rule; height: 4px; margin-bottom: 14px; background: var(--ed-rule);
}
html[data-app-layout="editorial"] .app-hero-eyebrow {
  grid-area: eyebrow; margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="editorial"] .app-hero-badges {
  grid-area: badges; justify-content: flex-end; gap: 0;
}
html[data-app-layout="editorial"] .app-hero-badge {
  padding: 0 0 0 12px; background: none; border: 0; border-radius: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lx-label2);
}
html[data-app-layout="editorial"] .app-hero-badge + .app-hero-badge::before {
  content: "·"; padding-right: 12px; color: var(--lx-label3);
}
html[data-app-layout="editorial"] .app-hero-title {
  grid-area: title; margin: 22px 0 30px; padding: 0 0 30px; border-bottom: 1px solid var(--ed-rule);
  font-family: var(--lx-serif); font-size: clamp(2.75rem, 6.6vw, 5.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="editorial"] .app-hero-icon {
  grid-area: icon; width: 72px; height: 72px; margin: 0; align-self: start; box-shadow: 0 0 0 0.5px var(--lx-sep), 0 8px 20px -8px rgba(0, 0, 0, 0.3);
}
html[data-app-layout="editorial"] .app-hero-tagline {
  grid-area: tagline; max-width: 46ch; margin: 0; font-family: var(--lx-serif); font-style: italic; font-size: clamp(1.1875rem, 1.8vw, 1.4375rem); line-height: 1.45; color: var(--lx-label2);
}
html[data-app-layout="editorial"] .app-hero-actions {
  grid-area: actions; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0;
}
html[data-app-layout="editorial"] .app-hero-visual {
  align-items: center !important;
}
html[data-app-layout="editorial"] .app-detail-body-v2 {
  counter-reset: ed-sec; max-width: 1200px; gap: 120px; padding-top: 56px; padding-bottom: 120px;
}
html[data-app-layout="editorial"] .app-details-grid {
  grid-template-columns: 1fr; gap: 64px;
}
html[data-app-layout="editorial"] .app-details-text {
  columns: 2 320px; column-gap: 56px; column-rule: 1px solid var(--lx-sep);
}
html[data-app-layout="editorial"] .app-details-text h2 {
  column-span: all; max-width: 22ch; margin: 0 0 32px; font-family: var(--lx-serif); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
html[data-app-layout="editorial"] .app-details-text h2 :is(span, [class*="gradient"]) {
  font-style: italic;
}
html[data-app-layout="editorial"] .app-details-text p {
  margin: 0 0 16px; font-family: var(--lx-serif); font-size: 1.1875rem; line-height: 1.62; color: var(--lx-label);
}
html[data-app-layout="editorial"] .app-details-text > p:first-of-type::first-letter {
  float: left; padding: 7px 10px 0 0; font-family: var(--lx-serif); font-size: 4.4em; font-weight: 700; line-height: 0.8; color: var(--lx-tint-ink);
}
html[data-app-layout="editorial"] .app-highlights {
  order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 4px solid var(--ed-rule);
}
html[data-app-layout="editorial"] .app-highlight-card {
  padding: 22px 24px 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-app-layout="editorial"] .app-highlight-card:first-child {
  padding-left: 0;
}
html[data-app-layout="editorial"] .app-highlight-card + .app-highlight-card {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="editorial"] .app-highlight-num {
  margin: 0 0 8px; font-family: var(--lx-serif); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--lx-tint-ink);
}
html[data-app-layout="editorial"] .app-highlight-label {
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lx-label2);
}
html[data-app-layout="editorial"] .app-section-head {
  counter-increment: ed-sec; display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 40px;
  max-width: none; margin: 0 0 48px; padding-top: 20px; border-top: 4px solid var(--ed-rule); text-align: left;
}
html[data-app-layout="editorial"] .app-section-eyebrow {
  grid-column: 1; grid-row: 1 / span 3; margin: 2px 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="editorial"] .app-section-eyebrow::before {
  content: counter(ed-sec, decimal-leading-zero); display: block; margin-bottom: 10px;
  font-family: var(--lx-serif); font-size: 3.25rem; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -0.02em; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="editorial"] .app-section-title {
  grid-column: 2; margin: 0 0 12px; font-family: var(--lx-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em;
}
html[data-app-layout="editorial"] .app-section-sub {
  grid-column: 2; max-width: 60ch; font-family: var(--lx-serif); font-style: italic; font-size: 1.25rem; color: var(--lx-label2);
}
html[data-app-layout="editorial"] .app-features-grid {
  counter-reset: ed-feat; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-left: var(--ed-indent); border-top: 1px solid var(--lx-sep);
}
html[data-app-layout="editorial"] .feature-card {
  counter-increment: ed-feat; padding: 28px 28px 34px 0; background: none; border: 0; border-bottom: 1px solid var(--lx-sep); border-radius: 0; box-shadow: none;
}
html[data-app-layout="editorial"] .feature-card:not(:nth-child(3n + 1)) {
  padding-left: 28px; border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="editorial"] .feature-card:hover {
  background: none; box-shadow: none;
}
html[data-app-layout="editorial"] .feature-card::before {
  content: "No. " counter(ed-feat); display: block; margin-bottom: 16px; font-family: var(--lx-serif); font-style: italic; font-size: 1.0625rem; color: var(--lx-tint-ink);
}
html[data-app-layout="editorial"] .feature-icon {
  display: none;
}
html[data-app-layout="editorial"] .feature-title {
  margin-bottom: 10px; font-family: var(--lx-serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--lx-label);
}
html[data-app-layout="editorial"] .feature-desc {
  font-size: 1rem; line-height: 1.6; color: var(--lx-label2);
}
html[data-app-layout="editorial"] .howto-list {
  max-width: 820px; margin-left: var(--ed-indent);
}
html[data-app-layout="editorial"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 0;
}
html[data-app-layout="editorial"] .howto-list li {
  padding: 24px 0 24px 88px; border-bottom: 1px solid var(--lx-sep); font-family: var(--lx-serif); font-size: 1.25rem; line-height: 1.5; color: var(--lx-label);
}
html[data-app-layout="editorial"] .howto-list li:first-child {
  border-top: 1px solid var(--lx-sep);
}
html[data-app-layout="editorial"] .howto-list li::before {
  left: 0; top: 20px; width: 64px; height: auto; justify-content: flex-start; background: none; border-radius: 0; font-family: var(--lx-serif); font-style: italic; font-size: 2.5rem; font-weight: 400; line-height: 1; color: var(--lx-tint-ink);
}
html[data-app-layout="editorial"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-left: var(--ed-indent);
}
html[data-app-layout="editorial"] .req-card {
  display: flex; align-items: baseline; gap: 12px; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--lx-sep); border-radius: 0; min-width: 0;
}
html[data-app-layout="editorial"] .req-card::after {
  content: ""; order: 1; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--lx-label3); transform: translateY(-5px);
}
html[data-app-layout="editorial"] .req-lbl {
  order: 0; flex: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="editorial"] .req-val {
  order: 2; font-family: var(--lx-serif); font-size: 1.1875rem; font-weight: 400; color: var(--lx-label); text-align: right;
}
html[data-app-layout="editorial"] .app-cta {
  padding: 80px 24px 88px; text-align: center; background: none; border: 0; border-top: 4px solid var(--ed-rule); border-bottom: 1px solid var(--ed-rule); border-radius: 0; box-shadow: none;
}
html[data-app-layout="editorial"] .app-cta-eyebrow {
  margin-bottom: 16px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="editorial"] .app-cta h2 {
  margin: 0 auto 18px; max-width: 18ch; font-family: var(--lx-serif); font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="editorial"] .app-cta p {
  max-width: 46ch; margin: 0 auto 32px; font-family: var(--lx-serif); font-style: italic; font-size: 1.375rem; line-height: 1.45; color: var(--lx-label2);
}
@media (max-width: 980px) {
  html[data-app-layout="editorial"] {
    --ed-indent: 0px;
  }
  html[data-app-layout="editorial"] .app-section-head {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="editorial"] .app-section-eyebrow,
  html[data-app-layout="editorial"] .app-section-title,
  html[data-app-layout="editorial"] .app-section-sub {
    grid-column: 1; grid-row: auto;
  }
  html[data-app-layout="editorial"] .app-section-eyebrow {
    margin-bottom: 16px;
  }
  html[data-app-layout="editorial"] .app-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="editorial"] .feature-card:not(:nth-child(3n + 1)) {
    padding-left: 0; border-left: 0;
  }
  html[data-app-layout="editorial"] .feature-card:nth-child(even) {
    padding-left: 24px; border-left: 1px solid var(--lx-sep);
  }
}
@media (max-width: 760px) {
  html[data-app-layout="editorial"] .app-hero-grid {
    text-align: left;
  }
  html[data-app-layout="editorial"] .app-hero-grid > div:first-child {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rule rule" "eyebrow eyebrow" "title title" "icon tagline" "actions actions" "badges badges"; row-gap: 0;
  }
  html[data-app-layout="editorial"] .app-hero-title {
    font-size: clamp(2.375rem, 11vw, 3.25rem);
  }
  html[data-app-layout="editorial"] .app-hero-tagline {
    text-align: left;
  }
  html[data-app-layout="editorial"] .app-hero-actions {
    flex-direction: row; align-items: center; margin-top: 24px;
  }
  html[data-app-layout="editorial"] .app-hero-badges {
    justify-content: flex-start; margin-top: 14px;
  }
  html[data-app-layout="editorial"] .app-hero-badge:first-child {
    padding-left: 0;
  }
  html[data-app-layout="editorial"] .app-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="editorial"] .app-highlight-card:nth-child(3) {
    border-left: 0; padding-left: 0;
  }
  html[data-app-layout="editorial"] .app-highlight-card:nth-child(n + 3) {
    border-top: 1px solid var(--lx-sep); margin-top: 18px;
  }
  html[data-app-layout="editorial"] .app-features-grid,
  html[data-app-layout="editorial"] .app-reqs-grid {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="editorial"] .feature-card:nth-child(even) {
    padding-left: 0; border-left: 0;
  }
  html[data-app-layout="editorial"] .howto-list li {
    padding-left: 64px; font-size: 1.125rem;
  }
  html[data-app-layout="editorial"] .howto-list li::before {
    font-size: 2rem;
  }
}


/* ==========================================================================
   BENTO STUDIO — Apple's bento grid. The description and the four stats
   lock into one modular board, features fill an asymmetric grid with a hero
   tile, steps are tiles and the close is a dark, tint-lit panel.
   ========================================================================== */
html[data-app-layout="bento"] {
  --bn-r: 30px;
}
html[data-app-layout="bento"] main {
  background: var(--lx-bg2);
}
html[data-app-layout="bento"][data-theme="dark"] main {
  background: #000;
}
html[data-app-layout="bento"] .app-hero {
  text-align: center; padding-bottom: 16px;
}
html[data-app-layout="bento"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 56px; justify-items: center;
}
html[data-app-layout="bento"] .app-hero-grid > div:first-child {
  display: flex; flex-direction: column; align-items: center; max-width: 880px;
}
html[data-app-layout="bento"] .app-hero-icon {
  width: 96px; height: 96px; margin: 0 0 24px; box-shadow: 0 0 0 0.5px var(--lx-sep), 0 16px 36px -12px color-mix(in srgb, var(--lx-tint) 60%, transparent);
}
html[data-app-layout="bento"] .app-hero-eyebrow {
  margin: 0 0 10px; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="bento"] .app-hero-title {
  max-width: 18ch; margin: 0 0 20px; font-family: var(--lx-display); font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.036em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="bento"] .app-hero-tagline {
  max-width: 40ch; margin: 0 auto 30px; font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.42; color: var(--lx-label2);
}
html[data-app-layout="bento"] .app-hero-actions {
  justify-content: center; margin-bottom: 20px;
}
html[data-app-layout="bento"] .app-hero-badges {
  justify-content: center; gap: 8px;
}
html[data-app-layout="bento"] .app-hero-badge {
  padding: 7px 14px; background: var(--lx-elev); border: 0; border-radius: 980px; font-size: 0.8125rem; font-weight: 500; color: var(--lx-label2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
html[data-app-layout="bento"] .app-hero-visual {
  width: 100%; align-items: center !important;
}
html[data-app-layout="bento"] .app-detail-body-v2 {
  max-width: 1120px; margin-inline: auto; gap: 104px; padding-top: 64px; padding-bottom: 112px;
}
html[data-app-layout="bento"] .app-section-head {
  max-width: 760px; margin: 0 auto 40px; text-align: center;
}
html[data-app-layout="bento"] .app-details-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(176px, auto); gap: 16px; align-items: stretch;
}
html[data-app-layout="bento"] .app-details-text {
  grid-column: 1 / span 2; grid-row: 1 / span 2; padding: 40px 44px; background: var(--lx-elev); border-radius: var(--bn-r);
}
html[data-app-layout="bento"] .app-details-text h2 {
  margin-bottom: 18px; font-family: var(--lx-display); font-size: clamp(1.625rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.026em;
}
html[data-app-layout="bento"] .app-details-text p {
  font-size: 1.0625rem; line-height: 1.58; color: var(--lx-label2);
}
html[data-app-layout="bento"] .app-highlights {
  display: contents;
}
html[data-app-layout="bento"] .app-highlight-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 26px 26px 24px; background: var(--lx-elev); border: 0; border-radius: var(--bn-r); box-shadow: none;
}
html[data-app-layout="bento"] .app-highlight-num {
  margin: 0; font-family: var(--lx-rounded); font-size: clamp(1.875rem, 3vw, 2.625rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; color: var(--lx-label); overflow-wrap: anywhere;
}
html[data-app-layout="bento"] .app-highlight-label {
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--lx-label2);
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(1) {
  background: linear-gradient(155deg, color-mix(in srgb, var(--lx-tint) 82%, #000), color-mix(in srgb, var(--lx-tint) 48%, #000));
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(1) :is(.app-highlight-num, .app-highlight-label) {
  color: #fff;
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(2) .app-highlight-num {
  background: linear-gradient(135deg, var(--lx-tint), color-mix(in srgb, var(--lx-tint) 40%, #5e5ce6)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(3) {
  background: #1d1d1f;
}
html[data-app-layout="bento"][data-theme="dark"] .app-highlight-card:nth-child(3) {
  background: #2c2c2e;
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(3) .app-highlight-num {
  color: #f5f5f7;
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(3) .app-highlight-label {
  color: #a1a1a6;
}
html[data-app-layout="bento"] .app-highlight-card:nth-child(4)::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%;
  border: 18px solid color-mix(in srgb, var(--lx-tint) 22%, transparent); pointer-events: none;
}
html[data-app-layout="bento"] .app-features-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
html[data-app-layout="bento"] .feature-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 248px; padding: 30px 30px 32px;
  background: var(--lx-elev); border: 0; border-radius: var(--bn-r); box-shadow: none;
}
html[data-app-layout="bento"] .feature-card:hover {
  background: var(--lx-elev); box-shadow: none;
}
html[data-app-layout="bento"] .feature-icon {
  width: 52px; height: 52px; margin: 0 0 auto; border-radius: 22.37%; background: currentColor !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-app-layout="bento"] .feature-icon svg {
  width: 25px; height: 25px;
}
html[data-app-layout="bento"] .feature-title {
  margin: 28px 0 8px; font-family: var(--lx-display); font-size: 1.3125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--lx-label);
}
html[data-app-layout="bento"] .feature-desc {
  font-size: 0.9875rem; line-height: 1.52; color: var(--lx-label2);
}
html[data-app-layout="bento"] .feature-card:first-child {
  grid-column: span 2;
  background: radial-gradient(80% 110% at 100% 0%, color-mix(in srgb, var(--lx-tint) 24%, transparent), transparent 62%), var(--lx-elev);
}
html[data-app-layout="bento"] .feature-card:first-child .feature-icon {
  width: 68px; height: 68px;
}
html[data-app-layout="bento"] .feature-card:first-child .feature-icon svg {
  width: 32px; height: 32px;
}
html[data-app-layout="bento"] .feature-card:first-child .feature-title {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -0.028em;
}
html[data-app-layout="bento"] .feature-card:first-child .feature-desc {
  max-width: 46ch; font-size: 1.0625rem;
}
html[data-app-layout="bento"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px;
}
html[data-app-layout="bento"] .howto-list > ul:has(> li:nth-child(6):last-child),
html[data-app-layout="bento"] .howto-list > ul:has(> li:nth-child(9):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-app-layout="bento"] .howto-list > ul:has(> li:nth-child(7):last-child),
html[data-app-layout="bento"] .howto-list > ul:has(> li:nth-child(8):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-app-layout="bento"] .howto-list:has(> li:nth-child(6):last-child),
html[data-app-layout="bento"] .howto-list:has(> li:nth-child(9):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-app-layout="bento"] .howto-list:has(> li:nth-child(7):last-child),
html[data-app-layout="bento"] .howto-list:has(> li:nth-child(8):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-app-layout="bento"] .howto-list li {
  padding: 26px 24px 28px; background: var(--lx-elev); border-radius: var(--bn-r); font-size: 0.9875rem; line-height: 1.52; color: var(--lx-label);
}
html[data-app-layout="bento"] .howto-list li::before {
  position: static; display: block; width: auto; height: auto; margin: 0 0 22px; background: none; border-radius: 0;
  font-family: var(--lx-rounded); font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--lx-tint);
}
html[data-app-layout="bento"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px;
}
html[data-app-layout="bento"] .req-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; min-width: 0; min-height: 128px; padding: 22px 24px; background: var(--lx-elev); border: 0; border-radius: 24px; box-shadow: none;
}
html[data-app-layout="bento"] .req-lbl {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lx-label2);
}
html[data-app-layout="bento"] .req-val {
  font-family: var(--lx-rounded); font-size: 1.3125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--lx-label);
}
html[data-app-layout="bento"] .app-cta {
  position: relative; overflow: hidden; isolation: isolate; padding: 96px 32px 104px; border: 0; border-radius: 36px; box-shadow: none; color: #f5f5f7;
  background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--lx-tint) 60%, transparent), transparent 60%), radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, #5e5ce6 50%, transparent), transparent 60%), #1d1d1f;
}
html[data-app-layout="bento"] .app-cta-eyebrow {
  margin-bottom: 10px; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.72);
}
html[data-app-layout="bento"] .app-cta h2 {
  font-family: var(--lx-display); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.034em; color: #fff; text-wrap: balance;
}
html[data-app-layout="bento"] .app-cta p {
  max-width: 42ch; font-size: 1.1875rem; color: rgba(255, 255, 255, 0.78);
}
html[data-app-layout="bento"] .app-cta .btn-primary {
  background: #fff; color: #1d1d1f;
}
html[data-app-layout="bento"] .app-cta .btn-primary:hover {
  background: #f0f0f2;
}
html[data-app-layout="bento"] .app-cta .btn-plain {
  color: #fff;
}
@media (min-width: 901px) {
  html[data-app-layout="bento"] .feature-card:last-child:nth-child(3n) {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: center; min-height: 0; padding: 30px 34px;
  }
  html[data-app-layout="bento"] .feature-card:last-child:nth-child(3n) .feature-icon {
    grid-row: 1 / span 2; margin: 0;
  }
  html[data-app-layout="bento"] .feature-card:last-child:nth-child(3n) .feature-title {
    margin: 0 0 6px;
  }
  html[data-app-layout="bento"] .feature-card:last-child:nth-child(3n) .feature-desc {
    max-width: 70ch;
  }
  html[data-app-layout="bento"] .feature-card:last-child:nth-child(3n + 1) {
    grid-column: span 2;
  }
}
@media (max-width: 900px) {
  html[data-app-layout="bento"] .app-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto;
  }
  html[data-app-layout="bento"] .app-details-text {
    grid-column: 1 / -1; grid-row: auto; padding: 30px 26px;
  }
  html[data-app-layout="bento"] .app-highlight-card {
    min-height: 150px;
  }
  html[data-app-layout="bento"] .app-features-grid {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="bento"] .feature-card,
  html[data-app-layout="bento"] .feature-card:first-child {
    grid-column: auto; min-height: 0;
  }
  html[data-app-layout="bento"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
    grid-template-columns: 1fr !important;
  }
  html[data-app-layout="bento"] .howto-list li {
    position: relative; padding: 22px 22px 24px 76px;
  }
  html[data-app-layout="bento"] .howto-list li::before {
    position: absolute; left: 22px; top: 20px; margin: 0; font-size: 2.25rem;
  }
  html[data-app-layout="bento"] .app-reqs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="bento"] .app-cta {
    padding: 64px 22px 72px; border-radius: 30px;
  }
}


/* ==========================================================================
   CINEMATIC — a dark theatre, in both themes. A slow aurora behind the
   title, the screenshot tilts in over a lit horizon with a floor
   reflection, HUD-style numbers, glass cards with lit edges and a glowing
   timeline for the steps.
   ========================================================================== */
html[data-app-layout="cinematic"] {
  --cn-label: #f5f5f7; --cn-label2: #a1a1a6; --cn-label3: #6e6e73; --cn-sep: rgba(255, 255, 255, 0.12); --cn-glow: color-mix(in srgb, var(--lx-tint) 60%, transparent); --cn-ink: color-mix(in srgb, var(--lx-tint) 62%, #fff);
}
html[data-app-layout="cinematic"] main {
  background: #000; color: var(--cn-label); color-scheme: dark; overflow-x: clip;
}
html[data-app-layout="cinematic"] .app-hero {
  text-align: center; padding-bottom: 150px; isolation: isolate; overflow: hidden;
}
html[data-app-layout="cinematic"] .app-hero::before {
  content: ""; position: absolute; inset: -10% -15% auto; height: 1000px; z-index: -1; pointer-events: none; filter: blur(30px);
  background:
  radial-gradient(32% 36% at 30% 30%, color-mix(in srgb, var(--lx-tint) 58%, transparent), transparent 70%),
  radial-gradient(28% 32% at 72% 22%, rgba(94, 92, 230, 0.5), transparent 70%),
  radial-gradient(40% 30% at 50% 62%, color-mix(in srgb, var(--lx-tint) 26%, transparent), transparent 72%);
}
html[data-app-layout="cinematic"] .app-hero::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 110px; height: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lx-tint), transparent);
  box-shadow: 0 0 40px 10px color-mix(in srgb, var(--lx-tint) 35%, transparent);
}
html[data-app-layout="cinematic"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 72px; justify-items: center;
}
html[data-app-layout="cinematic"] .app-hero-grid > div:first-child {
  display: flex; flex-direction: column; align-items: center; max-width: 960px;
}
html[data-app-layout="cinematic"] .app-hero-icon {
  width: 100px; height: 100px; margin: 0 0 30px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 60px var(--cn-glow);
}
html[data-app-layout="cinematic"] .app-hero-eyebrow {
  margin: 0 0 18px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cn-ink);
}
html[data-app-layout="cinematic"] .app-hero-title {
  max-width: 19ch; margin: 0 0 24px; font-family: var(--lx-display); font-size: clamp(2.5rem, 5.4vw, 4.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.042em; text-wrap: balance;
  background: linear-gradient(180deg, #fff 35%, color-mix(in srgb, #fff 55%, var(--lx-tint)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="cinematic"] .app-hero-tagline {
  max-width: 40ch; margin: 0 auto 36px; font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); line-height: 1.4; color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .app-hero-actions {
  justify-content: center; gap: 18px; margin-bottom: 24px;
}
html[data-app-layout="cinematic"] .app-hero-actions .download-count {
  color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .btn-primary {
  background: #f5f5f7; color: #000;
}
html[data-app-layout="cinematic"] .btn-primary:hover {
  background: #fff; box-shadow: 0 0 34px var(--cn-glow);
}
html[data-app-layout="cinematic"] .btn-plain {
  color: #2997ff;
}
html[data-app-layout="cinematic"] .app-hero-actions .btn-primary {
  min-height: 50px; padding: 0 30px; font-size: 1.125rem;
}
html[data-app-layout="cinematic"] .app-hero-badges {
  justify-content: center; gap: 8px;
}
html[data-app-layout="cinematic"] .app-hero-badge {
  padding: 6px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 980px; font-size: 0.8125rem; font-weight: 500; color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .app-hero-badge--free {
  color: #30d158; border-color: rgba(48, 209, 88, 0.4);
}
html[data-app-layout="cinematic"] .app-hero-visual {
  width: 100%; align-items: center !important; perspective: 1400px;
}
html[data-app-layout="cinematic"] .app-hero-visual img {
  filter: drop-shadow(0 30px 80px color-mix(in srgb, var(--lx-tint) 30%, transparent)); -webkit-box-reflect: below 2px linear-gradient(transparent 76%, rgba(255, 255, 255, 0.16));
}
html[data-app-layout="cinematic"] .app-detail-body-v2 {
  max-width: 1100px; margin-inline: auto; gap: 136px; padding-top: 24px; padding-bottom: 136px;
}
html[data-app-layout="cinematic"] .app-section-head {
  max-width: 780px; margin: 0 auto 56px; text-align: center;
}
html[data-app-layout="cinematic"] .app-section-eyebrow {
  font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cn-ink); margin-bottom: 14px;
}
html[data-app-layout="cinematic"] .app-section-title {
  color: #fff;
}
html[data-app-layout="cinematic"] .app-section-sub {
  color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .app-details-grid {
  grid-template-columns: 1fr; gap: 100px;
}
html[data-app-layout="cinematic"] .app-highlights {
  order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
html[data-app-layout="cinematic"] .app-highlight-card {
  position: relative; padding: 26px 2px 0; background: none; border: 0; border-top: 1px solid var(--cn-sep); border-radius: 0; box-shadow: none; text-align: left;
}
html[data-app-layout="cinematic"] .app-highlight-card::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 2px; background: var(--lx-tint); box-shadow: 0 0 14px 1px var(--cn-glow);
}
html[data-app-layout="cinematic"] .app-highlight-num {
  margin: 0 0 10px; font-family: var(--lx-display); font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums;
}
html[data-app-layout="cinematic"] .app-highlight-label {
  font-size: 0.75rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cn-label3);
}
html[data-app-layout="cinematic"] .app-details-text {
  max-width: 800px; margin-inline: auto; text-align: center;
}
html[data-app-layout="cinematic"] .app-details-text h2 {
  margin-bottom: 26px; font-family: var(--lx-display); font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; color: #fff;
}
html[data-app-layout="cinematic"] .app-details-text h2 :is(span, [class*="gradient"]) {
  color: var(--cn-ink);
}
html[data-app-layout="cinematic"] .app-details-text p {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .app-details-text code {
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
html[data-app-layout="cinematic"] .app-features-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
}
html[data-app-layout="cinematic"] .app-features-grid > .feature-card {
  flex: 0 1 calc((100% - 36px) / 3);
}
html[data-app-layout="cinematic"] .feature-card {
  position: relative; overflow: hidden; isolation: isolate; padding: 34px 28px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 26px; box-shadow: none;
  transition: transform 0.5s var(--lx-spring), border-color 0.4s var(--lx-ease);
}
html[data-app-layout="cinematic"] .feature-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; transition: opacity 0.5s var(--lx-ease);
  background: radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--lx-tint) 24%, transparent), transparent 62%);
}
html[data-app-layout="cinematic"] .feature-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.32), transparent 38%, transparent 70%, color-mix(in srgb, var(--lx-tint) 50%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-app-layout="cinematic"] .feature-card:hover {
  transform: translateY(-5px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 30px 60px -30px var(--cn-glow);
}
html[data-app-layout="cinematic"] .feature-card:hover::before {
  opacity: 1;
}
html[data-app-layout="cinematic"] .feature-icon {
  width: 50px; height: 50px; margin: 0 0 24px; border-radius: 15px; background: color-mix(in srgb, currentColor 20%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent), 0 0 30px -4px color-mix(in srgb, currentColor 55%, transparent);
}
html[data-app-layout="cinematic"] .feature-icon svg {
  width: 24px; height: 24px; color: currentColor;
}
html[data-app-layout="cinematic"] .feature-title {
  margin-bottom: 8px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; color: #fff;
}
html[data-app-layout="cinematic"] .feature-desc {
  font-size: 0.9625rem; line-height: 1.55; color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .howto-list {
  position: relative; max-width: 780px; margin-inline: auto; padding-left: 76px;
}
html[data-app-layout="cinematic"] .howto-list::before {
  display: block; left: 23px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--lx-tint), color-mix(in srgb, var(--lx-tint) 8%, transparent)); box-shadow: 0 0 16px var(--cn-glow);
}
html[data-app-layout="cinematic"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 40px;
}
html[data-app-layout="cinematic"] .howto-list li {
  padding-top: 10px; font-size: 1.125rem; line-height: 1.6; color: var(--cn-label2);
}
html[data-app-layout="cinematic"] .howto-list li::before {
  left: -76px; top: 0; width: 48px; height: 48px; background: #000; border: 1.5px solid var(--lx-tint); color: #fff; font-size: 1rem; font-weight: 600; box-shadow: 0 0 0 7px #000, 0 0 28px var(--cn-glow);
}
html[data-app-layout="cinematic"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px;
}
html[data-app-layout="cinematic"] .req-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 22px 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px;
}
html[data-app-layout="cinematic"] .req-lbl {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cn-label3);
}
html[data-app-layout="cinematic"] .req-val {
  font-size: 1.125rem; font-weight: 600; color: #fff;
}
html[data-app-layout="cinematic"] .req-val.free {
  color: #30d158;
}
html[data-app-layout="cinematic"] .app-cta {
  position: relative; overflow: hidden; isolation: isolate; padding: 128px 24px 136px; text-align: center; background: #050505; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 40px; box-shadow: none;
}
html[data-app-layout="cinematic"] .app-cta::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; filter: blur(30px);
  background: radial-gradient(30% 34% at 35% 60%, color-mix(in srgb, var(--lx-tint) 50%, transparent), transparent 70%), radial-gradient(26% 30% at 66% 40%, rgba(94, 92, 230, 0.45), transparent 70%);
}
html[data-app-layout="cinematic"] .app-cta-eyebrow {
  margin-bottom: 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cn-ink);
}
html[data-app-layout="cinematic"] .app-cta h2 {
  font-family: var(--lx-display); font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance;
  background: linear-gradient(180deg, #fff 40%, color-mix(in srgb, #fff 50%, var(--lx-tint))); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="cinematic"] .app-cta p {
  max-width: 40ch; margin: 0 auto 36px; font-size: 1.25rem; color: var(--cn-label2);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-app-layout="cinematic"] .app-hero::before,
  html[data-app-layout="cinematic"] .app-cta::before {
    animation: lx-drift 16s ease-in-out infinite alternate;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-app-layout="cinematic"] .app-hero-visual-inner {
      transform-origin: 50% 0; animation: lx-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
    }
  }
}
@media (max-width: 900px) {
  html[data-app-layout="cinematic"] .app-features-grid > .feature-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}
@media (max-width: 760px) {
  html[data-app-layout="cinematic"] .app-hero {
    padding-bottom: 100px;
  }
  html[data-app-layout="cinematic"] .app-hero::after {
    bottom: 70px;
  }
  html[data-app-layout="cinematic"] .app-hero-title {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }
  html[data-app-layout="cinematic"] .app-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px;
  }
  html[data-app-layout="cinematic"] .app-features-grid > .feature-card {
    flex-basis: 100%;
  }
  html[data-app-layout="cinematic"] .howto-list {
    padding-left: 64px;
  }
  html[data-app-layout="cinematic"] .howto-list::before {
    left: 19px;
  }
  html[data-app-layout="cinematic"] .howto-list li::before {
    left: -64px; width: 40px; height: 40px;
  }
  html[data-app-layout="cinematic"] .app-cta {
    padding: 88px 20px 96px; border-radius: 30px;
  }
}


/* ==========================================================================
   CLEAN TECHNICAL — Swiss grid. A faint 12-column grid shows through, every
   section is numbered and indexed in a sticky left column, specs read like
   a datasheet and labels are set in monospace.
   ========================================================================== */
html[data-app-layout="minimalist"] {
  --mn-grid: rgba(0, 0, 0, 0.05); --mn-rule: #1d1d1f;
}
html[data-app-layout="minimalist"][data-theme="dark"] {
  --mn-grid: rgba(255, 255, 255, 0.055); --mn-rule: #f5f5f7;
}
html[data-app-layout="minimalist"] main {
  position: relative; isolation: isolate; background: var(--lx-bg);
}
html[data-app-layout="minimalist"] main::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; pointer-events: none;
  width: calc(min(100%, var(--container-width, 1200px)) - 48px); transform: translateX(-50%);
  border-right: 1px solid var(--mn-grid);
  background: repeating-linear-gradient(90deg, var(--mn-grid) 0 1px, transparent 1px calc(100% / 12));
}
html[data-app-layout="minimalist"] .app-hero {
  padding-bottom: 40px;
}
html[data-app-layout="minimalist"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 56px;
}
html[data-app-layout="minimalist"] .app-hero-grid > div:first-child {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
}
html[data-app-layout="minimalist"] .app-hero-eyebrow {
  grid-column: 1 / span 7; grid-row: 1; margin: 0; padding: 0 0 12px; font-family: var(--lx-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="minimalist"] .app-hero-eyebrow::before {
  content: "[00]"; margin-right: 14px; color: var(--lx-label3);
}
html[data-app-layout="minimalist"] .app-hero-badges {
  grid-column: 8 / -1; grid-row: 1; justify-content: flex-end; gap: 16px; padding: 0 0 12px;
}
html[data-app-layout="minimalist"] .app-hero-badge {
  padding: 0; background: none; border: 0; border-radius: 0; font-family: var(--lx-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lx-label2);
}
html[data-app-layout="minimalist"] .app-hero-badge::before {
  content: "+ "; color: var(--lx-tint-ink);
}
html[data-app-layout="minimalist"] .app-hero-grid > div:first-child::after {
  content: ""; grid-column: 1 / -1; grid-row: 2; height: 1px; background: var(--mn-rule);
}
html[data-app-layout="minimalist"] .app-hero-icon {
  grid-column: 1 / span 2; grid-row: 3; width: 88px; height: 88px; margin: 36px 0 0; align-self: start; box-shadow: 0 0 0 0.5px var(--lx-sep);
}
html[data-app-layout="minimalist"] .app-hero-title {
  grid-column: 3 / -1; grid-row: 3; margin: 30px 0 0; font-family: var(--lx-display); font-size: clamp(2.5rem, 5.4vw, 4.75rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.048em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="minimalist"] .app-hero-tagline {
  grid-column: 3 / span 6; grid-row: 4; max-width: none; margin: 30px 0 0; font-size: 1.1875rem; line-height: 1.45; color: var(--lx-label2);
}
html[data-app-layout="minimalist"] .app-hero-actions {
  grid-column: 9 / -1; grid-row: 4; flex-direction: column; align-items: flex-end; gap: 10px; margin: 30px 0 0;
}
html[data-app-layout="minimalist"] .app-hero-actions .download-count {
  font-family: var(--lx-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
}
html[data-app-layout="minimalist"] .btn-primary {
  border-radius: 10px; background: var(--lx-label); color: var(--lx-bg);
}
html[data-app-layout="minimalist"] .btn-primary:hover {
  background: color-mix(in srgb, var(--lx-label) 85%, var(--lx-tint));
}
html[data-app-layout="minimalist"] .app-hero-visual {
  align-items: center !important;
}
html[data-app-layout="minimalist"] .app-detail-body-v2 {
  counter-reset: mn-sec; max-width: var(--container-width, 1200px); gap: 0; padding-top: 48px; padding-bottom: 96px;
}
html[data-app-layout="minimalist"] .app-detail-body-v2 > section:not(.app-cta) {
  counter-increment: mn-sec; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: 64px 0 72px; border-top: 1px solid var(--mn-rule);
}
html[data-app-layout="minimalist"] .app-detail-body-v2 > section:not(.app-cta)::before {
  content: counter(mn-sec, decimal-leading-zero); grid-column: 1; grid-row: 1; padding-top: 4px; font-family: var(--lx-mono); font-size: 0.8125rem; color: var(--lx-label3);
}
html[data-app-layout="minimalist"] .app-detail-body-v2 > section:has(> .app-details-grid)::after {
  content: "Overview"; grid-column: 2 / span 3; grid-row: 1; padding-top: 2px; font-family: var(--lx-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="minimalist"] .app-detail-body-v2 > section > .app-section-head {
  grid-column: 2 / span 3; grid-row: 1; align-self: start; position: sticky; top: 112px; max-width: none; margin: 0; text-align: left;
}
html[data-app-layout="minimalist"] .app-detail-body-v2 > section:not(.app-cta) > :not(.app-section-head) {
  grid-column: 5 / -1; grid-row: 1;
}
html[data-app-layout="minimalist"] .app-section-eyebrow {
  margin: 0 0 12px; font-family: var(--lx-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lx-label);
}
html[data-app-layout="minimalist"] .app-section-title {
  margin: 0 0 8px; font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
}
html[data-app-layout="minimalist"] .app-section-sub {
  font-size: 0.9375rem; line-height: 1.5;
}
html[data-app-layout="minimalist"] .app-details-grid {
  grid-template-columns: 1fr; gap: 48px;
}
html[data-app-layout="minimalist"] .app-details-text h2 {
  margin-bottom: 20px; font-family: var(--lx-display); font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em;
}
html[data-app-layout="minimalist"] .app-details-text h2 :is(span, [class*="gradient"]) {
  color: var(--lx-label3);
}
html[data-app-layout="minimalist"] .app-details-text p {
  max-width: 64ch; font-size: 1.0625rem; line-height: 1.62; color: var(--lx-label2);
}
html[data-app-layout="minimalist"] .app-highlights {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--lx-sep);
}
html[data-app-layout="minimalist"] .app-highlight-card {
  padding: 20px 18px 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-app-layout="minimalist"] .app-highlight-card:first-child {
  padding-left: 0;
}
html[data-app-layout="minimalist"] .app-highlight-card + .app-highlight-card {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="minimalist"] .app-highlight-num {
  margin: 0 0 10px; font-family: var(--lx-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--lx-label); font-variant-numeric: tabular-nums;
}
html[data-app-layout="minimalist"] .app-highlight-label {
  font-family: var(--lx-mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lx-label3);
}
html[data-app-layout="minimalist"] .app-features-grid {
  counter-reset: mn-feat; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
}
html[data-app-layout="minimalist"] .feature-card {
  counter-increment: mn-feat; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; grid-template-areas: "num title icon" "num desc desc";
  column-gap: 12px; padding: 22px 0 26px; background: none; border: 0; border-top: 1px solid var(--lx-sep); border-radius: 0; box-shadow: none;
}
html[data-app-layout="minimalist"] .feature-card:hover {
  background: none; box-shadow: none;
}
html[data-app-layout="minimalist"] .feature-card:hover .feature-title {
  color: var(--lx-tint-ink);
}
html[data-app-layout="minimalist"] .feature-card::before {
  content: counter(mn-feat, decimal-leading-zero); grid-area: num; padding-top: 3px; font-family: var(--lx-mono); font-size: 0.75rem; color: var(--lx-label3);
}
html[data-app-layout="minimalist"] .feature-icon {
  grid-area: icon; width: 24px; height: 24px; margin: 0; border-radius: 0; background: none !important; color: var(--lx-label3) !important;
}
html[data-app-layout="minimalist"] .feature-icon svg {
  width: 20px; height: 20px; color: currentColor;
}
html[data-app-layout="minimalist"] .feature-title {
  grid-area: title; margin: 0 0 6px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--lx-label); transition: color 0.2s var(--lx-ease);
}
html[data-app-layout="minimalist"] .feature-desc {
  grid-area: desc; font-size: 0.9375rem; line-height: 1.55; color: var(--lx-label2);
}
html[data-app-layout="minimalist"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 0;
}
html[data-app-layout="minimalist"] .howto-list li {
  padding: 20px 0 22px 112px; border-top: 1px solid var(--lx-sep); font-size: 1.0625rem; line-height: 1.55; color: var(--lx-label);
}
html[data-app-layout="minimalist"] .howto-list li:last-child {
  border-bottom: 1px solid var(--lx-sep);
}
html[data-app-layout="minimalist"] .howto-list li::before {
  content: "STEP " counter(howto-step, decimal-leading-zero); left: 0; top: 24px; width: auto; height: auto; justify-content: flex-start; background: none; border-radius: 0; font-family: var(--lx-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--lx-tint-ink);
}
html[data-app-layout="minimalist"] .app-reqs-grid {
  display: block; border-bottom: 1px solid var(--lx-sep);
}
html[data-app-layout="minimalist"] .req-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 16px 0; background: none; border: 0; border-top: 1px solid var(--lx-sep); border-radius: 0; box-shadow: none;
}
html[data-app-layout="minimalist"] .req-lbl {
  font-family: var(--lx-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lx-label3); padding-top: 3px;
}
html[data-app-layout="minimalist"] .req-val {
  font-size: 1.0625rem; font-weight: 500; color: var(--lx-label);
}
html[data-app-layout="minimalist"] .app-detail-body-v2 > section.app-cta {
  padding: 88px 0 24px; text-align: left; background: none; border: 0; border-top: 1px solid var(--mn-rule); border-radius: 0; box-shadow: none;
}
html[data-app-layout="minimalist"] .app-cta-eyebrow {
  margin-bottom: 18px; font-family: var(--lx-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lx-label3);
}
html[data-app-layout="minimalist"] .app-cta h2 {
  max-width: 16ch; font-family: var(--lx-display); font-size: clamp(2.5rem, 5.4vw, 4.5rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.048em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="minimalist"] .app-cta p {
  max-width: 48ch; margin: 0 0 32px; font-size: 1.125rem; color: var(--lx-label2);
}
html[data-app-layout="minimalist"] .app-cta-actions {
  justify-content: flex-start;
}
@media (max-width: 900px) {
  html[data-app-layout="minimalist"] main::before {
    background: repeating-linear-gradient(90deg, var(--mn-grid) 0 1px, transparent 1px calc(100% / 4));
  }
  html[data-app-layout="minimalist"] .app-hero-grid > div:first-child {
    display: flex; flex-direction: column; align-items: flex-start;
  }
  html[data-app-layout="minimalist"] .app-hero-grid > div:first-child::after {
    order: 1; width: 100%;
  }
  html[data-app-layout="minimalist"] .app-hero-eyebrow {
    order: 0;
  }
  html[data-app-layout="minimalist"] .app-hero-icon {
    order: 2; width: 72px; height: 72px; margin-top: 28px;
  }
  html[data-app-layout="minimalist"] .app-hero-title {
    order: 3; margin-top: 20px; font-size: clamp(2.25rem, 10vw, 3.25rem); text-align: left;
  }
  html[data-app-layout="minimalist"] .app-hero-tagline {
    order: 4; margin-top: 18px; text-align: left;
  }
  html[data-app-layout="minimalist"] .app-hero-actions {
    order: 5; align-items: flex-start; flex-direction: row; margin-top: 24px;
  }
  html[data-app-layout="minimalist"] .app-hero-badges {
    order: 6; justify-content: flex-start; flex-wrap: wrap; padding-top: 12px;
  }
  html[data-app-layout="minimalist"] .app-detail-body-v2 > section:not(.app-cta) {
    display: block; padding: 48px 0 56px;
  }
  html[data-app-layout="minimalist"] .app-detail-body-v2 > section:not(.app-cta)::before {
    display: inline-block; margin-right: 14px;
  }
  html[data-app-layout="minimalist"] .app-detail-body-v2 > section:has(> .app-details-grid)::after {
    content: none;
  }
  html[data-app-layout="minimalist"] .app-detail-body-v2 > section > .app-section-head {
    position: static; margin-bottom: 28px;
  }
  html[data-app-layout="minimalist"] .app-features-grid {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="minimalist"] .app-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="minimalist"] .app-highlight-card:nth-child(3) {
    padding-left: 0; border-left: 0;
  }
  html[data-app-layout="minimalist"] .app-highlight-card:nth-child(n + 3) {
    margin-top: 20px; border-top: 1px solid var(--lx-sep);
  }
  html[data-app-layout="minimalist"] .howto-list li {
    padding-left: 0; padding-top: 48px;
  }
  html[data-app-layout="minimalist"] .req-card {
    grid-template-columns: 1fr; gap: 4px;
  }
}


/* ==========================================================================
   SHOWROOM — apple.com. A giant gradient headline, the screenshot scales up
   as it scrolls in, then full-bleed bands alternate between two greys:
   big numbers, a statement, tall feature tiles (a swipeable shelf on
   phones), a numbered guide, a spec sheet and the closing band.
   ========================================================================== */
html[data-app-layout="showroom"] {
  --sr-grad: linear-gradient(100deg, var(--lx-tint-ink) 0%, color-mix(in srgb, var(--lx-tint-ink) 50%, #5e5ce6) 55%, color-mix(in srgb, var(--lx-tint-ink) 35%, #bf5af2) 100%);
}
html[data-app-layout="showroom"] main {
  background: var(--lx-bg); overflow-x: clip;
}
html[data-app-layout="showroom"] .app-hero {
  padding-bottom: 32px;
}
html[data-app-layout="showroom"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 64px; justify-items: center; text-align: center;
}
html[data-app-layout="showroom"] .app-hero-grid > div:first-child {
  display: flex; flex-direction: column; align-items: center; max-width: 1000px;
}
html[data-app-layout="showroom"] .app-hero-icon {
  order: 0; width: 84px; height: 84px; margin: 0 0 24px; box-shadow: 0 0 0 0.5px var(--lx-sep), 0 8px 22px rgba(0, 0, 0, 0.16);
}
html[data-app-layout="showroom"] .app-hero-eyebrow {
  order: 1; margin: 0 0 10px; font-size: clamp(1.1875rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--lx-label);
}
html[data-app-layout="showroom"] .app-hero-title {
  order: 2; max-width: 19ch; margin: 0 0 22px; font-family: var(--lx-display); font-size: clamp(2.5rem, 5.6vw, 5rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.042em; text-wrap: balance;
  background: var(--sr-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="showroom"] .app-hero-tagline {
  order: 3; max-width: 34ch; margin: 0 0 32px; font-size: clamp(1.1875rem, 2.1vw, 1.5rem); font-weight: 500; line-height: 1.34; letter-spacing: -0.014em; color: var(--lx-label2);
}
html[data-app-layout="showroom"] .app-hero-actions {
  order: 4; justify-content: center; gap: 16px; margin: 0 0 18px;
}
html[data-app-layout="showroom"] .app-hero-badges {
  order: 5; justify-content: center; gap: 0;
}
html[data-app-layout="showroom"] .app-hero-badge {
  padding: 0 12px; background: none; border: 0; border-radius: 0; font-size: 0.875rem; font-weight: 400; color: var(--lx-label3);
}
html[data-app-layout="showroom"] .app-hero-badge + .app-hero-badge {
  border-left: 1px solid var(--lx-sep);
}
html[data-app-layout="showroom"] .app-hero-visual {
  width: 100%; align-items: center !important;
}
html[data-app-layout="showroom"] .app-detail-body-v2 {
  max-width: 1080px; gap: 0; padding-top: 48px; padding-bottom: 0;
}
html[data-app-layout="showroom"] .app-detail-body-v2 > section {
  position: relative; isolation: isolate; padding: 120px 0;
}
html[data-app-layout="showroom"] .app-detail-body-v2 > section::before {
  content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--lx-bg);
}
html[data-app-layout="showroom"] .app-detail-body-v2 > section:nth-of-type(even)::before {
  background: var(--lx-bg2);
}
html[data-app-layout="showroom"] .app-detail-body-v2 > section:first-of-type {
  padding-top: 64px;
}
html[data-app-layout="showroom"] .app-section-head {
  max-width: 780px; margin: 0 auto 64px; text-align: center;
}
html[data-app-layout="showroom"] .app-section-eyebrow {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); color: var(--lx-label2);
}
html[data-app-layout="showroom"] .app-section-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.038em; line-height: 1.04;
}
html[data-app-layout="showroom"] .app-section-sub {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 500;
}
html[data-app-layout="showroom"] .app-details-grid {
  grid-template-columns: 1fr; gap: 96px; text-align: center;
}
html[data-app-layout="showroom"] .app-highlights {
  order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
html[data-app-layout="showroom"] .app-highlight-card {
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center;
}
html[data-app-layout="showroom"] .app-highlight-num {
  margin: 0 0 10px; font-family: var(--lx-display); font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance;
  background: var(--sr-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="showroom"] .app-highlight-label {
  max-width: 20ch; margin-inline: auto; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--lx-label2);
}
html[data-app-layout="showroom"] .app-details-text {
  max-width: 820px; margin-inline: auto;
}
html[data-app-layout="showroom"] .app-details-text h2 {
  margin-bottom: 24px; font-family: var(--lx-display); font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.038em; text-wrap: balance;
}
html[data-app-layout="showroom"] .app-details-text p {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.012em; color: var(--lx-label2);
}
html[data-app-layout="showroom"] .app-features-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
html[data-app-layout="showroom"] .app-features-grid > .feature-card {
  flex: 0 1 calc((100% - 40px) / 3);
}
html[data-app-layout="showroom"] .feature-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 340px; padding: 38px 34px 40px;
  background: var(--lx-bg2); border: 0; border-radius: 28px; box-shadow: none;
}
html[data-app-layout="showroom"] .app-detail-body-v2 > section:nth-of-type(even) .feature-card {
  background: var(--lx-elev);
}
html[data-app-layout="showroom"] .feature-card:hover {
  box-shadow: none;
}
html[data-app-layout="showroom"] .feature-icon {
  width: 56px; height: 56px; margin: 0 0 auto; border-radius: 22.37%; background: currentColor !important;
}
html[data-app-layout="showroom"] .feature-icon svg {
  width: 27px; height: 27px;
}
html[data-app-layout="showroom"] .feature-title {
  margin: 36px 0 10px; font-family: var(--lx-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.026em; color: var(--lx-label);
}
html[data-app-layout="showroom"] .feature-desc {
  font-size: 1.0625rem; font-weight: 500; line-height: 1.47; color: var(--lx-label2);
}
html[data-app-layout="showroom"] .howto-list {
  max-width: 820px; margin-inline: auto;
}
html[data-app-layout="showroom"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 0;
}
html[data-app-layout="showroom"] .howto-list li {
  min-height: 104px; padding: 32px 0 32px 120px; border-top: 1px solid var(--lx-sep); font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 500; line-height: 1.42; letter-spacing: -0.012em; color: var(--lx-label);
}
html[data-app-layout="showroom"] .howto-list li:last-child {
  border-bottom: 1px solid var(--lx-sep);
}
html[data-app-layout="showroom"] .howto-list li::before {
  left: 0; top: 22px; width: 92px; height: auto; justify-content: flex-start; border-radius: 0;
  font-family: var(--lx-display); font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  background: var(--sr-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="showroom"] .app-reqs-grid {
  display: block; max-width: 820px; margin-inline: auto;
}
html[data-app-layout="showroom"] .req-card {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; padding: 22px 0; background: none; border: 0; border-top: 1px solid var(--lx-sep); border-radius: 0; box-shadow: none;
}
html[data-app-layout="showroom"] .req-card:last-child {
  border-bottom: 1px solid var(--lx-sep);
}
html[data-app-layout="showroom"] .req-lbl {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-label);
}
html[data-app-layout="showroom"] .req-val {
  font-size: 1.0625rem; font-weight: 400; color: var(--lx-label2);
}
html[data-app-layout="showroom"] .app-cta {
  padding: 140px 0 148px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-app-layout="showroom"] .app-detail-body-v2 > section.app-cta::before {
  background: var(--lx-bg);
}
html[data-app-layout="showroom"] .app-cta-eyebrow {
  margin-bottom: 12px; font-size: clamp(1.1875rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--lx-label);
}
html[data-app-layout="showroom"] .app-cta h2 {
  font-family: var(--lx-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.042em; text-wrap: balance; background: var(--sr-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-app-layout="showroom"] .app-cta p {
  max-width: 36ch; margin: 0 auto 36px; font-size: clamp(1.125rem, 2vw, 1.4375rem); font-weight: 500; color: var(--lx-label2);
}
html[data-app-layout="showroom"] .app-cta-actions .btn-primary {
  min-height: 50px; padding: 0 30px; font-size: 1.125rem;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-app-layout="showroom"] .app-hero-visual-inner {
      animation: lx-grow linear both; animation-timeline: view(); animation-range: entry 5% cover 45%;
    }
  }
}
@media (max-width: 980px) {
  html[data-app-layout="showroom"] .app-features-grid > .feature-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}
@media (max-width: 760px) {
  html[data-app-layout="showroom"] .app-detail-body-v2 > section {
    padding: 80px 0;
  }
  html[data-app-layout="showroom"] .app-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px;
  }
  html[data-app-layout="showroom"] .app-section-head {
    margin-bottom: 40px;
  }
  /* features become a swipeable shelf */
  html[data-app-layout="showroom"] .app-features-grid {
    display: grid; justify-content: start; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px;
    margin-inline: -24px; padding: 4px 24px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html[data-app-layout="showroom"] .app-features-grid::-webkit-scrollbar {
    display: none;
  }
  html[data-app-layout="showroom"] .feature-card {
    scroll-snap-align: start; min-height: 320px; padding: 30px 26px;
  }
  html[data-app-layout="showroom"] .howto-list li {
    padding-left: 72px; min-height: 0;
  }
  html[data-app-layout="showroom"] .howto-list li::before {
    width: 56px; font-size: 2.75rem; top: 26px;
  }
  html[data-app-layout="showroom"] .req-card {
    grid-template-columns: 1fr; gap: 4px;
  }
  html[data-app-layout="showroom"] .app-cta {
    padding: 96px 0 104px;
  }
}


/* ==========================================================================
   SYSTEM SETTINGS — macOS. The page is a tinted desktop; the hero is an
   About panel and the details live in a Settings window (traffic lights,
   title bar) made of inset grouped lists with coloured icon tiles,
   chevrons and right-aligned values. On phones it becomes iOS Settings.
   ========================================================================== */
html[data-app-layout="settings"] {
  --st-wall: radial-gradient(70% 50% at 15% 0%, color-mix(in srgb, var(--lx-tint) 32%, transparent), transparent 70%), radial-gradient(60% 50% at 90% 18%, rgba(94, 92, 230, 0.18), transparent 72%), linear-gradient(180deg, #eef0f5, #e4e7ee);
  --st-win: rgba(246, 246, 248, 0.86); --st-bar: rgba(236, 236, 240, 0.9); --st-edge: rgba(0, 0, 0, 0.12);
  --st-group: #ffffff; --st-sep: rgba(60, 60, 67, 0.12); --st-hover: rgba(0, 0, 0, 0.03);
  --st-text: #1d1d1f; --st-mute: #6e6e73; --st-blue: #0a66d9;
}
html[data-app-layout="settings"][data-theme="dark"] {
  --st-wall: radial-gradient(70% 50% at 15% 0%, color-mix(in srgb, var(--lx-tint) 30%, transparent), transparent 70%), radial-gradient(60% 50% at 90% 18%, rgba(94, 92, 230, 0.22), transparent 72%), linear-gradient(180deg, #0e1018, #07080c);
  --st-win: rgba(30, 30, 32, 0.84); --st-bar: rgba(40, 40, 44, 0.9); --st-edge: rgba(255, 255, 255, 0.12);
  --st-group: rgba(255, 255, 255, 0.055); --st-sep: rgba(255, 255, 255, 0.08); --st-hover: rgba(255, 255, 255, 0.04);
  --st-text: #f5f5f7; --st-mute: #98989d; --st-blue: #0a84ff;
}
html[data-app-layout="settings"] main {
  background: var(--st-wall); color: var(--st-text);
}
html[data-app-layout="settings"] .btn-primary {
  background: var(--st-blue);
}
html[data-app-layout="settings"] .app-hero {
  padding-bottom: 32px;
}
html[data-app-layout="settings"] .app-hero-grid {
  grid-template-columns: 1fr; gap: 48px; justify-items: center; text-align: center;
}
html[data-app-layout="settings"] .app-hero-grid > div:first-child {
  display: flex; flex-direction: column; align-items: center; max-width: 760px;
}
html[data-app-layout="settings"] .app-hero-icon {
  order: 0; width: 128px; height: 128px; margin: 0 0 22px; box-shadow: 0 0 0 0.5px var(--st-edge), 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}
html[data-app-layout="settings"] .app-hero-title {
  order: 1; max-width: 24ch; margin: 0 0 6px; font-family: var(--lx-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.026em; color: var(--st-text); text-wrap: balance;
}
html[data-app-layout="settings"] .app-hero-eyebrow {
  order: 2; margin: 0 0 16px; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-hero-tagline {
  order: 3; max-width: 50ch; margin: 0 auto 24px; font-size: 1.0625rem; line-height: 1.5; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-hero-actions {
  order: 4; justify-content: center; margin-bottom: 18px;
}
html[data-app-layout="settings"] .app-hero-actions .download-count {
  color: var(--st-mute);
}
html[data-app-layout="settings"] .app-hero-badges {
  order: 5; justify-content: center; gap: 6px;
}
html[data-app-layout="settings"] .app-hero-badge {
  padding: 5px 11px; background: var(--st-group); border: 0.5px solid var(--st-sep); border-radius: 7px; font-size: 0.8125rem; font-weight: 500; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-hero-visual {
  width: 100%; align-items: center !important;
}
/* the Settings window */
html[data-app-layout="settings"] .app-detail-body-v2 {
  position: relative; max-width: 900px; width: calc(100% - 48px); margin: 16px auto 112px; padding: 84px 40px 44px; gap: 34px;
  background: var(--st-win); border: 0.5px solid var(--st-edge); border-radius: 22px;
  -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
  box-shadow: 0 50px 110px -30px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
html[data-app-layout="settings"] .app-detail-body-v2::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; border-radius: 22px 22px 0 0; border-bottom: 0.5px solid var(--st-sep);
  background:
  radial-gradient(circle at 28px 28px, #ff5f57 0 6px, transparent 6.5px),
  radial-gradient(circle at 48px 28px, #febc2e 0 6px, transparent 6.5px),
  radial-gradient(circle at 68px 28px, #28c840 0 6px, transparent 6.5px),
  var(--st-bar);
}
html[data-app-layout="settings"] .app-detail-body-v2::after {
  content: "‹  ›"; position: absolute; top: 15px; left: 96px; font-size: 1.25rem; line-height: 1; letter-spacing: 0.1em; color: var(--st-mute); pointer-events: none;
}
html[data-app-layout="settings"] .app-section-head {
  max-width: none; margin: 0 0 10px 14px; text-align: left;
}
html[data-app-layout="settings"] .app-section-eyebrow {
  margin: 0 0 2px; font-size: 1.0625rem; font-weight: 700; color: var(--st-text);
}
html[data-app-layout="settings"] .app-section-title {
  margin: 0; font-family: var(--lx-font); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-section-sub {
  margin-top: 2px; font-size: 0.875rem; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-details-grid {
  grid-template-columns: 1fr; gap: 14px;
}
html[data-app-layout="settings"] .app-details-text {
  padding: 22px 24px; background: var(--st-group); border: 0.5px solid var(--st-sep); border-radius: 14px;
}
html[data-app-layout="settings"] .app-details-text h2 {
  margin-bottom: 10px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--st-text);
}
html[data-app-layout="settings"] .app-details-text p {
  font-size: 0.9375rem; line-height: 1.6; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-highlights,
html[data-app-layout="settings"] .app-features-grid,
html[data-app-layout="settings"] .app-reqs-grid,
html[data-app-layout="settings"] .howto-list {
  display: block; max-width: none; padding: 0; overflow: hidden; background: var(--st-group); border: 0.5px solid var(--st-sep); border-radius: 14px;
}
html[data-app-layout="settings"] .app-highlight-card {
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-app-layout="settings"] .app-highlight-card + .app-highlight-card {
  border-top: 0.5px solid var(--st-sep);
}
html[data-app-layout="settings"] .app-highlight-num {
  margin: 0; padding: 3px 10px; border-radius: 980px; background: color-mix(in srgb, var(--lx-tint) 16%, transparent); font-size: 0.875rem; font-weight: 600; color: var(--lx-tint-ink); text-align: right; white-space: nowrap;
}
html[data-app-layout="settings"] .app-highlight-label {
  font-size: 0.9375rem; color: var(--st-text);
}
html[data-app-layout="settings"] .feature-card {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; column-gap: 14px; align-items: start;
  padding: 13px 18px 14px; background: none; border: 0; border-radius: 0; box-shadow: none; transition: background 0.15s var(--lx-ease);
}
html[data-app-layout="settings"] .feature-card + .feature-card {
  border-top: 0.5px solid var(--st-sep);
}
html[data-app-layout="settings"] .feature-card:hover {
  background: var(--st-hover); box-shadow: none;
}
html[data-app-layout="settings"] .feature-card::after {
  content: "›"; grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 1.375rem; line-height: 1; color: var(--st-mute); opacity: 0.6;
}
html[data-app-layout="settings"] .feature-card:not(:has(> .feature-icon)) {
  grid-template-columns: minmax(0, 1fr) 14px;
}
html[data-app-layout="settings"] .feature-card:not(:has(> .feature-icon))::after {
  grid-column: 2;
}
html[data-app-layout="settings"] .feature-icon {
  grid-row: 1 / span 2; width: 30px; height: 30px; margin: 1px 0 0; border-radius: 8px; background: currentColor !important; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
}
html[data-app-layout="settings"] .feature-icon svg {
  width: 17px; height: 17px;
}
html[data-app-layout="settings"] .feature-title {
  margin: 0 0 2px; font-size: 0.9375rem; font-weight: 600; color: var(--st-text);
}
html[data-app-layout="settings"] .feature-desc {
  font-size: 0.8125rem; line-height: 1.5; color: var(--st-mute);
}
html[data-app-layout="settings"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 0;
}
html[data-app-layout="settings"] .howto-list li {
  padding: 13px 18px 13px 58px; font-size: 0.9375rem; line-height: 1.55; color: var(--st-text);
}
html[data-app-layout="settings"] .howto-list li + li {
  border-top: 0.5px solid var(--st-sep);
}
html[data-app-layout="settings"] .howto-list li::before {
  left: 18px; top: 12px; width: 24px; height: 24px; background: var(--st-blue); color: #fff; font-size: 0.75rem; font-weight: 700;
}
html[data-app-layout="settings"] .req-card {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 18px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-app-layout="settings"] .req-card + .req-card {
  border-top: 0.5px solid var(--st-sep);
}
html[data-app-layout="settings"] .req-lbl {
  font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--st-text);
}
html[data-app-layout="settings"] .req-val {
  font-size: 0.9375rem; font-weight: 400; color: var(--st-mute); text-align: right;
}
html[data-app-layout="settings"] .req-val.free {
  font-weight: 600;
}
html[data-app-layout="settings"] .app-detail-body-v2 > section.app-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; padding: 22px 24px; text-align: left;
  background: var(--st-group); border: 0.5px solid var(--st-sep); border-radius: 14px; box-shadow: none;
}
html[data-app-layout="settings"] .app-cta > :not(.app-cta-actions) {
  grid-column: 1;
}
html[data-app-layout="settings"] .app-cta-actions {
  grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; gap: 6px;
}
html[data-app-layout="settings"] .app-cta-actions .btn-primary {
  min-height: 36px; padding: 0 18px; font-size: 0.9375rem;
}
html[data-app-layout="settings"] .app-cta-actions .btn-plain {
  min-height: 36px; font-size: 0.9375rem;
}
html[data-app-layout="settings"] .app-cta-eyebrow {
  margin: 0 0 2px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--st-mute);
}
html[data-app-layout="settings"] .app-cta h2 {
  margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--st-text);
}
html[data-app-layout="settings"] .app-cta p {
  max-width: none; margin: 0; font-size: 0.875rem; color: var(--st-mute);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-app-layout="settings"] {
    --st-win: #f6f6f8;
  }
  html[data-app-layout="settings"][data-theme="dark"] {
    --st-win: #1e1e20;
  }
}
@media (max-width: 760px) {
  html[data-app-layout="settings"] .app-detail-body-v2 {
    width: auto; margin: 0 auto 72px; padding: 24px 16px 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
  }
  html[data-app-layout="settings"] .app-detail-body-v2::before,
  html[data-app-layout="settings"] .app-detail-body-v2::after {
    display: none;
  }
  html[data-app-layout="settings"] .app-detail-body-v2 > section.app-cta {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="settings"] .app-cta-actions {
    grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 14px;
  }
}


/* ==========================================================================
   WIDGETS — the iOS Home Screen. A tinted wallpaper, a large widget for the
   story beside four small stat widgets, medium feature widgets in system
   colours, a Reminders-style step list, small spec widgets and a full-
   colour closing widget. Widgets are a frosted material.
   ========================================================================== */
html[data-app-layout="widgets"] {
  --wd-r: 28px;
  --wd-wall: radial-gradient(60% 46% at 12% 6%, color-mix(in srgb, var(--lx-tint) 42%, transparent), transparent 70%), radial-gradient(52% 44% at 92% 20%, rgba(94, 92, 230, 0.3), transparent 70%), radial-gradient(60% 50% at 60% 96%, rgba(255, 45, 85, 0.18), transparent 70%), linear-gradient(180deg, #eef0f6, #e6e9f1);
  --wd-mat: rgba(255, 255, 255, 0.7); --wd-edge: rgba(255, 255, 255, 0.65);
  --wd-blue: #007aff; --wd-green: #34c759; --wd-orange: #ff9500; --wd-pink: #ff2d55; --wd-purple: #af52de; --wd-teal: #30b0c7;
}
html[data-app-layout="widgets"][data-theme="dark"] {
  --wd-wall: radial-gradient(60% 46% at 12% 6%, color-mix(in srgb, var(--lx-tint) 40%, transparent), transparent 70%), radial-gradient(52% 44% at 92% 20%, rgba(94, 92, 230, 0.34), transparent 70%), radial-gradient(60% 50% at 60% 96%, rgba(255, 55, 95, 0.2), transparent 70%), linear-gradient(180deg, #0c0d14, #06060a);
  --wd-mat: rgba(30, 30, 34, 0.62); --wd-edge: rgba(255, 255, 255, 0.09);
  --wd-blue: #0a84ff; --wd-green: #30d158; --wd-orange: #ff9f0a; --wd-pink: #ff375f; --wd-purple: #bf5af2; --wd-teal: #40c8e0;
}
html[data-app-layout="widgets"] main {
  background: var(--wd-wall);
}
html[data-app-layout="widgets"] .app-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
html[data-app-layout="widgets"] .app-hero-icon {
  width: 104px; height: 104px; margin: 0 0 26px; box-shadow: 0 0 0 0.5px var(--lx-sep), 0 14px 30px -10px rgba(0, 0, 0, 0.35);
}
html[data-app-layout="widgets"] .app-hero-eyebrow {
  margin: 0 0 10px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="widgets"] .app-hero-title {
  margin: 0 0 16px; font-family: var(--lx-rounded); font-size: clamp(2.125rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="widgets"] .app-hero-tagline {
  max-width: 36ch; margin: 0 0 28px; font-size: 1.1875rem; line-height: 1.45; color: var(--lx-label2);
}
html[data-app-layout="widgets"] .app-hero-badge {
  padding: 6px 13px; background: var(--wd-mat); border: 0.5px solid var(--wd-edge); border-radius: 980px; font-size: 0.8125rem; font-weight: 600; color: var(--lx-label2); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
}
html[data-app-layout="widgets"] .app-hero-visual {
  align-items: center !important;
}
html[data-app-layout="widgets"] .app-detail-body-v2 {
  max-width: 1080px; margin-inline: auto; gap: 72px; padding-top: 56px; padding-bottom: 112px;
}
html[data-app-layout="widgets"] .app-section-head {
  max-width: none; margin: 0 0 18px 6px; text-align: left;
}
html[data-app-layout="widgets"] .app-section-eyebrow {
  margin-bottom: 4px; font-size: 0.9375rem; color: var(--lx-label2);
}
html[data-app-layout="widgets"] .app-section-title {
  font-family: var(--lx-rounded); font-size: clamp(1.625rem, 2.8vw, 2.25rem); font-weight: 800; letter-spacing: -0.026em;
}
html[data-app-layout="widgets"] .app-section-sub {
  font-size: 1.0625rem;
}
html[data-app-layout="widgets"] .app-details-text,
html[data-app-layout="widgets"] .app-highlight-card,
html[data-app-layout="widgets"] .feature-card,
html[data-app-layout="widgets"] .howto-list,
html[data-app-layout="widgets"] .req-card {
  background: var(--wd-mat); border: 0.5px solid var(--wd-edge); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
}
html[data-app-layout="widgets"] .app-details-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
html[data-app-layout="widgets"] .app-details-text {
  grid-column: 1 / span 2; grid-row: 1 / span 2; padding: 30px 32px; border-radius: var(--wd-r);
}
html[data-app-layout="widgets"] .app-details-text h2 {
  margin-bottom: 14px; font-family: var(--lx-rounded); font-size: 1.625rem; font-weight: 800; line-height: 1.14; letter-spacing: -0.024em;
}
html[data-app-layout="widgets"] .app-details-text p {
  font-size: 1rem; line-height: 1.55; color: var(--lx-label2);
}
html[data-app-layout="widgets"] .app-highlights {
  display: contents;
}
html[data-app-layout="widgets"] .app-highlight-card {
  --w: var(--wd-blue); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; aspect-ratio: 1 / 1; padding: 20px; border-radius: var(--wd-r);
}
html[data-app-layout="widgets"] .app-highlight-card:nth-child(2) {
  --w: var(--wd-green);
}
html[data-app-layout="widgets"] .app-highlight-card:nth-child(3) {
  --w: var(--wd-orange);
}
html[data-app-layout="widgets"] .app-highlight-card:nth-child(4) {
  --w: var(--wd-pink);
}
html[data-app-layout="widgets"] .app-highlight-card::before {
  content: ""; position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 5px color-mix(in srgb, var(--w) 22%, transparent);
}
html[data-app-layout="widgets"] .app-highlight-num {
  margin: 0; font-family: var(--lx-rounded); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--lx-label); overflow-wrap: anywhere;
}
html[data-app-layout="widgets"] .app-highlight-label {
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--lx-label2);
}
html[data-app-layout="widgets"] .app-features-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
html[data-app-layout="widgets"] .feature-card {
  --w: var(--wd-blue); position: relative; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 24px 26px 26px; border-radius: var(--wd-r);
}
html[data-app-layout="widgets"] .feature-card:nth-child(6n + 2) {
  --w: var(--wd-green);
}
html[data-app-layout="widgets"] .feature-card:nth-child(6n + 3) {
  --w: var(--wd-orange);
}
html[data-app-layout="widgets"] .feature-card:nth-child(6n + 4) {
  --w: var(--wd-pink);
}
html[data-app-layout="widgets"] .feature-card:nth-child(6n + 5) {
  --w: var(--wd-purple);
}
html[data-app-layout="widgets"] .feature-card:nth-child(6n + 6) {
  --w: var(--wd-teal);
}
html[data-app-layout="widgets"] .feature-card::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--w) 26%, transparent), transparent 70%); pointer-events: none;
}
html[data-app-layout="widgets"] .feature-card:hover {
  background: var(--wd-mat); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}
html[data-app-layout="widgets"] .feature-card:not(:has(> .feature-icon)) {
  grid-template-columns: minmax(0, 1fr);
}
html[data-app-layout="widgets"] .feature-icon {
  grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; border-radius: 22.37%; background: var(--w) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -8px var(--w);
}
html[data-app-layout="widgets"] .feature-icon svg {
  width: 25px; height: 25px;
}
html[data-app-layout="widgets"] .feature-title {
  margin: 2px 0 6px; font-family: var(--lx-rounded); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.016em; color: var(--lx-label);
}
html[data-app-layout="widgets"] .feature-desc {
  font-size: 0.9375rem; line-height: 1.5; color: var(--lx-label2);
}
html[data-app-layout="widgets"] .howto-list {
  overflow: hidden; border-radius: var(--wd-r);
}
html[data-app-layout="widgets"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 0; padding: 8px 0;
}
html[data-app-layout="widgets"] .howto-list li {
  --w: var(--wd-blue); position: relative; padding: 15px 26px 15px 72px; font-size: 1.0625rem; line-height: 1.5; color: var(--lx-label);
}
html[data-app-layout="widgets"] .howto-list li:nth-child(6n + 2) {
  --w: var(--wd-green);
}
html[data-app-layout="widgets"] .howto-list li:nth-child(6n + 3) {
  --w: var(--wd-orange);
}
html[data-app-layout="widgets"] .howto-list li:nth-child(6n + 4) {
  --w: var(--wd-pink);
}
html[data-app-layout="widgets"] .howto-list li:nth-child(6n + 5) {
  --w: var(--wd-purple);
}
html[data-app-layout="widgets"] .howto-list li:nth-child(6n + 6) {
  --w: var(--wd-teal);
}
html[data-app-layout="widgets"] .howto-list li + li::after {
  content: ""; position: absolute; left: 72px; right: 0; top: 0; height: 0.5px; background: var(--lx-sep);
}
html[data-app-layout="widgets"] .howto-list li::before {
  left: 26px; top: 14px; width: 28px; height: 28px; background: transparent; border: 2px solid var(--w); color: var(--w); font-family: var(--lx-rounded); font-size: 0.8125rem; font-weight: 800;
}
html[data-app-layout="widgets"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px;
}
html[data-app-layout="widgets"] .req-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; min-height: 132px; padding: 20px 22px; border-radius: 24px;
}
html[data-app-layout="widgets"] .req-lbl {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-label2);
}
html[data-app-layout="widgets"] .req-val {
  font-family: var(--lx-rounded); font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--lx-label);
}
html[data-app-layout="widgets"] .app-cta {
  position: relative; overflow: hidden; isolation: isolate; padding: 80px 28px 88px; border: 0; border-radius: 36px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--lx-tint) 70%, transparent); color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, rgba(255, 255, 255, 0.24), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--lx-tint) 88%, #000), color-mix(in srgb, var(--lx-tint) 52%, #000));
}
html[data-app-layout="widgets"] .app-cta-eyebrow {
  margin-bottom: 8px; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.82);
}
html[data-app-layout="widgets"] .app-cta h2 {
  font-family: var(--lx-rounded); font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; color: #fff; text-wrap: balance;
}
html[data-app-layout="widgets"] .app-cta p {
  color: rgba(255, 255, 255, 0.86); font-size: 1.125rem;
}
html[data-app-layout="widgets"] .app-cta .btn-primary {
  background: #fff; color: color-mix(in srgb, var(--lx-tint) 50%, #000);
}
html[data-app-layout="widgets"] .app-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}
html[data-app-layout="widgets"] .app-cta .btn-plain {
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-app-layout="widgets"] {
    --wd-mat: rgba(255, 255, 255, 0.94);
  }
  html[data-app-layout="widgets"][data-theme="dark"] {
    --wd-mat: rgba(30, 30, 34, 0.96);
  }
}
@media (max-width: 900px) {
  html[data-app-layout="widgets"] .app-hero-grid {
    grid-template-columns: 1fr; gap: 40px;
  }
  html[data-app-layout="widgets"] .app-hero-icon {
    margin-inline: auto;
  }
  html[data-app-layout="widgets"] .app-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="widgets"] .app-details-text {
    grid-column: 1 / -1; grid-row: auto; padding: 24px 22px;
  }
  html[data-app-layout="widgets"] .app-features-grid {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="widgets"] .app-reqs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-app-layout="widgets"] .howto-list li {
    padding-left: 64px; padding-right: 18px;
  }
  html[data-app-layout="widgets"] .howto-list li::before {
    left: 20px;
  }
  html[data-app-layout="widgets"] .howto-list li + li::after {
    left: 64px;
  }
  html[data-app-layout="widgets"] .app-cta {
    padding: 56px 22px 64px; border-radius: 30px;
  }
}


/* ==========================================================================
   LIQUID GLASS — macOS Tahoe. Slow colour light drifts behind lensed glass:
   bright specular rims, inner refraction highlights, capsule controls,
   bead-like icons and radii that stay concentric from sheet to tile.
   ========================================================================== */
html[data-app-layout="glass"] {
  --gl-base: #eef1f7;
  --gl-bg: rgba(255, 255, 255, 0.42); --gl-bg-strong: rgba(255, 255, 255, 0.62); --gl-edge: rgba(255, 255, 255, 0.72); --gl-hi: rgba(255, 255, 255, 0.95);
  --gl-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.55));
  --gl-shadow: 0 22px 50px -18px rgba(30, 40, 90, 0.28), 0 2px 6px rgba(30, 40, 90, 0.06);
  --gl-blob-a: color-mix(in srgb, var(--lx-tint) 45%, transparent); --gl-blob-b: rgba(94, 92, 230, 0.32); --gl-blob-c: rgba(48, 209, 88, 0.2);
}
html[data-app-layout="glass"][data-theme="dark"] {
  --gl-base: #05060a;
  --gl-bg: rgba(255, 255, 255, 0.07); --gl-bg-strong: rgba(255, 255, 255, 0.12); --gl-edge: rgba(255, 255, 255, 0.14); --gl-hi: rgba(255, 255, 255, 0.3);
  --gl-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.24));
  --gl-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.8);
  --gl-blob-a: color-mix(in srgb, var(--lx-tint) 50%, transparent); --gl-blob-b: rgba(94, 92, 230, 0.42); --gl-blob-c: rgba(48, 209, 88, 0.2);
}
html[data-app-layout="glass"] main {
  position: relative; isolation: isolate; overflow-x: clip; background: var(--gl-base);
}
html[data-app-layout="glass"] main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
  radial-gradient(40% 30% at 12% 6%, var(--gl-blob-a), transparent 70%),
  radial-gradient(36% 28% at 90% 14%, var(--gl-blob-b), transparent 70%),
  radial-gradient(44% 30% at 70% 58%, var(--gl-blob-c), transparent 70%),
  radial-gradient(40% 28% at 20% 82%, var(--gl-blob-b), transparent 70%);
  background-repeat: no-repeat; background-size: 140% 140%, 140% 140%, 140% 140%, 140% 140%;
}
html[data-app-layout="glass"] .app-hero-grid > div:first-child,
html[data-app-layout="glass"] .app-details-text,
html[data-app-layout="glass"] .app-highlight-card,
html[data-app-layout="glass"] .feature-card,
html[data-app-layout="glass"] .howto-list li,
html[data-app-layout="glass"] .req-card,
html[data-app-layout="glass"] .app-cta,
html[data-app-layout="glass"] .app-hero-badge,
html[data-app-layout="glass"] .btn-plain {
  position: relative; background: var(--gl-bg); border: 1px solid var(--gl-edge);
  -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9);
  box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 -1px 1px rgba(255, 255, 255, 0.12), var(--gl-shadow);
}
/* specular rim on the big surfaces */
html[data-app-layout="glass"] .app-hero-grid > div:first-child::after,
html[data-app-layout="glass"] .app-details-text::after,
html[data-app-layout="glass"] .app-highlight-card::after,
html[data-app-layout="glass"] .feature-card::after,
html[data-app-layout="glass"] .req-card::after,
html[data-app-layout="glass"] .app-cta::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--gl-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-app-layout="glass"] .app-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center;
}
html[data-app-layout="glass"] .app-hero-grid > div:first-child {
  padding: 40px 40px 34px; border-radius: 40px;
}
html[data-app-layout="glass"] .app-hero-icon {
  width: 92px; height: 92px; margin: 0 0 24px; box-shadow: 0 0 0 1px var(--gl-edge), 0 14px 30px -10px rgba(0, 0, 0, 0.35);
}
html[data-app-layout="glass"] .app-hero-eyebrow {
  margin: 0 0 10px; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="glass"] .app-hero-title {
  margin: 0 0 16px; font-family: var(--lx-display); font-size: clamp(2rem, 3.2vw, 2.875rem); font-weight: 700; line-height: 1.07; letter-spacing: -0.032em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="glass"] .app-hero-tagline {
  max-width: 38ch; margin: 0 0 28px; font-size: 1.125rem; line-height: 1.46; color: var(--lx-label2);
}
html[data-app-layout="glass"] .app-hero-actions {
  margin-bottom: 22px;
}
html[data-app-layout="glass"] .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 8px 20px -6px color-mix(in srgb, var(--lx-blue) 55%, transparent);
}
html[data-app-layout="glass"] .btn-plain {
  padding: 0 22px; border-radius: 980px; color: var(--lx-label);
}
html[data-app-layout="glass"] .btn-plain:hover {
  text-decoration: none; background: var(--gl-bg-strong);
}
html[data-app-layout="glass"] .app-hero-badges {
  gap: 8px;
}
html[data-app-layout="glass"] .app-hero-badge {
  padding: 6px 14px; border-radius: 980px; font-size: 0.8125rem; font-weight: 600; color: var(--lx-label2); box-shadow: inset 0 1px 0 var(--gl-hi);
}
html[data-app-layout="glass"] .app-hero-visual {
  align-items: center !important;
}
html[data-app-layout="glass"] .app-hero-visual img {
  filter: drop-shadow(0 30px 50px rgba(20, 20, 60, 0.3));
}
html[data-app-layout="glass"] .app-detail-body-v2 {
  max-width: 1100px; margin-inline: auto; gap: 88px; padding-top: 64px; padding-bottom: 120px;
}
html[data-app-layout="glass"] .app-section-head {
  max-width: 760px; margin: 0 auto 36px; text-align: center;
}
html[data-app-layout="glass"] .app-details-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch;
}
html[data-app-layout="glass"] .app-details-text {
  padding: 40px 42px; border-radius: 36px;
}
html[data-app-layout="glass"] .app-details-text h2 {
  margin-bottom: 16px; font-family: var(--lx-display); font-size: clamp(1.625rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.026em;
}
html[data-app-layout="glass"] .app-details-text p {
  font-size: 1.0625rem; line-height: 1.58; color: var(--lx-label2);
}
html[data-app-layout="glass"] .app-highlights {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
html[data-app-layout="glass"] .app-highlight-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 26px 24px; border-radius: 30px;
}
html[data-app-layout="glass"] .app-highlight-num {
  margin: 0; font-family: var(--lx-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--lx-label);
}
html[data-app-layout="glass"] .app-highlight-label {
  font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--lx-label2);
}
html[data-app-layout="glass"] .app-features-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
html[data-app-layout="glass"] .app-features-grid > .feature-card {
  flex: 0 1 calc((100% - 40px) / 3);
}
html[data-app-layout="glass"] .feature-card {
  padding: 28px 28px 30px; border-radius: 32px; transition: transform 0.5s var(--lx-spring), background 0.3s var(--lx-ease);
}
html[data-app-layout="glass"] .feature-card:hover {
  transform: translateY(-4px); background: var(--gl-bg-strong);
}
html[data-app-layout="glass"] .feature-icon {
  width: 54px; height: 54px; margin: 0 0 22px; border-radius: 18px;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.55), transparent 55%), currentColor !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 10px 20px -8px currentColor;
}
html[data-app-layout="glass"] .feature-icon svg {
  width: 25px; height: 25px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
html[data-app-layout="glass"] .feature-title {
  margin-bottom: 8px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.014em; color: var(--lx-label);
}
html[data-app-layout="glass"] .feature-desc {
  font-size: 0.9375rem; line-height: 1.52; color: var(--lx-label2);
}
html[data-app-layout="glass"] .howto-list {
  max-width: 860px; margin-inline: auto;
}
html[data-app-layout="glass"] :is(.howto-list > ul, .howto-list > ol, .howto-list:not(:has(> ul, > ol))) {
  gap: 12px;
}
html[data-app-layout="glass"] .howto-list li {
  padding: 18px 26px 18px 80px; border-radius: 30px; font-size: 1.0625rem; line-height: 1.5; color: var(--lx-label);
}
html[data-app-layout="glass"] .howto-list li::before {
  left: 18px; top: 13px; width: 40px; height: 40px; color: #fff; font-size: 1rem; font-weight: 700;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.5), transparent 55%), var(--lx-blue);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.18);
}
html[data-app-layout="glass"] .app-reqs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px;
}
html[data-app-layout="glass"] .req-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 20px 24px; border-radius: 28px;
}
html[data-app-layout="glass"] .req-lbl {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lx-label2);
}
html[data-app-layout="glass"] .req-val {
  font-size: 1.125rem; font-weight: 600; color: var(--lx-label);
}
html[data-app-layout="glass"] .app-cta {
  overflow: hidden; isolation: isolate; padding: 88px 32px 96px; text-align: center; border-radius: 48px;
}
html[data-app-layout="glass"] .app-cta::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 70%; height: 120%; z-index: -1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--lx-tint) 40%, transparent), transparent); pointer-events: none;
}
html[data-app-layout="glass"] .app-cta-eyebrow {
  margin-bottom: 10px; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lx-tint-ink);
}
html[data-app-layout="glass"] .app-cta h2 {
  font-family: var(--lx-display); font-size: clamp(2.125rem, 4.6vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.034em; color: var(--lx-label); text-wrap: balance;
}
html[data-app-layout="glass"] .app-cta p {
  max-width: 42ch; margin: 0 auto 32px; font-size: 1.1875rem; color: var(--lx-label2);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-app-layout="glass"] main::before {
    animation: lx-pan 26s ease-in-out infinite alternate;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-app-layout="glass"] {
    --gl-bg: rgba(255, 255, 255, 0.88); --gl-bg-strong: rgba(255, 255, 255, 0.95);
  }
  html[data-app-layout="glass"][data-theme="dark"] {
    --gl-bg: rgba(40, 40, 46, 0.92); --gl-bg-strong: rgba(52, 52, 58, 0.95);
  }
}
@media (max-width: 960px) {
  html[data-app-layout="glass"] .app-features-grid > .feature-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}
@media (max-width: 860px) {
  html[data-app-layout="glass"] .app-hero-grid,
  html[data-app-layout="glass"] .app-details-grid {
    grid-template-columns: 1fr;
  }
  html[data-app-layout="glass"] .app-hero-grid > div:first-child {
    padding: 30px 24px 26px; border-radius: 32px;
  }
  html[data-app-layout="glass"] .app-hero-icon {
    margin-inline: auto;
  }
  html[data-app-layout="glass"] .app-details-text {
    padding: 28px 24px; border-radius: 30px;
  }
  html[data-app-layout="glass"] .app-features-grid > .feature-card {
    flex-basis: 100%;
  }
  html[data-app-layout="glass"] .howto-list li {
    padding: 16px 18px 16px 68px; border-radius: 26px;
  }
  html[data-app-layout="glass"] .howto-list li::before {
    left: 14px; width: 36px; height: 36px;
  }
  html[data-app-layout="glass"] .app-cta {
    padding: 60px 22px 68px; border-radius: 36px;
  }
}

/* ==========================================================================
   GLOBAL FIXES (apply to every layout)
   1. The floating pill nav (fixed, ~24–84px desktop / 10–64px phone) must never
      cover the hero: every hero starts below it.
   2. No frame around the hero screenshot / slider in any layout.
   ========================================================================== */
html[data-app-layout] { --app-nav-safe: 128px; }
@media (max-width: 860px) { html[data-app-layout] { --app-nav-safe: 96px; } }
html[data-app-layout] .app-hero { padding-top: var(--app-nav-safe) !important; }

html[data-app-layout] .app-hero-visual,
html[data-app-layout] .app-hero-visual-inner,
html[data-app-layout] .app-hero-visual-frame {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; outline: 0;
}
html[data-app-layout] .app-hero-visual-frame { padding: 0 !important; overflow: visible !important; }
html[data-app-layout] .app-hero-visual::before, html[data-app-layout] .app-hero-visual::after,
html[data-app-layout] .app-hero-visual-frame::before, html[data-app-layout] .app-hero-visual-frame::after { content: none !important; display: none !important; }
html[data-app-layout] .app-hero-visual-frame img { border-radius: 0 !important; }