:root { color-scheme: light; --ink: #16243a; --blue: #173d73; --muted: #516176; --line: #d8e1ed; }
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.7; }
.wrap { width: min(100% - 2.5rem, 48rem); margin-inline: auto; }
header { background: var(--blue); color: white; padding-block: 1.5rem; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: white; text-decoration: none; margin: 0; font-size: 1.125rem; font-weight: 700; }
nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
nav a { color: white; text-decoration-thickness: .08em; text-underline-offset: .3em; }
nav a[aria-current] { font-weight: 700; }
main { padding-block: 3rem; }
.eyebrow, .date { color: var(--muted); font-size: .9375rem; }
.eyebrow { margin: 0 0 .5rem; }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 1rem; }
h2 { font-size: 1.375rem; line-height: 1.35; margin: 0 0 .8rem; }
p { margin: 0 0 1rem; }
.intro { font-size: 1.125rem; color: var(--muted); margin-bottom: 2rem; }
section { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.contact { padding: 1.5rem; background: #eef4fc; border: 1px solid var(--line); border-radius: .5rem; margin-block: 1rem; }
section p:last-child { margin-bottom: 0; }
a { color: var(--blue); overflow-wrap: anywhere; }
li { padding-left: .25rem; margin-block: .5rem; }
details { border-top: 1px solid var(--line); padding-block: 1rem; }
summary { cursor: pointer; font-weight: 600; padding-block: .4rem; }
details p { margin: .8rem 0 .2rem; }
footer { border-top: 1px solid var(--line); padding-block: 1.5rem; color: var(--muted); font-size: .9375rem; }
:focus-visible { outline: 3px solid #dd9115; outline-offset: 4px; }
.page { width: min(100% - 2rem, 62rem); margin-inline: auto; padding-block: 1.5rem; }
.page > header { border-radius: 1rem; background: linear-gradient(120deg, #173d73, #10233e); }
.page > header .wrap { width: calc(100% - 3rem); }
.page > main.wrap, .page > footer.wrap { width: min(100% - 2rem, 48rem); }
.marketing-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; padding: clamp(1.5rem, 5vw, 3rem); }
.marketing-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.marketing-hero .eyebrow { color: #c8e1ff; font-weight: 600; margin-bottom: 1.25rem; }
.summary { color: #dce8f8; font-size: 1.125rem; }
.release-label { font-size: .9375rem; color: #c8e1ff; margin-block: 1.5rem; }
.marketing-hero nav { gap: .75rem; }
.marketing-hero nav a, .button-link { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 1rem; border-radius: .5rem; background: white; color: var(--blue); font-weight: 600; text-decoration: none; }
.record-preview { padding: 1.5rem; background: white; color: var(--ink); border-radius: .8rem; box-shadow: 0 15px 35px #0003; }
.example-label { font-size: .875rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
.record-category { font-size: .875rem; color: var(--blue); margin-bottom: .4rem; font-weight: 600; }
.record-note { color: var(--muted); }
.record-preview dl { margin: 0; }
.record-preview dl div { padding-block: .8rem; border-top: 1px solid var(--line); }
.record-preview dt { font-size: .875rem; color: var(--muted); }
.record-preview dd { margin: .25rem 0 0; font-weight: 500; }
.record-footer { font-size: .875rem; color: var(--blue); margin: .5rem 0 0; }
.marketing-page main { padding-block: 1.5rem; }
.marketing-page section { padding: 2rem; margin-block: 1rem; border: 1px solid var(--line); border-radius: .8rem; }
.marketing-page .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin-top: 0; border: 0; }
.feature-grid article { padding: 1.5rem; border: 1px solid var(--line); border-radius: .8rem; }
.feature-grid h2 { font-size: 1.25rem; }
.feature-grid p:last-child { margin-bottom: 0; }
.feature-label { font-size: .875rem; font-weight: 700; color: var(--blue); margin-bottom: .5rem; }
.workflow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-left: 1.3rem; margin-bottom: 0; }
.workflow li { padding-left: .25rem; }
h3 { font-size: 1.125rem; line-height: 1.4; margin: 0 0 .5rem; }
.privacy-feature { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; background: #eef4fc; }
.privacy-feature .button-link { border: 1px solid var(--line); }
.marketing-page footer { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.marketing-page footer nav a { color: var(--blue); }
@media (max-width: 760px) {
  .marketing-hero, .privacy-feature { grid-template-columns: 1fr; }
  .record-preview { max-width: 28rem; }
  .marketing-page .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow ol { grid-template-columns: 1fr; gap: .75rem; }
  .privacy-feature .button-link { justify-self: start; }
}
@media (max-width: 480px) {
  .page { width: calc(100% - 1rem); padding-block: .5rem; }
  .marketing-page .feature-grid { grid-template-columns: 1fr; }
  .marketing-page section { padding: 1.25rem; }
}
.skip { position: absolute; top: -5rem; left: 1rem; background: white; padding: .7rem 1rem; z-index: 5; }
.skip:focus { top: 1rem; }
@media (max-width: 480px) { .wrap { width: calc(100% - 2rem); } main { padding-block: 2rem; } .contact { padding: 1rem; } }

.app-icon { display: block; flex-shrink: 0; border-radius: 22%; }
.hero-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.marketing-hero .hero-brand .eyebrow { margin: 0; }
/* Shared app-inspired surfaces; browser appearance remains independent of the app. */
:root { color-scheme: light dark; --ink: #182235; --blue: #194dae; --muted: #4d596e; --line: #bbc6d8; --canvas: #eef1f6; --surface: #fff; --chrome: #e1e8f4; --highlight: #d3e0f8; }
body { background: var(--canvas); color: var(--ink); font-size: 1rem; overflow-wrap: break-word; }
.wrap { width: min(100% - 2rem, 64rem); }
.page { width: min(100% - 1rem, 76rem); }
.page > main.wrap, .page > footer.wrap { width: min(100% - 2rem, 64rem); }
.page > header:not(.marketing-hero) { background: var(--chrome); color: var(--ink); border-bottom: 1px solid var(--line); }
.brand, nav a { color: var(--ink); }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.page > header:not(.marketing-hero) nav a[aria-current] { background: var(--highlight); border-radius: .75rem; padding-inline: .75rem; }
main { padding-block: 2rem; }
main > section, .marketing-page section, .feature-grid article { background: var(--surface); padding: 1.5rem; border: 0; border-radius: 1rem; margin-block: 1rem; }
.contact, .privacy-feature { background: var(--highlight); }
.hint { background: var(--highlight); border-inline-start: .25rem solid var(--blue); border-radius: .75rem; padding: 1rem; }
details { padding-block: .5rem; }
summary { min-height: 2.75rem; padding: .75rem .5rem; }
details[open] summary { background: var(--highlight); border-radius: .75rem; color: var(--blue); }
details p { padding-inline: .5rem; }
.record-preview { background: var(--surface); }
.marketing-hero { color: #f1f5fc; }
.marketing-hero nav a { color: #194dae; }
.marketing-page .feature-grid { background: transparent; }
footer { background: var(--chrome); border-radius: .75rem; padding-inline: 1rem; }
:focus-visible { outline-color: var(--blue); }
.app-icon { object-fit: contain; }
 :root[data-appearance="dark"] { --ink: #f1f5fc; --blue: #90b8ff; --muted: #bac5d7; --line: #7586a1; --canvas: #10131b; --surface: #1b2230; --chrome: #303c50; --highlight: #243e63; }
 :root[data-appearance="dark"] .page > header.marketing-hero { background: linear-gradient(120deg, #243e63, #1b2230); }
 :root[data-appearance="dark"] .marketing-hero .button-link, :root[data-appearance="dark"] .marketing-hero nav a, :root[data-appearance="dark"] .button-link { background: var(--highlight); color: var(--blue); }
 :root[data-appearance="dark"] .marketing-hero .eyebrow, :root[data-appearance="dark"] .release-label { color: #bac5d7; }
 :root[data-appearance="dark"] .skip { background: var(--surface); }
@media (max-width: 40rem) {
 .page > header .wrap { width: calc(100% - 2rem); }
 main > section { padding: 1.1rem; }
 header .wrap { gap: .5rem; }
 nav { gap: .75rem; }
 .hero-brand { flex-wrap: wrap; }
 .marketing-hero, .privacy-feature, .workflow ol { grid-template-columns: 1fr; }
 .marketing-page .feature-grid { grid-template-columns: 1fr; }
}
/* Long labels and zoomed text may wrap instead of widening a small screen. */
body { overflow-wrap: anywhere; }
.marketing-hero > *, .feature-grid > *, .workflow li, .privacy-feature > * { min-width: 0; }
.hero-icon { max-width: 100%; height: auto; }
@media (max-width: 40rem) { .marketing-hero { padding: 1.25rem; } .record-preview { padding: 1rem; } }

:root[data-appearance="light"] { color-scheme: light; }
:root[data-appearance="dark"] { color-scheme: dark; }
.appearance-control { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; padding: 1rem; color: var(--ink); }
.appearance-control select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; min-height: 44px; padding: .4rem .75rem; max-width: 100%; }

.warning { background: #ffe080; color: #302000; border-inline-start: .3rem solid #b87500; padding: 1rem; border-radius: .75rem; }

/* Current app media: responsive, user-controlled playback. */
.hero-screen { margin: 0; max-width: 22rem; justify-self: center; }
.hero-screen img { display: block; width: 100%; height: auto; border-radius: .85rem; }
.hero-screen p { text-align: center; font-size: .875rem; color: #dce8f8; margin: .6rem 0 0; }
.screenshot-grid, .preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.screenshot-grid figure { min-width: 0; margin: 0; }
.screenshot-grid img { display: block; width: 100%; height: auto; border-radius: .75rem; }
.screenshot-grid figcaption { font-size: .9375rem; margin-top: .65rem; }
.preview-grid article { min-width: 0; }
.preview-grid video { display: block; width: 100%; aspect-ratio: 3 / 4; background: #10131b; border-radius: .75rem; }
.preview-grid p { margin-top: .75rem; }
main > nav a { color: var(--blue); }
@media (max-width: 760px) { .screenshot-grid, .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .screenshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .preview-grid { grid-template-columns: 1fr; } }

.vault-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* App Store destination is ready; public availability remains pending release. */
.store-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.store-hero { margin-block: 1.25rem 1.5rem; }
.store-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; padding: .8rem 1.15rem; border: 1px solid #66818f; border-radius: .85rem; background: #071d26; color: #fff; text-decoration: none; line-height: 1.25; }
.store-link small, .store-link strong { display: block; }
.store-link small { font-size: .8rem; color: #c3d8e2; margin-bottom: .15rem; }
.store-link strong { font-size: 1.65rem; letter-spacing: -.02em; }
.store-link:hover { border-color: #66cce6; background: #123745; color: #fff; }
.store-link:focus-visible, .store-qr-mini:focus-visible { outline: 3px solid #ffe080; outline-offset: 4px; }
.store-qr-mini { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: .75rem; max-width: 19rem; padding: .5rem .85rem .5rem .5rem; border: 1px solid #c5d9e1; border-radius: .85rem; background: #fff; color: #102c3a; text-decoration: none; line-height: 1.3; }
.store-qr-mini img { display: block; width: 112px; height: 112px; background: #fff; border-radius: .3rem; }
.store-qr-mini strong, .store-qr-mini small { display: block; }
.store-qr-mini strong { font-size: .95rem; }
.store-qr-mini small { margin-top: .35rem; font-size: .8rem; color: #4b6170; }
.store-status { max-width: 37rem; margin: .75rem 0 0; color: #dce8f8; font-size: .9rem; }
.marketing-page .store-release { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; background: var(--highlight); padding: clamp(1.25rem, 4vw, 2.5rem); }
.store-release h2 { max-width: 23ch; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.store-release .store-help { margin-top: 1.25rem; }
.store-qr-large { margin: 0; text-align: center; }
.store-qr-large img { display: block; width: 196px; height: 196px; max-width: 100%; background: #fff; border-radius: .75rem; }
.store-qr-large figcaption { margin-top: .65rem; font-size: .9rem; }
@media (max-width: 40rem) { .marketing-page .store-release { grid-template-columns: 1fr; gap: 1.5rem; } .store-qr-large { justify-self: start; } }
@media (max-width: 24rem) { .store-qr-mini { grid-template-columns: 96px minmax(0, 1fr); } .store-qr-mini img { width: 96px; height: 96px; } }

/* Compact About metadata stays separate from instructions and footer links. */
:root { --about-surface: #e4eaf2; --about-edge: #7890a9; }
:root[data-appearance="dark"] { --about-surface: #233041; --about-edge: #829bb2; }
.page > footer.site-footer { display: grid; grid-template-columns: minmax(0, 40rem) minmax(10rem, 1fr); align-items: start; gap: 1.25rem; width: min(100% - 2rem, 64rem); margin: 1rem auto 0; padding: 1.25rem 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); }
.about-card { padding: 1rem 1.15rem; border: 1px solid var(--line); border-inline-start: .2rem solid var(--about-edge); border-radius: .75rem; background: var(--about-surface); }
.about-heading { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.about-heading img { display: block; flex: 0 0 32px; border-radius: .45rem; }
.about-card h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.about-details { display: grid; gap: .2rem; }
.about-card p { margin: 0; font-size: .9rem; line-height: 1.45; }
.about-card .about-version { margin-top: .25rem; font-size: .8rem; color: var(--muted); }
.about-card a { color: var(--blue); overflow-wrap: anywhere; text-underline-offset: .15em; }
.site-footer .footer-links { display: flex; align-content: start; align-items: start; flex-wrap: wrap; gap: .15rem 1rem; padding-top: .2rem; }
.site-footer .footer-links a { color: var(--blue); min-height: 44px; font-size: .9rem; line-height: 1.4; align-items: center; }
@media (max-width: 48rem) { .page > footer.site-footer { grid-template-columns: 1fr; gap: .7rem; } }