@charset "UTF-8";
/* TopoDraugs — business page. Depends on styles.css tokens; adds nothing global. */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hero */
.biz-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding:52px 0 78px}
.biz-hero h1{margin:0;font-size:clamp(44px,4.6vw,66px);font-weight:690;line-height:1.02;letter-spacing:-.055em}
.biz-hero h1 em{font-family:var(--serif);font-weight:500;font-style:italic;color:var(--olive-deep)}
.biz-hero .hero-lead{max-width:600px}
.biz-hero-note{border-left:3px solid var(--olive);background:var(--paper);padding:22px 24px;box-shadow:var(--shadow)}
.biz-hero-note p:last-child{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.7}

/* sections */
.biz-section{padding:86px 0;border-top:1px solid var(--line)}
.biz-section.alt{background:var(--sage-soft);border-top:0}
.biz-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}
.biz-split.reverse .biz-copy{order:2}
.biz-copy h2{margin:16px 0 0;font-size:clamp(34px,3.4vw,50px);font-weight:690;line-height:1.04;letter-spacing:-.05em}
.biz-copy>p:not(.kicker):not(.biz-note){max-width:560px;margin:20px 0 0;color:var(--muted)}
.biz-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.biz-list li{border-bottom:1px solid var(--line);padding:13px 0;color:var(--muted);font-size:13px;line-height:1.65}
.biz-list b{color:var(--ink);font-weight:750}
.biz-note{margin:22px 0 0;padding:12px 14px;background:#fffdfa;border-left:2px solid var(--yellow);color:var(--muted);font-size:12px;line-height:1.65}
.wrap-note{max-width:720px}

/* interface mocks — always labelled */
.mock{position:relative;margin:0;background:var(--paper);padding:26px;box-shadow:var(--shadow)}
.biz-section.alt .mock{box-shadow:0 20px 60px #26301f14}
.mock-label{position:absolute;right:0;top:-11px;background:var(--ink);color:var(--paper);padding:4px 9px;font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.mock-body{display:block}
.mock-field{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border:1px solid #c3c9b8;padding:13px 15px}
.mock-field span{color:var(--muted);font-size:10px;font-weight:780;letter-spacing:.1em;text-transform:uppercase}
.mock-field b{font-family:var(--serif);font-size:19px;font-weight:500}
.mock-status{margin:11px 0 0;color:var(--olive-deep);font-size:11px}
.mock-note{margin:12px 0 0;color:var(--muted);font-size:10px}
.mock-facts{margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.mock-facts>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:11px 0}
.mock-facts dt{margin:0;color:var(--muted);font-size:12px}
.mock-facts dd{margin:0;font-size:13px;font-weight:700;text-align:right}
.mock-actions{display:flex;align-items:center;gap:16px;margin-top:20px}
.mock-btn{background:var(--ink);color:var(--paper);padding:11px 15px;font-size:11px;font-weight:780}
.mock-link{color:var(--muted);font-size:11px;text-decoration:underline}

/* tables: roles, notification matrix */
.roles,.matrix{width:100%;border-collapse:collapse;font-size:12px}
.roles th,.roles td,.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:center}
.roles thead th,.matrix thead th{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.roles tbody th,.matrix tbody th{text-align:left;font-weight:750;font-size:12px}
.roles td,.matrix td{color:var(--olive-deep);font-weight:800}
.matrix-mock{margin-top:42px}
.matrix tbody th{width:44%}

.biz-trio,.biz-quad{display:grid;gap:26px;margin-top:38px}
.biz-trio{grid-template-columns:repeat(3,1fr)}
.biz-quad{grid-template-columns:repeat(4,1fr);margin-top:42px}
.biz-trio>div,.biz-quad>div{border-top:2px solid var(--olive);padding-top:14px}
.biz-trio b,.biz-quad b{display:block;font-size:14px}
.biz-trio p,.biz-quad p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.65}

/* document / invoice rows */
.doc-row{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:13px 0}
.doc-row:last-child{border-bottom:0}
.doc-row p{margin:0}
.doc-row b{display:block;font-size:13px}
.doc-row small{color:var(--muted);font-size:10px}
.doc-links{color:var(--olive-deep);font-size:11px;font-weight:750}

/* chat */
.chat-mock{display:block}
.chat-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.chat-head b{display:block;font-family:var(--serif);font-size:18px;font-weight:500}
.chat-head span{color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.chat-line{margin-bottom:12px;max-width:86%}
.chat-line .who{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:5px}
.chat-line p{margin:0;padding:12px 14px;font-size:12px;line-height:1.6;background:var(--sage-soft)}
.chat-line.me{margin-left:auto}
.chat-line.me p{background:var(--ink);color:var(--paper)}
.chat-line.me .who{text-align:right}
.chat-line.handover{max-width:100%}
.chat-line.handover p{background:#fffdfa;border-left:2px solid var(--yellow);color:var(--muted)}

/* steps */
.biz-steps{padding:92px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;list-style:none;margin:40px 0 0;padding:0}
.steps li{border-top:1px solid var(--line);padding-top:16px}
.steps span{display:block;color:var(--olive);font-size:10px;font-weight:800;letter-spacing:.14em}
.steps b{display:block;margin-top:9px;font-size:17px}
.steps p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.65}

.biz-section+.faq{border-top:1px solid var(--line)}
.contact .hero-actions{margin-top:26px}

@media(max-width:1050px){
  .biz-hero{grid-template-columns:1fr;gap:34px;align-items:start}
  .biz-split{grid-template-columns:1fr;gap:40px}
  .biz-split.reverse .biz-copy{order:0}
  .biz-quad{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .biz-hero{padding:24px 0 56px}
  .biz-hero h1{font-size:40px}
  .biz-section,.biz-steps{padding:66px 0}
  .biz-copy h2{font-size:33px}
  .mock{padding:20px 16px}
  .biz-trio,.biz-quad,.steps{grid-template-columns:1fr;gap:22px}
  .roles,.matrix{font-size:11px}
  .roles th,.roles td,.matrix th,.matrix td{padding:9px 4px}
  .doc-row{grid-template-columns:34px 1fr auto;row-gap:6px}
  .doc-row .doc-links{grid-column:2/-1}
  .chat-line{max-width:94%}
}
.wordmark{display:inline-flex;align-items:center;gap:.4em;letter-spacing:-.045em}
.wm-mark{width:1.3em;height:1.3em;flex:none;border-radius:.34em;box-shadow:0 2px 6px #1d221933}