/* Site theme: light and dark, macOS-native, airy. Loaded after styles.css, which keeps the app look-alikes
   (panel, widgets) dark like the real app. Each site sets --brand / --brand-2 in its <style> block. */

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --fg: #111214;
  --bg-2: #F5F5F7;
  --line-2: rgba(0, 0, 0, .1);
  --fg-60: rgba(17, 18, 20, .62);
  --fg-40: rgba(17, 18, 20, .42);
  --glass: rgba(255, 255, 255, .62);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --fg: #F5F5F7;
    --bg-2: #0E0E10;
    --line-2: rgba(255, 255, 255, .12);
    --fg-60: rgba(245, 245, 247, .64);
    --fg-40: rgba(245, 245, 247, .42);
    --glass: rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --fg: #F5F5F7; --bg-2: #0E0E10; --line-2: rgba(255, 255, 255, .12);
  --fg-60: rgba(245, 245, 247, .64); --fg-40: rgba(245, 245, 247, .42); --glass: rgba(0, 0, 0, .55);
}

html { font-size: 18px; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg-60); text-decoration: none; }
a:hover { color: var(--fg); }

h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 200; line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); font-weight: 200; line-height: 1.15; text-align: center; }
h3 { font-size: 1.1rem; font-weight: 500; }
p, li { font-weight: 300; }
.lead { color: var(--fg-60); font-size: 1rem; max-width: 34rem; margin-inline: auto; text-align: center; }
.fine { color: var(--fg-40); font-size: .75rem; }
.eyebrow { color: var(--brand); font-size: .7rem; letter-spacing: .14em; text-align: center; }

.wrap { max-width: 64rem; padding-inline: 16px; }
.section { padding-block: clamp(3.5rem, 9vw, 6rem); align-items: center; gap: 1rem; }
.section > h2 + .lead { margin-top: -.25rem; }

/* Header: sticky glass bar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--glass); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); border-bottom: 1px solid var(--line-2); }
.topbar-in { max-width: 64rem; margin: 0 auto; padding: .55rem 16px; display: flex; align-items: center; gap: 1.2rem; font-size: .8rem; }
.topbar .brand { display: flex; align-items: center; gap: .5rem; color: var(--fg); font-weight: 600; font-size: .9rem; }
.topbar .brand img { width: 26px; height: 26px; }
.topbar nav { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.topbar nav a { font-weight: 400; }
.topbar .langs { border-color: var(--line-2); }
.topbar .langs a { font-size: .65rem; padding: 2px 8px; color: var(--fg-60); }
.topbar .langs a.active { background: var(--line-2); color: var(--fg); }
@media (max-width: 720px) {
  .topbar nav .hide-sm { display: none; }
  .topbar-in { gap: .8rem; }
}

/* Buttons */
.cta, .btn.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 0; padding: .7rem 1.4rem; border-radius: 4rem; border: 0;
  background: var(--brand); color: #FFFFFF; font-size: .85rem; font-weight: 500; line-height: 1;
  box-shadow: 0 0 2rem color-mix(in srgb, var(--brand) 45%, transparent);
  transition: background .2s, transform .2s;
}
.cta:hover, .btn.primary:hover { color: #FFFFFF; background: color-mix(in srgb, var(--brand), black 10%); }
.cta:active, .btn.primary:active { transform: scale(.98); }
.cta.small { padding: .5rem 1rem; font-size: .75rem; box-shadow: none; }
.btn.ghost { min-height: 0; padding: .7rem 1.2rem; border-radius: 4rem; color: var(--fg); border: 1px solid var(--line-2); font-weight: 500; font-size: .85rem; }
.link-arrow { color: var(--brand); font-weight: 400; font-size: .9rem; }
.link-arrow:hover { color: var(--brand); text-decoration: underline; }

/* Hero */
.hero2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding: clamp(3rem, 8vw, 5rem) 16px 1rem;
  background: radial-gradient(circle closest-side at 50% 28%, color-mix(in srgb, var(--brand) 22%, transparent), transparent); }
.hero-icon { width: 8.5rem; height: 8.5rem; filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--brand) 35%, transparent)); animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero2 h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 3.6rem); }
.hero2 .tagline { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 300; max-width: 32rem; }
.hero2 .lead { margin: 0; }
.hero2 .ctas { justify-content: center; align-items: center; gap: 1.2rem; margin-top: .4rem; }
.hero2 .fine { margin: 0; }

/* MacBook mock-up. The stage is drawn at a fixed size and scaled to fit by site.js. */
.showcase { padding: 1rem 16px clamp(3rem, 8vw, 5rem); display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.macbook { width: min(60rem, 100%); }
/* MacBook Pro (space black) */
.mb-lid { position: relative; padding: 1.25% 1.25% 1.6%; border-radius: 2.6% 2.6% 0 0 / 4.2% 4.2% 0 0; background: #050506; box-shadow: inset 0 0 0 1.5px #3A3B40, inset 0 0 0 3px #0A0A0B; }
.mb-notch { position: absolute; z-index: 3; top: 1.25%; left: 50%; width: 12%; height: 3.6%; transform: translateX(-50%); background: #050506; border-radius: 0 0 .7rem .7rem; }
.mb-notch::after { content: ""; position: absolute; top: 32%; left: 50%; width: 7%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2C3A55, #0B0E14 70%); }
.mb-display { position: relative; aspect-ratio: 16 / 10.3; overflow: hidden; border-radius: .45rem .45rem 0 0; }
.mb-stage { position: absolute; top: 0; left: 0; width: 1280px; height: 824px; transform-origin: 0 0; }
.mb-base { position: relative; height: 0; padding-top: 2.1%; margin: 0 -5.5%; border-radius: 0 0 1.4rem 1.4rem / 0 0 100% 100%; background: linear-gradient(#4A4B50 0%, #2E2F33 18%, #1C1D20 70%, #0E0E10 100%); box-shadow: 0 1px 0 #5A5B60 inset; }
.mb-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 .8rem .8rem; background: linear-gradient(#15161A, #24252A); }
.mb-base::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 6px; border-radius: 0 0 50% 50%; background: rgba(0, 0, 0, .35); filter: blur(2px); }
.macbook { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .28)); }

.wallpaper { position: absolute; inset: 0; background: var(--wallpaper); }
.mb-menubar { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 22px; padding: 0 18px; font: 500 14px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #FFFFFF; background: rgba(0, 0, 0, .18); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mb-menubar .spacer { flex: 1; }
.mb-menubar b { font-weight: 700; }
.mb-menubar .mb-item { opacity: .92; }
.mb-menubar .mb-ours { display: flex; align-items: center; justify-content: center; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .25); }
.mb-menubar svg { display: block; }
.mb-panel { position: absolute; top: 40px; right: 150px; width: 400px; }
.mb-panel .panel { max-width: none; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); background: rgba(23, 24, 28, .86); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.mb-desktop { position: absolute; top: 70px; left: 50px; right: 50px; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.mb-desktop .w { background: rgba(23, 24, 28, .78); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.caption { color: var(--fg-60); font-size: .9rem; text-align: center; max-width: 30rem; margin: 0; }

/* Phones: drop the laptop, show the panel itself */
@media (max-width: 640px) {
  .macbook.phone-panel .mb-lid { padding: 0; background: none; box-shadow: none; }
  .macbook.phone-panel .mb-notch, .macbook.phone-panel .mb-base, .macbook.phone-panel .mb-menubar, .macbook.phone-panel .wallpaper { display: none; }
  .macbook.phone-panel .mb-display { aspect-ratio: auto; overflow: visible; }
  .macbook.phone-panel .mb-stage { position: static; width: auto; height: auto; transform: none !important; }
  .macbook.phone-panel .mb-panel { position: static; width: 100%; }
  .macbook { filter: none; }
}

/* Feature cards */
.grid3 { max-width: 56rem; width: 100%; }
.card { background: linear-gradient(to top, var(--bg-2), var(--bg)); border: 1px solid var(--line-2); border-radius: 1.6rem; padding: 1.5rem; gap: .5rem; color: var(--fg); }
.card svg { color: var(--brand); }
.card p, .steps span:not(.num) { color: var(--fg-60); font-size: .85rem; }
.card h3 { margin: 0; }
.steps .num { font-family: ui-monospace, "SF Mono", monospace; font-weight: 300; color: var(--brand); font-size: 1.3rem; }
.chip { background: var(--bg-2); border-color: var(--line-2); color: var(--fg); }
.chip span { color: var(--fg-60); }

.privacy { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 14%, transparent), transparent), linear-gradient(to top, var(--bg-2), var(--bg)); }
.privacy h2, .privacy .lead, .privacy .eyebrow { text-align: left; margin-inline: 0; }
.checks { color: var(--fg); font-size: .9rem; }
.checks li::before { color: var(--brand); }

/* Pricing tiers */
.plans { gap: 2rem; margin-top: 1rem; }
.plan { max-width: 19rem; flex: 1 1 17rem; padding: 0; overflow: hidden; border-radius: 2rem; gap: 0; background: linear-gradient(to top, color-mix(in srgb, var(--fg) 6%, transparent), var(--bg)); }
.plan > * { padding-inline: 1.4rem; }
.plan-name { padding-top: 1.4rem; font-size: 1.15rem; font-weight: 500; }
.price { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 2.8rem; font-weight: 500; padding-block: .3rem .8rem; }
.plan .checks { padding-block: 1rem; margin: 0; border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 40%, transparent); font-size: .8rem; }
.plan.pro { border-color: color-mix(in srgb, var(--brand) 60%, transparent); box-shadow: 0 0 3rem color-mix(in srgb, var(--brand) 18%, transparent); }
.plan .btn { margin: 0 1.4rem 0; width: auto; }
.plan .buy-account, .plan .buy-error { margin: .7rem 0 1.4rem; font-size: .7rem; }

/* Download */
#download .cta { font-size: .95rem; padding: .85rem 1.6rem; }
#download .narrow { max-width: 30rem; }

/* FAQ */
.faq { max-width: 36rem; width: 100%; display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1rem; }
.faq h3 { margin: 0 0 .3rem; font-size: .95rem; }
.faq p { margin: 0; color: var(--fg-60); font-size: .85rem; }

/* Footer */
.footer2 { border-top: 1px solid var(--line-2); padding: 2.5rem 16px 3rem; font-size: .8rem; }
.footer2 .cols { max-width: 40rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 3rem; }
.footer2 h4 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; }
.footer2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.footer2 .copy { text-align: center; color: var(--fg-40); margin-top: 2rem; }
@media (max-width: 560px) { .footer2 .cols { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Doc pages (privacy, thanks, account) */
.doc, .thanks, .account { color: var(--fg); }
.license-key { background: var(--bg-2); border-color: var(--line-2); color: var(--fg); }

@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-icon { animation: none; } }

/* The app look-alikes keep the app's own dark colors */
.panel, .w { color: #ECEDEF; }
.mb-panel .panel { max-height: 740px; overflow: hidden; }
.grid4 { max-width: 64rem; width: 100%; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.section > .showcase { width: 100%; padding-inline: 0; }
.mb-desktop { transform: scale(1.55); transform-origin: 0 0; }
.chips { justify-content: center; max-width: 56rem; }
@media (max-width: 640px) {
  .macbook.phone-panel .mb-desktop { position: static; transform: none; justify-content: center; }
  .topbar nav a[href="#pricing"] { display: none; }
  .topbar .brand span { display: none; }
}
html, body { overflow-x: clip; }

/* Real MacBook Pro 14" (M5, space black) from Apple Design Resources. The bezel PNG sits on top;
   the screen opening is 3024×1964 at (418, 288) in the 3860×2540 artwork. */
.macbook { position: relative; aspect-ratio: 3860 / 2540; filter: none; }
.macbook::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: url(macbook-pro.png) center / 100% 100% no-repeat; }
.macbook .mb-lid { position: absolute; left: 10.829%; top: 11.339%; width: 78.342%; height: 77.323%; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.macbook .mb-display { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 1.6% / 2.5%; }
.macbook .mb-stage { height: 832px; }
.macbook .mb-notch, .macbook .mb-base { display: none; }
.macbook .mb-menubar { height: 32px; }
@media (max-width: 640px) {
  .macbook.phone-panel { aspect-ratio: auto; }
  .macbook.phone-panel::after { display: none; }
  .macbook.phone-panel .mb-lid { position: static; width: auto; height: auto; }
  .macbook.phone-panel .mb-display { position: static; }
}
.showcase > .macbook, .section .macbook { width: min(66rem, 100%); }

/* OneMenu: the menu bar panel is two floating Liquid Glass cards under the menu bar, with no window
   frame around them: a main card (22pt corners, glass tinted with window gray, fairly opaque) and,
   10pt below, a capsule footer. Rows inside the main card use a subtle fill, not glass on glass.
   Each page sets the width with --om-w (the app's panel width in points). */
.onemenu { position: absolute; top: 40px; right: 150px; width: var(--om-w, 360px); display: flex; flex-direction: column; gap: 10px; color: #F5F5F7; font: 13px/1.35 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.onemenu .om-card, .onemenu .om-pill {
  background: rgba(44, 44, 48, .82); border: 0;
  backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 50px rgba(0, 0, 0, .38);
}
.onemenu .om-card { max-width: none; max-height: none; overflow: hidden; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.onemenu .om-pill { border-radius: 999px; min-height: 42px; padding: 5px 6px 5px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.om-pill .om-btn { padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.om-pill .om-btn:first-child { margin-left: -10px; }
.om-pill .om-spacer { flex: 1; }
.om-fill { background: rgba(255, 255, 255, .06); border-radius: 14px; }
.om-divider { height: 1px; background: rgba(255, 255, 255, .1); }
.om-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.om-eyebrow { font-size: 11px; letter-spacing: .05em; color: #9A9DA6; }
.om-title { font-size: 17px; font-weight: 600; }
.om-count { font-size: 12px; color: #9A9DA6; display: flex; align-items: center; gap: 6px; }
/* macOS switch */
.om-sw { flex: none; display: inline-flex; width: 38px; height: 22px; padding: 2px; border-radius: 11px; background: rgba(255, 255, 255, .16); justify-content: flex-start; }
.om-sw::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.om-sw.on { background: var(--accent); justify-content: flex-end; }
/* Trial line and the way to buy */
.om-license { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #9A9DA6; }
.om-license b { font-weight: 400; color: var(--accent); }
.om-buy { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-size: 14px; font-weight: 500; }
@media (max-width: 640px) {
  .macbook.phone-panel .onemenu .om-card, .macbook.phone-panel .onemenu .om-pill { background: #2A2A2E; }
}

/* One license, three apps: Mesa, Som and Casa side by side (pricing card, thanks page). */
.bundle-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding-block: .5rem 1.2rem; }
.bundle-app { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .85rem; font-weight: 500; color: var(--fg); }
.bundle-app img { width: 2.75rem; height: 2.75rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.bundle-app small { font-size: .68rem; font-weight: 400; line-height: 1.25; color: var(--fg-60); }
a.bundle-app { padding: 1rem .5rem; border: 1px solid var(--line-2); border-radius: 1.2rem; transition: border-color .2s, transform .2s; }
a.bundle-app:hover { color: var(--fg); border-color: color-mix(in srgb, var(--brand) 60%, transparent); transform: translateY(-2px); }
.thanks .bundle-apps { width: 100%; max-width: 30rem; padding: 0; }
.bundle-apps[hidden] { display: none; }
.thanks h2 { margin: 1rem 0 0; font-size: 1.15rem; font-weight: 500; }
.license .also { margin: -.3rem 0 0; }
.license .also a { color: var(--brand); }
.plan .btn { line-height: 1.25; text-wrap: balance; }
@media (max-width: 560px) { .license-key { font-size: .9rem; letter-spacing: .02em; padding: 14px 16px; } }