/* Website pages (DESIGN.md). Built on connect.css, which every page links
   first: tokens, fonts, wordmark, buttons, fields and the card come from
   there. This file adds only the landing layout (body.site), its graphics,
   the sign-in address field and the legal documents, and uses tokens only. */

/* Landing and legal pages are full-width documents, not a centred card. */
body.site{display:block;padding:0}
body.site main{max-width:none}
/* connect.css draws main>section as a card; landing sections are bands. */
body.site main>section{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.shell{width:min(100% - 32px,1120px);margin-inline:auto}
@media(min-width:720px){.shell{width:min(100% - 64px,1120px)}}
.skip{position:absolute;left:16px;top:-60px;z-index:10;padding:8px 12px;border-radius:7px;background:var(--ink);color:var(--surface);text-decoration:none}
.skip:focus{top:12px}
.icon{flex:none}

/* Header: wordmark, section links, language, sign-in. */
.site-header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;gap:28px;min-height:64px}
.site-header .brand{margin:0}
.site-nav{display:flex;gap:24px;margin-left:auto}
.site-nav a{color:var(--muted);font-size:14px;text-decoration:none;transition:color .2s var(--ease)}
.site-nav a:hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:14px}
.header-row>.brand+.header-actions{margin-left:auto}
.lang{display:flex;gap:2px;font-size:13px}
.lang a{padding:4px 6px;border-radius:5px;color:var(--muted);text-decoration:none}
.lang a:hover{background:var(--hover);color:var(--ink)}
.lang a[aria-current]{color:var(--ink);font-weight:600}
.button.small{width:auto;min-height:36px;margin:0;padding:7px 14px;font-size:14px}
.site-nav a,.header-actions a{white-space:nowrap}
@media(max-width:1100px){.site-nav{display:none}.header-actions{margin-left:auto}}
/* Sign-in is a quiet link; the header's button asks for an invitation, and
   on phones the hero's own button right below does. */
.header-sign-in{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.header-sign-in:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){.header-cta{display:none}}

/* Hero (docs/landing-research.md): the promise, then in plain words what it
   is and for whom (no badge above the headline), one primary action with what the call gives, two trust facts, the tools it
   works with, and the example conversation. */
.site .hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:56px;align-items:center;padding:72px 0 88px}
.hero h1{margin:0;font:600 clamp(40px,4.5vw,62px)/1.04 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.hero h1 span{display:block;font-weight:400;letter-spacing:-.035em}
/* On wide screens each sentence of the promise keeps to one line (the English
   one is longer); on phones the type stays large and wraps balanced. */
html[lang=en] .hero h1{font-size:clamp(30px,3.6vw,50px)}
@media(max-width:960px){.hero h1{font-size:clamp(36px,10.5vw,62px);text-wrap:balance}html[lang=en] .hero h1{font-size:clamp(32px,9.2vw,50px)}}
.hero-lead{max-width:34rem;margin:22px 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:30px}
.actions .button{width:auto;margin:0;padding:11px 22px}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);text-decoration:none}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.text-link .down{transform:rotate(90deg)}
.hero-promise{margin:12px 0 0;font-size:14px;color:var(--muted)}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;color:var(--olive-ink)}
.hero-trust li{display:inline-flex;align-items:center;gap:8px}
.trust-marks{display:inline-flex}
.trust-marks img{box-sizing:border-box;width:22px;height:22px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:50%}
.trust-marks img+img{margin-left:-6px}
.works-with{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.works-with ul{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.works-with li{display:grid;place-items:center;width:38px;height:38px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.works-with img{width:22px;height:22px;object-fit:contain}
@media(max-width:960px){.site .hero{grid-template-columns:1fr;gap:44px;padding:48px 0 72px}}

/* The example conversation looks like the app's chat: the person's message
   in a sage bubble, the answer first, then its sources or what was done. It
   plays by itself once, then waits for the visitor (static/home.js). */
.demo{margin:0}
.demo-window{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ink) 28%,transparent),0 4px 18px color-mix(in srgb,var(--ink) 6%,transparent)}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 10px 0 18px;border-bottom:1px solid var(--line);font:18px/1 var(--serif);letter-spacing:-.5px;color:var(--ink)}
.demo-bar .dot{color:var(--olive)}
.demo-restart{display:inline-flex;width:auto;min-height:30px;margin:0;padding:4px 10px;background:transparent;border:0;border-radius:7px;color:var(--muted);font:500 12.5px/1 var(--sans);letter-spacing:0}
.demo-restart:hover{background:var(--hover);color:var(--ink)}
.demo-log{display:flex;flex-direction:column;gap:16px;height:380px;padding:22px 22px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--control) transparent}
.demo-log>*{flex:none}
/* Once the conversation has scrolled, its top edge fades to say there is more above. */
.demo-log.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent,var(--ink) 28px);mask-image:linear-gradient(to bottom,transparent,var(--ink) 28px)}
.bubble{margin:0;font-size:15px;line-height:1.55}
.bubble p{margin:0;color:inherit}
.bubble.user{align-self:flex-end;max-width:86%;padding:11px 15px;background:var(--sage);border:1px solid var(--control);border-radius:10px 10px 2px 10px;color:var(--olive-ink);overflow-wrap:anywhere}
.bubble.assistant{color:var(--ink-hover)}
.sources{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.sources-label{margin-right:2px;font-size:12.5px;color:var(--muted)}
.sources ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.source-chip{width:auto;min-height:26px;margin:0;padding:3px 10px;background:var(--raised);border:1px solid var(--line);border-radius:999px;color:var(--muted);font:500 12.5px/1.2 var(--sans)}
.source-chip:hover{background:var(--hover);color:var(--ink)}
.source-chip[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.source-quote{display:grid;gap:4px;margin:10px 0 0;padding:10px 14px;background:var(--field);border:1px solid var(--line);border-left:3px solid var(--olive);border-radius:9px;font-size:14px;color:var(--ink)}
.source-quote span{font-size:12px;font-weight:500;color:var(--muted)}
.source-message{margin:10px 0 0;padding:0;overflow:hidden;background:var(--field);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px -18px color-mix(in srgb,var(--ink) 40%,transparent)}
.source-message[hidden]{display:none}
.source-message figcaption{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--raised);font-size:12.5px;color:var(--muted)}
.source-message figcaption strong{font-weight:600;color:var(--ink)}
.message-body{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px}
.message-body .avatar{width:28px;height:28px;border-radius:7px;font-size:12px}
.message-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 2px!important;font-size:13px}
.message-meta strong{color:var(--ink)}
.message-meta span{font-size:12px;color:var(--muted)}
.message-body p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.message-body mark{padding:1px 3px;background:var(--sage);border-radius:3px;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.demo-card{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-radius:10px}
.demo-card-icon{width:20px;height:20px;margin-top:2px;color:var(--olive-ink)}
.demo-card div{display:grid;justify-items:start;gap:2px;font-size:13.5px;color:var(--muted)}
.demo-card strong{font-weight:600;color:var(--ink)}
.demo-status{display:inline-flex;align-items:center;gap:6px;color:var(--olive-ink)}
.demo-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--olive)}
.demo-link{width:auto;min-height:0;margin:6px 0 0;padding:0;background:none;border:0;color:var(--olive-ink);font:500 13px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px}
.demo-link:hover{background:none;color:var(--ink)}
.bubble .draft{margin-top:10px}
.demo-note{display:flex;align-items:center;gap:12px;margin:4px 0 0;font-size:12px;font-weight:500;color:var(--muted)}
.demo-note::before,.demo-note::after{content:"";flex:1;height:1px;background:var(--line)}
.thinking{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)}
.demo-cta{display:inline-flex;margin-top:12px}
.demo-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
/* The suggestions keep their room while hidden, so the hero never jumps. */
.demo-suggestions[hidden]{display:flex!important;visibility:hidden}
.demo-suggestions{min-height:42px}
.demo-suggestions button{width:auto;min-height:32px;margin:0;padding:5px 12px;background:var(--surface);border:1px solid var(--control);border-radius:999px;color:var(--ink);font:500 13px/1.2 var(--sans)}
.demo-suggestions button:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.demo-composer{display:flex;align-items:center;gap:8px;margin:0 16px 16px;padding:5px 5px 5px 14px;background:var(--field);border:1px solid var(--line);border-radius:10px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.demo-composer:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px var(--sage)}
.demo-composer input{min-height:30px;margin:0;padding:0;background:transparent;border:0;font-size:14.5px}
.demo-composer input:focus{box-shadow:none}
.demo-send{display:grid;place-items:center;width:30px;height:30px;min-height:0;flex:none;margin:0;padding:0;border-radius:7px;background:var(--ink);color:var(--surface)}
.demo>figcaption{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
@media(max-width:560px){.demo-log{height:420px;padding:18px 16px 14px}}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:rise .7s var(--ease) both}
  .demo-log>*{animation:rise .4s var(--ease) both}
  .demo-log>.bubble.assistant:nth-child(2){animation-delay:.45s}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Sections. */
.site .band{padding:104px 0;border-top:1px solid var(--line)}
.eyebrow{margin:0 0 12px;font-size:13.5px;font-weight:500;color:var(--olive-ink)}
.band h2{max-width:44rem;margin:0;font:600 clamp(28px,3.4vw,42px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.band h3{margin:0 0 6px;font:600 17px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.band li p{margin:0;font-size:15px}
.section-lead{max-width:36rem;margin:20px 0 0;font-size:17px}
@media(max-width:720px){.site .band{padding:76px 0}}

/* Icons sit in a sage disc wherever a list item leads with one. */
.row-icon,.step-icon{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:50%;background:var(--sage);color:var(--olive-ink)}

/* A heading beside its lead fills the width instead of leaving it empty. */
.section-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.section-head .section-lead{margin:0 0 6px}
@media(max-width:960px){.section-head{grid-template-columns:1fr}}

/* What Quartio does: one result per row, in the order Quartio works. Text
   and the product fragment alternate sides so each row reads on its own. */
.features{display:grid;gap:20px;margin:56px 0 0;padding:0;list-style:none}
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.feature:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature:nth-child(even) .feature-copy{order:2}
.feature-copy{padding:20px 4px 20px 20px}
.feature:nth-child(even) .feature-copy{padding:20px 20px 20px 4px}
.feature-step{display:grid;place-items:center;width:30px;height:30px;margin-bottom:18px;border-radius:50%;background:var(--sage);color:var(--olive-ink);font-size:13px;font-weight:600}
.feature-copy h3{margin:0 0 10px;font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.025em}
.feature-copy p{max-width:26rem;margin:0;font-size:16px}
.feature-stage{display:grid;place-items:center;min-height:300px;padding:36px;background:var(--sage);border-radius:12px;font-size:14px;line-height:1.45}
.feature-stage>*{width:100%;max-width:30rem}
.feature-matters .feature-stage>*{max-width:34rem}
.stage-card{display:grid;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 48px -30px color-mix(in srgb,var(--ink) 30%,transparent)}
.feature-stage .draft{box-shadow:0 24px 48px -30px color-mix(in srgb,var(--ink) 30%,transparent)}
@media(max-width:960px){
  .feature,.feature:nth-child(even){grid-template-columns:1fr;gap:8px}
  .feature:nth-child(even) .feature-copy{order:0}
  .feature-copy,.feature:nth-child(even) .feature-copy{padding:12px 8px 8px}
  .feature-stage{min-height:0;padding:20px 14px}
}

/* The matters panel, drawn like the Company view: groups by state, one status icon per row, the date and who owns it. */
.panel{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 0 var(--surface) inset,0 28px 56px -30px color-mix(in srgb,var(--ink) 32%,transparent)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 14px;font-weight:600;color:var(--ink)}
.count{margin-left:8px;font-weight:500;color:var(--soft)}
.pill{padding:3px 10px;background:var(--raised);border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:500;color:var(--muted)}
.matter-group{padding:4px 8px 8px}
.matter-group+.matter-group{border-top:1px solid var(--line)}
.group-label{display:flex;align-items:center;gap:8px;margin:8px 12px 4px;font-size:12px;font-weight:500;color:var(--muted)}
.group-label span{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--raised);font-size:11px}
.matter{display:grid;grid-template-columns:18px minmax(0,1fr) auto 24px;align-items:center;gap:12px;padding:9px 12px;border-radius:9px}
.matter:hover{background:var(--raised)}
.matter div{display:grid;min-width:0}
.matter strong{overflow:hidden;font-size:14px;font-weight:600;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.matter div span{overflow:hidden;font-size:12.5px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.matter-icon{color:var(--ink)}
.watching .matter-icon{color:var(--olive)}
.agreed .matter-icon{color:var(--soft)}
.agreed strong{color:var(--muted)}
.matter-when{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.late{background:color-mix(in srgb,var(--danger-soft) 70%,transparent)}
.late:hover{background:var(--danger-soft)}
.late .matter-icon,.late .matter-when{color:var(--danger)}
.late .matter-when{font-weight:500}
.avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sage);color:var(--olive-ink);font-size:11px;font-weight:600}
.avatar.you{background:var(--ink);color:var(--surface);font-size:10px}
.avatar.quartio{background:var(--surface);box-shadow:inset 0 0 0 1px var(--control)}
.panel-ask{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 16px 16px;padding:8px 8px 8px 14px;background:var(--field);border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:var(--muted)}
.panel-ask .demo-send{width:26px;height:26px}
.matter-group:last-of-type{margin-bottom:12px}
@media(max-width:560px){
  .matter{grid-template-columns:18px minmax(0,1fr) 24px;row-gap:2px;padding:9px 8px}
  .matter-when{grid-column:2;grid-row:2}
  .avatar{grid-column:3;grid-row:1/span 2}
  .matter strong,.matter div span{white-space:normal}
}

/* An answer with its footnote, and the source it points to. */
.mini-question{justify-self:end;width:fit-content;margin:0 0 12px auto;padding:9px 13px;background:var(--sage);border:1px solid var(--control);border-radius:10px 10px 2px 10px;color:var(--olive-ink)}
.mini-reply{margin:0 0 14px;font-size:15px;color:var(--ink)}
.cite{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:11px;font-weight:600;vertical-align:1px}
.source-card{padding:14px 16px;background:var(--field);border:1px solid var(--line);border-left:3px solid var(--olive);border-radius:10px}
.source-head{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--muted)}
.source-head .cite{background:var(--olive)}
.source-card p{margin:8px 0 0;font-size:14px}
.source-card mark{padding:1px 3px;background:var(--sage);border-radius:3px;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* A draft reply, ready to send by the person. */
.draft{padding:14px 16px 12px;background:var(--field);border:1px solid var(--line);border-radius:10px}
.draft-line{padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.draft-line strong{font-weight:600;color:var(--ink)}
.draft p{margin:0 0 12px;font-size:14px;color:var(--ink-hover)}
.attachment{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--raised);border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink)}
.draft-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.draft-state{padding:3px 10px;border-radius:999px;background:var(--ink);font-size:12px;font-weight:500;color:var(--surface);white-space:nowrap}
.draft-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--olive-ink)}
.draft-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--olive)}

/* How Quartio works: one matter across a week. A timeline of moments; each
   moment's product fragment sits under it, or, with scripts on a wide screen,
   in one sticky stage that follows the moment being read. */
.story{margin:56px 0 0}
.story-steps{position:relative;margin:0;padding:0;list-style:none}
.story-steps::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:1px;background:var(--control)}
.story-step{position:relative;padding:0 0 32px 40px}
.story-step:last-child{padding-bottom:0}
.story-step::before{content:"";position:absolute;left:2px;top:5px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:2px solid var(--control);transition:background .3s var(--ease),border-color .3s var(--ease)}
.story-step.active::before{background:var(--olive);border-color:var(--olive)}
.story-pick{display:grid;grid-template-columns:minmax(0,1fr);justify-content:start;justify-items:start;gap:3px;width:100%;min-height:0;margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.story-pick:hover{background:none}
.story-time{font-size:12.5px;font-weight:600;color:var(--olive-ink);font-variant-numeric:tabular-nums}
.story-pick strong{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);transition:color .3s var(--ease)}
.story-text{max-width:26rem;font-size:15px;color:var(--muted)}
.story-artifact{max-width:34rem;margin-top:16px;padding:18px;background:var(--sage);border-radius:12px;font-size:14px;line-height:1.45}
.story-stage{display:none}
@media(min-width:960px){
  .story.is-live{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .story.is-live .story-artifact{display:none}
  .story.is-live .story-step{display:flex;align-items:center;min-height:min(26vh,230px);padding-bottom:0}
  .story.is-live .story-step::before{top:auto}
  .story.is-live .story-step:not(.active) .story-pick strong{color:var(--muted)}
  .story.is-live .story-step:not(.active) .story-text{color:var(--muted)}
  .story.is-live .story-step.active .story-text{color:var(--ink-hover)}
  .story.is-live .story-stage{position:sticky;top:calc(50vh - 210px);display:grid;place-items:center;min-height:420px;padding:44px;background:var(--sage);border-radius:16px}
  .story-stage>*{width:100%;max-width:30rem}
}
@media(prefers-reduced-motion:no-preference){.story-stage>*{animation:rise .45s var(--ease) both}}

/* The moments' product fragments. */
.story-mail,.story-facts,.approval,.story-later .demo-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 48px -30px color-mix(in srgb,var(--ink) 30%,transparent)}
.story-mail{padding:16px 18px}
.story-mail-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.story-mail-head strong{color:var(--ink)}
.story-mail-head span{margin-left:auto}
.story-subject{margin:10px 0 4px;font-weight:600;color:var(--ink)}
.story-mail p{margin:0;color:var(--ink-hover)}
.story-mail p.story-subject{margin:10px 0 4px}
.story-facts{display:grid;padding:6px 0}
.fact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 18px}
.fact+.fact{border-top:1px solid var(--line)}
.fact>span:first-child{font-size:12.5px;color:var(--muted)}
.fact strong{grid-column:1;font-size:15px;color:var(--ink)}
.fact-source{display:inline-flex;grid-column:2;grid-row:1/span 2;align-self:center;align-items:center;gap:5px;padding:3px 9px;background:var(--raised);border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}
.story-stage .draft,.story-artifact .draft{box-shadow:0 24px 48px -30px color-mix(in srgb,var(--ink) 30%,transparent)}
.approval{padding:16px 18px}
.approval-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.approval-head strong{color:var(--ink)}
.approval-state{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--sage);border-radius:999px;font-size:12px;font-weight:500;color:var(--olive-ink)}
.approval p{margin:12px 0;color:var(--ink-hover)}
.approval-actions{display:flex;justify-content:flex-end;gap:8px}
.approval-actions .button{cursor:default}
.story-later .demo-note{margin:0 0 12px}
.story-later .demo-card{margin:0;padding:14px 16px}
.never{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:48px 0 0;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.never p{display:inline-flex;align-items:center;gap:9px;margin:0;font-weight:600;color:var(--ink)}
.never p .icon{color:var(--olive-ink)}
.never ul{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none}
.never li{padding:4px 12px;background:var(--raised);border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--ink)}

/* Company memory, part one: the flow graph, straight on the page with no
   frame. Tool icons on the left (a message slides into its tool), Quartio in
   the middle, one card on the right where each message lands. Lines and the moving message are drawn by
   static/home.js into the SVG behind. Phones read top to bottom. */
.flow{margin:56px 0 0}
.flow-stage{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(40px,.5fr) auto minmax(40px,.5fr) minmax(0,1.35fr);grid-template-rows:auto 1fr;row-gap:28px;align-items:center;padding:0}
.flow-sources{grid-column:1;grid-row:2}
.flow-hub{grid-column:3;grid-row:2}
.flow-outputs{grid-column:5;grid-row:2}
/* Both column labels share the top line with the pause control. */
.flow-label-sources{grid-column:1;grid-row:1;justify-self:end;margin-right:56px}
.flow-label-outputs{grid-column:5;grid-row:1}
/* The example's clock: time passes while nobody clicks. */
.flow-live{grid-column:3;grid-row:1;justify-self:center;display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 12px;background:var(--field);border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:500;color:var(--olive-ink);white-space:nowrap}
.flow-live-dot{width:7px;height:7px;border-radius:50%;background:var(--olive)}
.flow-clock{padding-left:8px;border-left:1px solid var(--line);color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.flow-items time{margin-left:auto;padding-left:12px;font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow-lines path{fill:none;stroke:var(--control);stroke-width:1.5;transition:stroke .3s var(--ease)}
.flow-lines path.lit{stroke:var(--olive)}
.flow-lines .pulse{fill:var(--olive)}
.flow-sources,.flow-hub,.flow-outputs,.flow-label,.flow-pause{position:relative;z-index:1}
.flow-label{align-self:center;margin:0;min-height:30px;display:flex;align-items:center;font-size:12.5px;font-weight:500;color:var(--muted)}

.flow-sources ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.flow-tool{display:flex;align-items:center;justify-content:flex-end;gap:12px;width:100%;min-height:44px;margin:0;padding:0;background:none;border:0;border-radius:12px;color:var(--ink);font:inherit;text-align:right;cursor:pointer}
.flow-tool:hover{background:none}
.flow-tool-text{display:grid;justify-items:end;min-width:0;flex:1}
.flow-tool-name{font-size:14px;font-weight:500;color:var(--ink-hover);transition:opacity .2s var(--ease)}
.flow-tool-message{display:none;max-width:100%;padding:7px 11px;background:var(--ink);border-radius:10px 10px 2px 10px;color:var(--surface);font-size:12.5px;line-height:1.35;text-align:left}
.flow-tool.active .flow-tool-name{display:none}
.flow-tool.active .flow-tool-message{display:block}
.flow-tool-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--field);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 14px -10px color-mix(in srgb,var(--ink) 40%,transparent);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.flow-tool-icon img{width:24px;height:24px;object-fit:contain}
.flow-tool:hover .flow-tool-icon{border-color:var(--olive)}
.flow-tool.active .flow-tool-icon{border-color:var(--olive);box-shadow:0 0 0 4px var(--sage)}

.flow-hub{display:grid;justify-items:center;gap:14px}
.flow-hub-core{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;width:136px;height:136px;background:var(--field);border:1px solid var(--line);border-radius:50%;
  box-shadow:0 0 0 12px color-mix(in srgb,var(--sage) 55%,transparent),0 24px 48px -24px color-mix(in srgb,var(--ink) 35%,transparent)}
.flow-hub-core img{width:40px;height:40px}
.flow-hub-core strong{font:20px/1 var(--serif);letter-spacing:-.6px;color:var(--ink)}
.flow-hub-core::after{content:"";position:absolute;inset:-12px;border:1.5px solid var(--olive);border-radius:50%;opacity:0}
.flow-hub-state{padding:4px 12px;background:var(--field);border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--muted);white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease)}
.flow-hub.busy .flow-hub-state{border-color:var(--olive);color:var(--olive-ink)}

.flow-card{overflow:hidden;background:var(--field);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 48px -32px color-mix(in srgb,var(--ink) 35%,transparent)}
.flow-group{padding:16px 20px 18px}
.flow-group+.flow-group{border-top:1px solid var(--line)}
.flow-group-head{display:flex;gap:12px;align-items:center}
.flow-group-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--sage);color:var(--olive-ink)}
.flow-group[data-group="1"] .flow-group-icon{background:var(--raised);box-shadow:inset 0 0 0 1px var(--control);color:var(--ink)}
.flow-group[data-group="2"] .flow-group-icon{background:var(--ink);color:var(--surface)}
.flow-group-head div{display:grid}
.flow-group-head strong{font-size:14.5px;font-weight:600;color:var(--ink)}
.flow-group-head span{font-size:12.5px;color:var(--muted)}
.flow-items{display:grid;gap:2px;margin:10px 0 0;padding:0 0 0 32px;list-style:none}
.flow-items li{display:flex;align-items:center;gap:9px;margin-left:-8px;padding:4px 8px;border-radius:7px;font-size:13.5px;color:var(--ink-hover);transition:background .6s var(--ease),color .6s var(--ease)}
.flow-items li::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--olive)}
.flow-group[data-group="1"] .flow-items li::before{background:var(--soft)}
.flow-group[data-group="2"] .flow-items li::before{background:var(--ink)}
.flow-items li.fresh{background:var(--sage);color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .flow-items li.fresh{animation:flow-in .28s cubic-bezier(.05,.7,.1,1) both}
  .flow-items li.leaving{animation:flow-out .195s ease-in both}
  .flow-tool.active .flow-tool-message{animation:flow-slide .24s cubic-bezier(.05,.7,.1,1) both}
  .flow-hub.busy .flow-hub-core::after{animation:flow-ring 1s ease-out infinite}
  .flow-live-dot{animation:flow-live 2s ease-in-out infinite}
}
@keyframes flow-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes flow-out{to{opacity:0;transform:translateY(4px)}}
@keyframes flow-slide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes flow-live{50%{opacity:.35}}
@keyframes flow-ring{from{opacity:.55;transform:scale(.92)}to{opacity:0;transform:scale(1.18)}}

.flow-pause{position:absolute;top:0;right:0;z-index:3;display:inline-flex;gap:6px;width:auto;min-height:30px;margin:0;padding:4px 12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--muted);font:500 12.5px/1 var(--sans)}
.flow-pause:hover{background:var(--hover);color:var(--ink)}
.flow-pause .when-paused,.flow-pause[aria-pressed=true] .when-playing{display:none}
.flow-pause[aria-pressed=true] .when-paused{display:inline}
.flow figcaption{margin-top:12px;font-size:12.5px;color:var(--muted)}
.flow-now{display:none}
@media(max-width:960px){
  .flow-stage{grid-template-columns:1fr;grid-template-rows:none;gap:32px;padding:44px 0 0}
  .flow-sources,.flow-hub,.flow-outputs{grid-column:1;grid-row:auto}
  .flow-label-sources{grid-row:auto;justify-self:center;margin:0 0 -18px}
  .flow-label-outputs{display:none}
  .flow-live{grid-column:1;grid-row:auto;order:-1;margin-bottom:-12px}
  .flow-sources ul{grid-template-columns:repeat(6,44px);justify-content:center;gap:8px}
  .flow-tool{justify-content:center}
  .flow-tool-text{display:none}
  .flow-now{display:block;min-height:2.6em;margin:14px 0 0;font-size:13px;line-height:1.3;color:var(--olive-ink);text-align:center}
  .flow-hub-core{width:116px;height:116px}
  .flow-items li:nth-child(n+3){display:none}
}

/* Company memory, part two: one matter's history. */
.memory-detail{margin-top:72px}
.memory-detail h3{margin:0;font:600 clamp(24px,2.6vw,32px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.timeline-now{display:flex;gap:8px;align-items:flex-start;margin:-6px 0 16px;padding:10px 12px;background:var(--sage);border-radius:9px;font-size:14px;font-weight:500;color:var(--olive-ink)}
.timeline-now .icon{margin-top:2px}
.when{display:inline-flex;align-items:center;gap:6px}
.when img{width:14px;height:14px;object-fit:contain}
.timeline .demo-link{display:block;margin-top:4px;font-size:12.5px}
.timeline .source-quote{margin-top:8px}

/* Company memory: text beside a matter's history. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.memory-note{display:flex;gap:8px;align-items:flex-start;max-width:34rem;margin:22px 0 0;font-size:14px;color:var(--olive-ink)}
.memory-note .icon{margin-top:3px}
.timeline-card{margin:0;padding:22px 24px 20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 30px 60px -34px color-mix(in srgb,var(--ink) 24%,transparent)}
.timeline-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;font-size:14px;font-weight:600;color:var(--ink)}
.tag{padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:500;color:var(--muted)}
.timeline{margin:0;padding:0;list-style:none}
.timeline li{position:relative;margin-left:5px;padding:0 0 18px 24px;border-left:1px solid var(--control)}
.timeline li:last-child{padding-bottom:4px}
.timeline li::before{content:"";position:absolute;left:-6px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--control);box-sizing:border-box}
.timeline .current::before{background:var(--olive);border-color:var(--olive)}
.when{font-size:12.5px;color:var(--muted)}
.timeline p{margin:2px 0 0;font-size:15px;color:var(--ink)}
.timeline .replaced p{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--soft)}
.state{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:var(--raised);font-size:12px;font-weight:500;color:var(--muted)}
.current .state{background:var(--sage);color:var(--olive-ink)}
.timeline-owner{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px}
@media(max-width:960px){.split{grid-template-columns:1fr;gap:40px}}

/* Integrations: the search beside the heading, then the logos. */
.tools-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:48px;align-items:end}
.tool-search{margin:0;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.tool-search label{margin:0}
.tool-field{position:relative;margin-top:8px}
.tool-field .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tool-field input{margin:0;padding-left:40px}
.tool-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tool-results:not(:empty){margin-top:12px}
.tool-result{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;padding:9px 10px;background:var(--field);border:1px solid var(--line);border-radius:9px}
.tool-logo{width:28px;height:28px;border-radius:7px;object-fit:contain}
.tool-monogram{display:grid;place-items:center;background:var(--raised);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--olive-ink)}
svg.tool-logo{box-sizing:border-box;padding:4px;background:var(--sage);color:var(--olive-ink)}
.tool-name{font-size:14.5px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.tool-badge{padding:2px 9px;border-radius:999px;background:var(--sage);font-size:12px;font-weight:500;color:var(--olive-ink);white-space:nowrap}
.tool-fallback{grid-template-columns:28px 1fr;align-items:start;background:var(--raised)}
.tool-fallback svg.tool-logo{background:var(--ink);color:var(--surface)}
.tool-fallback div{display:grid;gap:3px}
.tool-fallback strong{font-size:15px;color:var(--ink)}
.tool-fallback p{margin:0;font-size:13.5px}
.tool-fallback a{font-size:13.5px;font-weight:500}
.logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:48px 0 0;padding:0;list-style:none}
.logo-grid li{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;color:var(--ink)}
.logo-grid img{width:30px;height:30px;flex:none;object-fit:contain}
.logo-grid .more{display:grid;gap:0;align-content:center;background:var(--ink);border-color:var(--ink);color:var(--surface)}
.logo-grid .more strong{font-size:17px;letter-spacing:-.01em}
.logo-grid .more span{font-size:12.5px;font-weight:400;color:color-mix(in srgb,var(--surface) 75%,transparent)}
.tools-always{display:flex;align-items:center;gap:9px;margin:20px 0 0;font-size:14px}
@media(max-width:960px){.tools-head{grid-template-columns:1fr;gap:28px}.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Security: one labelled flow across a single boundary, the full width of the
   section. Tools come in from the left; the company's server is the only
   frame (olive line, faint fill, rows instead of cards); to the right a solid
   labelled line says what leaves for each outside party and a dashed one says
   passwords never do. No padlocks or shields; the words carry the meaning. */
.boundary{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,1.15fr) minmax(0,1.55fr);align-items:center;margin:56px 0 0}
.b-tools{display:grid;gap:12px}
.b-tools ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.b-tools li{display:flex;align-items:center}
.b-tools li span{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--field);border:1px solid var(--line);border-radius:11px}
.b-tools li::after{content:"";flex:1;height:1px;background:var(--control)}
.b-tools img{width:20px;height:20px;object-fit:contain}
.b-tools p{max-width:10rem;margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.b-server{position:relative;padding:22px 24px 10px;background:color-mix(in srgb,var(--sage) 28%,var(--paper));border:1.5px solid var(--olive);border-radius:20px}
.b-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.b-head strong{font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.b-head span{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;background:var(--field);border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:500;color:var(--olive-ink)}
.b-head span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--olive)}
.b-server ul{margin:0;padding:0;list-style:none}
.b-server li{display:grid;grid-template-columns:24px 1fr;column-gap:10px;padding:13px 0;border-top:1px solid color-mix(in srgb,var(--olive) 22%,transparent)}
.b-server li:first-child{border-top:0}
.b-server li .icon{grid-row:span 2;margin-top:2px;color:var(--olive-ink)}
.b-server li strong{font-size:14.5px;color:var(--ink)}
.b-server li span{font-size:13px;color:var(--muted)}
.b-out{display:grid;gap:44px;margin:0;padding:0;list-style:none}
.b-out li{display:grid;grid-template-columns:minmax(0,1fr) 252px;align-items:center}
.b-wires{display:grid;gap:14px}
.b-wires span{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;white-space:nowrap}
.b-wires span::before{content:"";position:absolute;left:0;right:0;top:50%;z-index:0}
.b-yes::before{border-top:1.5px solid var(--olive)}
.b-no::before{border-top:1.5px dashed color-mix(in srgb,var(--danger) 55%,transparent)}
.b-yes{color:var(--olive-ink);font-weight:500}
.b-no{color:var(--danger)}
.b-wires em{position:relative;display:inline-flex;align-items:center;gap:5px;padding:2px 10px;background:var(--paper);border-radius:999px;font-style:normal}
.b-yes em{border:1px solid color-mix(in srgb,var(--olive) 45%,transparent)}
.b-party{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;background:var(--field);border:1px solid var(--line);border-radius:12px}
.b-party>div{display:grid;gap:2px}
.b-marks{display:flex;gap:6px;flex:none}
.b-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.b-mark img{width:22px;height:22px;object-fit:contain}
.b-party strong{font-size:14.5px;color:var(--ink)}
.b-party>div span{font-size:12.5px;color:var(--muted)}
@media(max-width:960px){
  .boundary{grid-template-columns:1fr;gap:0;justify-items:stretch}
  .b-tools{justify-items:center;gap:8px}
  .b-tools ul{display:flex;gap:8px}
  .b-tools li::after{display:none}
  .b-tools p{max-width:none;text-align:center}
  .b-tools::after{content:"";justify-self:center;width:1px;height:26px;background:var(--control)}
  .b-out{gap:0}
  .b-out li{grid-template-columns:1fr;justify-items:center}
  .b-wires{grid-template-columns:1fr 1fr;gap:10px;width:100%;padding:14px 0}
  .b-wires span{flex-direction:column;justify-content:flex-start;white-space:normal;text-align:center;padding:30px 4px 0}
  .b-wires span::before{left:50%;right:auto;top:0;bottom:auto;height:24px;border-top:0}
  .b-yes::before{border-left:1.5px solid var(--olive)}
  .b-no::before{border-left:1.5px dashed color-mix(in srgb,var(--danger) 55%,transparent)}
  .b-party{justify-self:stretch;justify-content:center}
  .b-out li+li{margin-top:12px}
}
.trust-answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:72px 0 0}
.trust-answers div{padding-top:18px;border-top:1px solid var(--ink)}
.trust-answers dt{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.trust-answers dd{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.trust-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:36px 0 0;font-size:14px}
.trust-links a{font-weight:500}
@media(max-width:960px){.trust-answers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.trust-answers{grid-template-columns:1fr;gap:24px;margin-top:48px}}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:48px 0 0;padding:0;list-style:none}
.steps li{display:grid;gap:16px;align-content:start;padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:960px){.steps{grid-template-columns:1fr;gap:24px}.steps li{grid-template-columns:auto 1fr}}

/* Who it is for: a scene, not a list (docs/audit-2026-10-05.md). The owner
   at the top; dashed lines down to three pieces of a sample week, set a
   little askew; under each, what it costs. Then the bridge with one saved
   fact, and the fit and misfit as type on the paper, without boxes. */
.fw-scene{position:relative;margin:64px 0 0;padding-top:108px}
.fw-scene::before{content:"";position:absolute;top:44px;left:calc(100% / 6);right:calc(100% / 6);height:64px;border:1.5px dashed var(--control);border-bottom:0;border-radius:16px 16px 0 0}
.fw-you{position:absolute;top:0;left:50%;z-index:1;display:grid;place-items:center;width:88px;height:88px;margin-left:-44px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 10px var(--paper),0 0 0 11px var(--control);font:600 28px/1 var(--sans);letter-spacing:-.02em;color:var(--surface)}
.fw-exhibits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.fw-exhibit{position:relative;display:flex;flex-direction:column;gap:22px}
.fw-exhibit:nth-child(2)::before{content:"";position:absolute;top:-20px;left:50%;height:20px;border-left:1.5px dashed var(--control)}
.fw-frag{box-sizing:border-box;height:172px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 48px -30px color-mix(in srgb,var(--ink) 30%,transparent);font-size:14px;line-height:1.45}
.fw-exhibit:nth-child(1) .fw-frag{transform:rotate(-1.4deg)}
.fw-exhibit:nth-child(2) .fw-frag{transform:rotate(.9deg) translateY(10px)}
.fw-exhibit:nth-child(3) .fw-frag{transform:rotate(-.7deg)}
.fw-frag p{margin:0;color:var(--ink-hover)}
.fw-frag-head{display:flex;align-items:center;gap:8px;margin:0 0 10px!important;font-size:13px;color:var(--muted)!important}
.fw-frag-head img,.fw-frag-head svg{flex:none}
.fw-frag-head strong{color:var(--ink)}
.fw-frag-head time{margin-left:auto;font-variant-numeric:tabular-nums}
.fw-subject{margin-bottom:4px!important;font-weight:600;color:var(--ink)!important}
.fw-bubble{display:inline-block;padding:10px 12px;background:var(--raised);border:1px solid var(--line);border-radius:10px 10px 10px 2px}
.fw-status{display:flex;align-items:center;gap:6px;margin-top:10px!important;font-size:12.5px;color:var(--muted)!important}
.fw-files ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.fw-files li{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--raised);border-radius:7px;font-size:13px;color:var(--ink-hover)}
.fw-files li svg{flex:none;color:var(--muted)}
.fw-cost{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;margin:0;padding:0 4px;font-size:16px;line-height:1.5;color:var(--ink)}
.fw-cost svg{margin-top:2px;color:var(--danger)}
.fw-scene figcaption{margin-top:20px;font-size:12.5px;color:var(--muted)}
.fw-bridge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:40px;padding:22px 26px;background:var(--sage);border-radius:14px}
.fw-bridge p{display:flex;align-items:center;gap:12px;margin:0;font-size:18px;color:var(--ink)}
.fw-bridge p svg{flex:none;color:var(--olive-ink)}
.fw-saved{flex-wrap:wrap;gap:6px 10px!important;padding:9px 14px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13.5px!important}
.fw-saved span{color:var(--muted)}
.fw-saved strong{font-weight:600}
.fw-source{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;background:var(--raised);border-radius:999px;font-size:12.5px}
.fw-fit{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px 56px;margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.fw-fit h3{margin:0 0 18px;font:600 17px/1.35 var(--sans);color:var(--ink)}
.fw-fit ul{display:grid;gap:16px 40px;margin:0;padding:0;list-style:none}
.fw-yes{grid-template-columns:repeat(2,minmax(0,1fr))}
.fw-fit li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.5;color:var(--ink-hover)}
.fw-fit li svg{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:50%}
.fw-yes svg{background:var(--sage);color:var(--olive-ink)}
.fw-no li{color:var(--muted)}
.fw-no svg{background:var(--raised);color:var(--muted)}
.fw-fit>div+div{padding-left:40px;border-left:1px solid var(--line)}
@media(max-width:960px){
  .fw-scene{padding-top:0}
  .fw-scene::before,.fw-you,.fw-exhibit:nth-child(2)::before{display:none}
  .fw-exhibits{grid-template-columns:minmax(0,1fr);gap:36px}
  .fw-exhibit .fw-frag{height:auto;transform:none!important}
  .fw-fit{grid-template-columns:minmax(0,1fr)}
  .fw-fit>div+div{padding:28px 0 0;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:560px){.fw-yes{grid-template-columns:minmax(0,1fr)}.fw-bridge{padding:20px}.fw-bridge p{font-size:16px}.fw-saved{border-radius:12px}}

/* "O nas": the founders with their portraits, roles and the direct address. */
body.site main>.about-hero{padding:72px 0 0}
.about-hero h1{max-width:46rem;margin:0;font:600 clamp(38px,4.8vw,60px)/1.05 var(--sans);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
body.site main>.about-people{padding:56px 0 88px}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.people>li{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.people>li>div{flex:1}
.people img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;background:var(--ink)}
.people li>div{padding:22px 26px 26px}
.people h2{margin:0;font:600 22px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.person-role{margin:4px 0 8px;font-size:14.5px;font-weight:500;color:var(--olive-ink)}
.people li>div>p:not(.person-role){margin:0;font-size:16px;line-height:1.55}
.people li>div{display:flex;flex-direction:column}
.person-bio{display:grid;gap:8px;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line);list-style:none}
.person-bio li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--ink-hover)}
.person-bio li::before{content:"";position:absolute;top:.62em;left:2px;width:6px;height:6px;border-radius:50%;background:var(--olive)}
.person-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;padding-top:20px}
.person-links a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.person-links a:hover{text-decoration:underline;text-underline-offset:4px}
.person-links .person-mail{margin-right:4px}
.person-links .person-profile{justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;color:var(--ink);transition:background-color .15s,border-color .15s}
.person-links .person-profile:hover{background:var(--raised);border-color:var(--control)}
.person-mail svg{color:var(--olive-ink)}
.team-write{margin:32px 0 0;font-size:16px;color:var(--muted)}
.team-write a{font-weight:500;color:var(--ink)}
@media(max-width:720px){.people{grid-template-columns:minmax(0,1fr)}}

/* Questions before the first meeting: one open at a time is enough. */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:32px 72px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:18px 0;font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary svg{flex:none;color:var(--olive-ink);transition:transform .2s var(--ease)}
.faq-list details[open] summary svg{transform:rotate(45deg)}
.faq-list details p{max-width:40rem;margin:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--ink-hover)}
@media(max-width:960px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* Comparison pages (docs/compare.md): the verdict with the invitation, two
   overview cards, a table with Quartio's column tinted, three short stories
   set as an editorial list, when to choose which, the questions, then the
   other comparisons and the dated sources. */
.compare{padding-bottom:24px}
body.site main>.cmp-hero{padding:72px 0 0}
.cmp-hero h1{max-width:56rem;margin:0;font:600 clamp(38px,4.8vw,60px)/1.05 var(--sans);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.cmp-hero h1 span{font-weight:400}
.cmp-hero .hero-lead{max-width:46rem}
.cmp-updated{margin:18px 0 0;font-size:13px;color:var(--muted)}
body.site main>.cmp-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:56px 0 0}
.cmp-card{padding:26px 28px;border-radius:14px}
.cmp-card p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-hover)}
.cmp-card .cmp-label{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:18px;font-weight:600;color:var(--ink)}
.cmp-mark{display:inline-flex;flex:none}
.cmp-mark img,.cmp-mono{box-sizing:border-box;display:grid;place-items:center;width:40px;height:40px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;object-fit:contain}
.cmp-mark img+img{margin-left:-8px}
.cmp-us .cmp-mark img{background:var(--paper)}
.cmp-mono{font:600 17px/1 var(--sans);color:var(--ink)}
.cmp-head{display:inline-flex;align-items:center;gap:10px}
.cmp-head .cmp-mark img,.cmp-head .cmp-mono{width:30px;height:30px;padding:5px;border-radius:8px;font-size:14px}
.cmp-head .cmp-mark img+img{margin-left:-6px}
.cmp-us{background:var(--sage)}
.cmp-them{background:var(--surface);border:1px solid var(--line)}
body.site main>.cmp-diff{padding:72px 0 0}
.compare h2{margin:0 0 22px;font:600 clamp(24px,2.6vw,32px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.cmp-diff table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.cmp-diff thead td{width:22%}
.cmp-diff thead th{width:39%;padding:12px 20px;text-align:left;font-size:14px;font-weight:600;color:var(--ink)}
.cmp-diff thead th:nth-child(2){color:var(--olive-ink)}
.cmp-diff tbody th{padding:18px 20px 18px 0;text-align:left;vertical-align:top;font-weight:600;color:var(--ink)}
.cmp-diff td{padding:18px 20px;vertical-align:top;color:var(--ink-hover)}
.cmp-diff tbody tr{border-top:1px solid var(--line)}
.cmp-diff td:nth-child(2),.cmp-diff thead th:nth-child(2){background:color-mix(in srgb,var(--sage) 60%,transparent)}
.cmp-diff thead th:nth-child(2){border-radius:12px 12px 0 0}
.cmp-diff tbody tr:last-child td:nth-child(2){border-radius:0 0 12px 12px}
body.site main>.cmp-story{display:grid;gap:0;padding:80px 0 0}
.cmp-story article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px 64px;padding:32px 0;border-top:1px solid var(--line)}
.cmp-story article:last-child{border-bottom:1px solid var(--line)}
.cmp-story h2{margin:0;font-size:clamp(22px,2.2vw,28px)}
.cmp-story p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-hover)}
body.site main>.cmp-choose{padding:80px 0 0}
.cmp-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cmp-when>div{padding:26px 28px;border-radius:14px}
.cmp-when h3{margin:0 0 16px;font:600 18px/1.3 var(--sans);color:var(--ink)}
.cmp-when ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.cmp-when li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.5;color:var(--ink-hover)}
.cmp-when li svg{margin-top:4px;color:var(--olive-ink)}
.cmp-when .cmp-them li svg{color:var(--muted)}
body.site main>.cmp-faq{padding:80px 0 0}
body.site main>.cmp-sources{padding:72px 0 48px}
.cmp-sources h2{font-size:18px;letter-spacing:-.01em;margin-bottom:14px}
.cmp-other{display:flex;flex-wrap:wrap;gap:8px}
.cmp-other a{padding:6px 14px;border:1px solid var(--control);border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-hover);text-decoration:none}
.cmp-other a:hover{background:var(--hover)}
.cmp-other a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.cmp-sources>p{margin:32px 0 12px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.cmp-sources h3{margin:0 0 6px;font:600 14px/1.4 var(--sans);color:var(--ink)}
.cmp-sources ul{margin:0;padding-left:18px;font-size:14px}
@media(max-width:960px){
  body.site main>.cmp-overview,.cmp-when{grid-template-columns:minmax(0,1fr)}
  .cmp-story article{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .cmp-diff table{table-layout:auto}
  .cmp-diff thead{display:none}
  .cmp-diff tbody tr{display:grid;gap:8px;padding:16px 0}
  .cmp-diff tbody th,.cmp-diff td{padding:0}
  .cmp-diff td{padding:12px 14px;border-radius:10px;background:var(--surface)}
  .cmp-diff td:nth-child(2){border-radius:10px}
  .cmp-diff td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--olive-ink)}
  .cmp-card,.cmp-when>div{padding:22px 20px}
}

/* The Studio's chaos-to-order engraving closes the product page, in the
   app's ink and paper with DM Sans. Contact is part of this one invitation. */
.closing-footer{margin:0;padding:72px 0 0;overflow:hidden;background:var(--ink);color:var(--paper)}
.closing-footer a{color:inherit;text-decoration:none}
.closing-footer a:hover{text-decoration:underline;text-underline-offset:5px}
.closing-footer a:focus-visible{outline-color:var(--sage);outline-offset:5px}
.closing-footer .closing-brand{display:inline-flex;gap:12px;margin:0;font-size:32px;letter-spacing:-.8px;color:var(--paper)}
.closing-brand .dot{color:var(--sage)}
.closing-symbol{width:34px;height:34px;flex:none;background:currentColor;mask:url('/assets/quartio-symbol.svg') center/contain no-repeat}
.closing-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px 170px 200px;gap:40px;margin-top:46px}
.closing-invitation h2{max-width:36rem;margin:0;font:600 clamp(36px,4vw,54px)/1.08 var(--sans);letter-spacing:-.035em;color:var(--paper);text-wrap:balance}
.closing-invitation p{max-width:26rem;margin:20px 0 0;font-size:16px;line-height:1.6;color:var(--sage)}
/* Up to two actions: the page's own, then a quieter second one. */
.closing-actions{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:26px}
.closing-action{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:44px;padding:0 0 8px;border-bottom:1px solid var(--soft);font-size:15px;font-weight:500}
.closing-action.quiet{border-bottom-color:color-mix(in srgb,var(--paper) 16%,transparent);color:var(--sage)}
.closing-action .icon{transform:rotate(-45deg);transition:transform .2s var(--ease)}
.closing-action:hover .icon{transform:rotate(-45deg) translateX(3px)}
.closing-nav h3,.closing-contact h3{margin:4px 0 14px;font:500 13px/1.5 var(--sans);color:var(--sage)}
.closing-nav a,.closing-contact>a{display:flex;align-items:center;width:fit-content;min-height:44px;font-size:14px}
.closing-contact .closing-sign-in{gap:12px;margin-top:22px}
.closing-contact .mark{flex:none;margin-right:8px}
.closing-artwork{position:relative;aspect-ratio:2.1;overflow:hidden;margin-top:32px;pointer-events:none}
.closing-artwork img{position:absolute;inset:auto 0 0;display:block;width:100%;height:auto;filter:grayscale(1);opacity:.82}
.closing-colophon{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding:18px 0 28px;border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent);font-size:12px}
.closing-colophon p{margin:0;color:var(--sage);font-size:12px}
.closing-colophon .footer-links{gap:0 20px;color:var(--sage)}
.closing-colophon a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:960px){
  .closing-footer{padding-top:56px}
  .closing-grid{grid-template-columns:1fr 1fr;gap:36px 28px;margin-top:36px}
  .closing-invitation{grid-column:1/-1}
  .closing-invitation h2{max-width:38rem}
  .closing-invitation p{max-width:32rem}
  .closing-artwork{margin-top:24px}
}
@media(max-width:560px){
  .closing-footer{padding-top:40px}
  .closing-footer .closing-brand{font-size:28px;gap:10px}
  .closing-symbol{width:28px;height:28px}
  .closing-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px 16px;margin-top:32px}
  .closing-invitation h2{font-size:clamp(34px,9.5vw,46px)}
  .closing-invitation p{margin-top:18px;font-size:15px}
  .closing-actions{margin-top:20px}
  .closing-nav a,.closing-contact>a{font-size:13px;overflow-wrap:anywhere}
  .closing-artwork{width:calc(100% - 16px);margin-top:20px}
  .closing-colophon{align-items:flex-start;gap:12px;padding:18px 0 24px}
  .closing-colophon p{max-width:22rem;line-height:1.7}
}

/* The legal links in the closing footer's colophon. */
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}

/* Footer of the card pages: language and legal links on one line. */
footer.links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px}

/* Sign-in: the company address with the fixed part of the link before it. */
.address{display:flex;align-items:stretch;margin-top:6px;background:var(--field);border:1px solid var(--soft);border-radius:7px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.address:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px var(--sage)}
.address:has(input[aria-invalid]){border-color:var(--danger)}
.address-prefix{display:flex;align-items:center;padding-left:12px;font-size:15px;color:var(--muted);white-space:nowrap;user-select:none}
.address input{min-width:0;margin:0;padding-left:1px;background:transparent;border:0;border-radius:7px}
.address input:focus{box-shadow:none}

/* Invitation code: capitals, spaced like the printed code. */
.code-field{font-size:17px;letter-spacing:.12em;text-transform:uppercase}

/* Legal documents: reviewed text in both languages; html[lang] shows one. */
html[lang=pl] [data-language=en],html[lang=en] [data-language=pl]{display:none}
.legal{padding:64px 0 96px}
.legal-shell{width:min(100% - 32px,46rem);margin-inline:auto}
.legal-kicker{margin:0 0 10px;font-size:13.5px;color:var(--olive-ink)}
.legal h1{margin:0 0 28px;font:600 clamp(32px,4.4vw,46px)/1.08 var(--sans);letter-spacing:-.03em}
.legal-copy h2{margin:40px 0 10px;font:600 18px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.legal-copy p,.legal-copy li{color:var(--ink-hover);font-size:15.5px;line-height:1.7}
.legal-copy p{margin:0 0 14px}
.legal-copy ul,.legal-copy ol{margin:0 0 14px;padding-left:22px}
.legal-copy li+li{margin-top:6px}
.legal-copy .legal-intro{font-size:17px;color:var(--muted)}
.legal-copy code{padding:.08em .3em;background:var(--raised);border-radius:5px;font-size:.9em}