:root {
  --ink: #231f29;
  --muted: #706a75;
  --paper: #f4f0ea;
  --surface: #fffdfa;
  --surface-2: #eee9e3;
  --purple: #7251c7;
  --purple-dark: #52379a;
  --purple-soft: #ebe3fa;
  --line: rgba(44, 38, 49, 0.13);
  --shadow: 0 28px 80px rgba(41, 32, 50, 0.14);
  --shell: min(1240px, calc(100vw - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.section-shell { margin-inline: auto; width: var(--shell); }

.site-header {
  align-items: center;
  backdrop-filter: blur(18px) saturate(145%);
  background: rgba(244, 240, 234, 0.88);
  border-bottom: 1px solid rgba(44, 38, 49, 0.08);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 72px;
  inset: 0 0 auto;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  position: sticky;
  z-index: 50;
}

.brand {
  align-items: center;
  color: #6f52b5;
  display: inline-flex;
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 750;
  gap: 11px;
  justify-self: start;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img { filter: drop-shadow(0 4px 5px rgba(63, 42, 91, .25)); height: 46px; object-fit: contain; width: 40px; }

.site-nav { align-items: center; display: flex; gap: 30px; }
.site-nav a { color: #5f5964; font-size: 14px; font-weight: 700; text-decoration: none; }
.site-nav a:hover { color: var(--purple); }
.header-actions { align-items: center; display: flex; gap: 13px; justify-self: end; }
.header-free { background: transparent; border: 0; color: var(--purple-dark); cursor: pointer; font-size: 13px; font-weight: 800; padding: 8px 3px; text-decoration: none; }
.header-free:hover { color: var(--ink); }

.menu-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  height: 42px;
  padding: 10px;
  width: 42px;
}

.menu-toggle span { background: var(--ink); display: block; height: 2px; margin: 6px 0; width: 22px; }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  min-height: 52px;
  padding: 0 23px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 19px; }
.button--small { border-radius: 11px; min-height: 42px; padding-inline: 18px; }
.button--primary { background: var(--purple); box-shadow: 0 13px 28px rgba(114, 81, 199, 0.25); color: white; }
.button--primary:hover { background: var(--purple-dark); }
.button--dark { background: var(--ink); color: white; }
.button--ghost { background: rgba(255,255,255,.48); border-color: var(--line); color: var(--ink); }
.button--outline { background: white; border-color: var(--purple); color: var(--purple-dark); }
.button--light { background: white; color: var(--ink); }
.button--full { width: 100%; }
.context-link { align-items: center; color: var(--purple-dark); display: inline-flex; font-weight: 850; gap: 8px; margin-top: 15px; max-width: 100%; text-decoration: none; }
.context-link > span { line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.context-link:hover { color: var(--purple); }
.mode-card .context-link { margin-top: 16px; }
.mode-card--accent .context-link { color: #fff; }
.mode-card--accent .context-link:hover { color: #f0e9ff; }

.eyebrow {
  align-items: center;
  color: var(--purple-dark);
  display: flex;
  font-size: 13px;
  font-weight: 850;
  gap: 9px;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.eyebrow > span { background: var(--purple); border-radius: 50%; height: 8px; width: 8px; }
.eyebrow--light { color: #d9cbff; }
.eyebrow--light > span { background: #c9b4ff; }

.hero {
  display: grid;
  gap: 52px 72px;
  grid-template-columns: minmax(0, 1fr) 360px;
  padding-block: 86px 72px;
}

.hero-copy { max-width: 820px; }
.hero > *, .hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(54px, 6.5vw, 94px);
  letter-spacing: -.065em;
  line-height: .96;
  margin: 20px 0 28px;
}
.hero h1 em { color: var(--purple); font-style: normal; }
.hero-lead { color: var(--muted); font-size: 21px; line-height: 1.48; margin: 0; max-width: 750px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-playground { align-self: center; left: -56px; min-height: 510px; position: relative; z-index: 10; }
.hero-playground::before { background: radial-gradient(circle, rgba(114,81,199,.19) 1.2px, transparent 1.4px); background-size: 18px 18px; content: ""; inset: 44px 6px 28px 22px; mask-image: linear-gradient(135deg, #000, transparent 88%); opacity: .7; pointer-events: none; position: absolute; }
.hero-note, .hero-timer { position: absolute; touch-action: none; user-select: none; z-index: 2; }
.hero-note { animation: hero-note-arrive 700ms cubic-bezier(.2,.88,.25,1.15) 180ms both; background: #ffe784; border: 1px solid rgba(95,73,10,.16); border-radius: 7px 7px 13px 7px; box-shadow: 0 23px 48px rgba(67,47,11,.2); color: #382f18; height: 238px; left: 2px; overflow: hidden; top: 72px; transform: rotate(-2.4deg); width: 254px; }
.hero-note::after { border-color: transparent rgba(96,73,10,.12) transparent transparent; border-style: solid; border-width: 0 17px 17px 0; bottom: 0; content: ""; filter: drop-shadow(-2px -2px 2px rgba(255,255,255,.35)); position: absolute; right: 0; }
.hero-note[data-color="pink"] { background: #ffc7dc; }
.hero-note[data-color="blue"] { background: #bde7ff; }
.hero-note header, .hero-timer header { align-items: center; cursor: grab; display: flex; justify-content: space-between; touch-action: none; }
.hero-note header:active, .hero-timer header:active { cursor: grabbing; }
.hero-note header { min-height: 40px; padding: 8px 12px; }
.hero-note__grip { color: rgba(56,47,24,.38); font-size: 12px; letter-spacing: 2px; line-height: 1; }
.hero-note__colors { display: flex; gap: 5px; }
.hero-note__colors button { border: 1px solid rgba(49,36,8,.16); border-radius: 50%; cursor: pointer; height: 16px; padding: 0; width: 16px; }
.hero-note__colors button:nth-child(1) { background: #ffe784; }
.hero-note__colors button:nth-child(2) { background: #ffc7dc; }
.hero-note__colors button:nth-child(3) { background: #bde7ff; }
.hero-note__colors button.is-active { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(56,47,24,.34); }
.hero-note__text { cursor: text; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 18px; height: 153px; line-height: 1.45; min-height: 0; outline: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 20px 18px; scrollbar-color: rgba(56,47,24,.34) transparent; scrollbar-width: thin; user-select: text; white-space: pre-wrap; }
.hero-note__text:focus { background: rgba(255,255,255,.13); }
.hero-note footer { align-items: center; bottom: 0; color: rgba(56,47,24,.62); display: flex; font-size: 10px; font-weight: 750; justify-content: space-between; left: 0; letter-spacing: .04em; padding: 10px 15px; position: absolute; right: 0; text-transform: uppercase; }
.hero-note footer b { font-size: 16px; }

.hero-timer { animation: hero-timer-arrive 780ms cubic-bezier(.16,.86,.28,1.12) 460ms both; background: #211d27; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; bottom: 76px; box-shadow: 0 24px 55px rgba(34,25,42,.28); color: white; padding: 13px 14px 14px; right: -40px; transform: rotate(1.5deg); width: 206px; }
.hero-timer header { color: #cdbcf7; font-size: 10px; font-weight: 850; letter-spacing: .12em; min-height: 24px; }
.hero-timer header i { background: #ff645f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,100,95,.12); height: 7px; width: 7px; }
.hero-timer__dial { align-items: center; background: radial-gradient(circle, #211d27 0 54%, #17131c 55% 100%); border-radius: 50%; cursor: grab; display: flex; flex-direction: column; height: 132px; justify-content: center; margin: 7px auto 9px; outline: 0; position: relative; touch-action: none; width: 132px; }
.hero-timer__dial:active { cursor: grabbing; }
.hero-timer__dial:focus-visible { box-shadow: 0 0 0 3px rgba(155,117,236,.38); }
.hero-timer__segments { inset: 0; pointer-events: none; position: absolute; }
.hero-timer__segments i { animation: hero-timer-segment-in 260ms ease calc(780ms + var(--segment-index) * 9ms) both; background: rgba(255,255,255,.12); border-radius: 3px; height: 8px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(calc(var(--segment-index) * 6deg)) translateY(-57px); transition: background-color 90ms ease, height 90ms ease; width: 3px; }
.hero-timer__segments i.is-duration { background: #7658be; }
.hero-timer__segments i.is-active { background: #f08b55; box-shadow: 0 0 8px rgba(240,139,85,.58); height: 12px; }
.hero-timer__knob { background: #f08b55; border: 2px solid #211d27; border-radius: 50%; box-shadow: 0 0 0 2px rgba(240,139,85,.25); height: 9px; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(var(--timer-duration-angle,150deg)) translateY(-57px); width: 9px; z-index: 2; }
.hero-timer__dial strong, .hero-timer__dial small { position: relative; z-index: 1; }
.hero-timer__dial strong { font-family: "Arial Narrow", "Roboto Condensed", sans-serif; font-size: 33px; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1; }
.hero-timer__dial small { color: #aaa1b1; font-size: 10px; margin-top: 6px; }
.hero-timer__presets, .hero-timer__actions { display: flex; gap: 6px; }
.hero-timer button { border: 0; cursor: pointer; }
.hero-timer__presets button { background: rgba(255,255,255,.07); border-radius: 7px; color: #bfb5c5; flex: 1; font-size: 10px; height: 25px; }
.hero-timer__presets button:hover, .hero-timer__presets button.is-active { background: #7050b9; color: white; }
.hero-timer__actions { margin-top: 7px; }
.hero-timer__actions button { background: rgba(255,255,255,.1); border-radius: 8px; color: white; flex: 1; font-size: 11px; font-weight: 800; height: 32px; }
.hero-timer__actions button:first-child { background: #f2eef9; color: #211d27; }
.hero-timer__actions button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.hero-scribble { color: #5b426d; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; line-height: 1.1; pointer-events: none; position: absolute; z-index: 4; }
.hero-scribble strong { display: block; font-size: 14px; transform: rotate(-2deg); }
.hero-scribble span { display: block; font-size: 11px; margin-top: 4px; opacity: .68; }
.hero-scribble svg { fill: none; overflow: visible; position: absolute; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.hero-scribble--note { right: 5px; top: 0; }
.hero-scribble--note svg { height: 70px; right: 26px; top: 33px; width: 120px; }
.hero-scribble--timer { bottom: 66px; left: 2px; width: 178px; }
.hero-scribble--timer svg { bottom: 39px; height: 66px; left: 58px; width: 112px; }

@keyframes hero-note-arrive { from { opacity: 0; transform: translate(70px,-45px) rotate(8deg) scale(.8); } to { opacity: 1; transform: rotate(-2.4deg) scale(1); } }
@keyframes hero-timer-arrive { from { opacity: 0; transform: translate(64px,52px) rotate(8deg) scale(.76); } to { opacity: 1; transform: rotate(1.5deg) scale(1); } }
@keyframes hero-timer-segment-in { from { opacity: 0; } to { opacity: 1; } }

.product-shot { margin: 0; }
.product-shot--hero { grid-column: 1 / -1; }
.live-demo-controls { align-items: center; display: flex; justify-content: center; margin: 0 0 18px; position: relative; }
.live-demo-scribble { color: #5b426d; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; line-height: 1.08; min-width: 148px; position: absolute; right: calc(50% + 178px); top: -34px; transform: rotate(-2deg); }
.live-demo-scribble strong { display: block; font-size: 15px; }
.live-demo-scribble span { display: block; font-size: 11px; margin-top: 4px; opacity: .7; }
.live-demo-scribble svg { fill: none; height: 42px; left: 116px; overflow: visible; position: absolute; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; top: 3px; width: 92px; }
.live-theme-switch { align-items: center; background: #fffdfa; border: 1px solid rgba(44,38,49,.15); border-radius: 15px; box-shadow: 0 10px 30px rgba(41,32,50,.1); display: flex; gap: 4px; margin-inline: auto; padding: 6px; }
.live-theme-switch button { background: transparent; border: 0; border-radius: 10px; color: #68616c; cursor: pointer; font-size: 14px; font-weight: 800; height: 40px; padding-inline: 18px; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
.live-theme-switch button:hover { background: #eee8f7; color: #52379a; transform: translateY(-1px); }
.live-theme-switch button.is-active { background: #7251c7; box-shadow: 0 6px 16px rgba(87,55,158,.24); color: white; }
.product-shot__bar {
  align-items: center;
  background: #26212b;
  border-radius: 24px 24px 0 0;
  color: white;
  display: grid;
  font-size: 12px;
  grid-template-columns: 1fr auto 1fr;
  min-height: 48px;
  padding: 0 18px;
}
.product-shot__bar > span { display: flex; gap: 6px; }
.product-shot__bar i { background: #6b6270; border-radius: 50%; height: 8px; width: 8px; }
.product-shot__bar strong { font-size: 12px; }
.product-shot__bar em { color: #aaa2ad; font-style: normal; justify-self: end; }
.product-shot--hero > img { border-radius: 0 0 24px 24px; box-shadow: var(--shadow); width: 100%; }

.live-dial {
  --demo-bg: #f3f1ed;
  --demo-ink: #201f24;
  --demo-muted: #747179;
  --demo-surface: #ffffff;
  --demo-line: rgba(55,47,62,.14);
  --demo-shadow: 0 16px 38px rgba(48,39,56,.12);
  background: var(--demo-bg);
  border-radius: 0 0 24px 24px;
  color: var(--demo-ink);
  isolation: isolate;
  min-height: 790px;
  overflow: hidden;
  padding: 34px 38px 42px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(48,55,67,.08), 0 30px 80px rgba(41,32,50,.15);
  transition: background 280ms ease, color 280ms ease;
}
.live-dial::before { content: ""; inset: -30%; opacity: 0; pointer-events: none; position: absolute; transform: translate3d(0,0,0); transition: opacity 280ms ease; z-index: 0; }
.live-dial > * { position: relative; z-index: 1; }
.live-dial__header { align-items: center; display: grid; grid-template-columns: 1fr auto; min-height: 46px; z-index: 30; }
.live-dial__header > div:first-child { align-items: center; display: flex; font-size: 15px; gap: 10px; }
.live-dial__header > div:first-child img { filter: drop-shadow(0 3px 4px rgba(64,43,95,.22)); height: 38px; object-fit: contain; width: 33px; }
.live-dial__header > span { display: flex; gap: 9px; justify-self: end; }
.live-dial__header > span button { align-items: center; background: var(--demo-surface); border: 1px solid var(--demo-line); border-radius: 11px; box-shadow: 0 8px 20px rgba(40,32,48,.09); color: var(--demo-ink); cursor: pointer; display: flex; font-size: 18px; height: 39px; justify-content: center; width: 39px; }
.live-dial__header > span button:hover, .live-dial__header > span button[aria-expanded="true"] { border-color: rgba(114,81,199,.5); color: #7654c9; transform: translateY(-1px); }
.live-dial__header > span button svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
.live-web-search { align-items: center; background: var(--demo-surface); border: 1px solid var(--demo-line); border-radius: 15px; box-shadow: var(--demo-shadow); display: grid; grid-template-columns: 190px 1fr 46px; margin: 28px auto 26px; max-width: 820px; min-height: 58px; padding: 6px; position: relative; z-index: 25; }
.live-web-search > button { align-items: center; background: rgba(114,81,199,.12); border: 0; border-radius: 10px; color: var(--demo-ink); cursor: pointer; display: flex; gap: 9px; height: 44px; padding: 0 13px; }
.live-web-search > button span { align-items: center; color: #7654c9; display: flex; height: 20px; justify-content: center; width: 20px; }
.live-web-search > button span svg, .live-web-search > button i svg, .live-search-submit-icon, .live-bookmark-search span svg, .live-folder-select svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.live-web-search > button span svg { display: block; height: 19px; width: 19px; }
.live-web-search > button i { align-items: center; color: var(--demo-muted); display: flex; font-style: normal; height: 20px; justify-content: center; margin-left: auto; width: 20px; }
.live-web-search > button i svg { display: block; height: 17px; transition: transform 160ms ease; width: 17px; }
.live-web-search > button[aria-expanded="true"] i svg, .live-folder-select[aria-expanded="true"] > i svg { transform: rotate(180deg); }
.live-web-search > button:last-child { background: #7654c9; color: white; font-size: 19px; justify-content: center; padding: 0; }
.live-search-submit-icon { display: block; height: 20px; width: 20px; }
.live-web-search input { background: transparent; border: 0; color: var(--demo-ink); font-size: 16px; font-weight: 650; min-width: 0; outline: 0; padding: 0 18px; }
.live-web-search input::placeholder, .live-bookmark-search input::placeholder { color: var(--demo-muted); opacity: .9; }
.live-dial__tools { align-items: center; display: grid; gap: 24px; grid-template-columns: minmax(255px,1fr) minmax(280px,520px) minmax(255px,1fr); margin-top: 6px; position: relative; z-index: 20; }
.live-folder-select, .live-bookmark-search { align-items: center; background: var(--demo-surface); border: 1px solid var(--demo-line); border-radius: 13px; box-shadow: var(--demo-shadow); min-height: 54px; }
.live-folder-select { color: var(--demo-ink); cursor: pointer; display: grid; grid-template-columns: 38px 1fr auto; padding: 6px 13px 6px 9px; text-align: left; }
.live-folder-select > span { align-items: center; background: rgba(90,79,99,.09); border-radius: 9px; display: flex; font-size: 20px; grid-row: 1 / 3; height: 37px; justify-content: center; width: 37px; }
.live-folder-select > span svg { height: 20px; width: 20px; }
.live-folder-select small { color: var(--demo-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.live-folder-select strong { font-size: 13px; line-height: 1.1; }
.live-folder-select i { align-items: center; color: var(--demo-muted); display: flex; font-style: normal; grid-column: 3; grid-row: 1 / 3; height: 20px; justify-content: center; width: 20px; }
.live-folder-select i svg { display: block; height: 17px; transition: transform 160ms ease; width: 17px; }
.live-bookmark-search { display: flex; padding: 0; position: relative; }
.live-bookmark-search > span { align-items: center; color: var(--demo-muted); display: flex; height: 21px; justify-content: center; left: 16px; position: absolute; width: 21px; }
.live-bookmark-search > span svg { display: block; height: 19px; width: 19px; }
.live-bookmark-search input { background: transparent; border: 0; color: var(--demo-ink); flex: 1; font-size: 14px; font-weight: 650; min-width: 0; outline: 0; padding: 0 44px; text-align: center; width: 100%; }
.live-dial__tools > small { color: var(--demo-muted); font-size: 12px; justify-self: end; }
.live-dial__section-title { align-items: center; display: flex; justify-content: space-between; margin: 19px 4px 9px; min-height: 25px; }
.live-dial__section-title strong { font-size: 13px; }
.live-dial__section-title button { background: rgba(114,81,199,.11); border: 0; border-radius: 8px; color: #6845ba; cursor: pointer; font-size: 11px; font-weight: 800; padding: 6px 10px; }

.live-demo-menu { animation: live-menu-in 150ms ease both; backdrop-filter: blur(18px) saturate(130%); background: color-mix(in srgb,var(--demo-surface) 94%,var(--demo-bg)); border: 1px solid var(--demo-line); border-radius: 15px; box-shadow: 0 24px 60px rgba(25,17,34,.22); color: var(--demo-ink); padding: 8px; position: absolute; text-align: left; z-index: 50; }
.live-demo-menu[hidden] { display: none; }
@keyframes live-menu-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: none; } }
.live-search-menu { left: 6px; top: calc(100% + 9px); width: 250px; }
.live-search-menu > small { color: var(--demo-muted); display: block; font-size: 9px; font-weight: 850; letter-spacing: .09em; padding: 7px 9px 5px; }
.live-search-menu > small:not(:first-child) { border-top: 1px solid var(--demo-line); margin-top: 5px; padding-top: 10px; }
.live-search-menu button { align-items: center; background: transparent; border: 0; border-radius: 9px; color: var(--demo-ink); cursor: pointer; display: grid; gap: 9px; grid-template-columns: 30px 1fr 18px; min-height: 40px; padding: 5px 8px; text-align: left; width: 100%; }
.live-search-menu button:hover, .live-search-menu button.is-selected { background: rgba(114,81,199,.13); color: #7654c9; }
.live-search-menu button b { align-items: center; background: rgba(114,81,199,.12); border-radius: 8px; display: flex; font-size: 11px; height: 28px; justify-content: center; width: 28px; }
.live-search-menu button strong { font-size: 12px; }
.live-search-menu button i { font-size: 12px; font-style: normal; text-align: center; }

.live-folder-menu { left: 0; max-height: 390px; overflow-y: auto; top: calc(100% + 8px); width: 410px; }
.live-folder-menu__head { align-items: center; color: var(--demo-muted); display: flex; justify-content: space-between; padding: 7px 10px 6px; }
.live-folder-menu__head strong { font-size: 10px; letter-spacing: .07em; }
.live-folder-menu__head small { font-size: 9px; }
.live-folder-menu > button { align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--demo-ink); cursor: pointer; display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto 28px; min-height: 48px; padding: 6px 8px; text-align: left; width: 100%; }
.live-folder-menu > button:hover, .live-folder-menu > button.is-selected { background: rgba(114,81,199,.13); color: #7654c9; }
.live-folder-menu > button.is-nested { padding-left: 27px; }
.live-folder-menu > button > span { display: flex; flex-direction: column; min-width: 0; }
.live-folder-menu > button strong { font-size: 13px; font-weight: 650; }
.live-folder-menu > button small { color: var(--demo-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-folder-menu > button em { color: var(--demo-muted); font-size: 11px; font-style: normal; }
.live-folder-menu > button i { align-items: center; color: var(--demo-muted); display: flex; font-size: 13px; font-style: normal; height: 28px; justify-content: center; width: 28px; }

.live-widget-menu { right: 0; top: calc(100% + 8px); width: 360px; }
.live-widget-menu__head { align-items: center; display: flex; justify-content: space-between; padding: 7px 8px 10px; }
.live-widget-menu__head > span { display: flex; flex-direction: column; }
.live-widget-menu__head strong { font-size: 13px; }
.live-widget-menu__head small { color: var(--demo-muted); font-size: 10px; }
.live-widget-menu__head em { background: rgba(114,81,199,.13); border-radius: 20px; color: #7654c9; font-size: 9px; font-style: normal; font-weight: 850; padding: 5px 8px; }
.live-widget-menu > button { align-items: center; background: transparent; border: 0; border-radius: 11px; color: var(--demo-ink); cursor: pointer; display: grid; gap: 10px; grid-template-columns: 38px minmax(0,1fr) 28px; min-height: 58px; padding: 7px 8px; text-align: left; width: 100%; }
.live-widget-menu > button:hover, .live-widget-menu > button.is-selected { background: rgba(114,81,199,.13); }
.live-widget-menu > button b { align-items: center; background: #ffe784; border-radius: 9px; color: #514413; display: flex; font-size: 11px; height: 36px; justify-content: center; width: 36px; }
.live-widget-menu > button b.is-timer { background: #25202b; color: #fff; }
.live-widget-menu > button > span { display: flex; flex-direction: column; min-width: 0; }
.live-widget-menu > button strong { font-size: 12px; }
.live-widget-menu > button small { color: var(--demo-muted); font-size: 10px; }
.live-widget-menu > button i { align-items: center; color: var(--demo-muted); display: flex; font-style: normal; justify-content: center; }
.live-widget-menu > button.is-selected i { color: #7654c9; }
.live-widget-menu > .live-widget-menu__library { border-top: 1px solid var(--demo-line); border-radius: 0 0 10px 10px; margin-top: 5px; padding-top: 10px; }
.live-widget-menu__library em { color: var(--demo-muted); font-size: 11px; font-style: normal; text-align: center; }
.live-dial__grid { display: grid; gap: 16px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.live-folder-card, .live-site-card { backface-visibility: hidden; background: var(--demo-surface); border: 1px solid var(--demo-line); border-radius: 16px; box-shadow: var(--demo-shadow); cursor: pointer; display: flex; flex-direction: column; height: 192px; min-width: 0; overflow: hidden; transform: translate3d(0,0,0); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; will-change: transform; }
.live-folder-card:hover, .live-site-card:hover, .live-folder-card:focus-visible, .live-site-card:focus-visible { border-color: rgba(114,81,199,.46); box-shadow: 0 20px 38px rgba(48,34,68,.18); outline: 0; transform: translate3d(0,-5px,0) scale(1.012); }
.live-site-card.is-selected { border-color: #7654c9; box-shadow: 0 0 0 3px rgba(118,84,201,.18), var(--demo-shadow); }
.live-site-card.is-dragging { opacity: .45; transform: scale(.96); }
.live-folder-card > div { display: grid; flex: 1 1 auto; gap: 5px; grid-template-columns: 1fr 1fr; min-height: 0; padding: 7px; }
.live-folder-card > div img { border-radius: 7px; height: 54px; object-fit: cover; width: 100%; }
.live-folder-card img, .live-site-card > img, .bookmark-folder-preview__mosaic img { backface-visibility: hidden; transform: translateZ(0); }
.live-folder-card footer, .live-site-card footer { align-items: center; border-top: 1px solid var(--demo-line); display: flex; flex: 0 0 61px; gap: 10px; padding: 9px 12px; }
.live-folder-card footer > span, .live-site-card footer > span { display: flex; flex-direction: column; min-width: 0; }
.live-folder-card footer strong, .live-site-card footer strong { font-size: 13px; line-height: 1.2; }
.live-folder-card footer small, .live-site-card footer small { color: var(--demo-muted); font-size: 10px; line-height: 1.3; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-folder-card footer > b { color: var(--demo-muted); font-size: 22px; font-weight: 400; margin-left: auto; }
.live-site-card > img { flex: 1 1 auto; min-height: 0; object-fit: cover; width: 100%; }
.live-site-card footer > b { align-items: center; background: linear-gradient(135deg,#805ddd,#513a78); border-radius: 9px; color: white; display: flex; flex: 0 0 36px; font-size: 12px; height: 36px; justify-content: center; }
.live-site-card footer > .live-favicon--shopify { background: #76a83d; }
.live-site-card footer > .live-favicon--github { background: #24292f; }
.live-site-card footer > .live-favicon--stripe { background: #635bff; }
.live-site-card footer > .live-favicon--dribbble { background: #ea4c89; }
.live-site-card footer > .live-favicon--awwwards { background: #202020; }
.live-site-card footer > .live-favicon--miro { background: #ffd02f; color: #1e2245; }
.live-site-card footer > .live-favicon--grooni { background: linear-gradient(135deg,#5d5cf6,#15b8ef); }
.live-site-card footer > .live-favicon--groovy { background: linear-gradient(135deg,#7c36d3,#ef4ca6); }
.live-site-card footer > .live-favicon--youtube { background: #ff0033; }
.live-site-card footer > img { flex: 0 0 32px; height: 36px; object-fit: contain; width: 32px; }

.live-dial.is-dark { --demo-bg: #111216; --demo-ink: #f1edf4; --demo-muted: #a59da9; --demo-surface: rgba(30,27,34,.96); --demo-line: rgba(255,255,255,.13); --demo-shadow: 0 17px 42px rgba(0,0,0,.28); }
.live-dial.is-glass { --demo-bg: #171827; --demo-ink: #fff; --demo-muted: #ddd9e6; --demo-surface: rgba(20,22,34,.43); --demo-line: rgba(255,255,255,.22); --demo-shadow: 0 18px 45px rgba(5,8,20,.32); background-image: linear-gradient(135deg,rgba(8,10,24,.12),rgba(31,21,48,.08)),url("glass-landscape-1440.webp"); background-position: center; background-size: cover; }
.live-dial.is-glass .live-folder-card, .live-dial.is-glass .live-site-card, .live-dial.is-glass .live-web-search, .live-dial.is-glass .live-folder-select, .live-dial.is-glass .live-bookmark-search { backdrop-filter: blur(9px) saturate(125%); }
.live-dial.is-glass .live-demo-menu { backdrop-filter: blur(13px) saturate(135%); background: rgba(14,17,29,.62); border-color: rgba(255,255,255,.2); box-shadow: 0 28px 70px rgba(2,5,15,.42); }
.live-dial.is-aurora { --demo-bg: #090d15; --demo-ink: #f7f4fb; --demo-muted: #c8bdce; --demo-surface: rgba(17,18,28,.4); --demo-line: rgba(255,255,255,.18); --demo-shadow: 0 18px 44px rgba(0,0,0,.32); }
.live-dial.is-aurora::before { animation: live-aurora 8s cubic-bezier(.45,.05,.55,.95) infinite alternate; background: radial-gradient(circle at 15% 24%,rgba(139,94,255,.98),transparent 25%),radial-gradient(circle at 82% 18%,rgba(45,190,230,.88),transparent 24%),radial-gradient(circle at 68% 82%,rgba(235,77,146,.76),transparent 29%),radial-gradient(circle at 18% 82%,rgba(59,198,162,.66),transparent 24%); filter: blur(27px) saturate(145%); inset: -22%; mix-blend-mode: screen; opacity: 1; }
.live-dial.is-aurora .live-folder-card, .live-dial.is-aurora .live-site-card, .live-dial.is-aurora .live-web-search, .live-dial.is-aurora .live-folder-select, .live-dial.is-aurora .live-bookmark-search { backdrop-filter: blur(10px) saturate(130%); }
@keyframes live-aurora { 0% { transform: translate3d(-7%,-5%,0) scale(1); } 45% { transform: translate3d(8%,3%,0) scale(1.1) rotate(2deg); } 100% { transform: translate3d(-2%,10%,0) scale(1.04) rotate(-2deg); } }

.bookmark-wall { padding-top: 96px; }
.bookmark-wall__head { align-items: end; display: grid; gap: 70px; grid-template-columns: 1.2fr .8fr; }
.bookmark-wall__head h2 { font-size: clamp(40px, 5vw, 66px); letter-spacing: -.055em; line-height: 1.02; margin: 16px 0 0; }
.bookmark-wall__head > p { color: var(--muted); font-size: 17px; margin: 0; }
.bookmark-wall__group { margin-top: 44px; position: relative; }
.bookmark-wall__group--plain { margin-top: 34px; }
.bookmark-wall__label { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 15px; }
.bookmark-wall__label strong { font-size: 15px; letter-spacing: -.015em; }
.bookmark-wall__label span { color: var(--muted); font-size: 12px; }
.bookmark-wall__breadcrumbs { align-items: center; display: flex; gap: 8px; min-height: 28px; }
.bookmark-wall__breadcrumbs button { background: none; border: 0; color: var(--ink); cursor: default; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.015em; padding: 4px 0; }
.bookmark-wall__breadcrumbs button.is-back { color: var(--purple-dark); cursor: pointer; }
.bookmark-wall__breadcrumbs button.is-back::before { content: "←"; margin-right: 7px; }
.bookmark-wall__breadcrumbs button.is-back:hover { color: var(--purple); }
.bookmark-wall__breadcrumbs > span { color: #a29aa6; font-size: 17px; }
.bookmark-wall__breadcrumbs > strong { font-size: 15px; }
.bookmark-wall__grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.bookmark-wall__grid[hidden] { display: none; }
.bookmark-wall__grid article { backface-visibility: hidden; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 36px rgba(39, 31, 47, .08); display: flex; flex-direction: column; min-height: 0; overflow: hidden; transform: translate3d(0,0,0); transition: border-color 180ms ease, box-shadow 220ms ease, opacity 180ms ease, transform 220ms ease; will-change: transform; }
.bookmark-wall__grid article:hover { border-color: rgba(114,81,199,.26); box-shadow: 0 20px 44px rgba(39,31,47,.14); transform: translate3d(0,-5px,0); }
.bookmark-wall__grid--visual { position: relative; }
.bookmark-wall__grid article[draggable="true"] { cursor: grab; }
.bookmark-wall__grid article[draggable="true"]:active { cursor: grabbing; }
.bookmark-wall__grid article.is-demo-dragging,.bookmark-wall__grid article.is-dragging { opacity: .46 !important; transform: scale(.985); }
.bookmark-wall__grid article.is-drop-before,.bookmark-wall__grid article.is-drop-after { overflow: visible; position: relative; }
.bookmark-wall__grid article.is-drop-before::after,.bookmark-wall__grid article.is-drop-after::after { background: #6657e8; border-radius: 999px; bottom: 10px; box-shadow: 0 0 0 3px rgba(102,87,232,.17); content: ""; pointer-events: none; position: absolute; top: 10px; width: 4px; z-index: 9; }
.bookmark-wall__grid article.is-drop-before::after { left: -10px; }
.bookmark-wall__grid article.is-drop-after::after { right: -10px; }
.live-dial__grid .live-site-card.is-drop-before,.live-dial__grid .live-site-card.is-drop-after { overflow: visible; position: relative; }
.live-dial__grid .live-site-card.is-drop-before::after,.live-dial__grid .live-site-card.is-drop-after::after { background: #6657e8; border-radius: 999px; bottom: 10px; box-shadow: 0 0 0 3px rgba(102,87,232,.17); content: ""; pointer-events: none; position: absolute; top: 10px; width: 4px; z-index: 9; }
.live-dial__grid .live-site-card.is-drop-before::after { left: -10px; }
.live-dial__grid .live-site-card.is-drop-after::after { right: -10px; }
.is-touch-dragging { opacity: .58 !important; transform: scale(.97) !important; }
html.is-touch-reordering { overscroll-behavior: none; user-select: none; }
.bookmark-drop-marker { background: #6657e8; border-radius: 999px; box-shadow: 0 0 0 3px rgba(102,87,232,.17); pointer-events: none; position: absolute; width: 4px; z-index: 6; }
.bookmark-drop-marker[hidden] { display: none; }
.bookmark-reorder-ghost { box-shadow: 0 30px 70px rgba(49,36,61,.3) !important; margin: 0 !important; opacity: .94; pointer-events: none; position: absolute !important; transform: translate3d(0,0,0); transform-origin: center; transition: transform 900ms cubic-bezier(.2,.8,.2,1); z-index: 7; }
.bookmark-reorder-demo { align-items: center; background: #211d26; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; box-shadow: 0 18px 42px rgba(35,27,42,.24); color: white; display: flex; gap: 10px; left: 11%; opacity: 0; padding: 10px 13px; pointer-events: none; position: absolute; top: 58%; transform: translate(-50%,-50%) scale(.92); transition: left 900ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease,top 900ms cubic-bezier(.2,.8,.2,1),transform 200ms ease; z-index: 8; }
.bookmark-reorder-demo.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.bookmark-reorder-demo svg { fill: #fff; height: 30px; stroke: #241f29; stroke-linejoin: round; stroke-width: 2; width: 25px; }
.bookmark-reorder-demo span { display: flex; flex-direction: column; white-space: nowrap; }
.bookmark-reorder-demo strong { font-size: 11px; }
.bookmark-reorder-demo small { color: #bdb4c2; font-size: 8px; margin-top: 2px; }
.bookmark-wall__grid article > img { aspect-ratio: 2.15 / 1; backface-visibility: hidden; display: block; flex: 0 0 auto; height: auto; object-fit: cover; transform: translateZ(0); width: 100%; }
.bookmark-folder-preview { cursor: pointer; }
.bookmark-folder-preview:focus-visible { box-shadow: 0 0 0 4px rgba(114,81,199,.2),0 16px 36px rgba(39,31,47,.08); outline: 2px solid var(--purple); outline-offset: 2px; }
.bookmark-folder-preview__mosaic { aspect-ratio: 2.15 / 1; background: #e9e5ec; display: grid; gap: 3px; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); min-height: 0; overflow: hidden; padding: 3px; }
.bookmark-folder-preview__mosaic img { display: block; height: 100%; min-height: 0; min-width: 0; object-fit: cover; width: 100%; }
.bookmark-folder-preview footer > b { background: var(--purple); }
.bookmark-folder-preview footer > em { align-items: center; background: var(--purple-soft); border-radius: 50%; color: var(--purple-dark); display: flex; font-size: 20px; font-style: normal; height: 30px; justify-content: center; margin-left: auto; width: 30px; }
.bookmark-wall__grid--folder { animation: folder-grid-enter 260ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes folder-grid-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bookmark-wall__plain-grid { display: grid; gap: 12px; grid-template-columns: repeat(4,1fr); }
.bookmark-wall__plain-grid article { align-items: center; background: white; border: 1px solid var(--line); border-radius: 15px; display: flex; gap: 12px; min-height: 82px; padding: 14px; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.bookmark-wall__plain-grid article:hover { border-color: rgba(114,81,199,.38); box-shadow: 0 13px 28px rgba(39,31,47,.1); transform: translateY(-3px); }
.bookmark-wall__plain-grid article > b { align-items: center; background: var(--purple-soft); border-radius: 11px; color: var(--purple-dark); display: flex; flex: 0 0 42px; height: 42px; justify-content: center; }
.bookmark-wall__plain-grid article > span { display: flex; flex-direction: column; min-width: 0; }
.bookmark-wall__plain-grid strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-wall__plain-grid small { color: var(--muted); font-size: 11px; }
.bookmark-wall__grid--fallback article { box-shadow: 0 16px 36px rgba(39,31,47,.07); }
.bookmark-wall__fallback { align-items: center; aspect-ratio: 2.15 / 1; background: color-mix(in srgb, var(--fallback-tone) 12%, #f0eef2); color: var(--fallback-tone); display: flex; justify-content: center; overflow: hidden; position: relative; }
.bookmark-wall__fallback::before { background: var(--fallback-tone); border-radius: 50%; content: ""; filter: blur(1px); height: 110px; opacity: .07; position: absolute; right: -22px; top: -34px; width: 110px; }
.bookmark-wall__fallback > b { font-size: clamp(42px,4.4vw,68px); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.bookmark-wall__grid--fallback footer > b { background: var(--fallback-tone); }
.bookmark-wall__grid footer, .smart-tile footer { align-items: center; display: flex; gap: 11px; min-height: 58px; padding: 10px 13px; }
.bookmark-wall__grid footer > b, .smart-tile footer > b { align-items: center; background: var(--ink); border-radius: 10px; color: white; display: inline-flex; flex: 0 0 auto; font-size: 12px; height: 36px; justify-content: center; min-width: 36px; padding-inline: 7px; }
.bookmark-wall__grid footer > span, .smart-tile footer > span { display: flex; flex-direction: column; min-width: 0; }
.bookmark-wall__grid footer strong, .smart-tile footer strong { font-size: 13px; }
.bookmark-wall__grid footer small, .smart-tile footer small { color: var(--muted); font-size: 10px; }

.intro { padding-block: 118px 108px; }
.section-heading { max-width: 800px; }
.section-heading h2, .showcase h2, .ai-copy h2, .privacy h2, .plans h2 {
  font-size: clamp(40px, 5vw, 67px);
  letter-spacing: -.055em;
  line-height: 1.02;
  margin: 17px 0 22px;
}
.section-heading > p { color: var(--muted); font-size: 19px; margin: 0; max-width: 720px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center .eyebrow { justify-content: center; }
.section-heading--center > p { color: var(--muted); font-size: 17px; margin: 18px auto 0; max-width: 780px; }

.steps { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
.steps article { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.steps b { color: var(--purple); font-size: 13px; letter-spacing: .08em; }
.steps h3 { font-size: 24px; letter-spacing: -.035em; margin: 32px 0 8px; }
.steps p { color: var(--muted); margin: 0; }

.showcases { display: grid; gap: 128px; padding-block: 130px; }
.showcase { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); }
.showcase--reverse { grid-template-columns: minmax(330px, .75fr) minmax(0, 1.25fr); }
.showcase--reverse .showcase-media { order: 2; }
.showcase-media { background: #e8e1d9; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.showcase-media img { height: auto; width: 100%; }
.showcase-media--pinning video { aspect-ratio: 20 / 11; display: block; height: auto; object-fit: contain; width: 100%; }
.showcase-media--dark { background: #111216; }
.showcase-media--settings video { aspect-ratio: 8 / 5; display: block; height: auto; object-fit: cover; width: 100%; }
.showcase-media video { backface-visibility: hidden; transform: translateZ(0); }
.focus-stage { aspect-ratio: 16 / 10; background: radial-gradient(circle at 72% 70%,rgba(99,67,132,.16),transparent 28%),#101115; color: #f4f0f5; min-height: 430px; overflow: hidden; padding: 25px; position: relative; }
.focus-stage__brand { align-items: center; color: #7957ca; display: flex; font-size: 13px; gap: 8px; }
.focus-stage__brand > span { align-items: center; background: #7654c9; border-radius: 8px; color: white; display: flex; height: 30px; justify-content: center; width: 30px; }
.focus-stage__search { align-items: center; background: #1a181e; border: 1px solid #403a45; border-radius: 11px; color: #8e8792; display: flex; gap: 10px; height: 42px; margin: 20px auto 18px; max-width: 70%; padding: 0 15px; }
.focus-stage__search span { font-size: 11px; font-weight: 700; }
.focus-stage__tiles { display: grid; gap: 11px; grid-template-columns: repeat(3,1fr); padding-top: 12px; width: 72%; }
.focus-stage__tiles article { background: #18161c; border: 1px solid #39343e; border-radius: 11px; min-width: 0; overflow: hidden; }
.focus-stage__tiles img { aspect-ratio: 1.9 / 1; object-fit: cover; width: 100%; }
.focus-stage__tiles span { display: block; font-size: 10px; font-weight: 750; padding: 8px 9px; }
.focus-stage__note { background: #ffe99a; border: 1px solid rgba(105,80,18,.2); border-radius: 11px; box-shadow: 0 18px 42px rgba(0,0,0,.32); color: #4a3d1d; height: 49%; left: 22px; overflow: hidden; position: absolute; top: 31%; transform: rotate(-1.5deg); width: 37%; z-index: 2; }
.focus-stage__note header { cursor: grab; display: flex; font-size: 11px; font-weight: 850; justify-content: space-between; padding: 11px 13px; }
.focus-stage__note > div { font-family: "Segoe Print","Bradley Hand",cursive; font-size: clamp(10px,1.25vw,16px); height: calc(100% - 39px); line-height: 1.55; outline: 0; overflow: auto; padding: 5px 16px 15px; white-space: pre-wrap; }
.focus-stage__timer { background: #211d27; border: 1px solid #504758; border-radius: 15px; bottom: 7%; box-shadow: 0 22px 50px rgba(0,0,0,.45); padding: 12px; position: absolute; right: 3%; width: 27%; z-index: 3; }
.focus-stage__timer header { display: flex; font-size: 10px; font-weight: 850; justify-content: space-between; }
.focus-stage__timer header span { color: #f08b55; }
.focus-stage__timer > div { align-items: center; background: repeating-conic-gradient(from -2deg,#ee8751 0 2deg,transparent 2deg 6deg); border-radius: 50%; display: flex; flex-direction: column; height: 112px; justify-content: center; margin: 12px auto; position: relative; width: 112px; }
.focus-stage__timer > div::before { background: #151218; border-radius: 50%; content: ""; inset: 8px; position: absolute; }
.focus-stage__timer strong, .focus-stage__timer small { position: relative; z-index: 1; }
.focus-stage__timer strong { font-family: Bahnschrift,"Arial Narrow",sans-serif; font-size: 25px; }
.focus-stage__timer small { color: #948b98; font-size: 7px; }
.focus-stage__timer footer { display: flex; gap: 7px; justify-content: center; }
.focus-stage__timer button { background: #3b3048; border: 0; border-radius: 8px; color: white; cursor: pointer; height: 31px; width: 36px; }
.focus-stage__timer button:first-child { background: #7654c9; }
.focus-stage__timer button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.focus-stage--wide { border: 1px solid #3a333f; border-radius: 24px 0 0 24px; box-shadow: 0 35px 90px rgba(0,0,0,.38); flex: 0 0 auto; max-width: none; width: max(100%,min(920px,66vw)); }
.showcase h2 { font-size: clamp(39px, 4.3vw, 58px); }
.showcase-copy > p { color: var(--muted); font-size: 17px; margin: 0; }

.check-list { display: grid; gap: 11px; list-style: none; margin: 25px 0 0; padding: 0; }
.check-list li { padding-left: 26px; position: relative; }
.check-list li::before { color: var(--purple); content: "✓"; font-weight: 900; left: 0; position: absolute; top: 0; }

.focus-lab { background: #151319; color: white; padding-block: 112px; }
.focus-lab__inner { display: grid; gap: 64px; grid-template-columns: .85fr 1.15fr; }
.focus-lab__copy h2 { font-size: clamp(44px, 5vw, 69px); letter-spacing: -.058em; line-height: 1.01; margin: 18px 0 24px; }
.focus-lab__copy > p { color: #b8b1bd; font-size: 17px; margin: 0; max-width: 620px; }
.focus-benefits { border-top: 1px solid #353039; display: grid; margin-top: 34px; }
.focus-benefits article { display: grid; gap: 4px; grid-template-columns: 1fr; padding: 19px 0; }
.focus-benefits article + article { border-top: 1px solid #353039; }
.focus-benefits h3 { font-size: 17px; margin: 0; }
.focus-benefits p { color: #918a96; font-size: 13px; margin: 0; }
.focus-lab__product { align-self: center; display: flex; justify-content: flex-end; min-width: 0; position: relative; }
.focus-lab__product > img,.focus-lab__product > video { aspect-ratio: 20 / 11; border: 1px solid #3a333f; border-radius: 24px; box-shadow: 0 35px 90px rgba(0,0,0,.38); display: block; max-width: none; object-fit: contain; width: 100%; }
.focus-lab__product > video { backface-visibility: hidden; transform: translateZ(0); }
.focus-legend { background: #211d26; border: 1px solid #38313d; border-radius: 22px; display: grid; gap: 0; grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 8px; overflow: hidden; }
.focus-legend article { display: flex; flex-direction: column; min-width: 0; padding: 22px; }
.focus-legend article + article { border-left: 1px solid #38313d; }
.focus-legend strong { font-size: 16px; line-height: 1.38; margin-top: 15px; }
.bookmark-chip, .note-chip, .timer-chip, .toolbar-chip { align-self: flex-start; border-radius: 9px; font-size: 11px; font-weight: 900; letter-spacing: .03em; padding: 8px 10px; text-transform: uppercase; }
.bookmark-chip { background: #282f43; color: #cbd4ff; }
.note-chip { background: #ffe99b; color: #59491b; }
.timer-chip { background: #4a2c34; color: #ffc095; }
.toolbar-chip { background: #382b4c; color: #d2bdff; }
.focus-toolbar { align-items: center; background: rgba(35, 30, 40, .92); backdrop-filter: blur(18px); border: 1px solid #51445d; border-radius: 16px; bottom: -28px; box-shadow: 0 18px 45px rgba(0,0,0,.35); display: grid; gap: 0 12px; grid-template-columns: 46px 1fr auto; left: 34px; padding: 12px 16px; position: absolute; right: 34px; }
.focus-toolbar__mark { align-items: center; background: linear-gradient(145deg, #ef8a54, #6d3d29); border-radius: 12px; display: inline-flex; font-size: 12px; font-weight: 900; grid-row: 1 / 3; height: 42px; justify-content: center; width: 42px; }
.focus-toolbar small { color: #9d8ca7; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.focus-toolbar strong { display: block; font-size: 13px; }
.focus-toolbar em { color: #aaa1ae; font-size: 10px; font-style: normal; }

.capabilities { background: #211d26; color: white; padding-block: 112px; }
.section-heading--split { align-items: end; display: grid; gap: 80px; grid-template-columns: 1.35fr .65fr; max-width: none; }
.section-heading--split h2 { margin-bottom: 0; }
.section-heading--split > p { color: #bdb5c2; font-size: 17px; }
.capability-grid { display: grid; gap: 14px; grid-template-columns: repeat(4,1fr); margin-top: 64px; }
.capability-grid article { --cap-accent: #a989f0; background: linear-gradient(145deg,#29232e,#211d26); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; min-height: 235px; overflow: hidden; padding: 30px; position: relative; transition: border-color 220ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1); }
.capability-grid article:nth-child(3n+2) { --cap-accent: #67c6d8; }
.capability-grid article:nth-child(3n) { --cap-accent: #ee9b6b; }
.capability-grid article::after { background: radial-gradient(circle,var(--cap-accent),transparent 67%); content: ""; height: 150px; opacity: 0; position: absolute; right: -70px; top: -70px; transform: scale(.7); transition: opacity 240ms ease, transform 300ms ease; width: 150px; }
.capability-grid article:hover { border-color: color-mix(in srgb,var(--cap-accent) 65%,transparent); box-shadow: 0 22px 50px rgba(0,0,0,.28); transform: translateY(-7px); }
.capability-grid article:hover::after { opacity: .2; transform: scale(1.2); }
.capability-card--wide { grid-column: span 2; }
.capability-icon { align-items: center; background: color-mix(in srgb,var(--cap-accent) 16%,#28222e); border: 1px solid color-mix(in srgb,var(--cap-accent) 35%,transparent); border-radius: 15px; color: var(--cap-accent); display: inline-flex; height: 52px; justify-content: center; transition: background-color 220ms ease, box-shadow 220ms ease, transform 240ms ease; width: 52px; }
.capability-icon svg { fill: none; height: 25px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 25px; }
.capability-grid article:hover .capability-icon { background: color-mix(in srgb,var(--cap-accent) 25%,#28222e); box-shadow: 0 10px 25px color-mix(in srgb,var(--cap-accent) 18%,transparent); transform: rotate(-5deg) scale(1.08); }
.capability-grid h3 { font-size: 21px; letter-spacing: -.025em; margin: 31px 0 10px; position: relative; z-index: 1; }
.pro-label { background: var(--purple-soft); border-radius: 999px; color: var(--purple-dark); display: inline-block; font-size: 10px; font-style: normal; letter-spacing: .08em; margin-left: 6px; padding: 5px 7px; vertical-align: 3px; }
.capability-grid p { color: #ada5b2; font-size: 14px; line-height: 1.55; margin: 0; max-width: 460px; position: relative; z-index: 1; }

.organize-section { padding-block: 124px; }
.organize-section .section-heading { max-width: 920px; }
.organize-demo { align-items: stretch; display: grid; gap: 22px; grid-template-columns: 1.05fr .95fr 1.05fr; margin-top: 58px; }
.organize-search, .organize-flow, .organize-copy { border-radius: 26px; min-height: 440px; padding: 30px; transition: box-shadow 220ms ease, transform 220ms ease; }
.organize-search:hover, .organize-flow:hover, .organize-copy:hover { box-shadow: 0 24px 55px rgba(40,31,48,.16); transform: translateY(-6px); }
.organize-search { background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.organize-card-head { margin-bottom: 26px; }
.organize-card-head > span { color: var(--purple); font-size: 14px; font-weight: 850; letter-spacing: .02em; }
.organize-card-head h3 { font-size: 29px; letter-spacing: -.045em; line-height: 1.08; margin: 10px 0 10px; }
.organize-card-head p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; }
.organize-card-head--dark > span { color: #c5a9ff; }
.organize-card-head--dark p { color: #a79fab; }
.organize-search__input { align-items: center; background: #f3eef8; border: 1px solid #ded3eb; border-radius: 14px; display: grid; gap: 12px; grid-template-columns: auto 1fr; margin: 10px 0 19px; min-height: 58px; padding: 16px 17px; }
.organize-search__input span { color: var(--purple); }
.organize-search__input strong { font-size: 17px; line-height: 1.3; }
.organize-search__input kbd { background: white; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 11px; padding: 4px 7px; }
.organize-search__result { align-items: center; border-radius: 13px; display: grid; gap: 11px; grid-template-columns: 40px 1fr auto; margin-top: 7px; padding: 12px; transition: background-color 160ms ease, transform 160ms ease; }
.organize-search__result:hover { background: #f3eef8; transform: translateX(4px); }
.organize-search__result.is-active { background: var(--purple-soft); }
.organize-search__result > b { align-items: center; background: var(--ink); border-radius: 9px; color: white; display: flex; height: 40px; justify-content: center; width: 40px; }
.organize-search__result > span { display: flex; flex-direction: column; min-width: 0; }
.organize-search__result strong { font-size: 15px; }
.organize-search__result small { color: var(--muted); font-size: 13px; }
.organize-search__result em { color: var(--purple-dark); font-size: 13px; font-style: normal; font-weight: 850; }
.organize-flow { background: #211d26; color: white; display: flex; flex-direction: column; }
.selection-bar { align-items: center; background: #332c39; border-radius: 12px; display: flex; font-size: 12px; gap: 9px; padding: 12px; }
.selection-bar strong { margin-right: auto; }
.selection-bar span { background: #494050; border-radius: 8px; padding: 6px 8px; }
.selection-bar .is-danger { background: #562f3a; color: #ffc0ce; }
.moving-tile, .folder-target { align-items: center; border: 1px solid #47404c; border-radius: 14px; display: grid; gap: 4px 10px; grid-template-columns: auto 1fr; padding: 17px; }
.moving-tile { background: #2a252e; box-shadow: 0 14px 32px rgba(0,0,0,.28); margin-top: 25px; transform: rotate(-1deg); }
.moving-tile i { color: #776e7d; font-style: normal; grid-row: 1 / 3; }
.moving-tile b, .folder-target b { font-size: 14px; }
.moving-tile small { color: #a59dab; font-size: 11px; }
.move-arrow { color: #997bdd; font-size: 20px; padding: 7px; text-align: center; }
.folder-target { background: #32263f; border-color: #60477b; grid-template-columns: auto 1fr auto; }
.folder-target span { color: #c4a9ff; }
.folder-target em { color: #bca5e8; font-size: 10px; font-style: normal; font-weight: 800; }
.organize-copy { background: var(--purple-soft); display: flex; flex-direction: column; justify-content: center; }
.organize-copy > span { color: var(--purple); font-size: 14px; font-weight: 850; letter-spacing: .02em; }
.organize-copy h3 { font-size: 34px; letter-spacing: -.045em; line-height: 1.08; margin: 14px 0; }
.organize-copy > p { color: var(--muted); font-size: 15px; margin: 0; }
.organize-copy .check-list { font-size: 16px; margin-top: 22px; }
.suggestion-example { background: rgba(255,255,255,.72); border: 1px solid rgba(114,81,199,.18); border-radius: 14px; display: flex; flex-direction: column; margin-top: 18px; padding: 14px; }
.suggestion-example > small { color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.suggestion-example > strong { font-size: 16px; margin-top: 5px; }
.suggestion-example > span { display: flex; gap: 7px; margin-top: 11px; }
.suggestion-example button { background: white; border: 1px solid rgba(114,81,199,.22); border-radius: 9px; color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; padding: 8px 12px; transition: transform 150ms ease; }
.suggestion-example button:hover { transform: translateY(-2px); }
.suggestion-example button:last-child { background: var(--purple); color: white; }

.ai-section { align-items: center; display: grid; gap: 72px; grid-template-columns: .9fr 1.1fr; padding-block: 125px; }
.ai-copy h2 { font-size: clamp(42px, 4.6vw, 61px); }
.ai-copy > p { color: var(--muted); font-size: 17px; }
.ai-rules { display: grid; gap: 15px; margin-top: 32px; }
.ai-rules span { align-items: center; display: flex; font-size: 17px; font-weight: 750; gap: 14px; line-height: 1.35; }
.ai-rules b { align-items: center; background: var(--purple-soft); border-radius: 50%; color: var(--purple-dark); display: inline-flex; flex: 0 0 38px; font-size: 15px; height: 38px; justify-content: center; width: 38px; }
.ai-disclosure { background: #f0eafa; border: 1px solid rgba(114,81,199,.2); border-radius: 16px; display: flex; flex-direction: column; margin-top: 25px; padding: 17px 18px; }
.ai-disclosure strong { color: var(--purple-dark); font-size: 16px; }
.ai-disclosure span { color: #625a68; font-size: 14px; line-height: 1.5; margin-top: 4px; }

.meaning-demo { background: #19161d; border: 1px solid #332e38; border-radius: 28px; box-shadow: 0 32px 80px rgba(34,27,42,.22); color: white; overflow: hidden; padding: 28px; }
.meaning-demo__query { background: #292331; border: 1px solid #4b3d5c; border-radius: 18px; padding: 22px 24px; }
.meaning-demo__query span, .meaning-demo__result > span { color: #c5a9ff; display: block; font-size: 13px; font-weight: 850; letter-spacing: .08em; margin-bottom: 10px; }
.meaning-demo__query strong { display: block; font-size: clamp(21px,2.2vw,28px); letter-spacing: -.025em; line-height: 1.2; }
.meaning-demo__connector { align-items: center; display: grid; gap: 14px; grid-template-columns: 1fr auto 1fr; padding: 17px 8px; }
.meaning-demo__connector i { background: #4b4053; height: 1px; }
.meaning-demo__connector b { align-items: center; background: var(--purple); border-radius: 50%; box-shadow: 0 0 0 7px rgba(114,81,199,.15); display: flex; font-size: 13px; height: 42px; justify-content: center; letter-spacing: .04em; width: 42px; }
.meaning-demo__result { background: #f7f3ed; border-radius: 18px; color: var(--ink); padding: 23px 24px 22px; }
.meaning-demo__result > span { color: var(--purple-dark); margin-bottom: 15px; }
.meaning-demo__result > div { align-items: center; display: grid; gap: 15px; grid-template-columns: 54px 1fr; }
.meaning-demo__result > div > b { align-items: center; background: var(--purple); border-radius: 13px; color: white; display: flex; font-size: 22px; height: 54px; justify-content: center; width: 54px; }
.meaning-demo__result > div > strong { font-size: clamp(22px,2.4vw,31px); letter-spacing: -.035em; line-height: 1.08; }
.meaning-demo__result p { color: #655f69; font-size: 16px; line-height: 1.45; margin: 18px 0 20px; }
.meaning-demo__result button { background: var(--ink); border: 0; border-radius: 12px; color: white; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; padding: 13px 17px; }

.semantic-demo { background: #19161d; border: 1px solid #332e38; border-radius: 28px; box-shadow: 0 32px 80px rgba(34,27,42,.22); color: white; min-height: 590px; overflow: hidden; padding: 26px; position: relative; }
.semantic-demo__search { align-items: center; background: #2a2431; border: 1px solid #544463; border-radius: 16px; display: grid; gap: 14px; grid-template-columns: 24px 1fr; min-height: 66px; padding: 0 17px; }
.semantic-demo__search svg { fill: none; height: 22px; stroke: #c6a7ff; stroke-linecap: round; stroke-width: 1.8; width: 22px; }
.semantic-demo__search strong { display: block; font-size: 17px; min-width: 0; overflow: hidden; }
.semantic-demo__search strong span { display: block; overflow: hidden; white-space: nowrap; width: 0; }
.semantic-demo__search kbd { background: #403747; border: 1px solid #5e5265; border-radius: 7px; color: #c5bdc9; font: inherit; font-size: 12px; padding: 5px 8px; }
.semantic-demo__status { height: 50px; position: relative; }
.semantic-demo__status > span { align-items: center; display: flex; font-size: 15px; font-weight: 750; gap: 10px; inset: 0; opacity: 0; position: absolute; }
.semantic-demo__status i { align-items: center; background: #34283f; border-radius: 50%; color: #c6a7ff; display: inline-flex; font-style: normal; height: 30px; justify-content: center; width: 30px; }
.semantic-demo__found i { background: #dff4df; color: #286334; }
.semantic-demo__progress { background: #37313b; border-radius: 999px; height: 4px; overflow: hidden; }
.semantic-demo__progress i { background: linear-gradient(90deg,#7251c7,#c19fff); display: block; height: 100%; transform: scaleX(0); transform-origin: left; }
.semantic-demo__results { min-height: 330px; position: relative; }
.semantic-demo__skeleton { display: grid; gap: 11px; inset: 22px 0 0; position: absolute; }
.semantic-demo__skeleton i { background: linear-gradient(90deg,#252129,#35303a,#252129); background-size: 220% 100%; border: 1px solid #39333e; border-radius: 14px; height: 82px; opacity: .82; }
.semantic-demo__result { background: #f7f3ed; border-radius: 18px; color: var(--ink); display: grid; gap: 0; grid-template-columns: 175px 1fr; inset: 22px 0 0; min-height: 286px; opacity: 0; overflow: hidden; position: absolute; transform: translateY(22px) scale(.98); }
.semantic-demo__result > img { height: 100%; object-fit: cover; width: 100%; }
.semantic-demo__result > div { padding: 23px; }
.semantic-demo__result span { color: var(--purple-dark); display: inline-block; font-size: 13px; font-weight: 850; letter-spacing: .025em; }
.semantic-demo__result h3 { font-size: 28px; letter-spacing: -.04em; line-height: 1.08; margin: 10px 0 5px; }
.semantic-demo__result small { color: #6f6872; font-size: 14px; }
.semantic-demo__result p { background: #ece5f4; border-radius: 10px; color: #554d59; font-size: 15px; line-height: 1.45; margin: 18px 0; padding: 12px 13px; }
.semantic-demo__result mark { background: #d7c2ff; border-radius: 3px; color: #392858; padding: 1px 3px; }
.semantic-demo__result footer { display: flex; gap: 9px; }
.semantic-demo__result button { background: var(--ink); border: 1px solid var(--ink); border-radius: 10px; color: white; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; min-height: 42px; padding: 0 14px; }
.semantic-demo__result button + button { background: transparent; color: var(--ink); }
.semantic-demo__foot { align-items: center; display: flex; font-size: 14px; justify-content: space-between; opacity: 0; padding-top: 14px; }
.semantic-demo__foot span { color: #aaa2ae; }
.semantic-demo__cursor { background: #7251c7; border: 3px solid white; border-radius: 50%; bottom: 57px; box-shadow: 0 0 0 7px rgba(114,81,199,.2); height: 25px; opacity: 0; position: absolute; right: 260px; width: 25px; }
.semantic-demo.is-active .semantic-demo__search strong span { animation: semantic-type 9s steps(56,end) infinite; }
.semantic-demo.is-active .semantic-demo__scanning { animation: semantic-scan 9s ease infinite; }
.semantic-demo.is-active .semantic-demo__found { animation: semantic-found 9s ease infinite; }
.semantic-demo.is-active .semantic-demo__progress i { animation: semantic-progress 9s ease infinite; }
.semantic-demo.is-active .semantic-demo__skeleton { animation: semantic-skeleton 9s ease infinite; }
.semantic-demo.is-active .semantic-demo__skeleton i { animation: semantic-shimmer 1.2s linear infinite; }
.semantic-demo.is-active .semantic-demo__result { animation: semantic-result 9s cubic-bezier(.2,.8,.2,1) infinite; }
.semantic-demo.is-active .semantic-demo__foot { animation: semantic-foot 9s ease infinite; }
.semantic-demo.is-active .semantic-demo__cursor { animation: semantic-cursor 9s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes semantic-type { 0%,5%{width:0} 25%,92%{width:100%} 96%,100%{width:0} }
@keyframes semantic-scan { 0%,22%{opacity:0} 27%,48%{opacity:1} 54%,100%{opacity:0} }
@keyframes semantic-found { 0%,49%{opacity:0} 56%,92%{opacity:1} 96%,100%{opacity:0} }
@keyframes semantic-progress { 0%,25%{transform:scaleX(0)} 50%{transform:scaleX(1)} 51%,100%{transform:scaleX(0)} }
@keyframes semantic-skeleton { 0%,24%{opacity:0} 29%,48%{opacity:1} 54%,100%{opacity:0} }
@keyframes semantic-shimmer { to{background-position:-220% 0} }
@keyframes semantic-result { 0%,49%{opacity:0;transform:translateY(22px) scale(.98)} 57%,92%{opacity:1;transform:none} 97%,100%{opacity:0;transform:translateY(-8px) scale(.99)} }
@keyframes semantic-foot { 0%,57%{opacity:0} 64%,92%{opacity:1} 97%,100%{opacity:0} }
@keyframes semantic-cursor { 0%,65%{opacity:0;transform:translate(70px,30px)} 72%{opacity:1;transform:none} 79%{opacity:1;transform:translate(-112px,-10px) scale(.78)} 84%,100%{opacity:0;transform:translate(-112px,-10px)} }

.ai-demo { background: #17141b; border-radius: 28px; box-shadow: var(--shadow); color: white; overflow: hidden; padding: 22px; }
.ai-demo__top { align-items: center; border-bottom: 1px solid #39333e; display: flex; justify-content: space-between; padding: 2px 4px 18px; }
.ai-demo__top span { font-size: 14px; font-weight: 800; }
.ai-demo__top em { color: #a88eea; font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ai-query { align-items: center; background: #292131; border: 1px solid #493a5b; border-radius: 15px; display: flex; gap: 14px; margin: 20px 0; padding: 16px; }
.ai-query i { color: #bc9cff; font-size: 20px; font-style: normal; }
.ai-query span { display: flex; flex-direction: column; }
.ai-query small { color: #93889b; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ai-query strong { font-size: 15px; }
.ai-result { align-items: center; border: 1px solid #343039; border-radius: 13px; display: grid; gap: 12px; grid-template-columns: 48px 1fr auto; margin-top: 9px; padding: 14px; }
.ai-result.is-best { background: #251d2e; border-color: #624a7f; }
.ai-result > b { color: #c8adff; }
.ai-result > span { display: flex; flex-direction: column; min-width: 0; }
.ai-result span strong { font-size: 14px; }
.ai-result small, .ai-result em { color: #928a97; font-size: 11px; }
.ai-result em { font-style: normal; white-space: nowrap; }
.ai-demo__foot { color: #77707c; font-size: 10px; padding: 16px 4px 0; text-align: center; }

.smart-tiles { background: #211d26; color: white; padding-block: 116px; }
.smart-stage { align-items: start; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-top: 60px; min-height: 270px; position: relative; }
.smart-tile { backface-visibility: hidden; background: #f7f3ed; border: 1px solid transparent; border-radius: 18px; box-shadow: 0 12px 28px rgba(0,0,0,.16); color: var(--ink); cursor: pointer; height: 270px; overflow: hidden; position: relative; transform: translate3d(0,0,0); transition: box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); will-change: transform; }
.smart-tile:hover, .smart-tile:focus-visible, .smart-tile.is-active { border-color: transparent; box-shadow: 0 26px 58px rgba(0,0,0,.38); outline: 0; transform: translate3d(0,-8px,0); z-index: 2; }
.smart-tile footer { background: white; bottom: 0; left: 0; position: absolute; right: 0; }
.smart-tile--google { align-items: center; background: linear-gradient(145deg, #fff, #eef3ff); display: flex; flex-direction: column; padding: 27px 16px 76px; }
.google-g { background: conic-gradient(from -30deg, #4285f4 0 25%, #34a853 0 46%, #fbbc05 0 67%, #ea4335 0 82%, #4285f4 0); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 48px; font-weight: 900; line-height: 1; transition: filter 220ms ease, transform 240ms ease; }
.saved-query { align-items: flex-start; background: white; border: 1px solid #dce1ea; border-radius: 11px; display: flex; gap: 8px; margin-top: 18px; padding: 10px; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; width: 100%; }
.saved-query span { color: #7a8491; }
.saved-query strong { font-size: 11px; line-height: 1.35; }
.smart-tile--google > small { color: #8a929d; font-size: 9px; margin-top: 8px; }
.smart-tile--pdf { background: #d6d0c9; padding: 18px 38px 76px; }
.pdf-page { background: white; box-shadow: 0 12px 26px rgba(39,33,45,.15); color: #312c35; display: flex; flex-direction: column; height: 172px; padding: 18px; transform-origin: center bottom; transition: box-shadow 220ms ease, transform 240ms cubic-bezier(.2,.8,.2,1); }
.pdf-page > b { color: #d84646; font-size: 8px; letter-spacing: .1em; }
.pdf-page > strong { font-size: 14px; margin-top: 15px; }
.pdf-page > span { color: #817a84; font-size: 8px; margin-bottom: 12px; }
.pdf-page i { background: #ded9df; height: 4px; margin-top: 6px; width: 90%; }
.pdf-page i:last-child { width: 58%; }
.video-cover { align-items: center; background-image: linear-gradient(135deg, rgba(8,8,12,.2), rgba(32,8,14,.5)), url("site-covers/dribbble-640.webp"); background-position: center; background-size: 105%; display: flex; height: 202px; justify-content: center; position: relative; transition: background-size 420ms cubic-bezier(.2,.8,.2,1), filter 220ms ease; }
.video-cover { background: #0a0a0d; isolation: isolate; overflow: hidden; }
.video-cover::after { background: linear-gradient(180deg,rgba(7,7,10,.05),rgba(7,7,10,.38)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.video-cover > img { backface-visibility: hidden; height: 100%; inset: 0; object-fit: cover; pointer-events: none; position: absolute; transform: translateZ(0) scale(1.03); width: 100%; }
.video-cover > span { align-items: center; background: #ff0033; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.28); color: white; display: flex; height: 48px; justify-content: center; padding-left: 3px; position: relative; transition: box-shadow 180ms ease, transform 180ms ease; width: 68px; z-index: 2; }
.video-cover > small { background: rgba(0,0,0,.72); border-radius: 4px; bottom: 8px; color: white; font-size: 9px; padding: 3px 5px; position: absolute; right: 8px; z-index: 2; }
.video-cover--vk { background-image: linear-gradient(135deg, rgba(15,69,130,.18), rgba(13,45,91,.52)), url("site-covers/framer-640.webp"); }
.video-cover--vk > span { background: #2688eb; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,57,115,.28); color: white; height: 48px; width: 68px; }
.smart-tile--youtube,.smart-tile--vk { background: #09090c; border: 0; outline: 0; }
.smart-tile--youtube:hover,.smart-tile--youtube:focus-visible,.smart-tile--youtube.is-active,
.smart-tile--vk:hover,.smart-tile--vk:focus-visible,.smart-tile--vk.is-active { border: 0; outline: 0; }
.smart-tile--youtube footer > b { background: #e73535; }
.smart-tile--vk footer > b { background: #2787f5; }
.smart-tile--google footer > b { background: conic-gradient(from -35deg, #4285f4 0 25%, #34a853 0 46%, #fbbc05 0 68%, #ea4335 0 83%, #4285f4 0); border: 3px solid white; box-shadow: 0 0 0 1px #d8dde6; color: white; font-size: 15px; }
.smart-tile--pdf footer > b { background: #e53935; color: white; font-size: 9px; letter-spacing: .03em; }
.smart-tile--site { background: #f2eee9; height: auto; padding-bottom: 58px; }
.smart-tile--site > img { aspect-ratio: 16 / 9; backface-visibility: hidden; display: block; height: auto; object-fit: cover; object-position: top center; transform: translateZ(0); transition: transform 320ms cubic-bezier(.2,.8,.2,1); width: 100%; }
.smart-tile--site footer { background: #fff; }
.smart-tile--site footer > .smart-favicon--stripe { background: #635bff; }
.smart-tile--site footer > .smart-favicon--shopify { background: #008060; }
.smart-tile--site footer > .smart-favicon--groovy { background: #7928ca; }
.media-player-demo { background: #17141b; border: 1px solid #3d3641; border-radius: 22px; margin-top: 34px; min-height: 490px; overflow: hidden; padding: 22px; position: relative; }
.media-player-demo__grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.media-player-demo__grid article { backface-visibility: hidden; background: #211d25; border: 1px solid #45404a; border-radius: 13px; display: flex; flex-direction: column; height: 205px; overflow: hidden; transform: translate3d(0,0,0); transition: border-color 180ms ease, box-shadow 200ms ease, transform 200ms ease; will-change: transform; }
.media-player-demo__grid article:hover { border-color: #7c62b0; box-shadow: 0 16px 30px rgba(0,0,0,.32); transform: translate3d(0,-5px,0); z-index: 2; }
.media-player-demo__grid article > img { backface-visibility: hidden; flex: 1 1 auto; min-height: 0; object-fit: cover; transform: translateZ(0); transition: transform 360ms ease; width: 100%; will-change: transform; }
.media-player-demo__grid article:hover > img { transform: translateZ(0) scale(1.045); }
.media-player-demo__grid footer { align-items: center; border-top: 1px solid #49424e; display: flex; flex: 0 0 52px; gap: 10px; padding: 8px 10px; }
.media-player-demo__grid footer > b { align-items: center; background: linear-gradient(135deg,#825de0,#4c376b); border-radius: 8px; color: white; display: flex; flex: 0 0 32px; font-size: 12px; height: 32px; justify-content: center; }
.media-player-demo__grid footer > span { display: flex; flex-direction: column; min-width: 0; }
.media-player-demo__grid footer strong { color: #f2edf5; font-size: 12px; line-height: 1.2; }
.media-player-demo__grid footer small { color: #aaa2ae; font-size: 10px; line-height: 1.25; }
.mini-player { background: #080808; border: 0; border-radius: 10px; bottom: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.48); overflow: hidden; position: absolute; right: 24px; transition: box-shadow 220ms ease, transform 240ms ease, width 240ms ease; width: min(480px, calc(100% - 48px)); z-index: 3; }
.mini-player:hover, .mini-player.is-active { box-shadow: 0 30px 76px rgba(0,0,0,.62); transform: translateY(-4px); }
.mini-player.is-expanded { width: calc(100% - 48px); }
.mini-player.is-minimized { border: 1px solid #4a414f; border-radius: 8px; width: 250px; }
.mini-player.is-minimized .mini-player__video { aspect-ratio: 16 / 9; }
.mini-player.is-playing .mini-player__video { filter: saturate(1.15) brightness(1.04); }
.mini-player.is-pulsing { animation: mini-player-pulse 420ms ease; }
@keyframes mini-player-pulse { 50% { transform: translateY(-7px) scale(1.018); } }
.mini-player__controls { display: flex; gap: 3px; position: absolute; right: 7px; top: 7px; z-index: 3; }
.mini-player__controls button { align-items: center; backdrop-filter: blur(12px); background: rgba(13,12,15,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: white; cursor: pointer; display: flex; font-size: 10px; height: 25px; justify-content: center; padding: 0; transition: background-color 150ms ease, transform 150ms ease; width: 25px; }
.mini-player__controls button:hover { background: #7654c9; transform: translateY(-1px); }
.mini-player__resize { background: rgba(13,12,15,.86); height: 26px; left: 0; position: absolute; top: 0; width: 26px; z-index: 3; }
.mini-player__resize::before, .mini-player__resize::after { border-top: 1px solid rgba(255,255,255,.78); content: ""; left: 7px; position: absolute; top: 10px; transform: rotate(-45deg); width: 10px; }
.mini-player__resize::after { left: 11px; top: 14px; width: 6px; }
.mini-player__video { align-items: center; aspect-ratio: 16 / 9; background-image: linear-gradient(rgba(11,8,13,.14), rgba(11,8,13,.42)), url("site-covers/awwwards-640.webp"); background-position: center; background-size: cover; display: flex; justify-content: center; }
.mini-player.is-youtube .mini-player__video,.mini-player.is-vk .mini-player__video { background-position: center; background-size: cover; }
.mini-player__video button { align-items: center; backdrop-filter: blur(10px); background: rgba(13,12,15,.78); border: 1px solid rgba(255,255,255,.24); border-radius: 12px; color: white; cursor: pointer; display: flex; height: 44px; justify-content: center; padding: 0 0 0 3px; transition: background-color 180ms ease, transform 180ms ease; width: 62px; }
.mini-player__video button:hover { background: #7654c9; transform: scale(1.08); }
.smart-notes { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.smart-notes span { border-top: 1px solid #47404b; color: #bdb5c1; font-size: 16px; line-height: 1.5; padding-top: 18px; transition: border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.smart-notes span:hover { border-color: #8b70c2; color: #d5ccd9; transform: translateY(-3px); }
.smart-notes b { color: white; display: block; font-size: 17px; margin-bottom: 5px; }
.smart-player-callout { align-items: flex-start; display: grid; gap: 14px; grid-template-columns: minmax(0,1fr) 132px; opacity: 0; pointer-events: none; position: absolute; right: 54px; top: -91px; transform: translateY(-8px); transition: opacity 180ms ease,transform 220ms ease; visibility: hidden; width: min(470px,calc(100% - 80px)); z-index: 10; }
.smart-stage.is-player-open .smart-player-callout { opacity: 1; transform: translateY(0); visibility: visible; }
.smart-player-callout svg { fill: none; height: 108px; overflow: visible; stroke: #d4c3ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; width: 140px; }
.smart-player-callout p { color: #cfc7d4; display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; margin: 3px 0 0; padding: 0; }
.smart-player-callout strong { color: white; font-size: 15px; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 4px; }
.smart-stage.is-player-minimized .smart-player-callout { opacity: 0; visibility: hidden; }

.mini-player-backdrop { background: rgba(7,6,9,.68); backdrop-filter: blur(5px); border-radius: inherit; inset: 0; position: absolute; z-index: 8; }
.mini-player { background: #080808; bottom: auto; height: auto; left: 50%; max-width: calc(100% - 64px); min-width: 320px; overflow: visible; padding-top: 38px; position: absolute; right: auto; top: 50%; transform: translate(-50%,-50%); width: min(820px,calc(100% - 64px)); z-index: 9; }
.mini-player:hover,.mini-player.is-active { transform: translate(-50%,-50%); }
.mini-player.is-pulsing { animation: none; }
.mini-player.is-expanded { width: calc(100% - 40px); }
.mini-player.is-minimized { bottom: 18px; left: auto; max-width: calc(100% - 36px); min-width: 250px; right: 18px; top: auto; transform: none; width: min(var(--demo-mini-width,360px),calc(100% - 36px)); }
.mini-player.is-minimized:hover { transform: translateY(-3px); }
.mini-player__controls { display: flex; flex: 0 0 auto; gap: 3px; position: absolute; right: 7px; top: 5px; z-index: 4; }
.mini-player__controls button,.mini-player__controls a { align-items: center; backdrop-filter: blur(12px); background: rgba(13,12,15,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: white; display: flex; height: 28px; justify-content: center; padding: 0; text-decoration: none; transition: background-color 150ms ease,transform 150ms ease; width: 28px; }
.mini-player__controls button:hover,.mini-player__controls a:hover { background: rgba(8,7,10,.98); transform: translateY(-1px); }
.mini-player__controls svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.player-icon--restore { display: none; }
.mini-player.is-minimized .player-icon--minimize { display: none; }
.mini-player.is-minimized .player-icon--restore { display: block; }
.mini-player.is-minimized .mini-player__controls { opacity: .7; right: 7px; top: 5px; transition: opacity 150ms ease; }
.mini-player.is-minimized:hover .mini-player__controls,.mini-player.is-minimized .mini-player__controls:focus-within { opacity: 1; }
.mini-player__video { aspect-ratio: 16 / 9; background-color: #050505; background-position: center; background-size: cover; border-radius: inherit; display: block; line-height: 0; overflow: hidden; position: relative; }
.mini-player__video::after { background: rgba(5,5,5,.08); content: ""; inset: 0; pointer-events: none; position: absolute; transition: opacity 180ms ease; }
.mini-player__video iframe { border: 0; display: block; height: calc(100% + 1px); inset: 0 0 -1px; opacity: 0; position: absolute; transition: opacity 180ms ease; width: 100%; z-index: 1; }
.mini-player.is-embed-ready .mini-player__video iframe { opacity: 1; }
.mini-player.is-embed-ready .mini-player__video::after { opacity: 0; }
.mini-player__local-preview { color: white; display: block; height: 100%; overflow: hidden; position: relative; user-select: none; width: 100%; }
.mini-player__local-video { background: #050505; cursor: pointer; display: block; height: 100%; object-fit: cover; width: 100%; }
.mini-player__local-preview::after { background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.mini-player__local-play { align-items: center; background: #ff0033 !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 10px 30px rgba(0,0,0,.4); color: white; cursor: pointer; display: flex; font-size: 19px; height: 54px !important; justify-content: center; left: 50%; padding: 0 0 0 4px !important; position: absolute; top: 50%; transform: translate(-50%,-50%) !important; width: 76px !important; z-index: 2; }
.mini-player__local-preview.is-playing .mini-player__local-play { background: rgba(12,11,14,.68) !important; font-size: 14px; opacity: .4; padding: 0 !important; }
.mini-player__local-preview.is-playing:hover .mini-player__local-play,.mini-player__local-play:focus-visible { opacity: 1; }
.mini-player__local-caption { bottom: 14px; display: flex; flex-direction: column; left: 16px; line-height: 1.25; position: absolute; z-index: 2; }
.mini-player__local-caption strong { font-size: 13px; }
.mini-player__local-caption small { color: #d7d3da; font-size: 10px; margin-top: 3px; }
.mini-player__local-progress { background: rgba(255,255,255,.26); bottom: 0; height: 4px; left: 0; overflow: hidden; position: absolute; right: 0; z-index: 3; }
.mini-player__local-progress i { background: #ff0033; display: block; height: 100%; transform: scaleX(0); transform-origin: left; }
.mini-player__resize { background: rgba(13,12,15,.86); border: 0; border-bottom-right-radius: 8px; cursor: nwse-resize; display: none; height: 26px; left: 0; padding: 0; position: absolute; top: 0; width: 26px; z-index: 5; }
.mini-player.is-minimized .mini-player__resize { display: block; }
.mini-player__resize::before,.mini-player__resize::after { border-top: 1px solid rgba(255,255,255,.78); content: ""; left: 7px; position: absolute; top: 10px; transform: rotate(-45deg); width: 10px; }
.mini-player__resize::after { left: 11px; top: 14px; width: 6px; }

.modes { padding-block: 112px 125px; }
.mode-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 52px; }
.mode-card { backface-visibility: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; min-height: 560px; padding: 32px; transform: translate3d(0,0,0); transition: border-color 200ms ease, box-shadow 240ms ease, transform 240ms ease; will-change: transform; }
.mode-card:hover { border-color: rgba(114,81,199,.42); box-shadow: 0 25px 60px rgba(41,32,50,.14); transform: translate3d(0,-8px,0); }
.mode-card--accent:hover { border-color: #9c7ce8; box-shadow: 0 28px 65px rgba(86,54,158,.3); }
.mode-card--accent { background: var(--purple); border-color: var(--purple); color: white; }
.mode-visual.mode-visual--video { aspect-ratio: 700 / 394; background: #e4e0dc; border: 0; border-radius: 10px; box-shadow: 0 10px 24px rgba(33,25,40,.12); overflow: hidden; }
.mode-visual--video video { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.mode-card video { backface-visibility: hidden; transform: translateZ(0); }
.mode-card > span { display: block; font-size: 14px; font-weight: 900; letter-spacing: .1em; }
.mode-card h3 { font-size: 32px; letter-spacing: -.045em; line-height: 1.1; margin: 27px 0 14px; max-width: 520px; }
.mode-card p { color: var(--muted); font-size: 16px; margin: 0; }
.mode-card small { color: #8f8794; display: block; margin-top: 20px; }
.mode-card--accent p, .mode-card--accent small { color: #e5dcfb; }
.mode-visual { aspect-ratio: 8 / 5; background: #e8e4df; border: 1px solid rgba(38,31,45,.14); border-radius: 17px; box-shadow: 0 18px 34px rgba(33,25,40,.16); color: #2b2730; margin-top: 22px; overflow: hidden; position: relative; }
.mode-card--accent .mode-visual { border-color: transparent; box-shadow: 0 10px 24px rgba(55,31,111,.2); }
.mode-browser-bar { align-items: center; background: #f8f6f3; border-bottom: 1px solid #d7d2d9; display: grid; gap: 5px; grid-template-columns: 7px 7px 7px 1fr 27px; height: 34px; padding: 0 9px; }
.mode-browser-bar > i { background: #bfb7c3; border-radius: 50%; height: 7px; width: 7px; }
.mode-browser-bar > b { background: #e9e5eb; border-radius: 6px; color: #7a727e; font-size: 8px; font-weight: 700; margin-left: 6px; padding: 5px 9px; }
.mode-browser-bar > em { align-items: center; background: #7654c9; border-radius: 7px; color: white; display: flex; font-size: 11px; font-style: normal; height: 25px; justify-content: center; position: relative; width: 25px; }
.mode-browser-bar > em img { height: 18px; object-fit: contain; width: 16px; }
.mode-browser-bar > em small { align-items: center; background: #ef7e42; border: 2px solid #f8f6f3; border-radius: 999px; color: white; display: flex; font-size: 7px; font-weight: 900; height: 16px; justify-content: center; margin: 0; min-width: 16px; padding-inline: 3px; position: absolute; right: -7px; top: -7px; }
.mode-product-shot { display: block; height: calc(100% - 34px); object-fit: cover; object-position: center top; width: 100%; }
.mode-website { background: linear-gradient(145deg,#ebe7e2,#dcd5df); display: grid; gap: 10px; grid-template-columns: 1.35fr .65fr; height: calc(100% - 34px); padding: 20px; }
.mode-website span { background: rgba(255,255,255,.72); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(49,41,57,.08); height: 42px; }
.mode-website span:first-child { grid-column: 1 / -1; height: 82px; }
.mode-toolbar-callouts { display: grid; gap: 8px; position: absolute; right: 18px; top: 52px; width: min(300px,calc(100% - 36px)); }
.mode-toolbar-callouts > div { align-items: center; background: rgba(255,255,255,.96); border: 1px solid #d7d0da; border-radius: 13px; box-shadow: 0 13px 30px rgba(34,27,41,.16); display: grid; gap: 10px; grid-template-columns: 42px 1fr; padding: 11px; transform: translateX(0); transition: transform 180ms ease; }
.mode-toolbar-callouts > div:nth-child(2) { margin-left: 22px; }
.mode-toolbar-callouts > div:nth-child(3) { margin-left: 44px; }
.mode-card:hover .mode-toolbar-callouts > div { transform: translateX(-5px); }
.mode-toolbar-callouts b { align-items: center; background: var(--purple-soft); border-radius: 10px; color: var(--purple-dark); display: flex; font-size: 10px; height: 42px; justify-content: center; }
.mode-toolbar-callouts .is-timer b { background: #ffe5d6; color: #9a4720; }
.mode-toolbar-callouts .is-note b { background: #fff1a9; color: #705b16; }
.mode-toolbar-callouts span { display: flex; flex-direction: column; min-width: 0; }
.mode-toolbar-callouts strong { font-size: 11px; line-height: 1.25; }
.mode-toolbar-callouts small { color: var(--muted); font-size: 9px; line-height: 1.3; margin: 2px 0 0; }

.plans { background: var(--purple); color: white; padding-block: 112px; }
.plans-heading { max-width: 900px; }
.plans-heading p { color: #ded4f6; font-size: 18px; max-width: 730px; }
.plan-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 56px; }
.plan-card { backface-visibility: hidden; background: white; border: 1px solid transparent; border-radius: 28px; color: var(--ink); display: flex; flex-direction: column; min-height: 620px; padding: 40px; transform: translate3d(0,0,0); transition: border-color 200ms ease, box-shadow 240ms ease, transform 240ms ease; will-change: transform; }
.plan-card:hover { border-color: rgba(255,255,255,.42); box-shadow: 0 32px 75px rgba(54,30,101,.28); transform: translate3d(0,-8px,0); }
.plan-card--pro { background: #211d26; color: white; }
.plan-card__head { align-items: center; display: flex; justify-content: space-between; }
.plan-card__head > span { color: var(--purple); font-size: 15px; font-weight: 900; letter-spacing: .085em; line-height: 1.3; }
.plan-card--pro .plan-card__head > span { color: #cbb7ff; }
.plan-card__head strong { font-size: 30px; letter-spacing: -.04em; }
.plan-card__head small { color: #938b98; font-size: 12px; font-weight: 700; }
.plan-card h3 { font-size: 32px; letter-spacing: -.04em; line-height: 1.15; margin: 48px 0 20px; max-width: 440px; }
.plan-card .check-list { flex: 1; font-size: 17px; gap: 14px; line-height: 1.45; margin-bottom: 34px; }
.plan-card .button { font-size: 16px; min-height: 56px; }
.plan-card--pro .check-list li::before { color: #c6aeff; }
.plan-card--pro .check-list li { color: #d2ccd5; }
.plan-note { color: #9b939f; font-size: 13px; line-height: 1.45; margin: 14px 4px 0; text-align: center; }
.plan-note--free { color: #716a76; font-size: 13px; font-weight: 700; }

.free-download {
  background: #fffdfa;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 35px 110px rgba(25, 18, 34, .34);
  color: var(--ink);
  margin: auto;
  max-height: calc(100dvh - 32px);
  max-width: min(900px, calc(100vw - 32px));
  overflow: hidden;
  padding: 38px;
  width: 100%;
}
.free-download[open] { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto auto; }
.free-download::backdrop { backdrop-filter: blur(8px); background: rgba(25, 20, 31, .62); }
.free-download__close { align-items: center; background: #eee9e3; border: 0; border-radius: 50%; color: #514b56; cursor: pointer; display: flex; height: 40px; justify-content: center; padding: 0; position: absolute; right: 20px; top: 20px; width: 40px; }
.free-download__close svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 18px; }
.free-download__close:hover { background: #e2dce6; color: var(--ink); }
.free-download__badge { color: var(--purple); font-size: 13px; font-weight: 900; letter-spacing: .12em; margin-bottom: 12px; }
.free-download h2 { font-size: clamp(30px, 5vw, 43px); letter-spacing: -.045em; line-height: 1.06; margin: 0; max-width: 580px; }
.free-download > p:not(.free-download__mode-note) { color: var(--muted); font-size: 17px; margin: 17px 0 26px; max-width: 600px; }
.free-download__options { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; overflow-y: auto; padding-right: 10px; scrollbar-color: rgba(114,81,199,.5) transparent; scrollbar-gutter: stable; scrollbar-width: thin; }
.free-download__options::-webkit-scrollbar { width: 8px; }
.free-download__options::-webkit-scrollbar-track { background: transparent; }
.free-download__options::-webkit-scrollbar-thumb { background: rgba(114,81,199,.48); border: 2px solid #fffdfa; border-radius: 999px; }
.free-download__options > a { align-items: center; background: #f4f0eb; border: 1px solid transparent; border-radius: 17px; display: grid; gap: 14px; grid-template-columns: 46px 1fr auto; padding: 14px; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.free-download__options > a:hover { background: white; border-color: rgba(114,81,199,.34); transform: translateY(-2px); }
.free-download__browser { align-items: center; background: white; border: 1px solid rgba(42,35,48,.08); border-radius: 14px; box-shadow: 0 7px 18px rgba(39,31,47,.09); display: flex; height: 46px; justify-content: center; overflow: hidden; width: 46px; }
.free-download__browser img { display: block; height: 34px; object-fit: contain; width: 34px; }
.free-download__options > a > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.free-download__options strong { font-size: 16px; }
.free-download__options small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.free-download__options b { color: var(--purple-dark); font-size: 13px; }
.free-download__mode-note { background: #f0eafb; border-radius: 13px; color: #61586a; font-size: 13px; line-height: 1.45; margin: 14px 10px 0 0; padding: 11px 14px; }
.free-download__mode-note strong { color: var(--ink); }
.free-download__mode-note b { color: var(--purple-dark); }
.free-download__install { background: #211d26; border-radius: 15px; color: white; display: flex; flex-direction: column; margin-top: 18px; padding: 15px 17px; }
.free-download__install strong { font-size: 14px; }
.free-download__install span { color: #d0c9d4; font-size: 13px; margin-top: 3px; }

@media (max-width: 760px) {
  .free-download { max-width: min(620px,calc(100vw - 24px)); padding-inline: 24px; }
  .free-download__options { grid-template-columns: 1fr; }
}

.privacy { align-items: center; display: grid; gap: 72px; grid-template-columns: 1.08fr .92fr; padding-block: 125px; }
.privacy-diagram { background: #fffdfa; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 22px 60px rgba(41,32,50,.1); color: var(--ink); padding: 32px; transition: border-color 200ms ease, box-shadow 240ms ease, transform 240ms ease; }
.privacy-diagram:hover { border-color: rgba(114,81,199,.32); box-shadow: 0 28px 65px rgba(41,32,50,.14); transform: translateY(-4px); }
.privacy-diagram__head { display: flex; flex-direction: column; }
.privacy-diagram__head span { color: var(--purple); font-size: 12px; font-weight: 900; letter-spacing: .095em; }
.privacy-diagram__head strong { font-size: 28px; letter-spacing: -.04em; line-height: 1.1; margin-top: 8px; }
.privacy-diagram__head p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 12px 0 0; }
.privacy-storage-list { display: grid; gap: 10px; margin-top: 25px; }
.privacy-storage-list > div { align-items: center; background: #f5f1eb; border: 1px solid rgba(44,38,49,.09); border-radius: 16px; display: grid; gap: 13px; grid-template-columns: 44px 1fr auto; padding: 15px; }
.privacy-storage-list i { align-items: center; background: var(--purple-soft); border-radius: 12px; color: var(--purple-dark); display: flex; font-size: 18px; font-style: normal; height: 44px; justify-content: center; width: 44px; }
.privacy-storage-list p { display: flex; flex-direction: column; margin: 0; }
.privacy-storage-list strong { font-size: 16px; line-height: 1.25; }
.privacy-storage-list span { color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 3px; }
.privacy-storage-list b { background: #ebe3fa; border-radius: 999px; color: var(--purple-dark); font-size: 10px; letter-spacing: .08em; padding: 6px 9px; }
.privacy-choice { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.privacy-choice > strong { font-size: 17px; }
.privacy-choice p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 7px 0 0; }
.privacy-mini-dial { background: #f3f0ec; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; box-shadow: 0 22px 45px rgba(7,5,8,.28); color: #27232b; margin-top: 22px; overflow: hidden; padding: 13px; position: relative; }
.privacy-mini-dial__bar { align-items: center; display: flex; gap: 8px; margin-bottom: 12px; }
.privacy-mini-dial__bar img { height: 27px; object-fit: contain; width: 23px; }
.privacy-mini-dial__bar b { font-size: 12px; letter-spacing: -.02em; }
.privacy-mini-dial__bar span { background: #e8e0f8; border-radius: 999px; color: #6743bd; font-size: 8px; font-weight: 900; letter-spacing: .09em; margin-left: auto; padding: 5px 8px; }
.privacy-mini-dial__grid { display: grid; gap: 8px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.privacy-mini-dial figure { background: white; border: 1px solid rgba(37,31,43,.11); border-radius: 10px; margin: 0; overflow: hidden; }
.privacy-mini-dial figure img { display: block; height: 68px; object-fit: cover; width: 100%; }
.privacy-mini-dial figcaption { font-size: 8px; font-weight: 800; overflow: hidden; padding: 7px 8px; text-overflow: ellipsis; white-space: nowrap; }
.privacy-mini-note { background: #ffef9b; border-radius: 7px 7px 9px 9px; bottom: 14px; box-shadow: 0 9px 22px rgba(42,32,11,.22); color: #4c421b; display: flex; flex-direction: column; padding: 8px 10px; position: absolute; right: 20px; transform: rotate(2.5deg); width: 118px; }
.privacy-mini-note::before { background: #e8cb56; border-radius: 4px 4px 0 0; content: ""; height: 5px; left: 0; position: absolute; right: 0; top: 0; }
.privacy-mini-note b { font-size: 8px; margin-top: 2px; }
.privacy-mini-note span { font-size: 7px; margin-top: 2px; opacity: .72; }
.privacy-local-store { border-left: 3px solid #9b7be2; margin-top: 18px; padding: 2px 0 2px 15px; }
.privacy-local-store > strong { color: #f2eaf6; display: block; font-size: 18px; }
.privacy-local-store > p { color: #bbb1bf; font-size: 15px; line-height: 1.5; margin: 7px 0 0; max-width: 540px; }
.privacy-local { align-items: center; border: 1px solid #4c4352; border-radius: 16px; display: grid; gap: 8px; grid-template-columns: 1fr auto 1fr auto 1fr; margin-top: 22px; padding: 12px; }
.privacy-local > div, .privacy-optional > div { align-items: center; display: flex; gap: 9px; min-width: 0; }
.privacy-local > div > i, .privacy-optional i { align-items: center; background: #37303d; border-radius: 9px; color: #cab2ff; display: flex; flex: 0 0 auto; font-size: 12px; font-style: normal; height: 34px; justify-content: center; width: 34px; }
.privacy-local .is-dial > i { background: var(--purple); color: white; }
.privacy-local > div > span, .privacy-optional p { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.privacy-local strong, .privacy-optional strong { font-size: 10px; }
.privacy-local small, .privacy-optional small { color: #948b99; font-size: 8px; }
.privacy-local > b { color: #776e7e; font-size: 11px; }
.privacy-boundary { align-items: center; display: flex; gap: 9px; margin: 13px 0 20px; }
.privacy-boundary::before, .privacy-boundary::after { border-top: 1px dashed #574d5e; content: ""; flex: 1; }
.privacy-boundary span { color: #b7aeb9; font-size: 12px; text-align: center; }
.privacy-optional { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.privacy-optional > span { grid-column: 1 / -1; }
.privacy-optional > div { align-items: flex-start; background: #2c2631; border: 1px solid #453a4c; border-radius: 14px; padding: 15px; }
.privacy-optional i { font-size: 15px; height: 40px; width: 40px; }
.privacy-optional strong { color: #f4edf7; font-size: 17px; line-height: 1.25; }
.privacy-optional small { color: #bbb1bf; font-size: 14px; line-height: 1.45; margin-top: 6px; }
.privacy h2 { font-size: clamp(40px, 4.4vw, 59px); }
.privacy-copy > p { color: var(--muted); font-size: 17px; }
.privacy-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.privacy-list span { align-items: center; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 20px rgba(42,34,49,.06); display: inline-flex; font-size: 15px; font-weight: 700; gap: 9px; min-height: 46px; padding: 9px 14px 9px 10px; }
.privacy-list svg { background: var(--purple-soft); border-radius: 10px; fill: none; flex: 0 0 auto; height: 30px; padding: 6px; stroke: var(--purple-dark); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 30px; }
.privacy a { color: var(--purple-dark); font-weight: 800; text-decoration: none; }

.faq { padding-bottom: 120px; }
.faq-list { border-top: 1px solid var(--line); margin-top: 48px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { align-items: center; border-radius: 12px; cursor: pointer; display: flex; font-size: 19px; font-weight: 800; justify-content: space-between; list-style: none; margin-inline: -10px; padding: 23px 14px; transition: background-color 160ms ease, color 160ms ease; }
.faq summary:hover { background: rgba(114,81,199,.08); color: var(--purple-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--purple); font-size: 26px; font-weight: 400; transition: transform 160ms ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { color: var(--muted); line-height: 1.65; margin: 5px 0 28px; max-width: 850px; padding: 0 16px 0 14px; }
.capture-proof { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 28px 0 32px; max-width: 1160px; }
.capture-proof--workflow { grid-template-columns: .86fr 1.35fr .86fr; }
.capture-proof figure { background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 36px rgba(44,35,54,.1); margin: 0; overflow: hidden; }
.capture-proof > figure > img { aspect-ratio: 19 / 14; display: block; height: auto; object-fit: cover; width: 100%; }
.capture-proof figcaption { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: center; min-height: 58px; padding: 14px 16px; text-align: center; }
.capture-proof figcaption b { color: var(--ink); font-size: 16px; }
.capture-proof figcaption span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.capture-tile,.capture-browser { height: 250px; }
.capture-tile { background: #efebf1; display: flex; flex-direction: column; padding: 13px; }
.capture-tile > div { align-items: center; border-radius: 13px 13px 0 0; display: flex; flex: 1; flex-direction: column; justify-content: center; overflow: hidden; padding: 18px; text-align: center; }
.capture-tile--blocked > div { background: linear-gradient(145deg,#ddd7df,#cfc6d1); color: #564e59; }
.capture-tile--blocked > div::before { align-items: center; background: rgba(255,255,255,.75); border: 1px solid rgba(54,46,58,.14); border-radius: 50%; content: "!"; display: flex; font-size: 21px; font-weight: 900; height: 46px; justify-content: center; margin-bottom: 13px; width: 46px; }
.capture-tile > div > span { font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.capture-tile > div > b { font-size: 20px; margin-top: 8px; }
.capture-tile > div > small { font-size: 11px; line-height: 1.35; margin-top: 5px; }
.capture-tile footer { align-items: center; background: white; border-radius: 0 0 13px 13px; display: flex; gap: 10px; min-height: 57px; padding: 10px 11px; }
.capture-tile footer > i { align-items: center; background: #7251c7; border-radius: 9px; color: white; display: flex; font-size: 12px; font-style: normal; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
.capture-tile footer > span { display: flex; flex-direction: column; min-width: 0; }
.capture-tile footer strong { font-size: 14px; }
.capture-tile footer small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.capture-tile--saved { padding: 13px; }
.capture-tile--saved > img { border-radius: 13px 13px 0 0; display: block; flex: 1; min-height: 0; object-fit: cover; width: 100%; }
.capture-browser { background: #f4f2f4; overflow: hidden; position: relative; }
.capture-browser__tabs { align-items: center; background: #dfdbe0; display: flex; gap: 7px; height: 31px; padding: 0 11px; }
.capture-browser__tabs > span { background: #ef675d; border-radius: 50%; height: 8px; width: 8px; }
.capture-browser__tabs > b { background: white; border-radius: 7px 7px 0 0; font-size: 12px; font-weight: 750; height: 23px; line-height: 23px; margin-left: 3px; padding-inline: 13px; }
.capture-browser__tabs > i { color: #6b636f; font-size: 13px; font-style: normal; }
.capture-browser__toolbar { align-items: center; background: white; border-bottom: 1px solid #ddd8df; display: grid; gap: 8px; grid-template-columns: auto auto auto minmax(0,1fr) 34px auto; height: 42px; padding: 5px 9px; }
.capture-browser__toolbar > span { color: #6e6772; font-size: 14px; }
.capture-browser__toolbar > div { background: #f1eff2; border-radius: 999px; color: #766f79; font-size: 11px; overflow: hidden; padding: 7px 10px; text-overflow: ellipsis; white-space: nowrap; }
.capture-browser__toolbar > button { align-items: center; background: #ece5fb; border: 2px solid #7251c7; border-radius: 9px; box-shadow: 0 0 0 4px rgba(114,81,199,.14); display: flex; height: 31px; justify-content: center; padding: 2px; width: 31px; }
.capture-browser__toolbar > button img { height: 24px; object-fit: contain; width: 21px; }
.capture-browser__page { height: 177px; overflow: hidden; }
.capture-browser__page img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.capture-toolbar-menu { background: white; border: 1px solid #d9d3dc; border-radius: 11px; box-shadow: 0 16px 35px rgba(34,26,40,.24); display: flex; flex-direction: column; padding: 8px; position: absolute; right: 13px; top: 68px; width: 232px; z-index: 2; }
.capture-toolbar-menu > strong { color: #69616c; font-size: 10px; padding: 5px 8px 7px; }
.capture-toolbar-menu > button { align-items: center; background: #eee7fb; border: 0; border-radius: 7px; color: #372d43; display: flex; font: inherit; font-size: 13px; font-weight: 800; gap: 7px; padding: 12px 10px; text-align: left; }
.capture-toolbar-menu > i { border-top: 1px solid #e5e0e7; margin: 7px 3px; }
.capture-toolbar-menu > small { color: #756d78; font-size: 10px; padding: 4px 8px 6px; }
.capture-right-click { background: #211d26; border-radius: 999px; color: white; font-size: 11px; font-weight: 850; padding: 7px 10px; position: absolute; right: 47px; top: 37px; }
.capture-right-click::after { border-bottom: 6px solid #211d26; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; position: absolute; right: 9px; top: -5px; }

.final-cta { align-items: center; background: #211d26; border-radius: 34px; color: white; display: grid; gap: 34px; grid-template-columns: auto 1fr auto; margin-bottom: 60px; min-height: 310px; padding: 52px; }
.final-cta > img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); height: 88px; object-fit: contain; width: 76px; }
.final-cta > div > span { color: #c8b5fb; font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.final-cta h2 { font-size: clamp(36px, 4vw, 55px); letter-spacing: -.055em; line-height: 1.03; margin: 14px 0 13px; }
.final-cta p { color: #bdb6c2; margin: 0; }

.site-footer { align-items: center; display: grid; gap: 20px; grid-template-columns: 1fr auto 1fr; min-height: 110px; }
.footer-brand { align-items: center; display: flex; gap: 9px; font-size: 14px; font-weight: 800; }
.footer-brand > img { filter: drop-shadow(0 3px 4px rgba(63, 42, 91, .22)); height: 39px; object-fit: contain; width: 34px; }
.footer-brand small { color: var(--muted); font-weight: 600; }
.footer-brand a img { height: 23px; max-width: 90px; width: auto; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a { color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.site-footer > small { color: var(--muted); justify-self: end; }

.toast { background: #211d26; border-radius: 12px; bottom: 22px; color: white; font-size: 13px; left: 50%; max-width: min(460px, calc(100vw - 32px)); opacity: 0; padding: 13px 18px; pointer-events: none; position: fixed; transform: translate(-50%, 16px); transition: opacity 180ms ease, transform 180ms ease; z-index: 100; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.motion-ready .scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity 620ms ease var(--reveal-delay, 0ms), transform 620ms ease var(--reveal-delay, 0ms); }
.motion-ready .scroll-reveal.is-visible { opacity: 1; transform: none; }
.motion-ready .bookmark-wall__grid article.scroll-reveal,
.motion-ready .live-dial__grid > .scroll-reveal,
.motion-ready .media-player-demo__grid article.scroll-reveal { transform: translateY(34px) scale(.94); }
.motion-ready .bookmark-wall__grid article.scroll-reveal.is-visible,
.motion-ready .live-dial__grid > .scroll-reveal.is-visible,
.motion-ready .media-player-demo__grid article.scroll-reveal.is-visible { transform: none; }
.motion-ready .bookmark-wall__grid article.scroll-reveal.is-visible:hover { transform: translate3d(0,-5px,0); }
.motion-ready .live-dial__grid > .live-folder-card.scroll-reveal.is-visible:hover,
.motion-ready .live-dial__grid > .live-site-card.scroll-reveal.is-visible:hover { transform: translate3d(0,-5px,0) scale(1.012); }
.motion-ready .smart-tile.scroll-reveal.is-visible:hover,
.motion-ready .smart-tile.scroll-reveal.is-visible:focus-visible,
.motion-ready .smart-tile.scroll-reveal.is-visible.is-active { transform: translate3d(0,-8px,0); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); display: none; flex-direction: column; gap: 0; padding: 10px; position: absolute; right: 24px; top: 64px; width: 230px; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 13px; width: 100%; }
  .menu-toggle { display: block; justify-self: end; }
  .header-actions { display: none; }
  .free-download__options b { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-playground { justify-self: center; left: 0; margin: -24px auto 0; max-width: 430px; min-height: 510px; width: 100%; }
  .live-dial__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .live-dial { min-height: 960px; }
  .bookmark-wall__grid { grid-template-columns: repeat(3, 1fr); }
  .showcase, .showcase--reverse { gap: 46px; grid-template-columns: 1fr; }
  .showcase--reverse .showcase-media { order: 0; }
  .showcase-copy { max-width: 760px; }
  .focus-lab__inner { grid-template-columns: 1fr; }
  .focus-lab__copy { max-width: 820px; }
  .focus-lab__product { margin-right: 0; }
  .focus-lab__product > img,.focus-lab__product > video { border-radius: 24px; width: 100%; }
  .focus-legend { grid-template-columns: 1fr 1fr; }
  .focus-legend article:nth-child(3) { border-left: 0; border-top: 1px solid #38313d; }
  .focus-legend article:nth-child(4) { border-top: 1px solid #38313d; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .organize-demo { grid-template-columns: 1fr 1fr; }
  .organize-copy { grid-column: 1 / -1; min-height: auto; }
  .smart-stage { grid-template-columns: 1fr 1fr; }
  .media-player-demo__grid { grid-template-columns: repeat(3, 1fr); }
  .media-player-demo__grid article { height: 185px; }
  .smart-notes { margin-top: 34px; }
  .ai-section, .privacy { grid-template-columns: 1fr; }
  .privacy-diagram { min-height: 270px; }
  .final-cta { grid-template-columns: auto 1fr; }
  .final-cta .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --shell: min(calc(100% - 28px), 1240px); }
  .site-header { height: 64px; padding-inline: 14px; }
  .brand img { height: 41px; width: 36px; }
  .hero { gap: 28px; padding-block: 42px 48px; }
  .hero h1 { font-size: clamp(42px, 12vw, 54px); overflow-wrap: anywhere; }
  .hero h1 em { display: block; }
  .hero-lead { font-size: 18px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-playground { min-height: 510px; }
  .live-dial { min-height: 1020px; padding: 24px 18px 44px; }
  .live-dial__header { gap: 12px; grid-template-columns: 1fr auto; }
  .live-demo-controls { gap: 0; }
  .live-demo-scribble { min-width: 116px; }
  .live-demo-scribble span { display: none; }
  .live-demo-scribble svg { left: 91px; top: -3px; width: 70px; }
  .live-theme-switch { justify-content: center; }
  .live-dial__header > span { grid-column: 2; grid-row: 1; }
  .live-web-search { grid-template-columns: 128px 1fr 42px; margin-top: 20px; }
  .live-web-search > button { padding-inline: 9px; }
  .live-dial__tools { gap: 10px; grid-template-columns: 1fr; }
  .live-dial__tools > small { justify-self: start; }
  .live-dial__grid { grid-template-columns: 1fr 1fr; }
  .live-folder-menu { width: min(410px, calc(100vw - 64px)); }
  .live-search-menu { width: min(250px, calc(100vw - 64px)); }
  .live-widget-menu { width: min(360px, calc(100vw - 64px)); }
  .product-shot__bar em { display: none; }
  .product-shot__bar { grid-template-columns: 1fr auto; }
  .bookmark-wall { padding-top: 72px; }
  .bookmark-wall__head { gap: 22px; grid-template-columns: 1fr; }
  .bookmark-wall__label { align-items: flex-start; flex-direction: column; gap: 3px; }
  .bookmark-wall__grid { display: flex; margin-inline: -14px; overflow-x: auto; padding: 0 14px 14px; scroll-snap-type: x mandatory; }
  .bookmark-wall__grid article { flex: 0 0 78vw; scroll-snap-align: center; }
  .bookmark-wall__plain-grid { grid-template-columns: 1fr 1fr; }
  .intro { padding-block: 82px 76px; }
  .steps { grid-template-columns: 1fr; }
  .showcases { gap: 88px; padding-block: 90px; }
  .showcase { gap: 34px; }
  .showcase-media { border-radius: 18px; }
  .showcase-media img { max-width: none; width: 175%; }
  .showcase-media--pinning video { max-width: none; transform: translateX(-21%); width: 175%; }
  .showcase-media--pinning video img { transform: none; width: 100%; }
  .showcase-media--settings video { max-width: none; transform: translateX(-21%); width: 175%; }
  .focus-lab { padding-block: 82px; }
  .focus-lab__inner { gap: 44px; }
  .focus-legend { grid-template-columns: 1fr; }
  .focus-legend article + article { border-left: 0; border-top: 1px solid #38313d; }
  .focus-toolbar { bottom: -22px; left: 12px; right: 12px; }
  .focus-toolbar em { display: none; }
  .section-heading--split { gap: 24px; grid-template-columns: 1fr; }
  .capabilities { padding-block: 82px; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid article { min-height: 210px; padding: 23px; }
  .organize-section { padding-block: 84px; }
  .organize-demo { grid-template-columns: 1fr; }
  .organize-search, .organize-flow, .organize-copy { min-height: auto; }
  .organize-copy { grid-column: auto; }
  .ai-section { gap: 44px; padding-block: 86px; }
  .ai-result { grid-template-columns: 44px 1fr; }
  .ai-result em { display: none; }
  .semantic-demo { min-height: 680px; padding: 18px; }
  .semantic-demo__search { grid-template-columns: 22px 1fr; }
  .semantic-demo__search kbd { display: none; }
  .semantic-demo__search strong { font-size: 14px; }
  .semantic-demo__results { min-height: 430px; }
  .semantic-demo__result { grid-template-columns: 1fr; }
  .semantic-demo__result > img { height: 132px; }
  .semantic-demo__result > div { padding: 18px; }
  .semantic-demo__result h3 { font-size: 23px; }
  .semantic-demo__foot { align-items: flex-start; flex-direction: column; gap: 5px; }
  .semantic-demo__cursor { display: none; }
  .smart-tiles { padding-block: 82px; }
  .smart-stage { grid-template-columns: 1fr 1fr; }
  .smart-tile { min-height: 250px; }
  .media-player-demo { min-height: 420px; padding: 14px; }
  .media-player-demo__grid { grid-template-columns: 1fr 1fr; }
  .media-player-demo__grid article { height: 185px; }
  .mini-player.is-minimized { bottom: 14px; right: 14px; width: min(390px, calc(100% - 28px)); }
  .smart-notes { grid-template-columns: 1fr; margin-top: 42px; }
  .modes { padding-block: 82px 85px; }
  .mode-grid, .plan-grid { grid-template-columns: 1fr; }
  .mode-visual { aspect-ratio: 8 / 5; }
  .mode-card h3 { margin-top: 27px; }
  .capture-proof { grid-template-columns: 1fr; }
  .privacy-local-store { align-items: flex-start; flex-direction: column; }
  .privacy-local-store > div { justify-content: flex-start; }
  .smart-player-callout { display: none; }
  .bookmark-reorder-demo { display: none; }
  .plans { padding-block: 82px; }
  .plan-card { min-height: auto; }
  .privacy { gap: 42px; padding-block: 84px; }
  .final-cta { display: block; padding: 34px 26px; }
  .final-cta > img { height: 70px; margin-bottom: 28px; width: 60px; }
  .final-cta .button { margin-top: 28px; width: 100%; }
  .site-footer { grid-template-columns: 1fr; padding-block: 28px; }
  .site-footer > small { justify-self: start; }
}

@media (max-width: 480px) {
  .free-download { max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); padding: 29px 18px 20px; }
  .free-download__options { padding-right: 7px; }
  .free-download__options > a { grid-template-columns: 42px 1fr; }
  .free-download__browser { height: 42px; width: 42px; }
  .free-download__browser img { height: 31px; width: 31px; }
  .free-download__options b { display: none; }
  .hero-playground { max-width: 352px; min-height: 470px; }
  .hero-note { left: 14px; top: 90px; width: 238px; }
  .hero-timer { bottom: 3px; right: 10px; }
  .hero-scribble--note { right: 4px; }
  .live-dial { min-height: 1850px; }
  .live-dial__grid { grid-template-columns: 1fr; }
  .live-theme-switch { max-width: 100%; overflow-x: auto; }
  .live-theme-switch button { flex: 1; min-width: 0; padding-inline: 10px; }
  .live-demo-controls { align-items: center; flex-direction: column; gap: 9px; }
  .live-demo-scribble { min-width: 0; padding-right: 62px; position: relative; right: auto; }
  .live-demo-scribble span { display: block; }
  .live-demo-scribble svg { left: auto; right: -4px; top: -5px; width: 60px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card--wide { grid-column: auto; }
  .capability-grid article { min-height: auto; }
  .bookmark-wall__plain-grid { grid-template-columns: 1fr; }
  .section-heading h2, .showcase h2, .ai-copy h2, .privacy h2, .plans h2 { font-size: 39px; }
  .plan-card { padding: 27px; }
  .smart-stage { grid-template-columns: 1fr; }
  .mini-player { min-width: 0; width: calc(100% - 28px); }
  .privacy-local { grid-template-columns: 1fr; }
  .privacy-local > b { transform: rotate(90deg); text-align: center; }
  .privacy-optional { grid-template-columns: 1fr; }
  .privacy-optional > span { grid-column: auto; }
  .footer-brand { flex-wrap: wrap; }
}

@media (hover: none) and (pointer: coarse) and (any-hover: none) {
  .button:hover,
  .live-theme-switch button:hover,
  .live-dial__header > span button:hover,
  .bookmark-wall__grid article:hover,
  .capability-grid article:hover,
  .organize-search:hover,
  .organize-flow:hover,
  .organize-copy:hover,
  .organize-search__result:hover,
  .suggestion-example button:hover,
  .smart-tile:hover,
  .media-player-demo__grid article:hover,
  .media-player-demo__grid article:hover > img,
  .mini-player:hover,
  .mini-player.is-minimized:hover,
  .smart-notes span:hover,
  .mode-card:hover,
  .mode-card:hover .mode-toolbar-callouts > div,
  .plan-card:hover,
  .privacy-diagram:hover,
  .free-download__options > a:hover { transform: none; }
  .button--primary:hover { background: var(--purple); }
  .context-link:hover { color: var(--purple-dark); }
  .mode-card--accent .context-link:hover { color: #fff; }
  .live-folder-card:hover,.live-site-card:hover { border-color: var(--demo-line); box-shadow: var(--demo-shadow); transform: none; }
  .live-site-card.is-selected:hover { border-color: #7654c9; box-shadow: 0 0 0 3px rgba(118,84,201,.18),var(--demo-shadow); }
  .bookmark-wall__grid article:hover { box-shadow: 0 12px 30px rgba(39,31,47,.09); }
  .faq summary:hover { background: transparent; color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .semantic-demo__search strong span { width: 100% !important; }
  .semantic-demo__scanning,.semantic-demo__progress,.semantic-demo__skeleton,.semantic-demo__cursor { display: none !important; }
  .semantic-demo__found,.semantic-demo__result,.semantic-demo__foot { opacity: 1 !important; transform: none !important; }
}