/* usemarrow.com: one visual system with the app and the ads (plan/website/05_VISUAL_SYSTEM.md).
   Tokens reconciled against the app's themes (app/src/theme.ts): where the ad palette and the app differ, the app wins.
   Every text and background pair below is checked at WCAG 2.1 AA by site/tests/test_visual.py. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url("/static/fonts/NotoSansArabic-Regular.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-display: swap; src: url("/static/fonts/NotoSansArabic-Medium.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700; font-display: swap; src: url("/static/fonts/NotoSansArabic-Bold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  /* light: the app's light palette, with the ads' amber as the one accent */
  --bg: #F7F3EC; --surface: #FFFDF9; --surface-muted: #F0EAE0; --ink: #1F1A17; --ink-soft: #4A423C; --muted: #6B615A;
  --line: #E4DCD0; --accent: #7A2E3B; --accent-pressed: #5F2230; --accent-soft: #F3E6E6; --on-accent: #FFFDF9;
  --amber: #DFA021; --on-amber: #1F1A17; --band: #7A2E3B; --band-ink: #F7F3EC; --band-muted: rgba(247,243,236,0.82);
  --band-dark: #1A1A1A; --focus: #DFA021; --bezel: #000000; --shadow: 0 10px 30px rgba(31,26,23,0.10);
  --serif: Georgia, "Times New Roman", "Noto Naskh Arabic", serif;
  --sans: "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #17130F; --surface: #221D19; --surface-muted: #2C2520; --ink: #F3EDE5; --ink-soft: #D8CEC3; --muted: #AA9E91;
  --line: #3D352E; --accent: #E0939F; --accent-pressed: #C97E8A; --accent-soft: #3D2429; --on-accent: #1B1210;
  --amber: #DFA021; --on-amber: #1F1A17; --band: #221D19; --band-ink: #F3EDE5; --band-muted: rgba(243,237,229,0.78);
  --band-dark: #0E0B09; --shadow: 0 10px 30px rgba(0,0,0,0.45); color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #17130F; --surface: #221D19; --surface-muted: #2C2520; --ink: #F3EDE5; --ink-soft: #D8CEC3; --muted: #AA9E91;
  --line: #3D352E; --accent: #E0939F; --accent-pressed: #C97E8A; --accent-soft: #3D2429; --on-accent: #1B1210;
  --amber: #DFA021; --on-amber: #1F1A17; --band: #221D19; --band-ink: #F3EDE5; --band-muted: rgba(243,237,229,0.78);
  --band-dark: #0E0B09; --shadow: 0 10px 30px rgba(0,0,0,0.45); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); }
img, svg, picture { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-pressed); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.005em; color: var(--ink); }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 32px); margin-block-start: 2.2em; margin-block-end: 0.5em; }
h3 { font-size: 21px; margin-block-start: 1.6em; margin-block-end: 0.4em; }
h2:first-child, h3:first-child { margin-block-start: 0; }
p, ul, ol, table, blockquote, pre { margin: 0 0 1.05em; }
li { margin-block-end: 0.3em; }
strong { font-weight: 700; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; background: var(--surface-muted); padding: 1px 5px; border-radius: 5px; }
pre { background: var(--surface-muted); padding: 14px 16px; border-radius: 12px; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { border-inline-start: 3px solid var(--accent); margin-inline: 0; padding-inline-start: 16px; color: var(--ink-soft); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
table { border-collapse: collapse; inline-size: 100%; font-size: 15.5px; display: block; overflow-x: auto; }
th, td { text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line); }
sup.src { font-size: 0.68em; line-height: 0; }
sup.src a { text-decoration: none; padding: 0 2px; }
.wrap { max-inline-size: 1120px; margin: 0 auto; padding: 0 20px; }
.prose { max-inline-size: 720px; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header and footer */
header.top { border-bottom: 1px solid var(--line); background: var(--bg); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; min-block-size: 64px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 22px; min-block-size: 44px; }
.brand svg { inline-size: 28px; block-size: 28px; color: var(--accent); }
.beta { display: inline-flex; align-items: center; block-size: 20px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
nav.main { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
nav.main a { text-decoration: none; color: var(--ink-soft); font-size: 15px; padding: 10px 10px; display: inline-flex; align-items: center; min-block-size: 44px; border-radius: 8px; }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--ink); background: var(--surface-muted); }
nav.main a.get { color: var(--on-accent); background: var(--accent); font-weight: 700; padding-inline: 14px; }
nav.main a.get:hover { background: var(--accent-pressed); }
.theme { inline-size: 44px; block-size: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.theme svg { inline-size: 20px; block-size: 20px; }
.no-js .theme { display: none; }
footer.bottom { border-top: 1px solid var(--line); margin-block-start: 64px; padding: 36px 0 44px; font-size: 14.5px; color: var(--muted); }
footer.bottom .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px 32px; }
footer.bottom .fh { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
footer.bottom ul { list-style: none; padding: 0; margin: 0; }
footer.bottom li { margin: 0; }
footer.bottom a { color: var(--ink-soft); text-decoration: none; display: inline-flex; min-block-size: 36px; align-items: center; }
footer.bottom a:hover { color: var(--accent); text-decoration: underline; }
footer.bottom .legal { margin-block-start: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }

/* page scaffold */
main { padding-block-start: 24px; }
.crumbs { font-size: 14px; color: var(--muted); margin-block-end: 18px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--line); }
.crumbs a { color: var(--muted); }
.answer { font-size: 19px; line-height: 1.5; color: var(--ink-soft); border-inline-start: 4px solid var(--amber); padding-inline-start: 18px; margin: 20px 0 32px; max-inline-size: 720px; }
.pagehead { max-inline-size: 760px; margin-block-end: 8px; }
.pagehead .label { margin-block-end: 14px; }
.meta { font-size: 14px; color: var(--muted); margin-block-start: 28px; }
.sources { margin-block-start: 40px; padding-block-start: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.sources ol { padding-inline-start: 20px; }
.sources li { overflow-wrap: anywhere; }
.related { margin-block-start: 40px; }
.related ul { padding-inline-start: 20px; }

/* the ad language: label pill, headline, device column */
.label { display: inline-flex; align-items: center; block-size: 28px; padding: 0 12px; border-radius: 999px; background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 13.5px; }
.band { background: var(--band); color: var(--band-ink); padding: 56px 0; }
.band h1, .band h2, .band h3 { color: var(--band-ink); }
.band .muted, .band p.sub, .band .also { color: var(--band-muted); }
.band .also a { color: var(--band-ink); }
.band a { color: var(--band-ink); }
.band.dark { background: var(--band-dark); color: #F7F3EC; }
.band.dark h1, .band.dark h2, .band.dark h3, .band.dark a { color: #F7F3EC; }
.band.dark .muted, .band.dark p.sub, .band.dark .also { color: rgba(247,243,236,0.80); }
.cta-band h2 { margin-block-start: 0; }
.row2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.row2.flip > .copy { order: 2; }
.row2 > * { min-inline-size: 0; }
.copy h2 { margin-block-start: 0; font-size: clamp(26px, 3.4vw, 38px); }
.copy h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; }
.copy p.sub { font-size: 19px; margin-block-start: 14px; max-inline-size: 520px; }
.copy .label { margin-block-end: 16px; }
.sections > section { padding: 48px 0; border-top: 1px solid var(--line); }
.sections > section:first-child { border-top: 0; padding-block-start: 0; }
.sections > section.band { border-top: 0; }

/* the phone frame: one component, the screenshot at its native ratio inside, cropped by a prop */
.phone { margin: 0 auto; inline-size: min(100%, 330px); background: var(--bezel); border-radius: 44px; padding: 12px; box-shadow: var(--shadow); }
.phone .screen { border-radius: 34px; overflow: hidden; background: #000; aspect-ratio: 390 / 844; }
.phone .screen img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.phone.dense { border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: 0; }
.phone.dense .screen { border-end-start-radius: 0; border-end-end-radius: 0; aspect-ratio: 390 / 640; }
figure.shot { margin: 28px 0; }
figure.shot figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-block-start: 10px; max-inline-size: 330px; margin-inline: auto; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-inline-size: 700px; margin: 0 auto; }
.pair .phone { inline-size: 100%; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-block-start: 28px; }
.three h3 { margin-block-start: 14px; font-family: var(--sans); font-size: 18px; }
.three p { font-size: 15.5px; color: var(--ink-soft); }
.three .phone { inline-size: min(100%, 260px); }

/* call to action: the store badges, from configuration; nothing renders for an empty link */
.cta { margin-block-start: 48px; padding: 32px 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.cta h2 { margin-block-start: 0; font-size: 26px; }
.cta p { color: var(--ink-soft); max-inline-size: 560px; }
.badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-block-start: 16px; }
.badges a { display: inline-flex; border-radius: 8px; }
.badges img { block-size: 54px; inline-size: auto; }
.cta.band { border: 0; }
.cta.band p { color: var(--band-muted); }
.also { font-size: 14.5px; color: var(--muted); margin-block-start: 14px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 24px 0; max-inline-size: 760px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px; }
.plan h3 { margin: 0 0 8px; font-family: var(--sans); color: var(--accent); font-size: 18px; }
.plan .amount { font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1.1; }
.plan .sub { font-size: 14.5px; color: var(--muted); margin: 6px 0 16px; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { padding-inline-start: 24px; position: relative; font-size: 15.5px; margin-block-end: 8px; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--amber); }
.save { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 3px 8px; margin-inline-start: 6px; white-space: nowrap; }

/* facts table, hub lists, changelog */
.facts th { inline-size: 32%; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.card h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 17px; }
.card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.card a { text-decoration: none; }
.card a:hover { text-decoration: underline; }
.changelog h3 { font-family: var(--sans); font-size: 17px; }
.changelog time { color: var(--muted); font-weight: 400; margin-inline-start: 8px; font-size: 14px; }

/* tools */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; margin: 24px 0; }
.tool label { display: block; font-weight: 700; font-size: 14.5px; margin: 14px 0 6px; }
.tool input, .tool select, .tool textarea { inline-size: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.tool button, .btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 46px; padding: 10px 20px; border-radius: 12px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.tool button:hover, .btn:hover { background: var(--accent-pressed); color: var(--on-accent); }
.tool .out { margin-block-start: 16px; }
.tool .note { font-size: 14px; color: var(--muted); }

/* site v2 (plan/session21/SITE_V2_DESIGN.md section 3): icons, the hero, carousel, icon rows, steps, pricing cards and
   tabs, the comparison table, motion. Logical properties only, so a right to left page needs nothing more. */
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; display: inline-block; vertical-align: middle; }

/* the hero: the price line, and one phone, the capture that matches the reader's theme */
.hero .sub p { margin: 0; }
.hero .from { font-size: 16.5px; font-weight: 700; margin-block: 16px 0; color: var(--band-ink); }
.hero .pair { grid-template-columns: 1fr; max-inline-size: 330px; }
.hero .pair .phone[data-shot-theme="dark"] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .pair .phone[data-shot-theme="light"] { display: none; }
  :root:not([data-theme="light"]) .hero .pair .phone[data-shot-theme="dark"] { display: block; }
}
:root[data-theme="dark"] .hero .pair .phone[data-shot-theme="light"] { display: none; }
:root[data-theme="dark"] .hero .pair .phone[data-shot-theme="dark"] { display: block; }
.hero-page .hero { margin-block-end: 32px; }
.hero .badges { margin-block-start: 20px; }
.badges + p { margin-block-start: 16px; }
.hero .sub { margin-block-start: 14px; font-size: 19px; max-inline-size: 520px; color: var(--band-muted); }
.sections > section.band:first-child { padding-block-start: 56px; }
/* the stand in store links (no badge artwork yet) on a band: the band's link colour must not win over the button's */
.band a.btn, .band.dark a.btn { background: var(--band-ink); color: var(--band); }
.band a.btn:hover, .band.dark a.btn:hover { background: #FFFFFF; color: var(--band); }

/* inside a reading page, a component may use the full width of the page, not only the reading column */
@media (min-width: 761px) {
  .prose > .steps, .prose > .carousel, .prose > .pricing, .prose > .compare-wrap { inline-size: min(1080px, calc(100vw - 56px)); max-inline-size: none; }
}

/* carousel: a grid on wide screens; on phones a scroll snap strip, one card per screen, with dots */
.carousel { margin-block: 24px 32px; }
.carousel .track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.carousel .slide { margin: 0; min-inline-size: 0; }
.carousel figure.shot { margin: 0 0 14px; }
.carousel .phone { inline-size: min(100%, 260px); }
.carousel .cap p { font-size: 15.5px; color: var(--ink-soft); margin: 0 auto 0.6em; max-inline-size: 300px; }
.carousel .dots { display: none; }
.band .carousel .cap p { color: var(--band-muted); }

/* icon rows */
.rows { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 14px; max-inline-size: 660px; }
.rows li { display: flex; align-items: flex-start; gap: 14px; margin: 0; }
.rows li > span:last-child { padding-block-start: 7px; }
.rows .ic { flex: none; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.rows .ic .icon { inline-size: 22px; block-size: 22px; }

/* steps: number, icon, one sentence, one screenshot */
.steps { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step { margin: 0; display: flex; flex-direction: column; min-inline-size: 0; }
.step-head { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; }
.step .num { inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.step .ic { color: var(--accent); display: inline-flex; }
.step .ic .icon { inline-size: 26px; block-size: 26px; }
.step p { font-size: 16px; margin: 0 0 14px; min-block-size: 3.2em; }
.step figure.shot { margin: auto 0 0; }
.step .phone { inline-size: min(100%, 240px); }

/* pricing cards: one row, the trial, the plans and Teams side by side (session twenty two: no tabs); two by two on a phone */
.pricing { margin: 24px 0 36px; }
.pricing .plans { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-inline-size: none; margin: 16px 0; }
.plan { display: flex; flex-direction: column; }
.plan.trial { background: var(--surface-muted); }
.plan .price { margin: 0 0 4px; }
.plan .price .per { color: var(--muted); font-size: 15px; }
.plan .yearly, .plan .seats { font-size: 14.5px; color: var(--muted); margin: 0 0 2px; }
.plan .allow { list-style: none; padding: 0; margin: 14px 0 18px; }
.plan .allow li { display: flex; gap: 10px; align-items: flex-start; padding-inline-start: 0; font-size: 15px; margin-block-end: 8px; }
.plan .allow li::before { content: none; }
.plan .allow .icon { color: var(--accent); inline-size: 20px; block-size: 20px; margin-block-start: 1px; }
.plan .note { font-size: 14px; color: var(--muted); margin: auto 0 0; }
.plan .buy { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.btn.alt { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.alt:hover { background: var(--accent-soft); color: var(--accent); }
.plan .note + .custom, .plan .custom { font-size: 14.5px; font-weight: 700; margin: 8px 0 16px; }
.plan .allow + .note { margin: 0 0 4px; }
@media (max-width: 860px) {
  .pricing .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pricing .plan { padding: 18px 14px; border-radius: 18px; }
  .pricing .plan .amount { font-size: 30px; }
  .pricing .plan .allow li { font-size: 14px; gap: 6px; }
  .pricing .plan .buy .btn { inline-size: 100%; padding: 10px 12px; }
}

/* the comparison table: Marrow first, the competitor second, the price row last */
.compare-wrap { margin: 24px 0 32px; overflow-x: auto; position: relative; }
table.compare { display: table; min-inline-size: 520px; font-size: 15px; }
.compare thead th { font-family: var(--sans); font-size: 15px; }
.compare thead th:nth-child(2) { color: var(--accent); }
.compare tbody th { font-weight: 600; inline-size: 34%; }
.compare td { inline-size: 33%; }
.compare td:nth-child(2) { background: var(--surface); }
.compare td .icon { inline-size: 22px; block-size: 22px; }
.compare td.yes .icon { color: var(--accent); }
.compare td.no .icon { color: var(--muted); }
.compare td .note { display: block; font-size: 13.5px; color: var(--muted); margin-block-start: 2px; }
.compare td.partial .note, .compare td.unknown .note { display: inline; font-size: 14px; color: var(--ink-soft); margin: 0; }
.compare tr.price th, .compare tr.price td { border-bottom: 0; padding-block-start: 14px; font-size: 14.5px; }

/* motion: what is below the fold when the page loads fades and rises once, 240 ms (site.js) */
[data-reveal] { transition: opacity 240ms ease-out, transform 240ms ease-out; }
.reveal-pending { opacity: 0; transform: translateY(16px); }

/* the proof row under the home hero: Beta and the platforms, an icon each, never a number (session twenty one follow up) */
.proof { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 15px; font-weight: 700; color: var(--band-ink); }
.proof li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.proof .ic { display: inline-flex; opacity: 0.85; }
.proof .icon { inline-size: 20px; block-size: 20px; }
/* session 22, item 27: "Also on Telegram" is a quiet text link (not a button, no fill, no border), lighter than the rest of the row
   so the store badges stay the one call to action */
.proof a { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; opacity: 0.85; }
.proof a:hover { opacity: 1; color: var(--accent); }

/* the looping result cards (session twenty one follow up, the owner's brief): a phone frame with two small cards over
   it, the input cut from a real capture and what Marrow made of it, three scenes in twelve seconds. CSS only. The first
   scene is the static state: under reduced motion, or where CSS animation is not supported, it stands still. */
.loop { position: relative; max-inline-size: 420px; margin: 0 auto; }
.loop .pair { grid-template-columns: 1fr; max-inline-size: 330px; }
.loop .pair .phone[data-shot-theme="dark"] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .loop .pair .phone[data-shot-theme="light"] { display: none; }
  :root:not([data-theme="light"]) .loop .pair .phone[data-shot-theme="dark"] { display: block; }
}
:root[data-theme="dark"] .loop .pair .phone[data-shot-theme="light"] { display: none; }
:root[data-theme="dark"] .loop .pair .phone[data-shot-theme="dark"] { display: block; }
.loop .scenes { position: absolute; inset: 0; pointer-events: none; }
.loop .scene { position: absolute; inset: 0; margin: 0; }
.loop .scene > * { opacity: 0; }
.loop .scene.s1 > * { opacity: 1; }
.loop .float { position: absolute; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
.loop .float.in { inset-block-start: 9%; inset-inline-start: 0; }
.loop .float.out { inset-block-start: 47%; inset-inline-end: 0; }
.loop .scene figcaption { position: absolute; inset-inline: 0; inset-block-end: 5%; margin: 0 auto; inline-size: max-content; max-inline-size: 88%; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
/* a crop: the whole capture, scaled, inside a fixed box; each class places it (left and top are the picture's own
   axes, so they stay physical on a right to left page) */
.crop { position: relative; overflow: hidden; border-radius: 12px; background: var(--bg); }
.crop picture { display: block; }
.crop img { position: absolute; max-inline-size: none; inline-size: var(--cw); block-size: auto; left: var(--cx); top: var(--cy); }
/* the inputs are cut from the top views (chat--voice-note-filed-top, chat--email-screenshot-filed-top), the outputs from
   the bottom framed captures (session twenty one follow up) */
.c-voice-in { inline-size: 220px; block-size: 98px; --cw: 272px; --cx: -43px; --cy: -35px; }
.c-voice-out { inline-size: 230px; block-size: 46px; --cw: 309px; --cx: -8px; --cy: -94px; }
.c-card-in { inline-size: 140px; block-size: 89px; --cw: 496px; --cx: -329px; --cy: -388px; }
.c-card-out { inline-size: 230px; block-size: 46px; --cw: 309px; --cx: -8px; --cy: -404px; }
.c-shot-in { inline-size: 110px; block-size: 107px; --cw: 349px; --cx: -225px; --cy: -51px; }
.c-shot-out { inline-size: 240px; block-size: 96px; --cw: 334px; --cx: -25px; --cy: -475px; }
@keyframes loop-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  4%, 29% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: none; }
}
@keyframes loop-out {
  0%, 11% { opacity: 0; transform: translateY(10px) scale(0.96); }
  15%, 29% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: none; }
}
/* three cycles, then it rests on the last scene: the first two scenes play three times and end hidden; the third plays
   twice and stops a quarter into its third run, where both its cards and its caption are shown (about 35 seconds in
   all). Hover or keyboard focus pauses it (WCAG 2.2.2, session twenty one follow up review). */
@media (prefers-reduced-motion: no-preference) {
  .loop .float.in, .loop .scene figcaption { animation: loop-in 12s ease-out 3 both; }
  .loop .float.out { animation: loop-out 12s ease-out 3 both; }
  .loop .scene.s2 > * { animation-delay: 4s; }
  .loop .scene.s3 > * { animation-delay: 8s; animation-iteration-count: 2.25; }
  .loop:hover .scene > *, .loop:focus-within .scene > * { animation-play-state: paused; }
}
.loop:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 20px; }
.cta-band .device { min-inline-size: 0; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.band.dark .cta-actions a:not(.btn) { color: #F7F3EC; }
@media (max-width: 480px) {
  .c-voice-in { inline-size: 200px; block-size: 89px; --cw: 247px; --cx: -39px; --cy: -32px; }
  .loop .scene figcaption { font-size: 13px; }
}

@media (max-width: 860px) {
  .carousel .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-inline: 8%; scroll-padding-inline: 8%; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .carousel .track::-webkit-scrollbar { display: none; }
  .carousel .slide { flex: 0 0 84%; scroll-snap-align: center; }
  .carousel .dots, .strip .dots { display: flex; justify-content: center; gap: 2px; margin-block-start: 6px; }
  .carousel .dots a, .strip .dots a { inline-size: 32px; block-size: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .carousel .dots a::before, .strip .dots a::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 999px; background: var(--line); }
  .carousel .dots a[aria-current="true"]::before, .strip .dots a[aria-current="true"]::before { inline-size: 22px; background: var(--accent); }
  /* the four steps: a snap strip with dots, one step per screen, so four screenshots never stack (session twenty one
     follow up, the owner's review) */
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-inline: 8%; scroll-padding-inline: 8%; scrollbar-width: none; overscroll-behavior-inline: contain; margin-block-end: 0; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 84%; scroll-snap-align: center; }
  /* the chips above a feature carousel: the index of its cards (site.js scrolls the strip to the card) */
  .carousel .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-end: 14px; }
  .chip { min-block-size: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 14.5px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
  .chip:hover { color: var(--ink); }
  .chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}
.strip .dots, .carousel .chips { display: none; }
@media (max-width: 860px) { .strip .dots, .carousel .chips { display: flex; } }
@media (max-width: 860px) {
  .row2 { grid-template-columns: 1fr; gap: 28px; }
  .row2.flip > .copy { order: 0; }
  .three { grid-template-columns: 1fr; }
  .three .phone { inline-size: min(100%, 300px); }
  nav.main a:not(.get):not(.theme) { display: none; }
}
@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .band { padding: 40px 0; }
  .sections > section.band:first-child { padding-block-start: 40px; }
  .cta { padding: 24px 18px; }
  .pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none; } }
[dir="rtl"] .crumbs li + li::before { content: "\\"; }

/* the language link in the header (a page with an hreflang pair), kept on phones too */
nav.main a.lang { font-weight: 700; color: var(--ink); }
@media (max-width: 860px) { nav.main a.lang:not(.get):not(.theme) { display: inline-flex; padding-inline: 8px; } }
/* on a phone the brand, the language link, the button and the theme switch share one row */
@media (max-width: 480px) {
  header.top .wrap { gap: 6px; }
  .brand { gap: 6px; font-size: 20px; }
  .brand svg { flex: none; inline-size: 24px; block-size: 24px; }
  nav.main { flex-wrap: nowrap; gap: 0; }
  nav.main a.lang:not(.get):not(.theme) { padding-inline: 6px; font-size: 14px; }
  nav.main a.get { padding-inline: 10px; font-size: 14px; white-space: nowrap; }
  .beta { padding: 0 6px; }
}
nav.main a.lang .short { display: none; }
@media (max-width: 420px) {
  nav.main a.lang .long { display: none; }
  nav.main a.lang .short { display: inline; }
}
@media (max-width: 380px) {
  .brand { font-size: 19px; }
  nav.main a.get { padding-inline: 8px; }
}
/* the Beta pill keeps its words on one line; on phones up to 400px wide an Arabic page's button says only «التطبيق» */
.beta { white-space: nowrap; flex: none; }
nav.main a.get .short { display: none; }
@media (max-width: 400px) {
  nav.main a.get .long { display: none; }
  nav.main a.get .short { display: inline; }
}

/* the Arabic pages (session 21): headings in the loaded Arabic face (Latin words in them stay in the serif), a taller
   line for Arabic script, and no letter spacing or capitals, which break the joining of Arabic letters */
:root[lang="ar"] { --serif: "Noto Sans Arabic", Georgia, "Times New Roman", serif; }
:root[lang="ar"] body { line-height: 1.75; }
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3 { line-height: 1.35; letter-spacing: 0; font-weight: 700; }
:root[lang="ar"] .beta, :root[lang="ar"] .save, :root[lang="ar"] footer.bottom .fh { letter-spacing: 0; text-transform: none; }