/* Synaptiq — September 2026. Warm paper, orange voice, quiet product UI. */
:root {
  --ink: #14181b;
  --paper: #fcfaf7;
  --paper-2: #f1efeb;
  --line-on-paper: rgba(24, 28, 31, .09);
  --muted-on-paper: #71767c;
  --buckthorn: #ffbf65;
  --coral: #fd8973;
  --ateneo: #003a6c;
  --accent: #ff4b26;
  --bg: var(--paper);
  --fg: var(--ink);
  --bg-card: #fffefd;
  --bg-card-2: var(--paper-2);
  --line-c: var(--line-on-paper);
  --muted-c: var(--muted-on-paper);
  --on-dark: #faf9f7;
  --on-dark-muted: #b4b5b5;
  --on-dark-line: rgba(255, 255, 255, .12);
  --success: #54a75d;
  --density-pad: clamp(24px, 5vw, 64px);
  --density-pad-y: 96px;
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .025; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/></svg>"); }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -.035em; line-height: 1.05; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; }
button { cursor: pointer; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
section[id] { scroll-margin-top: 104px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ateneo); outline-offset: 4px; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-feature-settings: "ss02"; letter-spacing: 0; }
.eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-c); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex-shrink: 0; }
.container { width: 100%; max-width: 1328px; margin: 0 auto; padding: 0 var(--density-pad); }
.section { padding-top: var(--density-pad-y); position: relative; }
.section-head { min-width: 0; }
.section-head .eyebrow { margin-bottom: 24px; }
.section-title { font-size: clamp(34px, 3.65vw, 52px); line-height: 1.02; letter-spacing: -.045em; white-space: pre-line; text-wrap: balance; }
.section-sub { font-size: 21px; line-height: 1.45; color: var(--muted-c); margin-top: 15px; white-space: pre-line; text-wrap: pretty; }
.section-foot { font-size: 14px; line-height: 1.6; color: var(--muted-c); margin-top: 26px; text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 23px; min-height: 46px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--ink); font-weight: 700; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent), transparent 35%); }
.btn-ghost { background: transparent; color: var(--fg); border-color: #d6d8d9; }
.btn-ghost:hover { border-color: var(--fg); background: rgba(20, 24, 27, .025); }
.btn-sm { min-height: 40px; padding: 10px 20px; font-size: 13px; }
.btn-lg { min-height: 50px; padding: 15px 24px; font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.text-link:hover { color: var(--accent); }
.rings { position: absolute; right: max(-40px, calc((100vw - 1360px)/2)); top: -110px; width: 800px; height: 800px; pointer-events: none; }
.ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent), transparent 84%); }

/* Navigation */
.site-nav .container { min-height: 36px; }
.nav-lang { border: 0 !important; padding: 0 !important; }
.nav-lang button { padding: 4px 5px !important; font-size: 10px !important; }
.nav-lang button[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.nav-hamburger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-c); background: transparent; color: var(--fg); font-size: 18px; align-items: center; justify-content: center; }
.nav-submenu a { padding: 11px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--bg-card-2); }
.nav-drawer { max-height: calc(100dvh - 84px); overflow-y: auto; }
.nav-drawer-lang { display: flex; border: 1px solid var(--line-c); border-radius: 999px; padding: 3px; margin-top: 18px; }
.nav-drawer-lang button { flex: 1; border: 0; border-radius: 999px; padding: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.nav-drawer-lang button[aria-pressed="true"] { background: var(--paper-2) !important; }

/* Hero and floating call preview */
.hero { position: relative; padding: 140px 0 50px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 26px; align-items: center; position: relative; }
.hero-copy { min-width: 0; position: relative; z-index: 2; }
.hero-h1 { margin: 0; }
.hero-eyebrow { font-weight: 400; margin-bottom: 20px; }
.hero-eyebrow::before { width: 6px; height: 6px; border-radius: 50%; }
.hero-title { display: block; font-size: clamp(58px, 6.5vw, 92px); font-weight: 900; line-height: .89; letter-spacing: -.055em; }
.hero-title > span { white-space: pre-line; }
.hero-title em { display: block; font-style: italic; color: var(--accent); }
.hero-sub { font-size: 22px; line-height: 1.45; color: var(--muted-c); max-width: 440px; margin-top: 28px; white-space: pre-line; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 26px; }
.hero-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12px; color: var(--fg); background: none; border: 0; padding: 0; }
.hero-link:hover { color: var(--accent); }
.hero-play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #dadcdd; background: #fff9; }
.hero-note { font-family: var(--font-body); font-size: 11px; color: var(--muted-c); margin-top: 13px; }
.hero-note-demo { font-size: 12px; color: var(--muted-c); margin-top: 12px; line-height: 1.5; max-width: 420px; }
.cc-wrap { position: relative; min-width: 0; height: 430px; padding: 0 82px 0 18px; isolation: isolate; }
.cc-wrap::before { content: ""; position: absolute; z-index: -1; inset: 30px 100px 50px 10px; background: #ff7646; border-radius: 38px; transform: rotate(-4deg); filter: blur(1px); opacity: .45; box-shadow: 0 20px 70px 0 #e2673338; }
.call-card { position: relative; overflow: hidden; height: 340px; border-radius: 28px; padding: 28px; background: linear-gradient(135deg, #202020, #131616); color: var(--on-dark); border: 1px solid #ffffff28; box-shadow: 0 26px 30px -24px #161616, 0 40px 65px -26px #a64e315e; }
.cc-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 15px; }
.cc-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: #a73f25; color: #ffded3; font-size: 18px; font-weight: 500; }
.cc-who-block { flex: 1; min-width: 0; }
.cc-name { font-size: 15px; font-weight: 600; }
.cc-meta { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #c4c3c0; margin-top: 7px; }
.cc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.cc-clock { font-size: 10px; color: #d6d3cf; }
.cc-wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 30px; min-width: 0; overflow: hidden; }
.cc-head .cc-wave { flex: 0 0 88px; }
.cc-bar { width: 2px; border-radius: 2px; background: var(--accent); opacity: .85; transform: scaleY(.6); transform-origin: center; flex-shrink: 0; }
.cc-bar.is-active { animation: wf 1.1s ease-in-out infinite; }
@keyframes wf { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.voice-wave { width: 100%; height: auto; pointer-events: none; mix-blend-mode: screen; }
.call-card > .voice-wave { position: absolute; left: -4%; top: 78px; width: 108%; max-width: none; height: 240px; object-fit: fill; mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent), linear-gradient(0deg, transparent, black 18%, black 82%, transparent); mask-composite: intersect; }
.is-running .call-card > .voice-wave { animation: voice-breathe 8s ease-in-out infinite; }
@keyframes voice-breathe { 0%, 100% { transform: scaleY(.91); opacity: .85; } 50% { transform: scaleY(1.03); opacity: 1; } }
.cc-tools { position: absolute; right: 13px; top: 92px; display: grid; gap: 10px; }
.cc-tools > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #d6d6d6; background: #ffffff15; backdrop-filter: blur(8px); }
.cc-tools > .cc-hangup { background: #fb3126; color: white; transform: rotate(135deg); }
.cc-live-transcript { position: absolute; z-index: 3; left: -24px; top: 254px; width: 64%; height: 148px; padding: 20px; border: 1px solid #ffffff29; border-radius: 13px; background: #1d1e1eed; color: var(--on-dark); box-shadow: 0 22px 38px -20px #18191c80; backdrop-filter: blur(18px); }
.cc-transcript-head { display: flex; justify-content: space-between; gap: 10px; color: #c8c6c1; font-size: 10px; margin-bottom: 20px; }
.cc-transcript-head > span:first-child { display: flex; align-items: center; gap: 8px; }
.cc-transcript-head i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.cc-live-lines { display: grid; gap: 10px; animation: transcript-in .45s ease-out; }
@keyframes transcript-in { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cc-line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 1.5; }
.cc-live-lines .cc-line > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-who { font-size: 10px; color: #d2d0cc; padding-top: 2px; font-weight: 500; }
.cc-line.is-asst .cc-who { color: #ff785c; }
.cc-receipt { position: absolute; right: 5px; top: 268px; width: 38%; z-index: 4; padding: 19px 16px 15px; border: 1px solid #eae9e6; border-radius: 16px; background: #fffffff5; box-shadow: 0 18px 38px -16px #3f2f283f; display: grid; grid-template-columns: 34px minmax(0, 1fr) 23px; gap: 10px; align-items: start; }
.cc-check { width: 33px; height: 33px; border-radius: 50%; background: var(--success); color: white; box-shadow: 0 0 0 5px #eff7ef; display: grid; place-items: center; }
.cc-receipt-body { min-width: 0; display: grid; gap: 5px; }
.cc-receipt-body strong { font-size: 10px; font-weight: 600; }
.cc-receipt-body > span { font-size: 10px; line-height: 1.5; color: var(--muted-c); }
.cc-receipt-icon { color: #4e5358; padding-top: 5px; }
.cc-receipt-note { grid-column: 1 / -1; font-size: 9px; color: var(--muted-c); padding-top: 9px; }
.hero-scribble, .cta-scribble { font-family: cursive; font-size: 13px; line-height: 1.35; white-space: pre-line; font-style: italic; color: #979797; transform: rotate(-9deg); }
.hero-scribble { position: absolute; right: -14px; top: 38px; width: 80px; }
.hero-scribble::before, .cta-scribble::before { content: ""; display: block; width: 46px; height: 20px; border-top: 1px solid currentColor; border-radius: 50%; transform: rotate(-28deg); margin: 0 0 8px -24px; opacity: .6; }
.hero-caption { position: absolute; right: -5px; bottom: 7px; width: 65px; font-size: 9px; line-height: 1.7; text-transform: uppercase; color: #878a8e; white-space: pre-line; }
.hero-caption::before { content: ""; display: block; width: 22px; height: 1px; background: var(--accent); margin-bottom: 10px; }
.hero-segment .hero-title { font-size: clamp(48px, 5.1vw, 72px); }
.hero-segment .hero-sub { font-size: 18px; }

/* Benefits */
.proof { border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); padding: 23px 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.proof-item { display: flex; align-items: center; gap: 20px; padding: 0 26px; min-width: 0; border-left: 1px solid var(--line-c); }
.proof-item:first-child { padding-left: 0; border: 0; }
.proof-item:last-child { padding-right: 0; }
.proof-item > svg { color: #30373e; }
.proof-k { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.proof-v { display: block; font-size: 11px; color: var(--muted-c); line-height: 1.5; margin-top: 5px; }

/* After-call product preview */
.after-layout { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.64fr); align-items: start; gap: 26px; }
.after-layout > .section-head { padding-top: 8px; }
.after-layout .section-title { font-size: clamp(34px, 3.25vw, 46px); }
.after-layout .section-sub { font-size: 20px; }
.portal { background: #fff; border: 1px solid #f0eeeb; border-radius: 20px; padding: 12px; box-shadow: 0 18px 60px -16px #302b2417; display: grid; grid-template-columns: 126px minmax(0, 1fr); min-width: 0; }
.portal-side { padding: 12px 8px 12px 2px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.portal-logo { padding: 0 6px 25px; }
.portal-nav { padding: 11px 9px; border-radius: 9px; color: #62676c; display: flex; align-items: center; gap: 10px; font-size: 11px; }
.portal-nav.is-active { background: #ffe4dc; color: #a33f25; font-weight: 600; }
.portal-nav i { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.portal-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-width: 0; gap: 10px; }
.portal-col { min-width: 0; }
.portal-call { padding: 15px 17px 8px; border-radius: 12px; box-shadow: 0 0 22px #27252505; display: flex; flex-direction: column; gap: 15px; }
.portal-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portal-call > .portal-row-head { display: block; }
.portal-h3 { font-size: 15px; letter-spacing: -.025em; line-height: 1.3; font-weight: 700; }
.portal-muted { font-size: 10px; color: #8c9094; }
.portal-call > .portal-row-head .portal-muted { display: block; margin-top: 5px; }
.portal-summary { display: flex; gap: 10px; align-items: center; background: #f1f8ef; color: #397b41; border-radius: 14px; padding: 11px; }
.portal-summary p { font-size: 10px; line-height: 1.5; }
.portal-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--success); box-shadow: 0 0 0 4px #67b45b12; }
.portal-tabs { display: flex; gap: 18px; border-bottom: 1px solid #b7bec4; }
.portal-tabs button { position: relative; border: 0; padding: 2px 0 10px; background: none; font-size: 10px; color: #757a7f; }
.portal-tabs button[aria-selected="true"] { color: var(--fg); }
.portal-tabs button[aria-selected="true"]::after { content: ""; height: 2px; background: var(--accent); position: absolute; bottom: -1px; left: 0; right: 0; }
.portal-tab-panel { min-height: 157px; flex: 1; }
.portal-transcript { display: grid; gap: 18px; font-size: 10px; line-height: 1.7; }
.portal-line { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; color: #656b70; }
.portal-who { font-size: 9px; color: #333d45; }
.portal-who.is-asst { color: #d44422; }
.portal-detail { font-size: 11px; line-height: 1.8; color: var(--muted-c); }
.portal-detail p { margin-top: 8px; }
.portal-agenda { display: flex; flex-direction: column; gap: 10px; }
.portal-day, .portal-todo { padding: 13px 12px; background: #fdfcfb; border-radius: 12px; }
.portal-day-arrows { font-size: 19px; color: #9fa3a6; white-space: nowrap; }
.portal-slots { display: flex; flex-direction: column; font-size: 10px; margin-top: 17px; }
.portal-slot-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); min-height: 35px; align-items: center; border-bottom: 1px solid #f0eeeb; }
.portal-slot { color: #86898e; padding: 7px; line-height: 1.3; }
.portal-slot-row.is-new { border: 1px solid var(--accent); border-radius: 4px; }
.portal-slot-row.is-new > .portal-muted { color: #ce3c1e; padding-left: 3px; }
.portal-slot.is-new { background: var(--accent); color: #15191b; font-weight: 500; align-self: stretch; display: flex; align-items: center; }
.portal-sync { font-size: 9px; color: #418a47; display: flex; align-items: center; gap: 8px; background: #f3f8f1; border-radius: 8px; padding: 8px; margin-top: 18px; }
.portal-sync .portal-check { width: 16px; height: 16px; }
.portal-todo { background: #fff; box-shadow: 0 0 12px #00000004; }
.portal-todo .portal-h3 { font-size: 12px; }
.portal-todo-item { display: flex; gap: 10px; align-items: flex-start; font-size: 9px; line-height: 1.5; margin-top: 14px; color: #8c8e90; }
.portal-todo-item strong { display: block; color: #565b60; font-weight: 600; }
.portal-todo-item > span > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Industry cards and real audio */
.industries-head { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-bottom: 29px; }
.industries-note { color: var(--muted-c); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ind-card { background: var(--bg-card); border: 1px solid #ffffff; box-shadow: 0 8px 34px #332a1e04; padding: 16px; border-radius: 17px; display: flex; flex-direction: column; min-width: 0; }
.ind-card.is-featured { background: linear-gradient(130deg, #171b1e, #222626); color: var(--on-dark); border-color: #ffffff25; box-shadow: 0 12px 22px -12px #00000050; }
.ind-image { width: 100%; height: auto; aspect-ratio: 2.25; object-fit: cover; border-radius: 10px; }
.ind-copy { padding: 21px 5px 4px; flex: 1; }
.ind-title { font-size: 27px; font-weight: 750; letter-spacing: -.035em; }
.ind-body { font-size: 17px; line-height: 1.5; color: var(--muted-c); margin-top: 10px; white-space: pre-line; }
.ind-card.is-featured .ind-body { color: #cacaca; }
.ind-cta { width: 100%; margin-top: 16px; padding: 12px 18px; min-height: 46px; font-size: 15px; }
.ind-card.is-featured .ind-cta { color: #14181b; }
.mini-audio { display: flex; align-items: center; gap: 13px; padding: 10px 4px; margin-top: 15px; min-width: 0; flex-wrap: wrap; }
.mini-audio audio { display: none; }
.mini-play { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 0; background: var(--accent); color: var(--ink); border-radius: 50%; transition: transform .18s; }
.mini-play:hover { transform: scale(1.08); }
.mini-audio-content { flex: 1; min-width: 0; }
.mini-audio-name { display: block; font-size: 12px; font-weight: 600; }
.mini-audio .cc-wave { height: 22px; max-width: 180px; margin-top: 3px; }
.mini-duration { font-size: 11px; color: var(--muted-c); }
.is-featured .mini-duration { color: #b4b5b5; }
.mini-audio .sample-error { flex-basis: 100%; font-size: 11px; }
.has-timeline { margin-top: auto; padding: 0; gap: 12px; }
.has-timeline .mini-play { width: 36px; height: 36px; background: transparent; border: 1px solid #91999f; color: var(--ink); }
.mini-times { display: flex; justify-content: space-between; font-size: 9px; color: #a0a4a8; margin-top: 2px; }

/* Pricing */
.pricing-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 28px; }
.billing-switch { flex-shrink: 0; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-c); border-radius: 999px; min-width: 360px; }
.billing-switch button { flex: 1; border: 0; background: transparent; font-size: 14px; font-weight: 500; padding: 13px 22px; border-radius: 999px; color: var(--muted-c); }
.billing-switch button[aria-pressed="true"] { background: var(--accent); color: var(--ink); box-shadow: 0 3px 10px #ff4b2630; }
.billing-saving { color: #cc361c; font-size: 12px; font-weight: 600; }
.billing-switch button[aria-pressed="true"] .billing-saving { color: inherit; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; background: #fffefa; border: 1px solid var(--line-c); border-radius: 15px; padding: 28px 25px; display: flex; flex-direction: column; gap: 19px; min-width: 0; }
.plan.is-featured { background: linear-gradient(130deg, #1a1e20, #15191b); color: var(--on-dark); border-color: #2f3234; box-shadow: 0 5px 18px #00000007; }
.plan-badge { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap; background: var(--accent); color: var(--ink); padding: 9px 16px; border-radius: 999px; }
.plan-name { font-size: 25px; font-weight: 700; }
.plan-for { font-size: 14px; color: var(--muted-c); margin-top: 8px; line-height: 1.4; }
.plan.is-featured .plan-for, .is-featured .plan-price span, .is-featured .plan-overage { color: #b6b8b9; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.plan-price strong { font-family: var(--font-display); font-weight: 800; font-size: 43px; letter-spacing: -.045em; line-height: 1; }
.plan-price span { font-size: 16px; color: var(--muted-c); }
.plan-price .plan-custom { font-size: 40px; }
.plan-quota { font-size: 15px; line-height: 1.7; margin-top: -5px; }
.plan-quota strong { font-weight: 600; }
.plan-overage { font-size: 15px; color: var(--muted-c); }
.plan-cta { width: 100%; border: 1px solid #cbd0d2; color: var(--fg); background: transparent; padding: 13px 18px; font-weight: 600; font-size: 15px; }
.plan:first-child .plan-cta { color: #d13818; border-color: #ff8b71; }
.plan-cta:hover { border-color: var(--fg); transform: translateY(-1px); }
.is-featured .plan-cta { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--muted-c); }
.plan-features li { display: flex; gap: 11px; }
.plan-features li .mono { color: var(--success); font-weight: 700; }
.plan-features li.is-excluded .mono { color: var(--muted-c); }
.is-featured .plan-features { color: #d0d2d2; }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.64fr); gap: 40px; align-items: start; }
.faq-list { border: 1px solid var(--line-c); border-radius: 16px; background: #fffefa; box-shadow: 0 5px 24px #332a1e03; overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--line-c); }
.faq-item h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.faq-item button { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; text-align: left; border: 0; background: transparent; padding: 18px 24px; font: inherit; }
.faq-item button:hover { background: #faf8f5; }
.faq-item button:focus-visible { outline-offset: -5px; border-radius: 8px; }
.faq-toggle { width: 25px; height: 25px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #dfe1e2; border-radius: 50%; font-size: 20px; font-weight: 400; color: #3f4950; }
.faq-item p { font-size: 14px; line-height: 1.7; color: var(--muted-c); padding: 0 62px 22px 24px; margin-top: -7px; }

/* Closing CTA and footer */
.cta-section { padding-top: 40px; }
.cta-block { position: relative; isolation: isolate; overflow: hidden; background: #171a1b; color: var(--on-dark); border-radius: 24px; padding: 44px 56px; min-height: 275px; box-shadow: 0 6px 28px #29211a0a; }
.cta-copy { position: relative; z-index: 1; width: 50%; }
.cta-title { font-size: clamp(32px, 3.1vw, 43px); font-weight: 800; line-height: 1.03; letter-spacing: -.04em; max-width: 490px; text-wrap: balance; }
.cta-copy .btn { margin-top: 23px; }
.cta-note { font-size: 12px; color: #c1c2c3; margin-top: 16px; line-height: 1.5; }
.cta-art { position: absolute; z-index: 0; left: 41%; right: 0; top: 12px; bottom: 5px; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, black 18%, black 92%, transparent), linear-gradient(0deg, transparent, black 18%, black 82%, transparent); mask-composite: intersect; }
.cta-art .voice-wave { width: 110%; max-width: none; height: 95%; object-fit: fill; }
.cta-scribble { position: absolute; right: 35px; top: 32px; font-size: 12px; }
.footer { padding: 85px 0 36px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(3, minmax(0, .8fr)); gap: 36px; }
.footer-tagline { font-size: 14px; color: var(--muted-c); margin-top: 17px; line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 13px; font-size: 13px; color: var(--muted-c); }
.footer-col .eyebrow { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg); font-weight: 600; margin-bottom: 3px; }
.footer-col .eyebrow::before { display: none; }
.footer-col a:hover { color: #d83c1a; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-c); font-family: var(--font-body); font-size: 11px; line-height: 1.6; color: var(--muted-c); }
.footer-origin { display: flex; align-items: center; gap: 7px; }
.exchange { background: var(--paper); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
.exchange-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
.exchange-who { font-size: 10px; text-transform: uppercase; color: var(--muted-c); font-weight: 700; padding-top: 3px; }
.exchange-who.is-asst { color: var(--accent); }
.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-c); border: 1px solid var(--line-c); border-radius: 22px; overflow: hidden; }
.sc-card { background: var(--bg-card); padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc-title-row { display: flex; align-items: baseline; gap: 12px; }
.sc-num { font-size: 11px; color: var(--accent); font-weight: 700; }
.sc-title { font-size: 24px; letter-spacing: -0.03em; }
.sc-when { font-size: 11px; color: var(--muted-c); white-space: nowrap; }
.sc-outcome { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted-c); }
.sc-arrow { color: var(--accent); font-weight: 700; }
.sc-not { margin-top: 22px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--muted-c); max-width: 900px; }
.sc-not-x { font-weight: 700; color: var(--accent); }

/* ---------- Modals (nahrávka, registrace) ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-panel { background: var(--bg-card); border: 1px solid var(--line-c); border-radius: 24px; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; }
.demo-panel { position: relative; max-width: 620px; padding: 52px 24px 24px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid var(--line-c); border-radius: 50%; background: transparent; color: var(--fg); }
.sample { display: flex; flex-direction: column; gap: 18px; }
.sample-head { display: flex; align-items: center; gap: 13px; }
.sample-title { font-size: 24px; letter-spacing: -0.03em; font-weight: 700; }
.sample-sub { font-size: 12px; color: var(--muted-c); margin-top: 5px; }
.sample-transport { display: flex; align-items: center; gap: 16px; }
.sample-play { width: 52px; height: 52px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); transition: transform 180ms; }
.sample-play:hover { transform: scale(1.06); }
.sample-timeline { flex: 1; min-width: 0; }
.sample-seek { display: block; width: 100%; margin: 0; height: 18px; accent-color: var(--accent); cursor: pointer; appearance: none; background: transparent; }
.sample-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--audio-progress, 0%), #e4e6e8 var(--audio-progress, 0%)); }
.sample-seek::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); }
.sample-seek::-moz-range-track { height: 3px; border-radius: 3px; background: #e4e6e8; }
.sample-seek::-moz-range-progress { height: 3px; background: var(--accent); }
.sample-seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--accent); }
.sample-time { display: flex; justify-content: space-between; color: var(--muted-c); font-size: 11px; margin-top: 3px; }
.sample-transcript { background: var(--ink); color: var(--on-dark); min-height: 0; }
.sample-error { font-size: 13px; line-height: 1.6; color: #a02a16; }
.sample-phone { font-size: 13px; line-height: 1.6; color: var(--muted-c); }
.sample-phone a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.signup-code { font-size: 14px; }
.signup-code summary { cursor: pointer; padding: 8px 0; }
.signup-code[open] summary { margin-bottom: 12px; }

/* Sticky mobile CTA */
.sticky-mobile-cta {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: 60; display: none;
  background: var(--accent); color: var(--ink);
  border: 0; border-radius: 999px; padding: 16px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 24px rgba(19,24,27,0.35), 0 1px 3px rgba(19,24,27,0.4);
  text-align: center; transition: opacity 200ms, transform 200ms;
}
.sticky-mobile-cta.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }


/* Demo transcript retains the same visual language as the floating preview. */
.cc-transcript { border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cc-eyebrow { color: var(--on-dark-muted); }
.cc-line.is-pending { opacity: .35; }
.is-featured .sample-error { color: #ffa38e; }

@media (max-width: 1150px) {
  .hero-title { font-size: 76px; }
  .hero-sub { font-size: 20px; }
  .hero-actions { gap: 14px; }
  .cc-wrap { padding-right: 28px; height: 420px; }
  .call-card { height: 325px; padding: 22px; }
  .cc-head { gap: 10px; }
  .cc-head .cc-wave { flex-basis: 57px; }
  .cc-live-transcript { left: -10px; width: 65%; padding: 16px; }
  .cc-receipt { right: -8px; width: 40%; padding: 15px 12px; grid-template-columns: 28px minmax(0, 1fr); }
  .cc-receipt-icon { display: none; }
  .cc-check { width: 27px; height: 27px; }
  .hero-scribble, .hero-caption { display: none; }
  .proof-item { padding: 0 16px; gap: 12px; }
  .proof-k { font-size: 14px; }
  .proof-v { font-size: 10px; }
  .after-layout, .faq-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); gap: 22px; }
  .after-layout .section-title { font-size: 34px; }
  .after-layout .section-sub { font-size: 17px; }
  .portal { grid-template-columns: 99px minmax(0, 1fr); padding: 8px; }
  .portal-side { padding-right: 3px; }
  .portal-logo { padding-left: 2px; }
  .portal-logo > span { font-size: 20px !important; }
  .portal-nav { font-size: 9px; padding: 10px 5px; gap: 7px; }
  .portal-call { padding: 12px 8px; }
  .portal-main { gap: 4px; }
  .portal-day, .portal-todo { padding: 12px 8px; }
  .portal-h3 { font-size: 12px; }
  .portal-sync { font-size: 8px; padding: 6px; }
  .ind-title { font-size: 23px; }
  .ind-body { font-size: 15px; }
  .plan { padding: 27px 22px; }
  .plan-price strong { font-size: 36px; }
  .plan-price .plan-custom { font-size: 34px; }
  .plan-price span { font-size: 13px; }
  .billing-switch { min-width: 310px; }
  .cta-block { padding: 38px 40px; }
  .cta-copy { width: 55%; }
}
@media (max-width: 900px) {
  :root { --density-pad-y: 72px; }
  .nav-links, .nav-login, .nav-lang { display: none !important; }
  .nav-hamburger { display: inline-flex; }
  .hero { padding-top: 120px; }
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
  .hero-title { font-size: 63px; }
  .hero-eyebrow { font-size: 8px; letter-spacing: .09em; }
  .hero-sub { font-size: 17px; }
  .cc-wrap { padding: 0 8px 0 0; height: 380px; }
  .call-card { height: 285px; border-radius: 21px; padding: 20px; }
  .cc-head .cc-wave { display: none; }
  .call-card > .voice-wave { height: 200px; }
  .cc-live-transcript { top: 222px; height: 146px; width: 70%; left: -18px; padding: 14px; }
  .cc-transcript-head { margin-bottom: 13px; font-size: 8px; }
  .cc-live-lines .cc-line { font-size: 9px; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; }
  .cc-live-lines .cc-who { font-size: 8px; }
  .cc-receipt { top: 236px; right: -10px; width: 38%; padding: 12px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cc-receipt .cc-check { display: none; }
  .cc-receipt-body strong { font-size: 9px; }
  .cc-receipt-body > span, .cc-receipt-note { font-size: 8px; }
  .cc-receipt-note { padding-top: 3px; }
  .proof-item { padding: 0 12px; gap: 10px; }
  .proof-item > svg { width: 25px; }
  .proof-k { font-size: 12px; }
  .proof-v { font-size: 9px; }
  .after-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .after-layout .section-title { font-size: 42px; }
  .portal { grid-template-columns: 126px minmax(0, 1fr); padding: 14px; }
  .portal-logo > span { font-size: 23px !important; }
  .portal-nav { font-size: 11px; padding: 11px 8px; }
  .portal-call { padding: 15px; }
  .portal-h3 { font-size: 15px; }
  .portal-day, .portal-todo { padding: 13px; }
  .portal-sync { font-size: 9px; }
  .industries-note { font-size: 12px; }
  .ind-grid, .plans { gap: 12px; }
  .ind-card { padding: 11px; }
  .ind-title { font-size: 21px; }
  .ind-body { font-size: 13px; }
  .ind-copy { padding: 17px 2px 0; }
  .mini-audio { gap: 8px; }
  .mini-play { width: 32px; height: 32px; }
  .mini-duration { font-size: 9px; }
  .ind-cta { font-size: 12px; gap: 8px; }
  .pricing-head .section-title { font-size: 38px; }
  .billing-switch { min-width: 240px; }
  .billing-switch button { padding: 12px 15px; font-size: 12px; }
  .billing-saving { font-size: 10px; }
  .plan { padding: 25px 17px; gap: 18px; }
  .plan-name { font-size: 23px; }
  .plan-for { font-size: 11px; }
  .plan-price strong, .plan-price .plan-custom { font-size: 31px; }
  .plan-price { gap: 4px; }
  .plan-quota, .plan-overage { font-size: 12px; }
  .plan-features { font-size: 12px; gap: 10px; }
  .plan-cta { font-size: 12px; }
  .plan-badge { font-size: 10px; padding: 7px 13px; top: -14px; }
  .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 24px; }
  .faq-item button { padding: 15px 18px; font-size: 13px; }
  .faq-item p { font-size: 12px; padding: 0 50px 18px 18px; }
  .cta-block { padding: 35px; }
  .cta-title { font-size: 32px; }
  .cta-note { font-size: 10px; }
  .footer-grid { gap: 22px; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
  .footer-tagline, .footer-col { font-size: 12px; }
}
@media (max-width: 680px) {
  :root { --density-pad: 22px; --density-pad-y: 64px; }
  .btn { min-height: 44px; white-space: normal; }
  .site-nav .container { gap: 14px !important; }
  .site-nav .container > a > span { font-size: 25px !important; }
  .nav-trial { font-size: 11px; min-height: 38px; padding: 10px 14px; }
  .hero { padding: 112px 0 20px; }
  .hero > .rings { right: -320px; top: 250px; opacity: .7; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-title { font-size: clamp(62px, 15vw, 88px); }
  .hero-title > span { white-space: normal; }
  .hero-title em { display: inline; margin-left: .15em; }
  .hero-eyebrow { font-size: 9px; margin-bottom: 22px; }
  .hero-sub { font-size: 19px; margin-top: 22px; }
  .hero-actions { margin-top: 24px; gap: 16px; }
  .hero-actions .btn-lg { padding: 14px 20px; font-size: 12px; }
  .hero-listen { font-size: 11px; gap: 8px; }
  .hero-play { width: 33px; height: 33px; }
  .hero-note { font-size: 10px; }
  .cc-wrap { height: 364px; padding: 0 24px 0 10px; max-width: 480px; width: 100%; margin: 0 auto; }
  .cc-wrap::before { inset: 20px 35px 50px 2px; }
  .call-card { height: 278px; border-radius: 21px; padding: 22px; }
  .cc-head .cc-wave { display: flex; flex-basis: 70px; }
  .cc-avatar { width: 36px; height: 36px; font-size: 16px; }
  .cc-name { font-size: 13px; }
  .cc-meta { font-size: 9px; }
  .cc-clock { font-size: 8px; }
  .call-card > .voice-wave { top: 70px; height: 197px; }
  .cc-tools { top: 89px; right: 10px; }
  .cc-tools > span { width: 26px; height: 26px; }
  .cc-live-transcript { left: 0; top: 214px; width: 64%; height: 131px; padding: 14px; }
  .cc-live-lines .cc-line { font-size: 9px; grid-template-columns: 35px minmax(0, 1fr); }
  .cc-receipt { right: 0; top: 226px; width: 34%; min-height: 110px; }
  .proof { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 16px; padding: 23px 0; }
  .proof-item, .proof-item:first-child { padding: 0; border: 0; gap: 12px; }
  .proof-k { font-size: 13px; }
  .proof-v { font-size: 10px; margin-top: 3px; }
  .proof-item > svg { width: 27px; }
  .section-title, .after-layout .section-title, .pricing-head .section-title { font-size: 39px; }
  .section-head .eyebrow { margin-bottom: 20px; }
  .section-sub, .after-layout .section-sub { font-size: 18px; margin-top: 14px; }
  .portal { padding: 8px; border-radius: 16px; grid-template-columns: minmax(0, 1fr); }
  .portal-side { display: none; }
  .portal-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .portal-call { padding: 14px 8px; gap: 12px; }
  .portal-h3 { font-size: 12px; }
  .portal-day, .portal-todo { padding: 12px 8px; }
  .portal-tabs { gap: 12px; }
  .portal-tabs button { min-height: 38px; }
  .portal-tab-panel { min-height: 175px; }
  .portal-transcript { font-size: 9px; gap: 16px; }
  .portal-line { grid-template-columns: 33px minmax(0, 1fr); gap: 5px; }
  .portal-who { font-size: 8px; }
  .portal-summary { padding: 9px; gap: 8px; }
  .portal-summary p { font-size: 9px; }
  .portal-summary .portal-check { width: 17px; height: 17px; }
  .portal-sync { font-size: 8px; gap: 6px; padding: 6px; }
  .portal-slot-row { grid-template-columns: 30px minmax(0, 1fr); }
  .portal-slot, .portal-muted { font-size: 9px; }
  .portal-todo-item { font-size: 8px; gap: 7px; }
  .portal .has-timeline .mini-play { width: 32px; height: 32px; }
  .industries-head { display: block; margin-bottom: 24px; }
  .industries-note { font-size: 14px; margin-top: 20px; }
  .ind-grid, .plans { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ind-card { padding: 15px; }
  .ind-image { aspect-ratio: 2.1; }
  .ind-copy { padding: 20px 5px 0; }
  .ind-title { font-size: 27px; }
  .ind-body { font-size: 17px; }
  .mini-audio { padding: 10px 5px; gap: 14px; }
  .mini-play { width: 42px; height: 42px; }
  .mini-audio-name { font-size: 13px; }
  .mini-duration { font-size: 12px; }
  .mini-audio .cc-wave { max-width: 220px; }
  .ind-cta { min-height: 48px; font-size: 15px; }
  .section-foot { font-size: 12px; }
  .pricing-head { flex-direction: column; align-items: stretch; gap: 25px; margin-bottom: 24px; }
  .billing-switch { align-self: flex-start; min-width: 290px; }
  .billing-switch button { min-height: 44px; font-size: 14px; }
  .plan { padding: 27px 25px; gap: 19px; }
  .plan.is-featured { margin-top: 7px; }
  .plan-name { font-size: 27px; }
  .plan-for { font-size: 14px; }
  .plan-price strong, .plan-price .plan-custom { font-size: 43px; }
  .plan-price span { font-size: 15px; }
  .plan-quota, .plan-overage { font-size: 15px; }
  .plan-features { font-size: 14px; gap: 12px; }
  .plan-cta { font-size: 15px; }
  .plan-badge { top: -16px; font-size: 12px; padding: 8px 15px; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-item button { font-size: 14px; padding: 16px 18px; gap: 14px; }
  .faq-item p { font-size: 13px; padding-right: 30px; }
  .faq-toggle { width: 23px; height: 23px; }
  .cta-section { padding-top: 35px; }
  .cta-block { padding: 32px 26px 168px; border-radius: 19px; }
  .cta-copy { width: 100%; }
  .cta-title { font-size: 33px; max-width: 380px; }
  .cta-copy .btn { margin-top: 22px; }
  .cta-note { font-size: 11px; }
  .cta-art { inset: auto -15px -16px 0; height: 190px; opacity: .9; }
  .cta-scribble { display: none; }
  .footer { padding: 56px 0 32px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-tagline { font-size: 13px; margin-top: 12px; }
  .footer-col { font-size: 11px; gap: 14px; }
  .footer-col .eyebrow { font-size: 12px; }
  .footer-bottom { font-size: 10px; }
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-card { padding: 25px; }
  .sc-head { flex-direction: column; gap: 8px; }
  .hero-segment .hero-title { font-size: 53px; }
  .hero-segment .hero-title em { display: block; margin-left: 0; }
  .hero-segment .hero-sub { font-size: 17px; }
  .modal-overlay { padding: 16px; }
  .modal-panel { max-height: calc(100dvh - 32px); border-radius: 18px; }
  .modal-panel input, .modal-panel select { font-size: 16px !important; }
  .modal-field-grid { grid-template-columns: 1fr !important; }
  .modal-header { padding: 18px 20px !important; }
  .modal-body { padding: 24px 20px 20px !important; }
  .demo-panel { padding: 48px 16px 16px; }
  .sticky-mobile-cta { display: block; }
  body:has(.sticky-mobile-cta) { padding-bottom: 84px; }
}
@media (max-width: 380px) {
  :root { --density-pad: 18px; }
  .nav-trial { font-size: 10px; padding: 10px 12px; }
  .hero-title { font-size: 57px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn-lg { padding: 13px 16px; font-size: 11px; }
  .hero-play { width: 29px; height: 29px; }
  .hero-listen { gap: 6px; font-size: 10px; }
  .cc-head .cc-wave { flex-basis: 42px; }
  .portal-main { grid-template-columns: minmax(0, 1fr); }
  .portal-call { padding: 15px; }
  .portal-transcript { font-size: 11px; }
  .portal-tab-panel { min-height: 135px; }
  .portal-agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .portal-sync { font-size: 7px; }
  .portal-day-arrows { display: none; }
  .proof-k { font-size: 12px; }
  .proof-v { font-size: 9px; }
  .section-title, .after-layout .section-title, .pricing-head .section-title { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ============================================================
   Legal / contact pages (gdpr, dpa, sub-processors, kontakt)
   Shared layout + typography for standalone static HTML pages
   that are NOT rendered by React.
   ============================================================ */
.legal-page {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
}
.legal-page .page {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}
.legal-page .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 48px;
  flex-wrap: wrap;
  gap: 12px;
}
.legal-page .logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.045em;
  color: var(--fg);
  line-height: 1;
  border: none;
}
.legal-page .logo .dot { color: var(--accent); }
.legal-page .topbar > a:not(.logo) {
  color: var(--muted-c);
  font-size: 14px;
  border: none;
}
.legal-page .topbar > a:not(.logo):hover { color: var(--fg); }
.legal-page .logo:hover { color: var(--accent); }

.legal-page .page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 12px;
}
.legal-page .lede {
  font-size: 18px;
  color: var(--muted-c);
  max-width: 64ch;
  margin: 0 0 48px;
}
.legal-page .updated {
  color: var(--muted-c);
  font-size: 13px;
  font-family: var(--font-mono);
  margin: 0 0 40px;
}

.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
  line-height: 1.2;
}
.legal-page h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
  line-height: 1.3;
}
.legal-page p { margin: 0 0 14px; }
.legal-page ul, .legal-page ol { padding-left: 22px; margin: 8px 0 16px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a {
  color: var(--fg);
  border-bottom: 1px solid var(--line-c);
  transition: border-color 120ms ease, color 120ms ease;
}
.legal-page a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Contact cards (kontakt.html) */
.legal-page .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 56px;
}
@media (max-width: 720px) {
  .legal-page .contact-grid { grid-template-columns: 1fr; }
}
.legal-page .card {
  background: var(--bg-card);
  border: 1px solid var(--line-c);
  border-radius: 16px;
  padding: 28px;
}
.legal-page .card .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 12px;
}
.legal-page .card .value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.legal-page .card .value a {
  color: var(--fg);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.legal-page .card .value a:hover { color: var(--accent); }
.legal-page .card .hint {
  color: var(--muted-c);
  font-size: 14px;
  margin: 12px 0 0;
}

/* Key-value tables */
.legal-page .kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--bg-card);
  border: 1px solid var(--line-c);
  border-radius: 16px;
  overflow: hidden;
  margin: 12px 0 16px;
}
.legal-page .kv th, .legal-page .kv td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-c);
  vertical-align: top;
}
.legal-page .kv tr:last-child th, .legal-page .kv tr:last-child td { border-bottom: none; }
.legal-page .kv th {
  width: 240px;
  color: var(--muted-c);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Generic data table (sub-processors list, DPA annex B) */
.legal-page table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-c);
  border-radius: 16px;
  overflow: hidden;
  margin: 16px 0 24px;
}
.legal-page table.data th, .legal-page table.data td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-c);
  vertical-align: top;
}
.legal-page table.data tr:last-child th, .legal-page table.data tr:last-child td { border-bottom: none; }
.legal-page table.data th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-c);
  font-weight: 500;
  background: var(--bg-card-2);
}

/* DPA-specific bits */
.legal-page .placeholder {
  background: rgba(255, 191, 101, 0.28);
  border-bottom: 1px dashed var(--buckthorn);
  padding: 0 4px;
  border-radius: 2px;
  font-style: italic;
  color: var(--ink);
}
.legal-page .notice {
  background: var(--bg-card);
  border: 1px solid var(--line-c);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  font-size: 14px;
  margin: 24px 0;
  border-radius: 8px;
}
.legal-page .annex {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 2px solid var(--fg);
}
.legal-page .sig {
  margin-top: 64px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.legal-page .sig .col {
  flex: 1;
  min-width: 240px;
  border-top: 1px solid var(--fg);
  padding-top: 12px;
  font-size: 13px;
}

.legal-page .legal-foot {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line-c);
  color: var(--muted-c);
  font-size: 13px;
  font-family: var(--font-mono);
}
.legal-page .legal-foot a { color: var(--muted-c); border: none; }
.legal-page .legal-foot a:hover { color: var(--accent); }

/* Inline code (used in DPA for endpoints like /me/export) */
.legal-page code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-card-2);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Print (DPA gets printed by clients before signing) */
@media print {
  .legal-page { background: white; color: black; }
  .legal-page .topbar, .legal-page .notice { display: none; }
  body::before { display: none; }
}