/* Como. Structure after WithCoverage, tokens from the vault: one accent, one card, no shadows. */
:root {
  color-scheme: light;
  --accent: #0038A8;
  --bg: #f2f5fb;
  --bg2: #ffffff;
  --label: #1c1c1e;
  --label2: rgba(60, 60, 67, 0.6);
  --sep: rgba(60, 60, 67, 0.2);
  --on-accent: #ffffff;
  --display: clamp(2.75rem, 6vw, 4.5rem);
  --title: clamp(1.75rem, 3vw, 2.5rem);
  --body: 1.0625rem;
  --footnote: 0.875rem;
  --margin: 24px;
  --section: 96px;
  --serif: ui-serif, "Iowan Old Style", "Palatino", Georgia, serif;
}
.dark {
  --bg: #082567;
  --bg2: #0b2f7d;
  --label: #ffffff;
  --label2: rgba(235, 235, 245, 0.6);
  --sep: rgba(235, 235, 245, 0.18);
  color: var(--label);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, figure { margin: 0; }
h1 { font-family: var(--serif); font-weight: 400; font-size: var(--display); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-family: var(--serif); font-weight: 400; font-size: var(--title); line-height: 1.15; max-width: 22ch; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.muted { color: var(--label2); }
.footnote { font-size: var(--footnote); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--margin); }
.measure { max-width: 56ch; }
.band { padding: var(--section) 0; background: var(--bg); }
.band + .band { border-top: 0; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }

.button {
  display: inline-block;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 4px;
  padding: 12px 20px;
  font: inherit; font-size: var(--footnote); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.button:hover { text-decoration: none; opacity: 0.9; }
.button:disabled { opacity: 0.5; cursor: default; }
.button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.dark .button.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.button.accent { background: var(--accent); color: var(--on-accent); }
.card { background: var(--bg2); border-radius: 8px; padding: 32px; }

/* Top */
.draft { margin: 0; text-align: center; padding: 8px var(--margin); font-size: var(--footnote); background: #000F89; color: rgba(255,255,255,0.85); }
.top { position: absolute; top: 40px; left: 0; right: 0; z-index: 3; color: #fff; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
.wordmark { font-weight: 600; font-size: var(--body); }
nav .links { display: flex; gap: 24px; align-items: center; font-size: var(--footnote); }
.dead { opacity: 0.7; cursor: default; }
.menu { position: relative; cursor: default; }
.menu .sub { display: none; position: absolute; top: 100%; left: -16px; z-index: 4; background: #082567; border-radius: 8px; padding: 12px 16px; min-width: 10rem; flex-direction: column; gap: 8px; }
.menu:hover .sub, .menu:focus-within .sub { display: flex; }
.top .button { background: var(--accent); color: #fff; }
.top .button.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }

/* Hero */
.video-hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; padding: 160px 0 200px; background: #082567; }
.video-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-hero::after { content: ""; position: absolute; inset: 0; background: rgba(8, 37, 103, 0.62); z-index: 1; }
.video-hero .wrap { position: relative; z-index: 2; text-align: center; }
.video-hero h1 { margin: 0 auto; max-width: 16ch; }
.video-hero .lead { margin: 24px auto 0; max-width: 40ch; color: rgba(255, 255, 255, 0.85); }
.video-hero .actions { margin-top: 32px; }
.video-hero .button { background: #fff; color: #1c1c1e; }
.page-hero { padding: 160px 0 64px; }
.page-hero .lead { margin-top: 24px; max-width: 56ch; }

/* Logo wall inside the hero band */
.logos { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; overflow: hidden; }
.logos .track { display: flex; gap: 96px; width: max-content; animation: marquee 40s linear infinite; }
.logos span { font-family: var(--serif); font-size: 1.5rem; color: rgba(255,255,255,0.7); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos .track { animation: none; } }

/* Team and pair */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.person { background: #0b2f7d; border-radius: 4px; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; }
.person .photo { flex: 1; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: var(--footnote); background-size: cover; background-position: center top; }
.person .photo.img { color: transparent; }
.person p { background: #082567; text-align: center; padding: 8px; font-size: var(--footnote); font-weight: 600; }
.pair .card p.muted { margin-top: 12px; }
.pair .visual { margin-top: 24px; }
.step .n { color: var(--label2); font-size: var(--footnote); }
.step h3 { margin-top: 4px; }
.step p.muted { margin-top: 8px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--sep); }
.list li:first-child { border-top: 0; padding-top: 0; }
.status { color: var(--label2); font-size: var(--footnote); white-space: nowrap; text-align: right; }
.finding { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sep); }
.finding:first-of-type { border-top: 0; padding-top: 0; }
.finding .tag { font-weight: 600; font-size: var(--footnote); }
.finding p + p { margin-top: 4px; }

/* Walkthrough */
.screen { background: var(--bg); border-radius: 4px; padding: 20px; }
.screen .bar { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--footnote); padding-bottom: 12px; border-bottom: 1px solid var(--sep); color: var(--accent); }
.stages { position: relative; min-height: 22rem; }
.stage { position: absolute; inset: 0; padding-top: 16px; opacity: 0; transition: opacity 400ms ease; }
.stage.on { opacity: 1; }
.stage .n { color: var(--label2); font-size: var(--footnote); margin-bottom: 12px; }
.progress { height: 4px; border-radius: 2px; background: var(--sep); margin-top: 16px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.stage.on .progress span { animation: fill 4s linear forwards; }
@keyframes fill { to { width: 100%; } }
.chat p { padding: 12px 16px; border-radius: 8px; max-width: 88%; font-size: var(--footnote); background: var(--bg2); }
.chat p + p { margin-top: 12px; }
.chat .q { margin-left: auto; }
.dots { display: flex; gap: 8px; justify-content: center; padding-top: 12px; }
.dot { width: 6px; height: 6px; border-radius: 3px; background: var(--sep); }
.dot.on { background: var(--accent); }
.rewrite { background: var(--bg); border-radius: 4px; padding: 20px; }
.rewrite .n { color: var(--label2); font-size: var(--footnote); }
.rewrite .clause { background: var(--bg2); border-radius: 4px; padding: 16px; margin-top: 12px; font-size: var(--footnote); }
.rewrite .clause s { color: var(--label2); }
.rewrite .clause:last-of-type { border-left: 3px solid var(--accent); }
.rewrite .foot { display: flex; justify-content: space-between; margin-top: 16px; font-size: var(--footnote); }

/* Platform */
.tabs { display: flex; gap: 24px; margin-top: 48px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--sep); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 1 0; min-width: 8rem; text-align: left; background: none; color: var(--label2); border: 0; border-bottom: 2px solid transparent; padding: 0 0 16px; margin-bottom: -1px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.tab span:first-child { font-weight: 600; }
.tab .footnote { color: var(--label2); }
.tab.on { color: #fff; border-bottom-color: #5CB3FF; }
.tab.on .footnote { color: #BDEDFD; }
.app { margin: 48px auto 0; max-width: 880px; background: #fff; color: #1c1c1e; border-radius: 4px; display: grid; grid-template-columns: 12rem 1fr; min-height: 26rem; overflow: hidden; --sep: rgba(60,60,67,0.2); --label2: rgba(60,60,67,0.6); --bg2: #f5f5f4; }
.app .side { background: #f5f5f4; padding: 20px; font-size: var(--footnote); }
.app .side p { font-weight: 600; margin-bottom: 16px; }
.app .side span { display: block; padding: 6px 0; color: var(--label2); }
.app .side span.on { color: var(--accent); font-weight: 600; }
.app .main { padding: 24px 32px; }
.app .main h3 { margin-bottom: 16px; }
.panel { display: none; }
.panel.on { display: block; }

/* Clients */
.reel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 48px var(--margin) 0; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel figure { position: relative; flex: 0 0 min(720px, 88vw); aspect-ratio: 16 / 9; scroll-snap-align: center; border-radius: 4px; overflow: hidden; background: #1c1c1e; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel .over { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 24px; color: #fff; background: linear-gradient(90deg, rgba(8,37,103,0.75), rgba(8,37,103,0.1)); cursor: pointer; }
.reel .over h3 { max-width: 16ch; font-size: 1.75rem; }
.reel .play { width: 48px; height: 48px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.reel figure.playing .over { display: none; }
.client-tabs { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.client-tabs span { padding: 12px 24px; border-top: 1px solid var(--sep); color: var(--label2); font-family: var(--serif); font-size: 1.125rem; }
.client-tabs span.on { border-top-color: var(--accent); color: var(--accent); }

/* CTA and form */
.cta .head { align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--sep); }
.drop { border: 1px dashed var(--sep); border-radius: 4px; padding: 48px 24px; text-align: center; cursor: pointer; margin-top: 48px; }
.drop.over { border-style: solid; border-color: var(--accent); }
.drop input { display: none; }
.drop a { color: var(--accent); }
.dark .drop a { color: #BDEDFD; text-decoration: underline; }
.dark .button:not(.ghost) { background: #fff; color: var(--accent); }
.files { margin-top: 16px; }
form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
label { display: block; font-size: var(--footnote); color: var(--label2); }
input[type=email], input[type=text] { width: 100%; margin-top: 4px; padding: 12px 16px; font: inherit; color: var(--label); background: var(--bg2); border: 0; border-radius: 4px; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.submit { margin-top: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.result { margin-top: 16px; }

footer { padding: 64px 0 48px; border-top: 1px solid var(--sep); background: #000F89; --bg: #000F89; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer .cols .n { color: var(--label2); font-size: var(--footnote); margin-bottom: 8px; }
footer .cols a, footer .cols span { display: block; margin: 0 0 6px; font-size: var(--footnote); }
footer .cols .dead { color: var(--label2); opacity: 1; }
footer .legal { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; font-size: var(--footnote); color: var(--label2); flex-wrap: wrap; }

@media (max-width: 720px) {
  :root { --section: 64px; }
  .top { top: 36px; }
  nav .links:first-of-type { display: none; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .grid3, .grid2, form .fields, footer .cols { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .app .side { display: none; }
  .stages { min-height: 30rem; }
  .finding { grid-template-columns: 1fr; gap: 4px; }
  .reel .over { padding: 24px; }
  .reel .over h3 { font-size: 1.25rem; }
  .card { padding: 24px; }
}

/* Masa, 20.09.2026: Ramp-style email capture in the hero, blue accent */
.audit { display: flex; gap: 8px; margin: 32px auto 0; max-width: 520px; background: #fff; border-radius: 4px; padding: 6px; }
.audit input { flex: 1; margin: 0; border: 0; border-radius: 4px; background: #fff; color: #1c1c1e; padding: 12px 16px; font: inherit; min-width: 0; }
.audit input:focus { outline: none; }
.audit .button { background: var(--accent); color: #fff; }
.audit-result { margin-top: 12px; color: rgba(255,255,255,0.85); font-size: var(--footnote); }
.video-hero .button.accent { background: var(--accent); color: #fff; }

/* Versicherungsengel take: named advisor with promises, claim examples by industry */
.advisor { display: grid; grid-template-columns: 16rem 1fr; gap: 32px; align-items: start; }
.advisor .person { aspect-ratio: 4 / 5; }
.promises { list-style: none; margin: 16px 0 0; padding: 0; }
.promises li { padding: 12px 0; border-top: 1px solid var(--sep); display: flex; gap: 12px; }
.promises li:first-child { border-top: 0; padding-top: 0; }
.promises li::before { content: "✓"; color: var(--accent); font-weight: 600; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--sep); font-size: var(--footnote); color: var(--label2); }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.claims .card h3 { font-size: 1.125rem; }
.claims .card p { margin-top: 8px; }
.claims .card .line { margin-top: 12px; font-size: var(--footnote); color: var(--accent); font-weight: 600; }
@media (max-width: 720px) {
  .advisor, .claims { grid-template-columns: 1fr; }
  .audit { flex-direction: column; }
}

/* Blue used as the mark of trust and action */
.eyebrow { color: var(--accent); font-size: var(--footnote); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px; background: rgba(255,255,255,0.12); color: #fff; font-size: var(--footnote); }
.badge .stars { color: #FFC42E; letter-spacing: 1px; }
.band .badges { justify-content: flex-start; margin-top: 16px; }
.band .badge { background: #fff; color: var(--accent); border: 1px solid var(--sep); }
.note { display: grid; grid-template-columns: 1fr 24rem; gap: 48px; align-items: start; }
.note .founders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note .founders .person { aspect-ratio: 4 / 5; }
.note p + p { margin-top: 16px; }
.note .sign { margin-top: 24px; font-family: var(--serif); font-size: 1.25rem; color: var(--accent); }
.band.tint { background: #e3ecfb; }
@media (max-width: 720px) { .note { grid-template-columns: 1fr; } }

/* Product demos as placeholders, 20.09.2026 */
.demo-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 4px; background: #d9d9d9; color: #6e6e73; font-size: var(--footnote); }
.app.demo-ph { margin: 48px auto 0; max-width: 880px; min-height: 0; aspect-ratio: 16 / 8; display: flex; background: #d9d9d9; color: #6e6e73; }

/* Contact: email field and phone, 20.09.2026 */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.contact .row { display: flex; gap: 8px; margin-top: 4px; }
.contact .row input { margin: 0; flex: 1; min-width: 0; }
.contact .n { color: var(--label2); font-size: var(--footnote); }
.contact .phone { font-family: var(--serif); font-size: 1.75rem; margin-top: 4px; }
.contact .audit-result { color: rgba(255,255,255,0.85); }
@media (max-width: 720px) { .contact { grid-template-columns: 1fr; } }