/*
 * JotVoice public Web. Colors follow the app icon and the app:
 * navy chrome, indigo accent and the icon's orange as a small accent.
 * The CSP allows no inline style or external font, so everything is here.
 */
:root {
  color-scheme: light;
  --navy: #141a3a;
  --navy-deep: #0e1330;
  --navy-text: #d5daf3;
  --navy-muted: #b8c0e6;
  --ink: #202731;
  --ink-2: #3b4454;
  --muted: #59616f;
  --line: #dce0e7;
  --soft: #edf0f4;
  --wash: #f5f6f9;
  --accent: #354bc1;
  --accent-ink: #26379a;
  --accent-soft: #eef0fb;
  --orange: #ff9f5a;
  --orange-light: #ffad70;
  --warm: #b4570f;
  --warm-soft: #fff1e6;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Noto Sans", "Yu Gothic UI", Meiryo, sans-serif;
  line-height: 1.75;
  color: var(--ink);
  background: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.icon { display: block; flex: none; }
.wrap { max-width: 75rem; margin-inline: auto; padding-inline: 2rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Header and language menu */
.site-header { position: relative; z-index: 5; background: var(--navy); color: #fff; border-block-end: 1px solid rgb(255 255 255 / 8%); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block: .875rem; }
.brand { display: flex; align-items: center; gap: .625rem; margin-inline-end: auto; color: #fff; font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.brand:hover { color: #fff; }
.brand img { border-radius: 22%; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-nav a, .header-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy-text); text-decoration: none; }
.site-nav a:hover, .header-link:hover { color: #fff; }
.languages { position: relative; }
.languages summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-inline: .875rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 10px; cursor: pointer; }
.languages summary::-webkit-details-marker { display: none; }
.languages[open] summary { border-color: var(--orange-light); }
.language-panel { position: absolute; inset-inline-end: 0; top: 3.25rem; width: min(22.5rem, calc(100vw - 2rem)); padding: .5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgb(20 26 58 / 22%); line-height: 1.5; }
.language-panel p { padding: .5rem .75rem .375rem; color: var(--muted); font-size: .75rem; font-weight: 600; }
.language-panel ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.language-panel a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding-inline: .75rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
.language-panel a:hover { background: var(--wash); }
.language-panel a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.waves { position: absolute; inset-inline-end: -16rem; top: -7.5rem; width: 56rem; height: 56rem; color: var(--accent); pointer-events: none; }
.hero .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem; padding-block: 5.5rem 6rem; }
.hero-text { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .875rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 999px; color: var(--navy-text); font-size: .875rem; font-weight: 600; }
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); }
.hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.3; font-weight: 800; word-break: auto-phrase; }
.hero h1 span { display: block; }
.hero h1 .highlight { color: var(--orange-light); }
.hero .lead { max-width: 36em; color: var(--navy-text); font-size: 1.125rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.store { display: inline-flex; align-items: center; gap: .6rem; min-width: 10.25rem; min-height: 3.3rem; padding-block: .375rem; padding-inline: .9rem 1.15rem; border: 1px solid #a6a6a6; border-radius: .7rem; background: #000; color: #fff; text-decoration: none; }
.store-text { display: grid; line-height: 1.12; text-align: start; }
.store small { font-size: .66rem; font-weight: 600; }
.store strong { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; }
a.store:hover { border-color: #fff; background: #222; color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 56px; padding-inline: 1.125rem; color: #fff; font-weight: 600; text-decoration: none; }
.text-link:hover { color: var(--orange-light); }
.trust { display: flex; align-items: center; gap: .625rem; color: var(--navy-muted); font-size: .875rem; }
.trust .icon { color: var(--orange-light); }

/* Phone mockup of the app's current-notification screen */
.phone-column { flex: 0 1 21.25rem; min-width: 0; display: flex; justify-content: center; }
.phone { width: 20rem; padding: .75rem; border-radius: 3rem; background: #0b0f22; box-shadow: 0 40px 80px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 12%); }
.screen { height: 40rem; padding-block-start: 1.75rem; border-radius: 2.375rem; overflow: hidden; background: #181e28; color: #f4f5f8; display: flex; flex-direction: column; }
.screen-bar { min-height: 44px; padding: .25rem 1.25rem 0; display: flex; align-items: center; justify-content: space-between; font-size: .875rem; font-weight: 700; }
.screen-brand { display: flex; align-items: center; gap: .5rem; color: #c0c8d7; font-weight: 800; }
.screen-play { display: flex; align-items: center; gap: .375rem; }
.screen-body { flex-grow: 1; padding: .5rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.screen-meta { display: flex; justify-content: space-between; gap: .5rem; color: #c0c8d7; font-size: .8125rem; }
.screen-title { font-size: 1.625rem; line-height: 1.4; font-weight: 600; }
.speaking { display: flex; align-items: center; gap: .625rem; color: #c0c8d7; font-size: .8125rem; }
.bars { display: flex; align-items: center; gap: 3px; height: 20px; }
.bars span { width: 3px; border-radius: 2px; background: #b8c4ff; }
.bars span:nth-child(1) { height: 9px; }
.bars span:nth-child(2) { height: 15px; }
.bars span:nth-child(3) { height: 20px; }
.bars span:nth-child(4) { height: 12px; }
.bars span:nth-child(5) { height: 17px; }
.bars span:nth-child(6) { height: 7px; }
.screen-rule { height: 1px; background: #3b4454; }
.screen-content { color: #d5dbe5; font-size: .875rem; }
.screen-content strong { display: block; margin-block-end: .25rem; color: #f4f5f8; font-size: .9375rem; }
.screen-content p + p { margin-block-start: .5rem; }
.screen-stop { padding: .875rem 1.25rem 1.375rem; border-block-start: 1px solid #3b4454; }
.screen-stop span { min-height: 56px; border-radius: 12px; background: var(--orange-light); color: #302015; font-size: 1.125rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: .625rem; }

/* Sections */
.section { padding-block: 6.5rem; }
.section.tight-top { padding-block-start: 2.5rem; }
.kicker { margin-block-end: .5rem; color: var(--accent); font-size: .875rem; font-weight: 700; letter-spacing: .06em; }
.section h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.35; font-weight: 800; word-break: auto-phrase; }
.section h2 span { display: block; }
.section-lead { max-width: 46em; margin-block-start: 1rem; color: var(--muted); font-size: 1.0625rem; }
.grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-start: 3rem; }
.grid > * { flex: 1 1 18rem; min-width: 0; }
.tile-icon { width: 3rem; height: 3rem; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.tile-icon.warm { background: var(--warm-soft); color: var(--warm); }

/* Supported AI */
.ai { border-block-end: 1px solid var(--soft); }
.ai .wrap { padding-block: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; }
.ai h2 { color: var(--muted); font-size: 1rem; font-weight: 700; }
.flow-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.25rem; }
.ai-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.chip { display: inline-flex; align-items: center; gap: .625rem; min-height: 56px; padding-inline: 1.5rem; border: 1px solid var(--line); border-radius: 14px; font-size: 1.25rem; font-weight: 700; }
.chip.other { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-inline: 1.25rem; border-style: dashed; color: var(--ink-2); font-size: .9375rem; line-height: 1.35; }
.chip.other small { color: var(--muted); font-size: .75rem; font-weight: 400; }
.chip.service { border-color: var(--navy); background: var(--navy); color: #fff; }
.chip.service img { border-radius: 22%; }
.chip.device { border: 2px solid var(--accent); color: var(--accent-ink); font-size: 1.125rem; }
.arrow { color: #8a93a6; }
.ai p { max-width: 44em; color: var(--muted); font-size: .9375rem; }

/* Use cases */
.case { padding: 1.75rem; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: .875rem; }
.case h3 { font-size: 1.25rem; }
.ask { padding: .625rem .875rem; border-radius: 10px; background: var(--wash); color: var(--ink-2); font-size: .9375rem; }
.ask small { display: block; color: var(--muted); font-size: .8125rem; }
.case p:last-child { color: var(--muted); }

/* Features */
.features { gap: 2.5rem 2rem; }
.feature { display: flex; gap: 1.125rem; }
.feature .tile-icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--navy); color: var(--orange-light); }
.feature h3 { margin-block-end: .375rem; font-size: 1.125rem; }
.feature p { color: var(--muted); }
.footnote { margin-block-start: 2.5rem; color: var(--muted); font-size: .8125rem; }

/* Security */
.security { background: var(--wash); border-block: 1px solid var(--soft); }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; margin-block: 3rem 3.5rem; }
.flow-step { flex: 1 1 14rem; min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: .625rem; }
.flow-step.device { border: 2px solid var(--accent); }
.flow-step.device .tile-icon { background: var(--accent); color: #fff; }
.flow-step small { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.flow-step strong { line-height: 1.6; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; border-radius: 999px; background: #eceef2; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.flow-arrow { flex: 0 0 auto; display: flex; align-items: center; color: #8a93a6; }
.points { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.point { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.point h3 { display: flex; align-items: center; gap: .625rem; font-size: 1.125rem; }
.point h3 .icon { color: var(--accent); }
.point p { color: var(--muted); }

/* How it works */
.steps { margin: 3rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.steps li { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: .75rem; padding-block-start: 1.25rem; border-block-start: 3px solid var(--accent); }
.steps li:last-child { border-color: var(--orange); }
.step-number { color: var(--accent); font-weight: 800; }
.steps li:last-child .step-number { color: var(--warm); }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--muted); }

/* FAQ */
.faq { max-width: 55rem; }
.faq h2 { text-align: center; }
.faq-list { margin-block-start: 2rem; border-block-start: 1px solid var(--line); }
.faq-item { padding: 1.5rem .25rem; border-block-end: 1px solid var(--line); }
.faq-item h3 { margin-block-end: .5rem; font-size: 1.0625rem; }
.faq-item p { color: var(--muted); }

/* Call to action */
.cta { background: var(--navy); color: #fff; }
.cta .wrap { padding-block: 5.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.cta img { border-radius: 22%; }
.cta h2 { font-size: clamp(1.625rem, 3.5vw, 2.125rem); line-height: 1.4; font-weight: 800; }
.cta h2 span { display: block; }
.cta .actions { justify-content: center; }

/* Footer */
.site-footer { background: var(--navy-deep); color: var(--navy-muted); font-size: .875rem; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; padding-block: 2rem; }
.footer-brand { display: flex; align-items: center; gap: .5rem; margin-inline-end: auto; color: #fff; font-weight: 700; }
.footer-brand img { border-radius: 22%; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy-text); }
.site-footer a:hover { color: #fff; }
.legal { padding-block: 1.25rem 2.5rem; border-block-start: 1px solid rgb(255 255 255 / 12%); color: #a3acd6; font-size: .75rem; line-height: 1.8; }

/* Privacy policy */
.page-title { background: var(--wash); border-block-end: 1px solid var(--soft); }
.page-title .wrap { padding-block: 3.5rem 3rem; display: flex; flex-direction: column; gap: .5rem; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .875rem; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.page-title h1 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.3; font-weight: 800; }
.translation-note { max-width: 46em; color: var(--muted); font-size: .875rem; }
.policy { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem; padding-block: 3rem 6rem; line-height: 1.85; }
.toc { flex: 1 1 13.75rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; line-height: 1.5; }
.toc h2 { margin-block-end: .5rem; color: var(--muted); font-size: .8125rem; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.toc a:hover { color: var(--accent); }
.policy-body { flex: 999 1 35rem; min-width: 0; max-width: 47.5rem; }
.policy-body > p { margin-block-end: 2rem; }
.summary { margin-block-end: 3rem; padding: 1.5rem 1.75rem; border-radius: 16px; background: var(--accent-soft); line-height: 1.7; }
.summary h2 { display: flex; align-items: center; gap: .625rem; margin-block-end: .75rem; color: var(--accent-ink); font-size: 1.0625rem; }
.summary ul { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: .375rem; color: var(--ink-2); font-size: .9375rem; }
.summary p { margin-block-start: .75rem; color: var(--muted); font-size: .8125rem; }
.policy-body section { margin-block-end: 3rem; }
.policy-body section h2 { margin-block-end: 1rem; padding-block-end: .75rem; border-block-end: 1px solid var(--line); font-size: 1.5rem; line-height: 1.4; font-weight: 800; }
.policy-body section p + p { margin-block-start: 1rem; }
.policy-body section ul { margin: 0; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.contact { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.contact span { flex: 1 1 16rem; }
.contact a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-inline: 1rem; border: 1px solid #a5afdc; border-radius: 10px; font-weight: 600; text-decoration: none; }

/* Right-to-left (Arabic): arrows point the way the text reads. */
[dir="rtl"] .arrow svg, [dir="rtl"] .flow-arrow svg, [dir="rtl"] .breadcrumb .icon { transform: scaleX(-1); }

@media (max-width: 40rem) {
  .wrap { padding-inline: 1.25rem; }
  .section { padding-block: 4.5rem; }
  .hero .wrap { padding-block: 3.5rem 4rem; }
  .flow-arrow { flex-basis: 100%; justify-content: center; }
  .flow-arrow svg, [dir="rtl"] .flow-arrow svg { transform: rotate(90deg); }
}