:root {
  --p-bg: #181a1e; --p-surface: #1c1e23; --p-ink: #f0f0f3; --p-muted: #a5a8b1;
  --p-accent: #ff4b50; --p-accent-ink: #181a1e; --p-action: #ff4b50; --p-action-ink: #181a1e;
  --p-inv-bg: #f0f0f3; --p-inv-surface: #dfdfe2; --p-inv-ink: #181a1e; --p-inv-muted: #5b5d61;
  --p-inv-accent: #181a1e; --p-inv-accent-ink: #f0f0f3; --p-inv-action: #181a1e; --p-inv-action-ink: #f0f0f3;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.028em;
  --display-tracking-xl: -0.036em;
  --display-stretch: 96%;
  --ly-scale: 1.04;
}

html { color-scheme: dark; scroll-behavior: auto; }
body { -webkit-tap-highlight-color: #ff4b5033; }
button, a, input { touch-action: manipulation; }
:target { scroll-margin-top: var(--nav); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 5px; }
.brand-mark { display: inline-flex; width: 28px; height: 28px; gap: 5px; align-items: center; flex-shrink: 0; }
.brand-mark i { display: block; width: 8px; height: 23px; background: var(--p-accent); border-radius: 2px; }
.nav__logo { font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.nav__logo .brand-mark { margin-right: 4px; }
.nav .btn { font-size: 14px; padding-inline: 20px; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
[data-icon] img { display: block; width: 20px; height: 20px; }
.btn .m-arrow { flex-shrink: 0; }
.hero .forest { opacity: 1; }
.hero > img.forest { top: var(--nav); height: calc(100% - var(--nav)); }
.forest img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 16px; border: 1px solid #f0f0f326; border-radius: 32px; pointer-events: none; z-index: 0; }
.hero__text { position: relative; }
.hero h1 { max-width: 10.5ch; }
.hero .hero__lead { color: #c4c5cb; max-width: 37ch; }
.hero .hero-note { color: #aeb0b8; font-family: var(--font-mono); font-size: 13px; margin-top: 16px; }
.hero .hero-bottom { display: flex; gap: 16px; align-items: center; margin-top: 64px; }
.hero-bottom p { font-size: 14px; color: #c4c5cb; line-height: 1.6; }
.fine-line { display: block; width: 32px; height: 1px; background: #ff4b50; }
.hero .live-preview { display: flex; justify-content: center; align-items: flex-start; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.hero .live-preview > .stage { display: flex; justify-content: center; align-items: flex-start; }
.hero .live-preview > .stage > .device { position: relative; }
@media (min-width: 1024px) { .hero .live-preview > .stage { mask: none; -webkit-mask: none; } }

/* The phone is a faithful HTML preview of the native focus screen, not a generic dashboard. */
.device { width: 302px; height: 664px; max-height: none; padding: 18px 20px 16px; flex-shrink: 0; background: #181a1e; color: #f0f0f3; border: 5px solid #35373d; border-radius: 40px; box-shadow: 0 0 0 1px #111316, 0 28px 64px #0006, inset 0 0 0 1px #050607; display: flex; flex-direction: column; position: relative; }
.device-status { font-size: 11px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-text); letter-spacing: -.02em; }
.device-camera { width: 56px; height: 13px; background: #0c0d10; border-radius: 20px; }
.device-brand { display: flex; align-items: center; gap: 9px; margin-top: 24px; }
.device-brand .brand-mark { width: 29px; height: 32px; padding: 7px; gap: 4px; box-shadow: -3px -3px 8px #ffffff07, 4px 4px 7px #0007; border: 1px solid #2f323a; border-radius: 50%; }
.device-brand .brand-mark i { width: 4px; height: 13px; border-radius: 0; }
.device-brand strong { font-size: 20px; font-weight: 500; letter-spacing: -.04em; }
.device-key { margin-left: auto; font-size: 13px; padding: 6px 13px; border-radius: 30px; border: 1px solid #2f323a; }
.device .device-eyebrow { font-size: 9px; color: #ff4b50; text-transform: uppercase; letter-spacing: .14em; margin-top: 23px; font-weight: 500; }
.device .device-title { font-size: 29px; line-height: 1.13; letter-spacing: -.04em; margin-top: 10px; }
.dial { width: 210px; height: 210px; margin: 16px auto 0; position: relative; flex-shrink: 0; --degrees: 60deg; }
.dial-ticks { position: absolute; inset: 0; background: repeating-conic-gradient(from -1deg, #4b4d56 0deg 1deg, transparent 1deg 7.5deg); border-radius: 50%; mask: radial-gradient(transparent 0 66%, #000 66.5% 69%, transparent 69.5%); }
.dial-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-arc { stroke: #ff4b50; stroke-width: 2; stroke-dasharray: 30 180; stroke-linecap: round; fill: none; }
.dial-knob { fill: #ff4b50; }
.dial-face { position: absolute; inset: 24px; border-radius: 50%; background: #1c1e23; border: 1px solid #34363f; box-shadow: 7px 9px 18px #0008, -5px -5px 14px #ffffff05, inset 0 0 0 4px #17191d; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.dial-indicator { width: 4px; height: 4px; border-radius: 50%; background: #ff4b50; position: absolute; top: 25px; }
.dial output { font-family: var(--font-text); font-size: 54px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.dial label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .17em; color: #a5a8b1; font-size: 8px; margin-top: 8px; }
.dial input { position: absolute; inset: 0; width: 100%; height: 100%; appearance: none; background: transparent; border: 0; cursor: ew-resize; margin: 0; z-index: 2; border-radius: 50%; }
.dial input::-webkit-slider-thumb { appearance: none; width: 1px; height: 1px; background: transparent; }
.dial input::-moz-range-thumb { width: 1px; height: 1px; border: 0; background: transparent; }
.dial input::-moz-range-track { background: transparent; border: 0; }
.dial:has(input:focus-visible) { outline: 2px solid #ff4b50; outline-offset: 5px; border-radius: 50%; }
.dial-hint { text-align: center; color: #a5a8b1; font-size: 8px; letter-spacing: .05em; margin-top: 4px; text-transform: uppercase; }
.device-presets { display: flex; gap: 10px; margin-top: 20px; }
.device-presets button { min-height: 44px; flex: 1; border: 1px solid #34363e; border-radius: 30px; color: #b5b7bf; font-family: inherit; font-size: 11px; background: #1c1e23; box-shadow: 3px 4px 7px #0006, -3px -3px 8px #ffffff03; cursor: pointer; transition: transform 150ms ease, color 150ms ease, background-color 150ms ease; }
.device-presets button[aria-pressed="true"] { color: #ff6a6e; background: #16181c; box-shadow: inset 2px 3px 8px #0005; }
.device-presets button:active { transform: translateY(1px) scale(.985); }
.device-essentials { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid #33363e; border-radius: 18px; margin-top: 18px; box-shadow: 4px 4px 8px #0004; }
.device-essentials > span { font-size: 12px; font-weight: 500; }
.device-essentials img { width: 101px; height: 33px; object-fit: contain; object-position: left; }
.device-essentials p { color: #a5a8b1; font-size: 8px; line-height: 1.4; }
.device-preview-note { font-size: 9px; color: #a5a8b1; text-align: center; margin-top: auto; padding-top: 13px; }
.device-home { width: 75px; height: 3px; border-radius: 3px; background: #d9d9df; margin: auto auto 0; }

/* App screenshots stay complete in the chapter frame at every width. */
#how-it-works .mo-pc__visuals { background: #22252b; border: 1px solid #353840; aspect-ratio: 1 / 1; height: min(620px, calc(100svh - 192px)); }
#how-it-works .mo-pc__visual { background: #22252b; }
#how-it-works .mo-pc__visual > img { height: 100%; width: 100%; object-fit: contain; aspect-ratio: auto; padding: 24px; }
#how-it-works:not(.is-live) .mo-pc__visual { height: 320px; }
#how-it-works:not(.is-live) .mo-pc__visual > img { max-height: none; }
#how-it-works .mo-pc__text h2 { margin-bottom: 32px; }
#how-it-works .mo-pc__step h3 { font-size: 20px; }
.section-head--split > p { color: var(--muted); max-width: 38ch; }
#essentials .section-head > p { color: var(--muted); font-size: var(--t-lead); max-width: none; }
#essentials .section-head { max-width: none; column-gap: var(--gutter); }
.feature-grid { flex: 1; min-height: 0; }
.feature-grid .card { display: flex; flex-direction: column; }
.feature-grid .panel { --p-h: 280px; flex: 1; background: #22252b; }
#essentials .panel { background: #181a1e; }
.essentials-panel { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }
.essential-strip { display: grid; justify-items: center; gap: 16px; }
.essential-strip img { width: 244px; height: 80px; max-width: 90%; object-fit: contain; }
.essential-strip p { color: #c3c5cb; font: 13px/1.5 var(--font-mono); }
.allowed-row { padding-top: 24px; font-size: 14px; color: #c3c5cb; display: flex; align-items: center; gap: 8px; }
.allowed-dot { width: 6px; height: 6px; background: #ff4b50; border-radius: 50%; }
.privacy-panel { display: flex; justify-content: center; align-items: center; gap: 32px; }
.privacy-ring { width: 120px; height: 120px; border-radius: 50%; border: 1px solid #41434a; box-shadow: 8px 8px 16px #0005, -6px -6px 12px #ffffff03; color: #ff4b50; display: grid; place-items: center; }
.privacy-lines { display: grid; gap: 12px; font-size: 14px; color: #c3c5cb; }
.privacy-lines > span:last-child { font: 12px/1.5 var(--font-mono); color: #a5a8b1; }
.questions-intro { max-width: 32ch; color: var(--muted); margin-block: 24px 32px; }
#questions .faq__item { padding-block: 30px; }
#questions .faq__item:first-child { padding-top: 0; }
#questions .faq__item p { font-size: 16px; color: #b7b9c2; }
.faq-brand { display: block; margin-top: 32px; }
.link { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; }
.footer.closing.footer--statement { --ground-bg: #f0f0f3; --ground-surface: #dfdfe2; --ground-ink: #181a1e; --ground-muted: #5b5d61; --ground-accent: #c72b34; color-scheme: light; }
.closing-kicker { font: 14px/1.5 var(--font-mono); color: var(--muted); margin-bottom: 24px; }
.closing__cta h2 { max-width: 25ch; }
.closing__cta .t-lead { color: var(--muted); margin-top: 24px; }
.footer .btn--primary { gap: 16px; }
.footer__legal { flex-wrap: wrap; gap: 12px 24px; }
.footer__legal > span { font-size: 12px; }
.footer__legal .trademark-credit { flex-basis: 100%; }
.footer__col a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer ul { gap: 0; }

@media (hover: hover) and (pointer: fine) {
  .device-presets button:hover { transform: translateY(-1px); background: #292c32; color: #f0f0f3; }
  .device-presets button[aria-pressed="true"]:hover { color: #ff6a6e; }
}
@media (min-width: 1024px) and (max-height: 790px) {
  .device { transform: scale(.83); transform-origin: top center; }
  .hero .hero-bottom { margin-top: 32px; }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  .nav__links { gap: 12px; }
  .nav__link { font-size: 13px; }
  .nav .btn { padding-inline: 16px; font-size: 13px; }
  .hero h1 { font-size: 52px; }
  .hero__text > .btn-row .btn { padding-inline: 16px; font-size: 14px; }
  #essentials .panel { --p-h: 240px; }
  #questions .faq__item { padding-block: 18px; }
  #questions .faq__item p { font-size: 15px; }
}
@media (max-width: 1023px) {
  .hero h1 { max-width: 15ch; }
  .hero .hero__lead { max-width: 52ch; }
  .hero .hero-bottom { display: none; }
  .hero .live-preview { overflow: clip; min-height: 240px; border-radius: 24px; background: #181a1e88; }
  .hero .live-preview .device { width: 280px; height: 620px; max-height: none; }
  .hero .device-presets { display: none; }
  .hero .live-preview > .stage { --fade-h: 96px; }
  #how-it-works:not(.is-live) .mo-pc__visual { height: 200px; }
  #how-it-works .mo-pc__text h2 { margin-bottom: 0; }
  .feature-grid { row-gap: 24px; }
  #essentials { --h: 2; }
  .feature-grid .card { min-height: 420px; }
  #questions { --h: 1; }
  #questions .faq { margin-top: 48px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  main > #how-it-works:not(.is-live) { height: auto; min-height: 100svh; }
  #how-it-works .mo-pc__steps { gap: 16px; }
  #how-it-works .mo-pc__step { padding-top: 16px; }
  #how-it-works .mo-pc__text { gap: 24px; }
  #questions > .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #questions > .wrap > .span-5 { grid-column: 1 / span 5; }
  #questions > .wrap > .faq { grid-column: 7 / span 6; }
  #questions h2 br { display: none; }
  #questions .questions-intro { max-width: none; margin-block: 16px; }
  #questions .faq { margin-top: 0; }
  #questions .faq__item { padding-block: 12px; }
  #questions .faq__item p { font-size: 15px; }
}
@media (max-width: 639px) {
  .hero::after { inset: 8px; border-radius: 24px; }
  .hero h1 { max-width: 13ch; }
  .hero .hero__lead { font-size: 17px; max-width: 36ch; }
  .hero .hero-note { font-size: 12px; }
  .hero__text > .btn-row { margin-top: 24px; }
  .hero__text > .hero__lead { margin-top: 16px; }
  .hero .live-preview { margin-top: 24px; }
  .hero .live-preview .device { transform: scale(.82); transform-origin: top center; }
  .hero .hero__kicker { font-size: 12px; }
  .hero .btn { font-size: 14px; padding-inline: 16px; }
  main > #how-it-works:not(.is-live) { height: auto; min-height: 200lvh; }
  #how-it-works .mo-pc__step { padding-left: 0; border-left: 0; }
  #how-it-works .mo-pc__step h3 { font-size: 18px; }
  #how-it-works:not(.is-live) .mo-pc__visual { height: 300px; }
  #how-it-works .mo-pc__visual > img { padding: 12px; }
  #essentials { --hm: 2; }
  .feature-grid .card { min-height: 420px; }
  .feature-grid .panel { --p-h: 244px; min-height: 244px; }
  .privacy-panel { flex-direction: column; gap: 20px; }
  .privacy-ring { width: 100px; height: 100px; }
  .privacy-lines { text-align: center; gap: 8px; }
  .allowed-row { font-size: 12px; padding-top: 8px; }
  .essential-strip img { width: 210px; height: 69px; }
  #questions { --hm: 2; }
  #questions > .wrap { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  #questions .faq { margin-top: 40px; }
  #questions .faq { display: grid; height: 100%; min-height: 0; }
  #questions .faq__item { padding-block: 19px; }
  #questions .faq__item p { font-size: 16px; }
  .faq-brand { width: 80px; height: 80px; margin-top: 24px; }
  .closing-kicker { font-size: 12px; }
  .closing__cta h2 { font-size: 34px; }
  .footer.closing { min-height: 100lvh; }
  .footer .closing__cta { gap: 24px; min-width: 0; }
  .footer .closing__cta .btn { font-size: 16px; padding-inline: 16px; gap: 8px; }
  .footer .closing__links { gap: 24px; min-width: 0; }
  .footer.closing > .wrap { row-gap: 32px; }
  .footer .closing__links > .grid { row-gap: 24px; }
  .footer__legal > span { font-size: 12px; }
  .footer .nav__logo { font-size: 24px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 36px; }
  .hero .hero__lead { font-size: 16px; }
  .hero .btn { padding-inline: 12px; font-size: 13px; gap: 8px; }
  .footer .closing__cta .btn { font-size: 14px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .device-presets button { transition: none; }
}