/* Pure Brief AI — site styles. Paper and ink from the app icon, one sage accent, and dark
   "stage" sections for the moments that should feel like a product launch. */

/* ---- Fonts (self-hosted, OFL) ------------------------------------------------------- */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Cormorant; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-ext-500-italic.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Cormorant; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-500-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Cormorant; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Cormorant; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Tokens ------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #f4f1ea; --bg-2: #ece8de; --card: #fbfaf6; --card-2: #f1eee6;
  --ink: #142026; --ink-2: #3c4a4f; --ink-3: #5b6a6f; --line: rgba(20, 32, 38, .11); --line-2: rgba(20, 32, 38, .18);
  --brand: #26383c; --accent: #3d7479; --accent-soft: rgba(61, 116, 121, .12); --glow: #9fbfc6;
  --gold: #b88a3e; --rec: #e5484d; --ok: #2f8f5b;
  --v-me: #3d7479; --v-a: #b0742e; --v-b: #7b5ea7;
  --mark: rgba(232, 190, 92, .38);
  --shadow-sm: 0 1px 2px rgba(20, 32, 38, .06), 0 2px 8px rgba(20, 32, 38, .04);
  --shadow-lg: 0 30px 80px -20px rgba(12, 19, 22, .35), 0 12px 30px -12px rgba(12, 19, 22, .25);
  --radius: 22px; --radius-sm: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1200px; --nav-h: 64px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --serif: Cormorant, 'Iowan Old Style', 'Palatino', Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b1013; --bg-2: #0f161a; --card: #121a1e; --card-2: #172126;
    --ink: #ecefea; --ink-2: #bcc6c6; --ink-3: #8e9b9d; --line: rgba(236, 239, 234, .09); --line-2: rgba(236, 239, 234, .16);
    --brand: #9fbfc6; --accent: #9fbfc6; --accent-soft: rgba(159, 191, 198, .12);
    --gold: #d8b06a; --v-me: #8fc3c8; --v-a: #e0a35c; --v-b: #b9a0e6; --mark: rgba(216, 176, 106, .28);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 40px 90px -20px rgba(0, 0, 0, .7), 0 12px 30px -12px rgba(0, 0, 0, .6);
  }
}
/* Stage sections are always night, whatever the system theme. */
.stage {
  color-scheme: dark;
  --bg: #0b1114; --bg-2: #0f171b; --card: rgba(255, 255, 255, .045); --card-2: rgba(255, 255, 255, .07);
  --ink: #eef1ec; --ink-2: #c3ccca; --ink-3: #93a1a2; --line: rgba(238, 241, 236, .1); --line-2: rgba(238, 241, 236, .18);
  --accent: #a9cbd1; --accent-soft: rgba(169, 203, 209, .14); --mark: rgba(216, 176, 106, .3);
  --v-me: #8fc3c8; --v-a: #e0a35c; --v-b: #b9a0e6;
  background: radial-gradient(120% 80% at 50% 0%, #13262a 0%, #0b1114 55%, #090d10 100%);
  color: var(--ink); position: relative; overflow: hidden; isolation: isolate;
}

/* ---- Base --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 40px, 820px); }
.center { text-align: center; }
.i { width: 1.15em; height: 1.15em; flex: none; }

/* ---- Type --------------------------------------------------------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow .i { width: 15px; height: 15px; }
.pill { padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); letter-spacing: .06em; text-transform: none; font-size: 13.5px; color: var(--ink-2); backdrop-filter: blur(10px); }
.title { margin: 0; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
/* The gradient sits on the words themselves: a clipped background does not paint through
   children that are transformed, which every animated hero word is. */
.title em, .hero-title .em .w { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--accent) 0%, var(--glow) 45%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.title em { font-size: 1.12em; line-height: 1.1; padding-bottom: .05em; }
.hero-title .em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.lead { margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; max-width: 60ch; }
.center .lead, .section-head.center .lead { margin-inline: auto; }

/* ---- Buttons ------------------------------------------------------------------------ */
.btn { --bx: 0px; --by: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; cursor: pointer; white-space: nowrap; transform: translate(var(--bx), var(--by));
  transition: transform .35s var(--ease-out), background-color .2s, border-color .2s, color .2s, box-shadow .3s; }
.btn .i { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px -12px rgba(12, 19, 22, .55); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--accent)); box-shadow: 0 16px 40px -14px rgba(12, 19, 22, .6); }
.stage .btn-primary { background: #f4f1ea; color: #0f1a1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 50px -16px rgba(159, 191, 198, .55); }
.stage .btn-primary:hover { background: #ffffff; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--card-2); border-color: var(--ink-3); }
.btn-glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--ink); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn:active { scale: .98; }
body.dialog-open { overflow: hidden; }

/* ---- Navigation --------------------------------------------------------------------- */
.nav { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
.nav-inner { pointer-events: auto; width: min(100% - 28px, 1180px); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; gap: 18px; padding: 0 12px 0 18px; border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--line); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 8px 30px -18px rgba(12, 19, 22, .4); transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s; }
.nav.on-dark .nav-inner { background: rgba(11, 17, 20, .55); border-color: rgba(255, 255, 255, .1); color: #eef1ec; }
.nav.on-dark .btn-primary { background: #f4f1ea; color: #0f1a1e; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.02em; font-size: 17px; }
.brand img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(20, 32, 38, .08), 0 4px 12px -4px rgba(12, 19, 22, .35); }
.brand b { font-weight: 650; color: var(--accent); }
.nav.on-dark .brand b { color: #a9cbd1; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; color: inherit; opacity: .78; transition: opacity .2s, background-color .2s; }
.nav-links a:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle .i { width: 20px; height: 20px; }
.nav-toggle .i-close, .nav.menu-open .nav-toggle .i-open { display: none; }
.nav.menu-open .nav-toggle .i-close { display: block; }
.mobile-menu { pointer-events: auto; width: min(100% - 28px, 1180px); margin: 8px auto 0; padding: 12px; border-radius: 20px; background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--line); backdrop-filter: blur(18px); display: grid; gap: 4px; color: var(--ink);
  animation: drop .35s var(--ease-out); }
.mobile-menu[hidden] { display: none; }
@media (min-width: 1081px) { .mobile-menu { display: none; } }
.mobile-menu a { padding: 13px 14px; border-radius: 12px; font-size: 16px; }
.mobile-menu a:hover { background: var(--card-2); }
.mobile-menu .btn { margin-top: 6px; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; opacity: .85; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.lang summary .i { width: 17px; height: 17px; }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); display: grid; animation: drop .25s var(--ease-out); }
.lang-list a { padding: 9px 12px; border-radius: 9px; font-size: 14.5px; }
.lang-list a:hover { background: var(--card-2); }
.lang-list a[aria-current] { font-weight: 650; color: var(--accent); }

/* ---- Aurora and grain --------------------------------------------------------------- */
.aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; opacity: .55; mix-blend-mode: screen; will-change: transform; }
.aurora i:nth-child(1) { width: 62vw; height: 62vw; left: 4%; top: -6%; background: radial-gradient(circle, rgba(111, 170, 178, .55), transparent 62%); animation: drift-a 26s var(--ease) infinite alternate; }
.aurora i:nth-child(2) { width: 52vw; height: 52vw; right: -6%; top: 6%; background: radial-gradient(circle, rgba(201, 164, 106, .32), transparent 62%); animation: drift-b 32s var(--ease) infinite alternate; }
.aurora i:nth-child(3) { width: 46vw; height: 46vw; left: 30%; top: 38%; background: radial-gradient(circle, rgba(74, 116, 160, .35), transparent 62%); animation: drift-c 38s var(--ease) infinite alternate; }
.aurora.soft i { opacity: .32; }
@keyframes drift-a { to { transform: translate3d(12vw, 8vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-10vw, 14vh, 0) scale(.9); } }
@keyframes drift-c { to { transform: translate3d(-8vw, -10vh, 0) scale(1.2); } }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- Hero --------------------------------------------------------------------------- */
.hero { padding: calc(var(--nav-h) + 52px) 0 0; min-height: 100dvh; }
.hero-grid { display: grid; justify-items: center; text-align: center; }
.hero-copy { max-width: 1120px; display: grid; justify-items: center; }
.hero-title { margin: 6px 0 0; font-size: clamp(42px, 5.6vw, 78px); line-height: 1.08; letter-spacing: -.045em; font-weight: 680; text-wrap: balance; }
.hero-title .line-block { display: block; }
.hero-title .em { font-size: 1.12em; line-height: 1.1; display: block; padding-bottom: .08em; }
.hero-title .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(10px); animation: word-in 1s var(--ease-out) forwards; animation-delay: 120ms; }
@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }
.hero-sub { margin: 18px 0 0; max-width: 660px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.hero-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); }
.reveal-now { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease-out) forwards; }
.hero-copy .eyebrow.reveal-now { animation-delay: .05s; }
.hero-sub.reveal-now { animation-delay: .55s; }
.hero-cta.reveal-now { animation-delay: .7s; }
.hero-note.reveal-now { animation-delay: .85s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- Actual application screenshots ------------------------------------------------ */
.device-wrap { --tx: 0deg; --ty: 0deg; --tilt: 4deg; --lift: 0px; position: relative; width: min(100%, 1159px); margin: 40px auto 0; perspective: 1800px; opacity: 0; animation: rise 1.2s var(--ease-out) .9s forwards; }
.device { position: relative; border-radius: 16px; overflow: hidden; background: #f6f6f7; border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .65), 0 0 100px -20px rgba(111, 170, 178, .22);
  transform: rotateX(calc(var(--tilt) + var(--tx))) rotateY(var(--ty)) translateY(var(--lift)); transform-origin: 50% 0%; transition: transform .25s linear; }
.demo-caption { margin: 16px 0 0; color: var(--ink-2); font-size: 12px; text-align: center; }
.demo-caption > span { display: block; margin-top: 4px; }
.who { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.who-me { background: color-mix(in srgb, var(--v-me) 18%, transparent); color: var(--v-me); }
.who-a { background: color-mix(in srgb, var(--v-a) 18%, transparent); color: var(--v-a); }
.who-b { background: color-mix(in srgb, var(--v-b) 18%, transparent); color: var(--v-b); }

/* ---- Works with --------------------------------------------------------------------- */
.works { padding: 120px 0 40px; text-align: center; }
.home .hero + .works { margin-top: -1px; }
.works-title { margin: 0 0 26px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 46s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: 42px; padding-right: 42px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.app-compat { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--ink-2); }
.app-logo { display: block; width: 28px; height: 28px; flex: none; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.app-compat > span:last-child { font-size: clamp(18px, 2vw, 24px); font-weight: 550; letter-spacing: -.025em; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Sections ----------------------------------------------------------------------- */
.section { padding: clamp(90px, 12vw, 160px) 0; position: relative; }
.section-head { margin-bottom: clamp(48px, 6vw, 80px); max-width: 820px; }
.section-head.center { margin-inline: auto; text-align: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.reverse .split-copy { order: 2; }
.points { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; }
.points li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.points li > .i { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.points b { display: block; font-weight: 650; letter-spacing: -.01em; margin-bottom: 3px; }
.points span { color: var(--ink-2); font-size: 16px; }
.points.compact { gap: 14px; }
.points.compact li { grid-template-columns: 28px 1fr; align-items: center; }
.points.compact li > .i { width: 28px; height: 28px; padding: 6px; border-radius: 50%; }

/* Reveal on scroll. Script adds .in; without script everything is simply visible. */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---- Privacy diagram ---------------------------------------------------------------- */
.privacy-visual { display: grid; gap: 22px; }
.stat { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 12px; padding: 26px 28px; border-radius: var(--radius); background: var(--ink); color: var(--bg); }
.stat-value { font-size: 72px; line-height: .9; font-weight: 700; letter-spacing: -.05em; }
.stat-unit { font-family: var(--serif); font-style: italic; font-size: 32px; }
.stat p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; opacity: .78; }

/* ---- Story -------------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 5vw, 80px); }
.story-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; opacity: 1; }
.story-step.active { opacity: 1; }
.step-num { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--accent); }
.story-step > h3 { margin: 8px 0 14px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.08; font-weight: 650; }
.story-step > p { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 52ch; }
.story-step > ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.story-step > ul > li { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 15.5px; }
.story-step > ul > li .i { width: 18px; height: 18px; color: var(--accent); }
.story-inline { display: none; }
/* The window of each step, drawn like the demo and scaled to the column. One shadow on the stage,
   so a change of step only cross-fades what actually changes inside the window. */
.story-stage { position: sticky; top: calc(50vh - 210px); align-self: start; }
.story-frame { --pb-scale: .56; position: relative; aspect-ratio: 1159 / 799; border-radius: calc(18px * var(--pb-scale)); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 30px 70px -28px rgba(16, 32, 36, .42), 0 10px 24px -12px rgba(16, 32, 36, .22); }
.story-vis { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.story-vis.on { opacity: 1; }
.story-window { position: absolute; inset: 0; overflow: hidden; border-radius: calc(18px * var(--pb-scale)); }
.story-window > .pb { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--pb-scale)); }
.story-window .pb-meter > i[data-level="0"] { --v: .58; } .story-window .pb-meter > i[data-level="1"] { --v: .74; }
.story-progress { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: flex; gap: 8px; }
.story-progress i { width: 26px; height: 4px; border-radius: 4px; background: var(--line-2); transition: background-color .4s, width .4s var(--ease); }
.story-progress i.on { width: 46px; background: var(--accent); }
/* The window itself is captured, including the native toolbar and library. */

/* ---- Grounded ----------------------------------------------------------------------- */
.grounded { padding: clamp(100px, 13vw, 170px) 0; }
.grounded .lead { color: var(--ink-2); }
.real-evidence { margin: 0; width: 100%; max-width: 660px; justify-self: center; }
.evidence-real { display: block; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65); }

/* ---- Features bento ----------------------------------------------------------------- */
.specs { margin-top: 56px; padding: 32px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card), transparent); }
.specs h3 { margin: 0 0 20px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.specs dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.specs dt { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.specs dd { margin: 4px 0 0; font-weight: 600; letter-spacing: -.01em; }

/* ---- Pricing ------------------------------------------------------------------------ */
.pricing { background: linear-gradient(180deg, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent); }
.plans { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 18px; align-items: stretch; padding-block: 18px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); isolation: isolate; overflow: hidden; }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 60%); }
.plan:hover::before { opacity: 1; }
.plan h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 650; }
.plan-tag { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; min-height: 3.2em; }
.plan-price { margin: 22px 0 22px; min-height: 52px; display: flex; align-items: baseline; gap: 6px; }
.price-amount { font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.price-period { color: var(--ink-3); font-size: 15px; }
.price-soon { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--accent); line-height: 1.2; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.plan li .i { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.plan.featured { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--angle), var(--accent), var(--gold), var(--glow), var(--accent)) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); animation: spin 8s linear infinite; }
/* A little larger than its neighbours: taller above and below, wider, a larger price. */
.plans .plan.featured { z-index: 1; margin-block: -18px; padding: 48px 34px; }
.plan.featured .price-amount { font-size: 52px; }
@keyframes spin { to { --angle: 360deg; } }
.plan-badge { position: absolute; top: 22px; right: 22px; padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 650; }
/* A plan still being made. The card steps back - a dashed hairline, quieter words - while two soft
   lights drift underneath, its name catches a passing gleam and a dot pulses beside "coming soon".
   With reduced motion everything rests where it is. */
.plan.soon { background: var(--card); border: 1px dashed var(--line-2); box-shadow: none; }
.plan.soon > :not(.plan-aurora) { position: relative; z-index: 1; }
.plan.soon .plan-badge { position: absolute; }
.plan.soon .plan-tag, .plan.soon li { color: var(--ink-3); }
.plan.soon .price-amount { color: var(--ink-3); }
.plan.soon li .i { color: var(--ink-3); }
.plan-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.plan-aurora i { position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; filter: blur(52px); opacity: .55; }
.plan-aurora i:first-child { top: -28%; left: -30%; background: color-mix(in srgb, var(--accent) 38%, transparent); animation: aurora-a 13s ease-in-out infinite alternate; }
.plan-aurora i:last-child { right: -32%; bottom: -30%; background: color-mix(in srgb, var(--gold) 40%, transparent); animation: aurora-b 16s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(62%, 70%) scale(1.2); } }
@keyframes aurora-b { to { transform: translate(-58%, -75%) scale(.85); } }
.soon-name { width: fit-content; background: linear-gradient(100deg, var(--ink) 0 42%, var(--gold) 50%, var(--ink) 58% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: name-gleam 5s ease-in-out infinite; }
@keyframes name-gleam { 0%, 20% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
.plan-soon { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.plan-soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: soon-pulse 2.2s ease-out infinite; }
@keyframes soon-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.plans-note { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 32px auto 0; color: var(--ink-2); font-size: 15px; text-align: center; max-width: 720px; }
.plans-note .i { width: 20px; height: 20px; color: var(--accent); }

/* ---- FAQ ---------------------------------------------------------------------------- */
.faq .title { margin-bottom: 44px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .i { width: 20px; height: 20px; color: var(--accent); transition: transform .4s var(--ease-out); }
.faq-item[open] summary .i { transform: rotate(45deg); }
.faq-a { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 24px 22px; color: var(--ink-2); font-size: 16px; }

/* ---- Final CTA ---------------------------------------------------------------------- */
.final { padding: clamp(110px, 14vw, 190px) 0; text-align: center; }
.final-inner { display: grid; justify-items: center; }
.final-mark { border-radius: 24px; margin-bottom: 34px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px -20px rgba(111, 170, 178, .6); animation: bob 7s ease-in-out infinite; }
.final .title { font-size: clamp(38px, 6vw, 80px); max-width: 15ch; }
.final .lead { margin-inline: auto; }
.final .btn { margin-top: 38px; }

/* ---- Footer ------------------------------------------------------------------------- */
.footer { padding: 64px 0 40px; border-top: 1px solid var(--line); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin: 14px 0 0; color: var(--ink-3); max-width: 30ch; }
.footer h3 { margin: 4px 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 8px; }
.footer-grid a:not(.brand) { color: var(--ink-2); }
.footer-grid a:not(.brand):hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.footer-tm { max-width: 70ch; }

/* ---- Dialog ------------------------------------------------------------------------- */
.dialog { padding: 0; border: 0; background: transparent; max-width: min(520px, 100vw - 24px); width: 100%; color: var(--ink); }
.dialog::backdrop { background: rgba(8, 12, 14, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dialog[open] { animation: pop .45s var(--ease-out); }
.dialog[open]::backdrop { animation: fade .3s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes fade { from { opacity: 0; } }
.dialog-card { position: relative; margin: 0; padding: 34px 32px 28px; border-radius: 28px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); max-height: calc(100dvh - 24px); overflow: auto; }
.dialog-close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.dialog-close:hover { background: var(--card-2); color: var(--ink); }
.dialog-close .i { width: 20px; height: 20px; }
.dialog-mark { border-radius: 12px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.dialog h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.dialog-sub { margin: 8px 0 20px; color: var(--ink-2); font-size: 15.5px; }
.dialog-plan { margin: -6px 0 18px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink-2); font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field label span { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: var(--rec); }
.field-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(229, 72, 77, .1); color: var(--rec); font-size: 14px; }
.consent { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.dialog-done { text-align: center; padding: 20px 0 6px; display: grid; justify-items: center; gap: 10px; }
.dialog-done p { margin: 0 0 12px; color: var(--ink-2); }
.done-check { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); animation: pop .6s var(--ease-out); }
.done-check .i { width: 34px; height: 34px; stroke-width: 2; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s var(--ease-out) .25s forwards; }
/* The checkout standing in for a payment provider says so before anything is entered. */
.dialog-notice { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 18px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.dialog-notice .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gold); }
.dialog-plan-price { color: var(--ink-3); }
/* After the form: the installer on its way, the key when there is one, and what to do next. */
.done-download { width: 100%; display: grid; gap: 16px; margin: 2px 0 4px; text-align: left; }
.licence-key { display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.licence-key-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.licence-key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Every character holds one fixed cell, so dots, scrambled letters and the key take the same room. */
.licence-key-code { position: relative; flex: 1 1 auto; min-width: 0; padding: 2px 0; font: 600 15px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; user-select: all; }
.licence-key-code .kc { display: inline-block; width: 1.02ch; text-align: center; }
.licence-key-code .kc.dot { color: var(--ink-3); }
.licence-key-code .kc.scramble { color: var(--accent); opacity: .6; filter: blur(.4px); }
.licence-key-code .kc.settled { animation: key-land .38s var(--ease-out); }
.licence-key-code.is-hidden { user-select: none; }
/* The masked key is not still: a slow wave runs along the dots, lifting each one a little and
   lighting it in the accent, left to right, then rests. */
.licence-key-code.is-hidden .kc.dot { animation: key-wave 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes key-wave { 0%, 34%, 100% { opacity: .55; transform: none; color: var(--ink-3); } 14% { opacity: 1; transform: translateY(-2.5px); color: var(--accent); } }
@keyframes key-land { from { transform: translateY(-4px) scale(.92); opacity: .45; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }
.licence-eye { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.licence-eye:hover { color: var(--ink); border-color: var(--ink-3); }
.licence-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.licence-eye .i { position: absolute; width: 18px; height: 18px; transition: opacity .25s, transform .35s var(--ease-out); }
.licence-eye .eye-shut { opacity: 0; transform: scale(.6) rotate(-20deg); }
.licence-eye.is-open { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.licence-eye.is-open .eye-open { opacity: 0; transform: scale(.6) rotate(20deg); }
.licence-eye.is-open .eye-shut { opacity: 1; transform: none; }
.licence-copy { min-height: 36px; padding: 0 14px; font-size: 14px; }
.dialog-done .licence-key-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.done-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.done-steps li { counter-increment: step; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.done-steps li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 650; }
.done-wait { width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: wait-spin 1s linear infinite; }
@keyframes wait-spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Toast -------------------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 14px; align-items: center; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 14.5px; transform: translateX(-50%); animation: toast .5s var(--ease-out); }
.toast a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.toast button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .12); color: inherit; cursor: pointer; }
.toast button .i { width: 16px; height: 16px; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ---- Documents ---------------------------------------------------------------------- */
.doc-main { padding: calc(var(--nav-h) + 90px) 0 90px; }
.doc-main .title { font-size: clamp(40px, 5vw, 64px); }
.doc-updated { margin: 12px 0 0; color: var(--ink-3); font-size: 14px; }
.doc-main section { margin-top: 44px; }
.doc-main h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
.doc-main section p { margin: 0 0 12px; color: var(--ink-2); }
.doc-contact { margin-top: 48px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.doc-contact a { color: var(--accent); font-weight: 600; }
.notfound { min-height: 80vh; display: grid; place-items: center; padding: calc(var(--nav-h) + 60px) 0 80px; }
.notfound .wrap { display: grid; justify-items: center; gap: 12px; }
.nf-code { margin: 0; font-family: var(--serif); font-style: italic; font-size: 120px; line-height: 1; color: var(--accent); }
.notfound .btn { margin-top: 18px; }

/* ---- Responsive --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-sm { display: none; }
  .nav-actions { margin-left: auto; }
  .split, .story { grid-template-columns: 1fr; }
  .split.reverse .split-copy { order: 0; }
  .story-stage { display: none; }
  .story-step { min-height: auto; opacity: 1; padding: 34px 0; }
  .story-inline { display: block; margin-top: 26px; }
  .story-inline .story-window { position: relative; inset: auto; aspect-ratio: 1159 / 799; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 18px 40px -20px rgba(16, 32, 36, .4); }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; padding-block: 0; }
  .plans .plan.featured { margin-block: 0; padding: 34px 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .float-a { left: 8px; top: auto; bottom: -24px; }
  .float-b { right: 8px; top: -22px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .hero-cta .btn { width: 100%; }
  .device-wrap { margin-top: 36px; --tilt: 0deg; --lift: 0px; }
  .device { font-size: 12px; }
  .specs { padding: 24px; }
  .specs dl { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 58px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .dialog-card { padding: 28px 20px 22px; border-radius: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .works { padding-top: 90px; }
}

/* ---- Reduced motion: everything is shown at rest ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-title .w, .reveal-now, .device-wrap { opacity: 1; transform: none; filter: none; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .device { transform: none; }
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-group:nth-child(2) { display: none; }
  mark { background-size: 100% 100%; }
}

/* ---- How it works, step one: the controls that start a recording, on the real window ---- */

/* ---- The app window as a picture (MacBook, close-ups, grounded) ------------------------------
   The window keeps its own size; the page script sets --pb-scale from the box's width and the
   crop class moves the region it frames into view (--tx, --ty). */
.pb-pic { position: relative; display: block; width: 100%; overflow: hidden; --pb-scale: .5; }
.pb-pic .pb-zoom { position: absolute; inset: 0; transform-origin: 30% 30%; transition: transform 1.1s var(--ease-out); }
.pb-pic .pb { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--pb-scale)) translate(var(--tx, 0px), var(--ty, 0px)); }

/* ---- Privacy: the MacBook ------------------------------------------------------------- */
/* The laptop is drawn; its screen shows only real screenshots of the app. Sized in container
   units, so it is one drawing at every width. One 9-second cycle: transcript, brief, tasks. */
.mbp { position: relative; margin: 0; padding: 6.5cqw 0 0; container-type: inline-size; }
.mbp-lid { position: relative; margin: 0 7cqw; padding: 1.5cqw 1.5cqw 2.3cqw; border-radius: 3.4cqw 3.4cqw 1.1cqw 1.1cqw; background: #0a0b0d;
  box-shadow: inset 0 0 0 .2cqw #35383d, inset 0 0 0 .5cqw #121316, 0 5cqw 9cqw -4cqw rgba(8, 12, 14, .55); }
.mbp-notch { position: absolute; z-index: 3; left: 50%; top: 1.5cqw; width: 11cqw; height: 1.9cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: #0a0b0d; }
.mbp-notch::after { content: ""; position: absolute; left: 50%; top: .55cqw; width: .75cqw; height: .75cqw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3b4a5a, #0d1116 70%); }
.mbp-display { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.8cqw 1.8cqw .3cqw .3cqw;
  background: radial-gradient(70% 90% at 12% 8%, #79aeb4 0%, transparent 60%), radial-gradient(60% 80% at 95% 100%, #c9a46a 0%, transparent 62%), linear-gradient(160deg, #2b4246, #101a1d 70%); }
/* The screen: the macOS menu bar and, on the desktop, the app's window playing its film. One
   point of the 1413-point-wide screen is 83cqw / 1413; the window is 82 % of the screen, as the
   app's 1159-point window is. */
.mbp-menubar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 1.9cqw; display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.15cqw 0 1.25cqw; font: 500 .74cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--sans); color: #fff; letter-spacing: .005em;
  background: rgba(10, 20, 24, .22); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.mbp-mb-l, .mbp-mb-r { display: flex; align-items: center; gap: 1.1cqw; white-space: nowrap; }
.mbp-mb-l b { font-weight: 700; }
.mbp-menubar .sf { font-size: .78cqw; }
.mbp-menubar .mbp-mb-apple { font-size: .88cqw; margin-right: .15cqw; }
.mbp-menubar .mbp-mb-battery { font-size: .92cqw; }
.mbp-mb-mark { width: 1.05cqw; height: .79cqw; background: currentColor; -webkit-mask: url(/assets/demo/menubar-mark.png) center / contain no-repeat; mask: url(/assets/demo/menubar-mark.png) center / contain no-repeat; }
/* Wi-Fi is off; the film opens its menu to show it. */
.mbp-mb-wifi { position: relative; display: grid; place-items: center; margin: 0 -.35cqw; padding: .2cqw .35cqw; border-radius: .35cqw; transition: background .2s; }
.mbp.wifi-open .mbp-mb-wifi { background: rgba(255, 255, 255, .24); }
.mbp-wifi-menu { position: absolute; top: calc(100% + .35cqw); right: -1.2cqw; width: 14cqw; display: flex; align-items: center; justify-content: space-between;
  padding: .75cqw .85cqw; border-radius: .95cqw; font-size: .82cqw; font-weight: 600; color: #fff;
  background: rgba(46, 50, 54, .74); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 .06cqw rgba(255, 255, 255, .14) inset, 0 .9cqw 2.2cqw rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-.35cqw) scale(.98); transform-origin: top right; transition: opacity .22s, transform .3s var(--ease-out); pointer-events: none; }
.mbp.wifi-open .mbp-wifi-menu { opacity: 1; transform: none; }
.mbp-toggle { position: relative; width: 1.8cqw; height: 1.08cqw; border-radius: 99px; background: rgba(255, 255, 255, .22); }
.mbp-toggle::after { content: ""; position: absolute; left: .09cqw; top: .09cqw; width: .9cqw; height: .9cqw; border-radius: 50%; background: #f4f4f4; box-shadow: 0 .06cqw .18cqw rgba(0, 0, 0, .3); }
.mbp-film { position: absolute; z-index: 1; left: 50%; top: 54%; width: 82%; transform: translate(-50%, -50%); }
.mbp-film .pb-pic { aspect-ratio: 1159 / 799; border-radius: 1.2cqw; box-shadow: 0 0 0 .1cqw rgba(0, 0, 0, .25), 0 2.4cqw 5cqw -1.6cqw rgba(0, 0, 0, .6); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.mbp-film.is-resting .pb-pic { opacity: 0; transform: scale(.985); }
/* A drawn macOS arrow; its tip is the point it is at. */
.mbp-cursor { position: absolute; z-index: 2; left: var(--x, 72%); top: var(--y, 84%); width: 1.05cqw; pointer-events: none; opacity: 0; transform-origin: 0 0;
  transition: left .95s cubic-bezier(.45, .05, .25, 1), top .95s cubic-bezier(.45, .05, .25, 1), opacity .4s, transform .14s; filter: drop-shadow(0 .12cqw .2cqw rgba(0, 0, 0, .35)); }
.mbp-cursor svg { display: block; width: 100%; height: auto; overflow: visible; }
.mbp-cursor path { fill: #111; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.mbp-cursor.is-on { opacity: 1; }
.mbp-cursor.is-down { transform: scale(.82); }
.mbp-base { position: relative; height: 2.7cqw; margin-top: -.15cqw; border-radius: .25cqw .25cqw 3cqw 3cqw / .25cqw .25cqw 1.7cqw 1.7cqw;
  background: linear-gradient(180deg, #5a5e64 0%, #34373c 38%, #202226 100%); box-shadow: 0 3cqw 4.5cqw -2cqw rgba(8, 12, 14, .55); }
.mbp-base i { position: absolute; left: 50%; top: 0; width: 15cqw; height: 1cqw; transform: translateX(-50%); border-radius: 0 0 1.2cqw 1.2cqw; background: linear-gradient(180deg, #18191c, #2f3236); }
/* Outside the Mac: the cloud, with the line to it cut. */
.mbp-cloud { position: absolute; right: 0; top: 0; display: grid; justify-items: center; gap: .6cqw; }
.mbp-cloud-icon { position: relative; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1.5cqw; border: .2cqw dashed var(--line-2); color: var(--ink-3); background: var(--card); }
.mbp-cloud-icon > .i { width: 2.6cqw; height: 2.6cqw; }
.mbp-cloud-icon b { position: absolute; right: -.9cqw; top: -.9cqw; display: grid; place-items: center; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--rec); color: #fff; box-shadow: 0 0 0 .4cqw var(--bg); }
.mbp-cloud-icon b .i { width: 1.2cqw; height: 1.2cqw; stroke-width: 2.4; }
.mbp-cloud small { font-size: 1.3cqw; font-weight: 600; color: var(--ink-3); }
.mbp-cut { position: absolute; right: 5.6cqw; top: 4.4cqw; width: 6cqw; height: 4.4cqw; overflow: visible; }
.mbp-cut path { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: .7; }
/* Beneath: the three steps lighting up with the screen, and where it all happened. */
.mbp-caption { display: grid; justify-items: center; gap: 1.4cqw; margin-top: 3cqw; }
.mbp-steps { display: flex; align-items: center; gap: 1.2cqw; }
.mbp-steps > i { width: 3cqw; height: .2cqw; background: var(--line-2); }
.mbp-step { display: inline-flex; align-items: center; gap: .7cqw; padding: .6cqw 1.4cqw .6cqw .7cqw; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-3); font-size: max(13px, 1.5cqw); font-weight: 600; transition: color .4s, border-color .4s, box-shadow .4s; }
.mbp-step b { display: grid; place-items: center; width: max(20px, 2.2cqw); height: max(20px, 2.2cqw); border-radius: 50%; background: var(--sunken, var(--bg-2)); font-size: max(11px, 1.2cqw); }
.mbp-step.is-on { color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mbp-where { display: inline-flex; align-items: center; gap: .6cqw; font-size: max(13px, 1.45cqw); font-weight: 600; color: var(--ink-2); }
.mbp-where .i { width: max(15px, 1.7cqw); height: max(15px, 1.7cqw); color: var(--accent); }
.mbp:not(.live) * { animation-play-state: paused !important; }
@container (max-width: 520px) {
  .mbp-lid { margin-top: 13cqw; }
  .mbp-cloud { right: 1cqw; } .mbp-cloud small { font-size: 2.6cqw; }
  .mbp-cloud-icon { width: 8cqw; height: 8cqw; border-radius: 2.4cqw; } .mbp-cloud-icon > .i { width: 4.2cqw; height: 4.2cqw; }
  .mbp-cloud-icon b { width: 3.2cqw; height: 3.2cqw; right: -1.4cqw; top: -1.4cqw; } .mbp-cloud-icon b .i { width: 1.9cqw; height: 1.9cqw; }
  .mbp-cut { right: 9cqw; top: 7cqw; width: 7cqw; height: 5cqw; }
  .mbp-steps { flex-wrap: wrap; justify-content: center; } .mbp-steps > i { display: none; }
  .mbp-where { flex-wrap: wrap; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mbp-cursor { display: none; }
}

/* The privacy section around the MacBook: heading, the laptop large, then the facts in a row. */
.privacy .section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.privacy-stage { max-width: 1040px; margin: 0 auto; }
.privacy-grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.privacy-point { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.privacy-point > .i { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.privacy-point b { font-weight: 650; letter-spacing: -.01em; }
.privacy-point span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.privacy-grid .stat { grid-template-columns: auto 1fr; align-content: center; }
@media (max-width: 1080px) { .privacy-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .privacy-grid { grid-template-columns: 1fr; } }


/* ---- Features: a bento of tiles, each holding a piece of the real window ------------------ */
/* Copy first, then the window rising out of a soft colour field and running off the tile's
   right and bottom edges, the way a product page shows a screen: a detail of the app, not a
   framed screenshot. Each tile's field is its own pair of tints from the brand palette. */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile { --pad: 34px; --bleed: 72px; --stage: 320px; --f1: rgba(61, 116, 121, .2); --f2: rgba(184, 138, 62, .16);
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; grid-column: span 4;
  border-radius: 28px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 32, 38, .04), 0 28px 56px -40px rgba(20, 32, 38, .3);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color .4s; }
.tile:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(20, 32, 38, .04), 0 44px 80px -44px rgba(20, 32, 38, .42); }
.tile-copy { position: relative; z-index: 2; padding: var(--pad) var(--pad) 0; max-width: 36rem; }
.tile-copy h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.18; letter-spacing: -.028em; font-weight: 650; }
.tile-copy p { margin: 0; color: var(--ink-3); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.tile-stage { position: relative; flex: 1 0 auto; min-height: var(--stage); margin-top: 30px; z-index: 0; }
.tile-stage::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -45%; bottom: -10%; pointer-events: none;
  background: radial-gradient(55% 60% at 28% 78%, var(--f1), transparent 72%), radial-gradient(45% 55% at 88% 40%, var(--f2), transparent 72%); }
.tile-shot { position: absolute; left: var(--pad); top: 0; width: calc(100% - var(--pad) + var(--bleed)); transition: transform .9s var(--ease-out); }
.tile:hover .tile-shot { transform: translateY(-8px); }
.tile .crop { border-radius: 14px 14px 0 0; background: #fff;
  box-shadow: 0 0 0 .5px rgba(12, 19, 22, .16), 0 2px 6px rgba(12, 19, 22, .06), 0 34px 70px -24px rgba(12, 19, 22, .38); }
/* An open menu in a picture appears once the page has placed it over its button. */
.pb-pic .pb-menu { visibility: hidden; }
.pb-pic.has-menu .pb-menu { visibility: visible; }

/* The first and last tiles run the full width: copy on the left, the picture on the right. */
.tile-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); }
.tile-wide .tile-copy { align-self: center; max-width: 25rem; padding: var(--pad) 0 var(--pad) calc(var(--pad) + 8px); }
.tile-wide .tile-copy h3 { font-size: 30px; letter-spacing: -.032em; }
.tile-wide .tile-copy p { font-size: 16.5px; }
.tile-wide .tile-stage { margin-top: 0; }
.tile-wide .tile-stage::before { left: -35%; top: -20%; }
.tile-wide .tile-shot { left: 28px; top: calc(var(--pad) + 10px); width: calc(100% - 28px + var(--bleed)); }

.tile-formats { --stage: 450px; --bleed: 92px; }
.tile-voices { grid-column: span 6; --stage: 360px; --f1: rgba(176, 116, 46, .17); --f2: rgba(61, 116, 121, .15); }
.tile-reminders { grid-column: span 6; --stage: 360px; --f1: rgba(184, 138, 62, .16); --f2: rgba(61, 116, 121, .18); }
.tile-ask { grid-column: span 7; --stage: 300px; --f1: rgba(123, 94, 167, .14); --f2: rgba(61, 116, 121, .16); }
.tile-ask .tile-shot { width: calc(100% - 2 * var(--pad)); }
.tile-player { grid-column: span 5; --stage: 330px; --f1: rgba(27, 131, 147, .16); --f2: rgba(184, 138, 62, .14); }
.tile-search { --stage: 300px; --f1: rgba(61, 116, 121, .18); --f2: rgba(123, 94, 167, .1); }
.tile-search .tile-shot { width: calc(100% - 2 * var(--pad)); }
.tile-calendar { --stage: 300px; --f1: rgba(184, 138, 62, .18); --f2: rgba(229, 72, 77, .08); }
.tile-languages { --stage: 300px; --f1: rgba(61, 116, 121, .16); --f2: rgba(184, 138, 62, .18); }
.tile-noise { --stage: 250px; --f1: rgba(61, 116, 121, .16); --f2: rgba(184, 138, 62, .14); }

/* Ten languages: the number, and each language named in itself. */
.lang-art { position: absolute; inset: 0 var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
.lang-num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 132px; line-height: .8; letter-spacing: -.04em;
  background: linear-gradient(100deg, var(--accent) 10%, var(--gold) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.lang-art ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.lang-art li { padding: 5px 11px; border-radius: 99px; font-size: 13px; font-weight: 550; color: var(--ink-2);
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Clean sound: the microphone's level with the room in it, and with only the voice left. */
.noise-art { position: absolute; left: 28px; right: var(--pad); top: 50%; transform: translateY(-50%); width: calc(100% - 28px - var(--pad)); height: auto; overflow: visible; }
.noise-art .n { fill: var(--ink-3); opacity: .32; }
.noise-art .c { fill: url(#noise-clean); }
.noise-art .s1 { stop-color: var(--accent); }
.noise-art .s2 { stop-color: var(--gold); }
.noise-split { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }

@media (prefers-color-scheme: dark) {
  .tile { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -40px rgba(0, 0, 0, .8); }
  .tile-stage::before { opacity: 1.6; filter: saturate(1.2); }
  .tile .crop { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 34px 70px -24px rgba(0, 0, 0, .7); }
}
@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile-voices, .tile-reminders, .tile-ask, .tile-player { grid-column: span 1; }
  .tile-wide { grid-column: 1 / -1; }
  .tile-noise.tile-wide { grid-column: span 1; }
  .tile-wide { grid-template-columns: 1fr; }
  .tile-wide .tile-copy { max-width: 36rem; padding: var(--pad) var(--pad) 0; }
  .tile-wide .tile-stage { margin-top: 26px; }
  .tile-wide .tile-shot { left: var(--pad); top: 0; width: calc(100% - var(--pad) + var(--bleed)); }
  .tile-ask .tile-shot { width: calc(100% - var(--pad) + var(--bleed)); }
}
@media (max-width: 720px) {
  .tiles { grid-template-columns: 1fr; gap: 16px; }
  .tile, .tile-wide, .tile-noise.tile-wide { grid-column: auto; --pad: 24px; --bleed: 40px; }
  .tile-copy h3, .tile-wide .tile-copy h3 { font-size: 22px; }
  /* Keep the window large enough to read: it runs further off the edge instead of shrinking. */
  .tile-shot, .tile-wide .tile-shot, .tile-ask .tile-shot { width: max(calc(100% - var(--pad) + var(--bleed)), 560px); }
  .tile-formats .tile-shot { left: auto; right: -40px; }
  .tile-search .tile-shot { width: calc(100% - 2 * var(--pad)); }
  .tile-calendar .tile-shot { width: max(calc(100% - var(--pad) + var(--bleed)), 400px); }
  .lang-num { font-size: 104px; }
  .noise-art { left: var(--pad); width: calc(100% - 2 * var(--pad)); }
  /* The window is shorter at this scale: the field ends where it does. */
  .tile-formats { --stage: 340px; } .tile-voices, .tile-reminders { --stage: 300px; } .tile-ask { --stage: 250px; }
  .tile-player { --stage: 290px; } .tile-search, .tile-calendar { --stage: 290px; } .tile-languages { --stage: 250px; } .tile-noise { --stage: 150px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .tile-shot { transition: none; } .tile:hover, .tile:hover .tile-shot { transform: none; } }

/* ---- Motion that follows the scroll ------------------------------------------------------ */
/* app.js writes --open, --flat, --r, --story and --px; each rests at its final value, so the
   page is complete without script and with reduced motion. */

/* Section headings: word by word, the accent phrase last. */
.title.by-word.reveal { opacity: 1; transform: none; filter: none; }
.title.by-word .tw { display: inline-block; opacity: 0; transform: translateY(.42em) rotate(1.2deg); filter: blur(8px);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--w, 0) * 55ms); }
.title.by-word.in .tw { opacity: 1; transform: none; filter: none; }

/* The MacBook opens: the lid rises from the hinge, seen from the hinge's height, so the shut
   lid lies edge-on on the base and only ever rises above it. The perspective sits in the lid's
   own transform (its origin is the hinge) and scales with the drawing. Its depth is set so the
   shut lid's front edge, which is then nearer by the lid's height (55.7cqw), looks exactly as
   wide as the base: 86cqw × 397.7 / (397.7 − 55.7) = 100cqw.
   The lid is a slab: its back is a copy of its outline 1.2cqw behind the screen, so as the lid
   tilts, the edge between them shows above the top and around the rounded corners, the way the
   real one does, and hides again once the lid is upright. While the lid is shut both faces are
   edge-on, so its front edge is drawn as a face of its own resting on the base, in the same
   anodised colour, and steps out (opaque until then, so it never shows as a pale ghost) once the
   back has risen far enough to show the same edge.
   The lid is upright by 85 % of the way, easing out so it settles rather than stops (--lid is
   1 - (1 - t)²), and only then does the screen light up: a tilted lid is drawn at a lower
   resolution, which dark glass hides and the app would not. The lid's layers carry a 1 px
   transparent border so their edges sit inside the layer and are smoothed when tilted.
   --edge is the lid's thickness: about 5 mm on a 31 cm lid. */
.mbp { --open: 1; --t: clamp(0, calc(var(--open) / .85), 1); --lid: calc(1 - (1 - var(--t)) * (1 - var(--t))); --edge: .9cqw; padding-top: 2cqw; }
/* While shut it sits higher and a little smaller, so the closed laptop is in the middle of the
   screen; it settles into place as the lid comes up. */
.js .privacy-pin .mbp { transform: translateY(calc((1 - var(--open)) * -36%)) scale(calc(.92 + .08 * var(--open))); }
.mbp-lid { transform-origin: 50% 100%; transform: perspective(397.7cqw) rotateX(calc((1 - var(--lid)) * -90deg)); transform-style: preserve-3d;
  border: 1px solid transparent; background-clip: padding-box; }
/* The back of the lid, in the anodised colour of its edge: only the edge between the faces shows. */
.mbp-lid::before { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; background-clip: padding-box; border-radius: inherit; transform: translateZ(calc(-1 * var(--edge)));
  background: linear-gradient(180deg, #3b3e44, #2c2f33 12%, #26282c); box-shadow: inset 0 .07cqw 0 rgba(255, 255, 255, .13); }
/* The front edge of the shut lid, lit from above, resting on the base. */
.mbp-rim { position: absolute; left: 0; right: 0; top: calc(-1 * var(--edge)); height: var(--edge); border-radius: 2.4cqw 2.4cqw .4cqw .4cqw / .9cqw .9cqw .2cqw .2cqw; transform-origin: 50% 100%; transform: rotateX(90deg); backface-visibility: hidden;
  background: linear-gradient(180deg, #4b4e54 0%, #393c41 45%, #2b2e32 100%); box-shadow: inset 0 .07cqw 0 rgba(255, 255, 255, .16);
  opacity: clamp(0, calc((.04 - var(--lid)) * 2000), 1); }
/* The dark glass before the screen wakes, with a soft reflection sliding across it as it rises. */
.mbp-display::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .055) 47%, rgba(255, 255, 255, .015) 53%, transparent 60%) calc(100% - var(--lid) * 100%) 0 / 280% 100% no-repeat,
    linear-gradient(160deg, #22272c 0%, #0b0d0f 38%, #040506 100%);
  opacity: clamp(0, calc((.97 - var(--open)) * 8), 1); }
.mbp-base { box-shadow: 0 calc(1cqw + 2cqw * var(--open)) calc(2cqw + 2.5cqw * var(--open)) -2cqw rgba(8, 12, 14, calc(.3 + .25 * var(--open))); }
.mbp-cloud, .mbp-cut, .mbp-caption { opacity: clamp(0, calc((var(--open) - .86) * 7.2), 1); }
.mbp-cloud { top: 0; }
.mbp-cut { right: 4.4cqw; top: 6.2cqw; width: 4.6cqw; height: 5cqw; }
.privacy .section-head { margin-bottom: clamp(20px, 3vw, 36px); }
.mbp-cloud { z-index: 5; }
/* The stage is taller than the laptop and the laptop stays pinned in the middle of the screen for
   the extra scroll, so the lid opens in full view. Sized to fit the screen's height under the menu;
   the script works out the pinned position from the laptop's height. */
.privacy-pin { display: grid; justify-items: center; }
.privacy-pin .mbp { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js .privacy-stage { max-width: none; }
  .js .privacy-stage::after { content: ""; display: block; height: 110vh; height: 110svh; }
  .js .privacy-pin { position: sticky; top: var(--pin-top, calc(var(--nav-h) + 8px)); }
  .js .privacy-pin .mbp { width: min(1040px, 100%, (100svh - var(--nav-h) - 40px) * 1.38); }
}


/* Dark stages open from a rounded panel to the full width. */
.stage:not(.hero) { --r: 1; clip-path: inset(0 calc((1 - var(--r)) * 4vw) round calc((1 - var(--r)) * 44px)); }

/* How it works: a rail that fills as the steps are read. */
.story-steps { position: relative; padding-left: 34px; }
.story-rail { position: absolute; left: 6px; top: 10%; bottom: 10%; width: 2px; border-radius: 2px; background: var(--line); }
.story-rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--accent), var(--gold)); transform-origin: top; transform: scaleY(var(--story, 1)); }
@media (max-width: 1080px) { .story-steps { padding-left: 0; } .story-rail { display: none; } }

/* Screenshots drift slightly against the scroll. */
[data-parallax] .evidence-real { display: block; transform: translateY(calc(var(--px, 0) * -44px)); }

@media (prefers-reduced-motion: reduce) {
  .mbp-lid, .js .privacy-pin .mbp, [data-parallax] .evidence-real { transform: none; }
  .mbp-lid::before, .mbp-rim { display: none; }
  .stage:not(.hero) { clip-path: none; }
}
/* ---- The demo on the page ----------------------------------------------------------------
   The window is laid out at the app's own size, 1159 × 799 points, and scaled to fit; on a wide
   screen it is shown 1:1. Everything inside .pb copies the macOS 26 app (PureBriefApp.swift):
   system font, the app's spacing scale (4/8/12/16/24/28/32), its colours and SF Symbols. */
.demo-host { text-align: left; }
.demo-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 auto 16px; max-width: 1159px; color: var(--ink-2); font-size: 13px; }
.demo-intro > span { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.demo-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; color: var(--ink); }
.demo-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #9fbfc6; box-shadow: 0 0 0 4px #9fbfc612; }
.demo-intro button, .demo-caption-actions button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; color: var(--ink-2); cursor: pointer; font: inherit; padding: 6px 0; min-height: 32px; }
.demo-intro button:hover, .demo-caption-actions button:hover { color: var(--ink); }
.demo-intro .sf, .demo-caption-actions .sf { font-size: 13px; }
.demo-caption-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 10px; color: var(--ink-3); font-size: 12px; align-items: center; }
.demo-notice { font-size: 11px; color: var(--ink-3); margin: 6px 0 0; text-align: center; }
.demo-stage { position: relative; width: 100%; max-width: 1159px; margin: 0 auto; aspect-ratio: 1159 / 799; }
.demo-stage > .pb { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--pb-scale, 1)); box-shadow: 0 50px 120px -30px #000a, 0 0 0 .5px #0000004d, 0 0 100px -20px #6faab238; }
.demo-stage.is-closed > .pb { visibility: hidden; }
/* On a phone the window is too small to use in place: it is shown as a picture and opens full screen. */
.demo-open { position: absolute; inset: 0; z-index: 4; display: none; align-items: flex-end; justify-content: center; padding-bottom: 14%; border: 0; background: linear-gradient(transparent 45%, #0b141680); color: #fff; font: 600 15px/1 var(--sans, system-ui); cursor: pointer; border-radius: 6px; }
.demo-open span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; background: #e8f0f1; color: #10191b; box-shadow: 0 8px 24px #0006; }
.demo-stage.is-preview .demo-open { display: flex; }
.demo-stage.is-preview .demo-open .sf { font-size: 15px; }
.demo-reopen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.demo-stage.is-closed .demo-reopen { display: flex; }
.demo-reopen button { display: grid; justify-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 500 14px/1.3 inherit; }
.demo-reopen img { width: 72px; height: 72px; filter: drop-shadow(0 8px 20px #0006); }
.demo-toast { position: absolute; left: 50%; bottom: 18px; z-index: 30; max-width: min(560px, calc(100% - 32px)); transform: translate(-50%, 8px); padding: 10px 16px; border-radius: 12px; background: #172427f2; color: #e8f0f1; font: 13px/1.4 var(--sans, system-ui); box-shadow: 0 10px 30px #0005; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; }
.demo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.demo-immersive { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0d1517; overflow: hidden; }
.demo-immersive::backdrop { background: #0d1517; }
.demo-immersive-stage { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.demo-immersive-stage > .pb { position: absolute; left: 0; top: 0; width: var(--pb-w, 100vw); height: var(--pb-h, 100dvh); transform-origin: 0 0; transform: scale(var(--pb-scale, 1)); border-radius: 0; }
.demo-immersive-exit { position: fixed; z-index: 5; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: #172427e6; color: #e8f0f1; font: 13px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 20px #0006; }
.demo-immersive-exit .sf { font-size: 13px; }
body.demo-fullscreen { overflow: hidden; }
@media (max-width: 720px) {
  .demo-intro > button, .demo-caption-actions > span { display: none; }
  .demo-immersive-exit { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; }
  .demo-immersive-exit .sf { font-size: 16px; }
}

/* ---- SF Symbols: one mask per symbol, sized by the font size around it -------------------- */
.sf { display: inline-block; flex: none; width: calc(var(--w, 32) / 32 * 1em); height: calc(var(--h, 32) / 32 * 1em); background: currentColor; -webkit-mask: var(--sf) center / 100% 100% no-repeat; mask: var(--sf) center / 100% 100% no-repeat; vertical-align: middle; }

/* ---- The window -------------------------------------------------------------------------- */
.pb { --accent: #26383c; --now: #1b8393; --paper: #fff; --label: rgba(0, 0, 0, .85); --label2: #767676; --label3: rgba(0, 0, 0, .3); --placeholder: rgba(0, 0, 0, .43); --label4: rgba(0, 0, 0, .1); --fill: rgba(0, 0, 0, .03); --side: #ecedef; --red: #ff3b30; --orange: #ff9500;
  position: relative; width: 1159px; height: 799px; display: grid; grid-template-columns: 304.5px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-radius: 18px; overflow: hidden; isolation: isolate; contain: layout paint;
  background: var(--paper); color: var(--label); color-scheme: light; text-align: left; letter-spacing: 0; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; -webkit-text-size-adjust: none; text-size-adjust: none;
  font: 13px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", sans-serif; font-feature-settings: normal; }
:where(.pb) *, :where(.pb) *::before, :where(.pb) *::after { box-sizing: border-box; }
:where(.pb) :where(button, input, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.pb) button { margin: 0; padding: 0; border: 0; background: none; cursor: default; text-align: inherit; }
:where(.pb) button:disabled { opacity: .35; }
:where(.pb) :where(h2, h3, p) { margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }
:where(.pb) :focus { outline: none; }
:where(.pb) :focus-visible { outline: 3px solid rgba(38, 56, 60, .35); outline-offset: 1px; }
.pb.no-sidebar { grid-template-columns: 0 minmax(0, 1fr); }
.pb-mono { font-variant-numeric: tabular-nums; }
.pb-2nd { color: var(--label2); }
.pb-tint { color: var(--accent); }
.pb-red { color: var(--red); }
.pb-callout { font-size: 12px; line-height: 15px; }
.pb-caption { font-size: 10px; line-height: 13px; }
.pb-spacer { flex: 1; }
.pb-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-plain { display: inline-flex; align-items: center; justify-content: center; }
.pb-plain:hover:not(:disabled) { color: var(--label); }
.pb-link-btn { color: var(--label2); font-size: 12px; }
.pb-link { color: var(--accent); font-size: 12px; }
.pb-link:hover { text-decoration: underline; }

/* Traffic lights and the sidebar button sit over the sidebar, as in a unified toolbar. */
/* 14 pt lights, each answering clicks over 24 pt, the smallest target that can be hit reliably. */
.pb-lights { position: absolute; z-index: 6; left: 13.5px; top: 14px; display: flex; }
.pb-light { position: relative; width: 24px; height: 24px; }
.pb-light::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--tl); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.pb-close { --tl: #ff5f57; } .pb-min { --tl: #febc2e; } .pb-zoom { --tl: #28c840; }
.pb-glass { background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
.pb-side-toggle { position: absolute; z-index: 6; left: 260.5px; top: 8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f4f4f6; }
.pb-side-toggle .sf { font-size: 15px; }
.pb.no-sidebar .pb-side-toggle { left: 96px; }

/* ---- Sidebar ----------------------------------------------------------------------------- */
.pb-side { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--side); overflow: hidden; }
.pb.no-sidebar .pb-side { visibility: hidden; }
.pb-side-top { height: 52px; flex: none; }
.pb-search { position: relative; display: flex; align-items: center; gap: 6px; margin: 9px 10px 0 10px; height: 28px; padding: 0 10px 0 9px; border-radius: 14px; background: #eaeaec; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .7), 0 .5px 1.5px rgba(0, 0, 0, .06); flex: none; }
.pb-search .sf { font-size: 13px; color: var(--label2); }
.pb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; font-size: 13px; }
.pb-search input::placeholder { color: var(--placeholder); }
.pb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .25); -webkit-mask: radial-gradient(circle, #000 70%, transparent 71%); }
.pb-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 12px; scrollbar-width: none; }
.pb-row { display: flex; align-items: center; gap: 8px; width: 100%; border-radius: 10px; text-align: left; }
.pb-row:not(.is-selected):hover { background: rgba(0, 0, 0, .035); }
.pb-row.is-selected { background: rgba(0, 0, 0, .1); }
.pb-nav { height: 32px; padding: 0 10px 0 9px; font-size: 13px; color: #000; }
/* Sidebar labels keep one icon column, so titles line up whatever the symbol's width. */
.pb-nav .sf { font-size: 18px; width: 19.5px; color: #0576fd; -webkit-mask-size: contain; mask-size: contain; }
.pb-nav > span { flex: 1; }
.pb-badge { font-weight: 400; font-size: 11px; color: var(--label2); font-variant-numeric: tabular-nums; }
.pb-group { margin: 14px 0 3px 4.5px; font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(0, 0, 0, .4); }
.pb-meeting { min-height: 49.5px; padding: 5px 6px; margin-bottom: 0.5px; }
.pb-src { width: 26px; height: 26px; display: grid; place-items: center; flex: none; color: var(--label2); }
.pb-src img { width: 26px; height: 26px; }
.pb-src .sf { font-size: 17px; }
.pb-mt { display: grid; gap: 3px; min-width: 0; }
.pb-mt b { font-weight: 500; font-size: 13px; line-height: 16px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-mt small { display: flex; align-items: center; gap: 4px; font-size: 10px; line-height: 13px; color: var(--label2); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.pb-mt small .sf { font-size: 10px; }
.pb-status-mini { display: inline-flex; align-items: center; gap: 3px; }
.pb-list-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--label2); }
.pb-side-foot { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; flex: none; background: rgba(255, 255, 255, .78); border-top: .5px solid rgba(0, 0, 0, .06); font-size: 10px; color: var(--label2); white-space: nowrap; }
.pb-side-foot > span { flex: 1; }
.pb-side-foot .pb-small { font-size: 11px; }
.pb-side-foot button { width: 22px; height: 22px; color: var(--label); }
.pb-side-foot button .sf { font-size: 13px; }
.pb-side-foot button.pb-tint { color: var(--accent); }

/* ---- Detail and toolbar ------------------------------------------------------------------ */
.pb-detail { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.pb-backdrop { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 52px; background: rgba(255, 255, 255, .65); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); border-bottom: .5px solid rgba(0, 0, 0, .1); opacity: 0; transition: opacity .3s; pointer-events: none; }
.pb.is-scrolled .pb-backdrop, .pb-detail:has(.pb-status-row) .pb-backdrop { opacity: 1; }
.pb-toolbar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; padding: 0 7.5px 0 0; pointer-events: none; }
.pb-toolbar > * { pointer-events: auto; }
.pb-center { position: absolute; left: 50%; top: 12px; transform: translateX(calc(-50% + 2px)); display: flex; align-items: center; gap: 8px; max-width: 640px; }
.pb-tb-title { font-weight: 700; font-size: 13px; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: max-width .34s cubic-bezier(.3, 1.2, .5, 1), opacity .34s; }
.pb.is-scrolled .pb-tb-title { max-width: 240px; opacity: 1; }
/* A native segmented control: equal segments, as wide as the widest label; the selected one is a
   grey capsule inset 3.4 pt in its segment. */
.pb-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 28px; flex: none; }
.pb-seg button { position: relative; height: 28px; padding: 0 10.6px; font-size: 13px; white-space: nowrap; text-align: center; }
.pb-seg button::before { content: ""; position: absolute; inset: 0 3.4px; z-index: -1; border-radius: 14px; }
.pb-seg button[aria-selected="true"]::before { background: rgba(0, 0, 0, .1); }
.pb-seg { isolation: isolate; }
.pb-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.pb-pair { display: flex; height: 36px; border-radius: 18px; padding: 0 3px; }
.pb-tb-icon { width: 34px; height: 36px; display: grid; place-items: center; border-radius: 18px; }
.pb-tb-icon .sf { font-size: 16px; }
.pb-tb-icon:hover:not(:disabled) { background: rgba(0, 0, 0, .05); }
.pb-record { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 19px 0 16px; border-radius: 18px; background: #213035; color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), inset 0 1px 1px rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .18); }
.pb-record .sf { font-size: 14px; }
.pb-record:hover:not(:disabled) { filter: brightness(1.12); }
.pb-record.is-recording { background: var(--red); }

/* Status strip: recording or processing, under the toolbar. */
.pb-status { position: relative; z-index: 1; flex: none; margin-top: 52px; background: rgba(250, 250, 252, .96); }
.pb-status:empty { display: none; }
.pb-status-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12px; line-height: 15px; border-bottom: .5px solid rgba(0, 0, 0, .1); }
.pb-status-row > .sf { font-size: 15px; }
.pb-status-row b { font-weight: 500; white-space: nowrap; }
.pb-meters { display: flex; gap: 12px; }
.pb-meters > span { display: inline-flex; align-items: center; gap: 6px; color: var(--label2); }
.pb-meters .sf { font-size: 11px; }
.pb-meter, .pb-bar { position: relative; display: block; width: 54px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.pb-meter > i, .pb-bar > i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); }
.pb-progress { display: inline-flex; align-items: center; gap: 8px; }
.pb-progress .pb-bar { width: 140px; }
.pb-progress > span { min-width: 38px; text-align: right; }

.pb-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pb-detail:not(:has(.pb-status-row)) .pb-scroll { margin-top: 0; }
.pb-detail:not(:has(.pb-status-row)) .pb-col { padding-top: 84px; }
.pb-col { max-width: 784px; margin: 0 auto; padding: 32px 32px 32px; }
.pb-detail:has(.pb-player) .pb-col { padding-bottom: 106px; }
.pb-stack { display: flex; flex-direction: column; gap: 28px; }
.pb-stack.pb-transcript { gap: 0; }
.pb-stack.pb-wide { max-width: 860px; }
.pb-fill { min-height: calc(799px - 84px - 32px); }

/* Header: 28 pt semibold title, preset pop-up on its first line, metadata in callout. */
.pb-head { display: flex; flex-direction: column; gap: 8px; }
.pb-title-row { display: flex; align-items: flex-start; gap: 16px; }
.pb-title { flex: 1; min-width: 0; font-size: 28px; line-height: 33px; font-weight: 600; letter-spacing: -.4px; }
.pb-preset { display: flex; align-items: center; gap: 3.5px; margin-top: 5px; flex: none; }
.pb-popup { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px 0 10.5px; border-radius: 6px; background: rgba(0, 0, 0, .035); font-size: 13px; white-space: nowrap; }
/* Like NSPopUpButton, as wide as its longest item; the widths are the app's own, measured on its
   English, Ukrainian and Russian captures. */
.pb-preset .pb-popup { width: 209.5px; }
.pb:lang(uk) .pb-preset .pb-popup { width: 258px; }
.pb:lang(ru) .pb-preset .pb-popup { width: 282px; }
.pb-popup-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-popup > span { flex: 1; text-align: left; }
.pb-popup .sf:first-child { font-size: 13px; }
.pb-popup .pb-chev { font-size: 9px; margin-left: 6px; }
.pb-popup:hover { background: rgba(0, 0, 0, .06); }
.pb-preset > .pb-plain { width: 24px; height: 24px; margin: 0 -6.7px 0 -3.5px; }
.pb-preset > .pb-plain .sf { font-size: 13px; }
.pb-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; line-height: 14px; color: var(--label2); font-variant-numeric: tabular-nums; }

/* Reading text: 15 pt, line spacing 7 (lists 5). */
.pb-reading, .pb-bullets li, .pb-decision, .pb-line-text, .pb-q span, .pb-a p { font-size: 15px; }
/* SwiftUI adds lineSpacing only between the lines of one text; the negative margins take the
   half above the first line and below the last back out. Natural line: 19 pt at 15 pt. */
.pb-reading { line-height: 26px; margin: -3.5px 0; }
.pb-paragraphs { display: flex; flex-direction: column; gap: 14px; }
.pb-preset-body { display: flex; flex-direction: column; gap: 28px; }
.pb-section { display: flex; flex-direction: column; gap: 12px; }
.pb-h { font-size: 17px; line-height: 21px; font-weight: 600; padding-top: 1.5px; margin-bottom: -1.5px; }
.pb-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pb-bullets li { display: flex; gap: 12px; line-height: 24px; margin: -2.5px 0; }
.pb-decision { display: flex; align-items: flex-start; gap: 12px; line-height: 24px; margin: -2.5px 0; }
.pb-decision .sf { font-size: 15px; margin-top: 5px; }
.pb-footnote { font-size: 10px; line-height: 12px; color: var(--label2); }
.pb-card { border-radius: 12px; background: var(--fill); }
.pb-preset-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 12px; }
.pb-preset-card > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.pb-preset-card b { font-weight: 500; }
.pb-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .12); border-top-color: rgba(0, 0, 0, .5); animation: pb-spin .8s linear infinite; }
@keyframes pb-spin { to { transform: rotate(1turn); } }
.pb-small-btn, .pb-push { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 22px; padding: 0 11px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 .5px 1.5px rgba(0, 0, 0, .14); font-size: 13px; white-space: nowrap; }
.pb-push:active { background: #f0f0f0; }
.pb-push.pb-default { background: var(--accent); color: #fff; box-shadow: 0 .5px 1.5px rgba(0, 0, 0, .25); }
.pb-push.is-destructive { color: var(--red); }
.pb-small-push { height: 20px; padding: 0 8px; font-size: 12px; gap: 6px; background: rgba(0, 0, 0, .05); box-shadow: none; border-radius: 5px; }
.pb-small-push .sf { font-size: 12px; }

/* Discuss with AI */
.pb-chat { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 16px; }
.pb-chat-head { display: flex; align-items: baseline; gap: 8px; }
.pb-capsule { padding: 3px 7px; border-radius: 99px; background: rgba(38, 56, 60, .14); color: var(--accent); font-size: 10px; line-height: 13px; }
.pb-chat-intro { display: flex; flex-direction: column; gap: 12px; }
.pb-chat-intro > p { font-size: 12px; line-height: 15px; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chips button { padding: 7px 12px; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); font-size: 12px; line-height: 15px; }
.pb-chips button:hover { background: #fafafa; }
.pb-thread { display: flex; flex-direction: column; gap: 24px; }
.pb-q { display: flex; justify-content: flex-end; padding-left: 72px; }
.pb-q span { padding: 8px 12px; border-radius: 18px; background: rgba(38, 56, 60, .18); line-height: 20px; }
.pb-a { display: flex; align-items: flex-start; gap: 12px; }
.pb-mark { width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; background: var(--accent); color: var(--paper); display: grid; place-items: center; flex: none; }
.pb-mark .sf { font-size: 12px; }
.pb-a-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-a p { line-height: 23px; }
.pb-sources { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--accent); font-size: 10px; line-height: 13px; align-self: flex-start; }
.pb-sources .sf { font-size: 10px; }
.pb-sources .pb-tiny { font-size: 8px; }
.pb-cites { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid rgba(38, 56, 60, .35); }
.pb-cites button { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 15px; text-align: left; }
.pb-cites button:hover .pb-2nd { color: var(--label); }
.pb-waiting { align-items: center; }
.pb-waiting > .pb-2nd { font-size: 12px; }
.pb-dots { display: inline-flex; gap: 4px; }
.pb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--label2); animation: pb-dot 1.2s ease-in-out infinite; opacity: .25; }
.pb-dots i:nth-child(2) { animation-delay: .18s; } .pb-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes pb-dot { 50% { opacity: .9; } }
.pb-composer { display: flex; align-items: flex-end; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pb-composer textarea { flex: 1; min-width: 0; height: 34px; max-height: 140px; padding: 7px 0; border: 0; background: transparent; resize: none; font-size: 15px; line-height: 20px; overflow: hidden; }
.pb-composer textarea::placeholder { color: var(--placeholder); }
.pb-send { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--paper); flex: none; }
.pb-send:disabled { opacity: 1; background: rgba(0, 0, 0, .08); color: var(--label2); }
.pb-send .sf { font-size: 13px; }

/* Transcript: timestamp column 48 pt, speaker on the first line of a turn, a band under the line
   being played (accent #1B8393 at 14 %), 24 pt before a new turn and 12 pt inside one. */
.pb-transcript .pb-head { padding-bottom: 28px; }
.pb-lines { display: flex; flex-direction: column; }
.pb-line { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 8px 12px; margin: 4px -12px 0; border-radius: 12px; transition: background-color .3s; }
.pb-line.is-turn { margin-top: 16px; }
.pb-line:first-child { margin-top: 16px; }
.pb-line.is-current { background: rgba(27, 131, 147, .14); }
.pb-stamp { width: 48px; flex: none; font-size: 12px; line-height: 15px; color: var(--label2); padding-top: 1px; }
.pb-line.is-current .pb-stamp { color: var(--accent); }
.pb-line-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.pb-speaker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 15px; font-weight: 500; }
.pb-speaker .sf { font-size: 12px; }
.pb-speaker-name:hover { text-decoration: underline; }
.pb-line-text { display: block; width: 100%; line-height: 24px; margin: -2.5px 0; cursor: text; }
.pb-line-edit { display: flex; flex-direction: column; gap: 8px; }
.pb-line-edit textarea { min-height: 100px; padding: 6px; border: 0; border-radius: 8px; background: var(--fill); font-size: 15px; line-height: 20px; resize: vertical; }
.pb-line-edit > div { display: flex; justify-content: flex-end; gap: 8px; }

/* Tasks */
.pb-tasks-head { display: flex; flex-direction: column; gap: 8px; }
.pb-baseline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pb-cards { display: flex; flex-direction: column; gap: 12px; }
.pb-task { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.pb-check { width: 26px; height: 26px; display: grid; place-items: center; flex: none; margin-top: -2px; }
.pb-check .sf { font-size: 22px; }
.pb-task-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.pb-task-title { display: flex; align-items: flex-start; gap: 8px; }
.pb-task-title b { flex: 1; font-weight: 500; font-size: 13px; line-height: 16px; }
.pb-task.is-done .pb-task-title b { text-decoration: line-through; color: var(--label2); }
.pb-edit { opacity: 0; color: var(--label2); width: 16px; height: 16px; }
.pb-edit .sf { font-size: 12px; }
.pb-task:hover .pb-edit, .pb-edit:focus-visible { opacity: 1; }
.pb-task-meta { display: flex; gap: 12px; font-size: 12px; line-height: 15px; }
.pb-task-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pb-task-meta .sf { font-size: 12px; }
.pb-quote { display: flex; gap: 12px; text-align: left; }
.pb-quote > i { width: 3px; flex: none; border-radius: 2px; background: var(--label4); }
.pb-quote > span { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 15px; }
.pb-quote > span > .pb-2nd { line-height: 19px; margin: -2px 0; }
.pb-quote small { font-size: 10px; line-height: 13px; color: var(--label3); }
.pb-quote:hover .pb-2nd { color: var(--label); }
.pb-task-actions { display: flex; align-items: center; gap: 8px; }

/* All tasks and Upcoming meetings */
.pb-all-head, .pb-up-head { display: flex; flex-direction: column; gap: 12px; }
.pb-up-head { gap: 6px; }
.pb-seg-inline { align-self: flex-start; padding: 2px; height: 24px; border-radius: 7px; background: rgba(0, 0, 0, .05); max-width: 300px; }
.pb-seg-inline button { height: 20px; padding: 0 14px; border-radius: 5px; font-size: 12px; }
.pb-seg-inline button[aria-checked="true"] { background: #fff; box-shadow: 0 .5px 1.5px rgba(0, 0, 0, .18); }
.pb-task-group { display: flex; flex-direction: column; gap: 12px; }
.pb-group-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: .5px solid rgba(0, 0, 0, .1); }
.pb-group-head > div { flex: 1; display: grid; gap: 2px; }
.pb-up-bar { display: flex; align-items: center; gap: 8px; }
.pb-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pb-checkbox input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.pb-day { display: flex; flex-direction: column; gap: 12px; }
.pb-event { display: flex; align-items: flex-start; gap: 16px; padding: 16px; }
.pb-ev-time { width: 68px; flex: none; display: grid; gap: 2px; }
.pb-ev-time b { font-size: 15px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.pb-ev-bar { align-self: stretch; width: 2px; border-radius: 1px; background: transparent; flex: none; }
.pb-ev-bar.is-live { background: var(--accent); }
.pb-ev-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-ev-body b { font-size: 15px; line-height: 18px; font-weight: 600; }
.pb-ev-body > span { display: inline-flex; align-items: center; gap: 6px; }
.pb-ev-body .sf { font-size: 11px; }
.pb-live { color: var(--accent); font-size: 10px; font-weight: 700; }
.pb-ev-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pb-join { height: 28px; padding: 0 14px; border-radius: 14px; font-size: 13px; }

/* Empty and processing states (ContentUnavailableView) */
.pb-unavailable { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding-bottom: 40px; }
.pb-un-icon { font-size: 40px; color: var(--label2); margin-bottom: 8px; }
.pb-pulse { animation: pb-pulse 1.4s ease-in-out infinite; }
@keyframes pb-pulse { 50% { opacity: .45; } }
.pb-unavailable h3 { font-size: 17px; line-height: 22px; font-weight: 600; }
.pb-unavailable p { max-width: 360px; font-size: 13px; line-height: 17px; color: var(--label2); }
.pb-bar-wide { width: 220px; margin-top: 10px; }
.pb-library-empty { min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.pb-library-empty > .sf { font-size: 42px; color: var(--label3); margin-bottom: 12px; }
.pb-library-empty p { max-width: 390px; font-size: 15px; line-height: 22px; color: var(--label2); }
.pb-library-empty > div { display: flex; gap: 12px; margin-top: 12px; }
.pb-large { height: 32px; padding: 0 16px; }
.pb-glass-btn { display: inline-flex; align-items: center; border-radius: 16px; background: rgba(0, 0, 0, .05); font-size: 13px; }

/* ---- Player: a floating thick-material bar over the bottom of every tab -------------------- */
.pb-player-wrap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 24px 24px 16px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 45%, #fff); pointer-events: none; }
.pb-player-wrap:empty { display: none; }
.pb-player { pointer-events: auto; max-width: 832px; margin: 0 auto; display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 24px; border-radius: 20px; background: rgba(229, 230, 232, .94); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09), 0 5px 16px rgba(0, 0, 0, .16); }
.pb-transport { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.pb-transport .sf { font-size: 15px; }
.pb-transport .pb-play .sf { font-size: 19px; }
.pb-now { min-width: 48px; text-align: right; font-size: 12px; }
.pb-total { min-width: 48px; font-size: 12px; }
.pb-slider { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; margin: 0; }
.pb-seek { flex: 1; min-width: 60px; }
.pb-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0 var(--fill-to, 0%), rgba(0, 0, 0, .025) var(--fill-to, 0%)); }
.pb-slider::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .025); }
.pb-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.pb-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 14px; margin-top: -5px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .22); }
.pb-slider::-moz-range-thumb { width: 20px; height: 14px; border: 0; border-radius: 7px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .22); }
.pb-rate { background: transparent; padding: 0 2px; font-size: 13px; height: 22px; }
.pb-rate .pb-chev { margin-left: 1px; }
.pb-volume { display: inline-flex; align-items: center; gap: 8px; }
.pb-volume .sf { font-size: 13px; }
.pb-volume .pb-slider { width: 84px; }

/* ---- Menus (NSMenu), sheets and alerts ----------------------------------------------------- */
.pb-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.pb-layer > * { pointer-events: auto; }
.pb-menu { position: absolute; min-width: 180px; padding: 5px; border-radius: 12px; background: rgba(246, 246, 246, .88); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 10px 32px rgba(0, 0, 0, .22); font-size: 13px; }
.pb-mi { display: flex; align-items: center; gap: 6px; width: 100%; height: 24px; padding: 0 12px 0 4px; border-radius: 6px; white-space: nowrap; }
.pb-mi .sf { font-size: 13px; width: 1.15em; }
.pb-mi-check { width: 14px; display: inline-flex; justify-content: center; }
.pb-mi-check .sf { font-size: 11px; }
.pb-mi:hover:not(:disabled), .pb-mi:focus-visible { background: var(--accent); color: #fff; outline: none; }
.pb-mi.is-destructive { color: var(--red); }
.pb-mi.is-destructive:hover { background: var(--red); color: #fff; }
.pb-mh { padding: 6px 12px 3px 24px; font-size: 11px; font-weight: 600; color: var(--label2); }
.pb-sep { height: 0; margin: 5px 12px; border: 0; border-top: .5px solid rgba(0, 0, 0, .14); }
.pb-sheet-scrim { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 52px; background: rgba(0, 0, 0, .08); }
.pb-sheet { width: 560px; max-height: calc(100% - 80px); overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: rgba(250, 250, 250, .98); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 24px 60px rgba(0, 0, 0, .3); animation: pb-sheet .3s cubic-bezier(.2, .9, .3, 1); }
.pb-sheet-reminders { width: 540px; }
@keyframes pb-sheet { from { transform: translateY(-20px); opacity: 0; } }
.pb-sheet-title { font-size: 20px; line-height: 25px; font-weight: 600; }
.pb-label-title { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.pb-label-title .sf { font-size: 17px; }
.pb-field { width: 100%; height: 22px; padding: 0 6px; border: 0; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2), inset 0 .5px 1px rgba(0, 0, 0, .06); font-size: 13px; }
.pb-field:focus { box-shadow: 0 0 0 3px rgba(38, 56, 60, .3), inset 0 0 0 .5px rgba(0, 0, 0, .2); }
.pb-editor { width: 100%; height: 110px; padding: 6px; border: 0; border-radius: 8px; font-size: 15px; line-height: 20px; resize: none; }
.pb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb-form { display: grid; gap: 10px; }
.pb-form > label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-size: 13px; }
.pb-form > label > span:first-child { text-align: right; }
.pb-form > label.pb-top { align-items: start; }
.pb-form > p { padding-left: 130px; }
.pb-notes { height: 120px; padding: 4px 6px; border: 0; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2); font-size: 13px; resize: none; }
.pb-popup-static { justify-self: start; min-width: 160px; }
.pb-ok { display: flex; align-items: center; gap: 8px; }
.pb-ok .sf { color: #28c840; font-size: 15px; }
.pb-speaker-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.pb-speaker-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.pb-speaker-row > .sf { font-size: 17px; width: 22px; margin-top: 2px; }
.pb-speaker-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pb-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-sheet-foot { display: flex; gap: 8px; }
.pb-alert { width: 260px; margin-top: 140px; padding: 20px 16px 16px; border-radius: 16px; background: rgba(248, 248, 248, .97); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 24px 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: pb-sheet .25s ease-out; }
.pb-alert img { width: 64px; height: 64px; }
.pb-alert h2 { font-size: 13px; line-height: 16px; font-weight: 700; }
.pb-alert p { font-size: 11px; line-height: 14px; }
.pb-alert-buttons { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.pb-alert-buttons .pb-push { height: 28px; border-radius: 8px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .pb *, .pb *::before, .pb *::after { animation: none !important; transition: none !important; }
}

/* ---- Generated by build.mjs --------------------------------------------------------- */
.hero-title .w.d0 { animation-delay: 120ms; }
.hero-title .w.d1 { animation-delay: 190ms; }
.hero-title .w.d2 { animation-delay: 260ms; }
.hero-title .w.d3 { animation-delay: 330ms; }
.hero-title .w.d4 { animation-delay: 400ms; }
.hero-title .w.d5 { animation-delay: 470ms; }
.hero-title .w.d6 { animation-delay: 540ms; }
.hero-title .w.d7 { animation-delay: 610ms; }
.hero-title .w.d8 { animation-delay: 680ms; }
.hero-title .w.d9 { animation-delay: 750ms; }
.hero-title .w.d10 { animation-delay: 820ms; }
.hero-title .w.d11 { animation-delay: 890ms; }
.hero-title .w.d12 { animation-delay: 960ms; }
.hero-title .w.d13 { animation-delay: 1030ms; }
.hero-title .w.d14 { animation-delay: 1100ms; }
.hero-title .w.d15 { animation-delay: 1170ms; }
.hero-title .w.d16 { animation-delay: 1240ms; }
.hero-title .w.d17 { animation-delay: 1310ms; }
.hero-title .w.d18 { animation-delay: 1380ms; }
.hero-title .w.d19 { animation-delay: 1450ms; }
.hero-title .w.d20 { animation-delay: 1520ms; }
.hero-title .w.d21 { animation-delay: 1590ms; }
.hero-title .w.d22 { animation-delay: 1660ms; }
.hero-title .w.d23 { animation-delay: 1730ms; }
.fv-formats span:nth-child(1) { animation-delay: 0s; }
.fv-formats span:nth-child(2) { animation-delay: 1s; }
.fv-formats span:nth-child(3) { animation-delay: 2s; }
.fv-formats span:nth-child(4) { animation-delay: 3s; }
.fv-formats span:nth-child(5) { animation-delay: 4s; }
.fv-formats span:nth-child(6) { animation-delay: 5s; }
.fv-formats span:nth-child(7) { animation-delay: 6s; }
.fv-formats span:nth-child(8) { animation-delay: 7s; }
.app-logo-teams { -webkit-mask-image: url("/assets/apps/mono/teams.svg"); mask-image: url("/assets/apps/mono/teams.svg"); }
.app-logo-zoom { -webkit-mask-image: url("/assets/apps/mono/zoom.svg"); mask-image: url("/assets/apps/mono/zoom.svg"); }
.app-logo-google-meet { -webkit-mask-image: url("/assets/apps/mono/google-meet.svg"); mask-image: url("/assets/apps/mono/google-meet.svg"); }
.app-logo-webex { -webkit-mask-image: url("/assets/apps/mono/webex.svg"); mask-image: url("/assets/apps/mono/webex.svg"); }
.app-logo-slack { -webkit-mask-image: url("/assets/apps/mono/slack.svg"); mask-image: url("/assets/apps/mono/slack.svg"); }
.app-logo-facetime { -webkit-mask-image: url("/assets/apps/mono/facetime.svg"); mask-image: url("/assets/apps/mono/facetime.svg"); }
.app-logo-telegram { -webkit-mask-image: url("/assets/apps/mono/telegram.svg"); mask-image: url("/assets/apps/mono/telegram.svg"); }
.app-logo-whatsapp { -webkit-mask-image: url("/assets/apps/mono/whatsapp.svg"); mask-image: url("/assets/apps/mono/whatsapp.svg"); }
.app-logo-discord { -webkit-mask-image: url("/assets/apps/mono/discord.svg"); mask-image: url("/assets/apps/mono/discord.svg"); }
.sf-apple-logo { --sf: url("/assets/demo/sf/apple-logo.png"); --w: 29; --h: 37; }
.sf-archivebox { --sf: url("/assets/demo/sf/archivebox.png"); --w: 40; --h: 35; }
.sf-arrow-clockwise { --sf: url("/assets/demo/sf/arrow-clockwise.png"); --w: 34; --h: 40; }
.sf-arrow-counterclockwise { --sf: url("/assets/demo/sf/arrow-counterclockwise.png"); --w: 34; --h: 40; }
.sf-arrow-triangle-2-circlepath { --sf: url("/assets/demo/sf/arrow-triangle-2-circlepath.png"); --w: 39; --h: 38; }
.sf-arrow-up--bold { --sf: url("/assets/demo/sf/arrow-up--bold.png"); --w: 34; --h: 36; }
.sf-arrow-up-left-and-arrow-down-right { --sf: url("/assets/demo/sf/arrow-up-left-and-arrow-down-right.png"); --w: 38; --h: 36; }
.sf-battery-100percent { --sf: url("/assets/demo/sf/battery-100percent.png"); --w: 55; --h: 28; }
.sf-calendar { --sf: url("/assets/demo/sf/calendar.png"); --w: 40; --h: 35; }
.sf-calendar-badge-checkmark { --sf: url("/assets/demo/sf/calendar-badge-checkmark.png"); --w: 44; --h: 40; }
.sf-chart-bar { --sf: url("/assets/demo/sf/chart-bar.png"); --w: 48; --h: 36; }
.sf-checklist { --sf: url("/assets/demo/sf/checklist.png"); --w: 44; --h: 38; }
.sf-checkmark { --sf: url("/assets/demo/sf/checkmark.png"); --w: 35; --h: 33; }
.sf-checkmark--semibold { --sf: url("/assets/demo/sf/checkmark--semibold.png"); --w: 37; --h: 34; }
.sf-checkmark-circle { --sf: url("/assets/demo/sf/checkmark-circle.png"); --w: 38; --h: 38; }
.sf-checkmark-circle-fill { --sf: url("/assets/demo/sf/checkmark-circle-fill.png"); --w: 38; --h: 38; }
.sf-chevron-down { --sf: url("/assets/demo/sf/chevron-down.png"); --w: 36; --h: 22; }
.sf-chevron-right { --sf: url("/assets/demo/sf/chevron-right.png"); --w: 24; --h: 34; }
.sf-chevron-up-chevron-down { --sf: url("/assets/demo/sf/chevron-up-chevron-down.png"); --w: 29; --h: 37; }
.sf-chevron-up-chevron-down--semibold { --sf: url("/assets/demo/sf/chevron-up-chevron-down--semibold.png"); --w: 31; --h: 39; }
.sf-circle { --sf: url("/assets/demo/sf/circle.png"); --w: 38; --h: 38; }
.sf-clock { --sf: url("/assets/demo/sf/clock.png"); --w: 38; --h: 38; }
.sf-doc-text { --sf: url("/assets/demo/sf/doc-text.png"); --w: 35; --h: 40; }
.sf-ellipsis-circle { --sf: url("/assets/demo/sf/ellipsis-circle.png"); --w: 38; --h: 38; }
.sf-exclamationmark-circle { --sf: url("/assets/demo/sf/exclamationmark-circle.png"); --w: 38; --h: 38; }
.sf-exclamationmark-triangle { --sf: url("/assets/demo/sf/exclamationmark-triangle.png"); --w: 39; --h: 36; }
.sf-exclamationmark-triangle-fill { --sf: url("/assets/demo/sf/exclamationmark-triangle-fill.png"); --w: 39; --h: 36; }
.sf-folder { --sf: url("/assets/demo/sf/folder.png"); --w: 44; --h: 35; }
.sf-gearshape { --sf: url("/assets/demo/sf/gearshape.png"); --w: 40; --h: 40; }
.sf-gobackward-15 { --sf: url("/assets/demo/sf/gobackward-15.png"); --w: 38; --h: 42; }
.sf-goforward-15 { --sf: url("/assets/demo/sf/goforward-15.png"); --w: 38; --h: 42; }
.sf-graduationcap { --sf: url("/assets/demo/sf/graduationcap.png"); --w: 51; --h: 45; }
.sf-hand-tap { --sf: url("/assets/demo/sf/hand-tap.png"); --w: 36; --h: 43; }
.sf-line-3-horizontal-decrease { --sf: url("/assets/demo/sf/line-3-horizontal-decrease.png"); --w: 40; --h: 25; }
.sf-line-3-horizontal-decrease-circle-fill { --sf: url("/assets/demo/sf/line-3-horizontal-decrease-circle-fill.png"); --w: 38; --h: 38; }
.sf-list-bullet-indent { --sf: url("/assets/demo/sf/list-bullet-indent.png"); --w: 48; --h: 29; }
.sf-list-bullet-rectangle { --sf: url("/assets/demo/sf/list-bullet-rectangle.png"); --w: 45; --h: 35; }
.sf-magnifyingglass { --sf: url("/assets/demo/sf/magnifyingglass.png"); --w: 38; --h: 37; }
.sf-mappin-and-ellipse { --sf: url("/assets/demo/sf/mappin-and-ellipse.png"); --w: 36; --h: 43; }
.sf-mic { --sf: url("/assets/demo/sf/mic.png"); --w: 32; --h: 40; }
.sf-pause-fill { --sf: url("/assets/demo/sf/pause-fill.png"); --w: 28; --h: 32; }
.sf-pencil { --sf: url("/assets/demo/sf/pencil.png"); --w: 33; --h: 32; }
.sf-person { --sf: url("/assets/demo/sf/person.png"); --w: 36; --h: 35; }
.sf-person-2 { --sf: url("/assets/demo/sf/person-2.png"); --w: 52; --h: 38; }
.sf-person-2--medium { --sf: url("/assets/demo/sf/person-2--medium.png"); --w: 52; --h: 38; }
.sf-person-3 { --sf: url("/assets/demo/sf/person-3.png"); --w: 68; --h: 38; }
.sf-person-crop-circle--medium { --sf: url("/assets/demo/sf/person-crop-circle--medium.png"); --w: 39; --h: 39; }
.sf-play-fill { --sf: url("/assets/demo/sf/play-fill.png"); --w: 28; --h: 33; }
.sf-plus-circle { --sf: url("/assets/demo/sf/plus-circle.png"); --w: 38; --h: 38; }
.sf-record-circle { --sf: url("/assets/demo/sf/record-circle.png"); --w: 38; --h: 38; }
.sf-record-circle-fill { --sf: url("/assets/demo/sf/record-circle-fill.png"); --w: 38; --h: 38; }
.sf-sidebar-left { --sf: url("/assets/demo/sf/sidebar-left.png"); --w: 45; --h: 35; }
.sf-sparkles { --sf: url("/assets/demo/sf/sparkles.png"); --w: 35; --h: 42; }
.sf-sparkles--semibold { --sf: url("/assets/demo/sf/sparkles--semibold.png"); --w: 36; --h: 43; }
.sf-speaker-wave-2 { --sf: url("/assets/demo/sf/speaker-wave-2.png"); --w: 45; --h: 34; }
.sf-square-and-arrow-down { --sf: url("/assets/demo/sf/square-and-arrow-down.png"); --w: 36; --h: 43; }
.sf-square-and-arrow-up { --sf: url("/assets/demo/sf/square-and-arrow-up.png"); --w: 36; --h: 44; }
.sf-square-dashed { --sf: url("/assets/demo/sf/square-dashed.png"); --w: 37; --h: 35; }
.sf-stop-fill { --sf: url("/assets/demo/sf/stop-fill.png"); --w: 34; --h: 32; }
.sf-switch-2 { --sf: url("/assets/demo/sf/switch-2.png"); --w: 38; --h: 36; }
.sf-text-alignleft { --sf: url("/assets/demo/sf/text-alignleft.png"); --w: 40; --h: 34; }
.sf-text-bubble { --sf: url("/assets/demo/sf/text-bubble.png"); --w: 43; --h: 39; }
.sf-text-quote { --sf: url("/assets/demo/sf/text-quote.png"); --w: 40; --h: 34; }
.sf-textformat { --sf: url("/assets/demo/sf/textformat.png"); --w: 44; --h: 30; }
.sf-trash { --sf: url("/assets/demo/sf/trash.png"); --w: 36; --h: 41; }
.sf-waveform { --sf: url("/assets/demo/sf/waveform.png"); --w: 37; --h: 39; }
.sf-waveform--light { --sf: url("/assets/demo/sf/waveform--light.png"); --w: 36; --h: 39; }
.sf-waveform-path { --sf: url("/assets/demo/sf/waveform-path.png"); --w: 45; --h: 43; }
.sf-waveform-slash { --sf: url("/assets/demo/sf/waveform-slash.png"); --w: 38; --h: 41; }
.sf-wifi-slash { --sf: url("/assets/demo/sf/wifi-slash.png"); --w: 43; --h: 39; }
.sf-xmark { --sf: url("/assets/demo/sf/xmark.png"); --w: 34; --h: 32; }
.crop-formats { aspect-ratio: 803 / 560; --tx: -356px; --ty: 0px; }
.crop-voices { aspect-ratio: 650 / 600; --tx: -356px; --ty: -168px; }
.crop-ask { aspect-ratio: 760 / 367; --tx: -352px; --ty: -432px; }
.crop-reminders { aspect-ratio: 650 / 600; --tx: -356px; --ty: -150px; }
.crop-search { aspect-ratio: 305 / 500; --tx: 0px; --ty: -46px; }
.crop-calendar { aspect-ratio: 480 / 600; --tx: -340px; --ty: -56px; }
.crop-player { aspect-ratio: 650 / 413; --tx: -324px; --ty: -386px; }
.crop-evidence { aspect-ratio: 840 / 600; --tx: -305px; --ty: 0px; }