/* Remaining handoff layouts, adapted to the approved shared visual system. */
.button-outline {
  background:transparent;
  color:var(--forest);
  border-color:var(--line);
}

.button-outline:hover {
  background:#e6eadd;
}

.text-link.light {
  border-color:rgba(250,249,245,.4);
}

.motion-paused .flow-connector span {
  animation-play-state:paused;
}

.section-heading>div:last-child:not(:first-child) {
  width:380px;
  flex:none;
  font-size:17px;
  line-height:1.7;
}

.section-heading>div:last-child p {
  font-size:17px;
}

.workflow-feature {
  background:var(--soft);
  max-width:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:9%;
  padding-left:max(64px,calc((100vw - 1312px)/2));
  padding-right:max(64px,calc((100vw - 1312px)/2));
}

.feature-copy h2 {
  margin-bottom:30px;
}

.feature-copy p {
  max-width:450px;
  font-size:17px;
  margin-bottom:30px;
}

.feature-note {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:19px;
}

.workflow-preview {
  max-width:540px;
  width:100%;
  background:var(--ivory);
  border:1px solid #d7ddd1;
  box-shadow:0 20px 50px rgba(23,47,29,.055);
  padding:27px 29px 0;
  transition:transform .3s;
}

.workflow-preview:hover {
  transform:translateY(-6px);
}

.preview-top {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:1.15px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:27px;
}

.preview-top span:first-child {
  color:var(--forest);
}

.preview-row {
  display:flex;
  align-items:center;
  gap:19px;
}

.workflow-icon {
  width:44px;
  height:48px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  background:white;
  color:var(--forest);
}

.preview-row div {
  display:flex;
  flex-direction:column;
}

.preview-row small,
.approval-preview small {
  font-size:12px;
  letter-spacing:1.4px;
  color:var(--muted);
  margin-bottom:3px;
}

.preview-row strong,
.approval-preview strong {
  font-size:15px;
  font-weight:500;
}

.preview-row div>span {
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}

.flow-connector {
  height:48px;
  border-left:1px solid #c4cebf;
  margin-left:22px;
  position:relative;
}

.flow-connector span {
  width:5px;
  height:8px;
  display:block;
  position:absolute;
  background:var(--forest);
  left:-3px;
  top:5px;
  animation:flow-packet 3.5s ease-in-out infinite;
}

.approval-preview {
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--forest);
  color:var(--ivory);
  padding:20px 17px;
  margin-left:-5px;
  margin-right:-5px;
}

.approval-preview div {
  display:flex;
  flex-direction:column;
}

.approval-preview small {
  color:#c8dbc5;
  font-size:12px;
}

.approval-symbol svg {
  width:23px;
  height:23px;
}

.round-link {
  border:1px solid #94af99;
  border-radius:50%;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  margin-left:auto;
}

.round-link svg {
  width:18px;
  height:18px;
}

.preview-bottom {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:1.1px;
  color:#64745e;
  padding:23px 0;
}







.governance-section {
  background:var(--dark);
  color:var(--ivory);
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:9%;
  padding:100px max(64px,calc((100vw - 1312px)/2));
}

.governance-heading h2 {
  font-size:59px;
  margin-bottom:27px;
}

.governance-heading p {
  font-size:17px;
  color:#bdccbf;
  max-width:390px;
  margin-bottom:29px;
}

.governance-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:39px 45px;
  padding-top:6px;
}

.governance-grid article {
  border-top:1px solid #466050;
  padding-top:20px;
}

.governance-grid article>svg {
  color:#d3dfc6;
  width:29px;
  height:29px;
  margin-bottom:27px;
}

.governance-grid h3 {
  font-size:21px;
  margin-bottom:13px;
}

.governance-grid p {
  font-size:15px;
  line-height:1.7;
  color:#bdccbf;
}

.firm-section {
  display:grid;
  grid-template-columns:35% 1fr;
  gap:12%;
  align-items:center;
}

.founder-image {
  position:relative;
}

.founder-image img {
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:saturate(.55);
  border-radius:2px;
}

.founder-image>span {
  display:block;
  padding-top:19px;
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--muted);
}

.firm-copy h2 {
  margin-bottom:30px;
}

.large-copy {
  font-size:21px;
  line-height:1.6;
  letter-spacing:-.015em;
}

.firm-copy p {
  margin-bottom:21px;
  font-size:16px;
}

.firm-copy .large-copy {
  font-size:20px;
  color:var(--ink);
}

.firm-copy .text-link {
  margin-top:11px;
}

.faq-section {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:9%;
  padding-top:25px;
}

.faq-list {
  border-top:1px solid var(--line);
}

.faq-list details {
  border-bottom:1px solid var(--line);
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  padding:23px 0;
  font-size:17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary span {
  font-size:25px;
  font-weight:300;
  color:var(--forest);
  transition:transform .25s;
}

.faq-list details[open] summary span {
  transform:rotate(45deg);
}

.faq-list details p {
  padding:0 35px 25px 0;
  font-size:15px;
}

.closing-cta {
  padding:85px max(64px,calc((100vw - 1312px)/2));
  background:var(--soft);
  display:flex;
  justify-content:space-between;
  gap:70px;
  align-items:center;
}

.closing-cta h2 {
  font-size:66px;
}

.closing-cta>div:last-child {
  max-width:340px;
}

.closing-cta p {
  font-size:17px;
  margin-bottom:23px;
  color:var(--prose);
}

/* Footer (2026-09-24, after Brenden's reference): the wordmark with the copyright under it, then
   Pages, Legal and Contact columns under small grey headings. One block, a hairline above it. The
   link groups are lists, so they still stack if this stylesheet fails to load. */
.site-footer {
  border-top:1px solid var(--line);
  padding:72px max(64px,calc((100vw - 1312px)/2)) 64px;
}

.footer-main {
  display:grid;
  grid-template-columns:minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap:40px 48px;
  align-items:start;
}

.footer-copyright {
  display:block;
  margin-top:22px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

.site-footer .footer-heading {
  margin:0 0 14px;
  font-family:var(--sans);   /* a small label, not a display heading: stays out of the kit's heading face */
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--muted);
}

.footer-links,
.footer-legal,
.footer-contact {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.footer-links a,
.footer-legal a,
.footer-contact a {
  padding:5px 0;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}

.footer-links a:hover,
.footer-legal a:hover,
.footer-contact a:hover { text-decoration:underline; text-underline-offset:3px; }

/* LinkedIn: the brand glyph in ink on a 32px target, pulled left so the glyph lines up with the
   links above it and the focus ring stays centred on it. */
.footer-contact .footer-social {
  display:inline-flex;
  margin:4px 0 0 -6px;
  padding:6px;
  color:var(--ink);
}

.footer-social svg {
  display:block;
  width:20px;
  height:20px;
  fill:currentColor;
}

.footer-contact .footer-social:hover { color:var(--forest); }

@media (max-width:1150px) {
  .site-footer { padding:64px 40px 52px; }
  .footer-main { gap:40px 32px; }
}

@media (max-width:850px) {
  .site-footer { padding:56px 32px 44px; }
  .footer-main { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(max-content, 1fr); }
  .footer-brand { grid-column:1 / -1; }
}

@media (max-width:600px) {
  .site-footer { padding:48px 24px 36px; }
  .footer-main { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 24px; }
  .footer-main > .footer-col:last-child { grid-column:1 / -1; }
}

.session-list {
  list-style:none;
  padding:0;
  margin:26px 0;
}

.session-list li {
  padding:10px 0;
  border-top:1px solid var(--line);
  font-size:14px;
}

.session-list span {
  font-size:12px;
  color:var(--forest);
  margin-right:20px;
}

.workflow-hero,
.page-hero {
  padding-top:35px;
  padding-bottom:42px;
}

.breadcrumb {
  font-size:12px;
  color:var(--muted);
  display:inline-block;
  margin-bottom:62px;
}

.workflow-hero .section-heading,
.page-hero .section-heading {
  margin-bottom:45px;
}

.workflow-hero h1,
.page-hero h1 {
  font-size:84px;
}

.workflow-hero .text-link,
.page-hero .text-link {
  margin-top:25px;
}

.workflow-scope {
  display:flex;
  gap:40px;
  border-top:1px solid var(--line);
  padding-top:24px;
  font-size:12px;
  letter-spacing:1.4px;
  color:var(--forest);
}

.walkthrough-section {
  background:var(--soft);
  padding:65px max(64px,calc((100vw - 1312px)/2)) 76px;
}

.walkthrough-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
}

.walkthrough-intro .eyebrow {
  margin-bottom:15px;
}

.walkthrough-intro h2 {
  font-size:45px;
}

.tour-button {
  font-size:13px;
  white-space:nowrap;
  border-color:#b7c4b1;
}

.demo-disclosure {
  margin:22px 0 22px;
  font-size:12px;
  color:#65715d;
}

.walkthrough-shell {
  position:relative;
  border:1px solid #cdd4c7;
  background:var(--ivory);
  box-shadow:0 24px 65px rgba(30,65,40,.04);
}

/* Rive deal-flow spine. Decorative: the stage copy carries the same meaning. */
.spine-rail {
  border-bottom:1px solid var(--line);
  background:var(--soft);
}
.spine-rail canvas { display:block; width:100%; height:168px; }

/* Scripted reviewer pointer. Never interactive, never in the a11y tree. */
.demo-cursor {
  position:absolute;
  top:0;
  left:0;
  z-index:5;
  width:26px;
  height:26px;
  color:var(--dark);
  pointer-events:none;
  opacity:0;
  transform:translate(-100px,-100px);
  transition:transform .62s cubic-bezier(.3,.7,.25,1), opacity .25s ease;
  filter:drop-shadow(0 2px 4px rgba(20,40,28,.35));
}
.demo-cursor svg {
  width:26px;
  height:26px;
  transform-origin:5px 3px;
  transition:transform .09s ease-out;
}
.demo-cursor.is-visible { opacity:1; }
.demo-cursor.is-pressing svg { transform:scale(.72); }
.demo-cursor.is-clicking::after {
  content:"";
  position:absolute;
  top:-7px;
  left:-5px;
  width:20px;
  height:20px;
  border:2px solid var(--forest);
  border-radius:50%;
  animation:demo-click .4s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes demo-click {
  from { opacity:.85; transform:scale(.25); }
  to { opacity:0; transform:scale(1.5); }
}

/* The scripted pointer borrows the real hover and press states. */
.button.is-demo-hover { border-color:var(--pine-deep); background:var(--pine-deep); transform:translateY(-2px); }
.button.is-demo-active { transform:translateY(0) scale(.985); }
.review-hold.is-demo-hover { color:var(--dark); text-decoration-thickness:2px; }
.review-hold.is-demo-active { transform:scale(.97); display:inline-block; }
.field-value.is-demo-hover { background:#e8ebe2; box-shadow:0 0 0 4px #e8ebe2; border-radius:2px; }

/* Headquarters cell behaving like a text box the reviewer types into. */
.field-value {
  transition:background .15s ease, box-shadow .15s ease;
}
.field-value.is-field {
  display:inline-block;
  min-width:158px;
  margin:-5px -9px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
  box-shadow:none;
  color:var(--ink);
  text-align:left;
}
.field-value.is-field.is-focused {
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(39,93,67,.16);
}
.field-value.is-field.is-focused::after {
  content:"";
  display:inline-block;
  width:1.5px;
  height:1.05em;
  margin-left:1px;
  background:var(--forest);
  vertical-align:-3px;
  animation:demo-caret 1.05s steps(1) infinite;
}
@keyframes demo-caret { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }

/* Headquarters row once the reviewer commits the value. */
.data-table tr.is-confirmed { animation:row-confirm 1.1s ease-out; }
.data-table .review-confirmed { color:var(--forest) !important; }
@keyframes row-confirm {
  0%   { background:rgba(39,93,67,.16); }
  100% { background:transparent; }
}
.review-notice.is-confirmed {
  border-left-color:var(--forest);
  background:#eef3ec;
  color:#2f4a38;
}

@media (prefers-reduced-motion: reduce) {
  .demo-cursor { display:none; }
  .data-table tr.is-confirmed { animation:none; }
  .field-value.is-field.is-focused::after { animation:none; }
}
@media (max-width: 760px) {
  .spine-rail { display:none; }
}

.stage-tabs {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--line);
}

.stage-tabs button {
  font-size:14px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 25px;
  border-right:1px solid var(--line);
  border-bottom:2px solid transparent;
  color:var(--muted);
}

.stage-tabs button:last-child {
  border-right:0;
}

.stage-tabs button span {
  font-size:12px;
}

.stage-tabs button[aria-selected=true] {
  border-bottom-color:var(--forest);
  color:var(--forest);
  background:#eef2e8;
}

.stage-panel {
  display:grid;
  grid-template-columns:36% 64%;
  min-height:475px;
}

.stage-explanation {
  padding:45px 37px;
  display:flex;
  flex-direction:column;
}

.stage-explanation .eyebrow {
  font-size:12px;
  letter-spacing:.2em;   /* the kit's second-tier label */
  margin-bottom:23px;
}

.stage-explanation h3 {
  font-size:29px;
  line-height:1.2;
  margin-bottom:19px;
}

.stage-explanation>p {
  font-size:15px;
  line-height:1.7;
}

.stage-boundary {
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.stage-boundary svg {
  width:19px;
  height:19px;
  color:var(--forest);
  margin-top:4px;
}

.stage-boundary p {
  font-size:12px;
}

.stage-controls {
  display:flex;
  gap:22px;
  align-items:center;
  margin-top:auto;
  padding-top:27px;
}

.stage-controls button {
  height:35px;
  width:35px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:18px;
}

.stage-controls span {
  font-size:12px;
  color:var(--muted);
}

/* Explicit review actions reveal their target inside the viewport, with room
   around it. The page's scroll-padding-top accounts for the sticky header. */
.stage-visual h4, .stage-visual [data-action] { scroll-margin-block: 16px; }
.stage-visual {
  padding:42px;
  background:#e9ede3;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stage-card {
  width:100%;
  max-width:595px;
  background:white;
  border:1px solid #d3dacd;
  padding:0;
  box-shadow:0 12px 30px rgba(19,48,29,.05);
  animation:stage-in .35s ease-out;
}

.stage-card-header {
  padding:18px 23px;
  border-bottom:1px solid #e6e9e2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#62705a;
  letter-spacing:1px;
}

.stage-card-content {
  padding:25px 27px;
}

.mail-from {
  font-size:12px;
  color:var(--muted);
  margin-bottom:15px;
}

.stage-card h4 {
  font-size:19px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:-.02em;
  margin:0 0 18px;
}

.stage-card p {
  font-size:13px;
  line-height:1.65;
}

.attachment-row {
  display:flex;
  gap:12px;
  margin:24px 0 0;
  flex-wrap:wrap;
}

.attachment {
  border:1px solid #dbe0d6;
  background:#fafbf8;
  padding:11px 14px;
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  color:#52654a;
}

.file-square {
  font-size:12px;
  border:1px solid #acbaa3;
  padding:2px 4px;
}

.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.data-table th {
  text-align:left;
  color:#6b7663;
  font-size:12px;
  letter-spacing:1px;
  font-weight:500;
  padding:0 0 10px;
}

.data-table td {
  padding:11px 0;
  border-top:1px solid #e8ece3;
  vertical-align:top;
}

.data-table td:nth-child(2) {
  font-weight:500;
}

.data-table td:last-child {
  color:#687961;
  font-size:12px;
  text-align:right;
}

.data-table .review-needed {
  color:#8c702c!important;
}

.review-notice {
  border-left:2px solid #9d8444;
  background:#f7f4e9;
  padding:11px 14px;
  margin:20px 0;
  font-size:12px;
  color:#726331;
}

.review-actions {
  display:flex;
  align-items:center;
  gap:17px;
  flex-wrap:wrap;
}

.review-actions .button {
  min-height:41px;
  padding:9px 14px;
  font-size:12px;
  gap:10px;
}

.review-hold {
  font-size:12px;
  text-decoration:underline;
}

.review-hint {
  font-size:12px!important;
  margin-top:13px;
}

.commit-list {
  list-style:none;
  padding:0;
  margin:20px 0 10px;
}

.commit-list li {
  border-top:1px solid #e6e9e2;
  padding:15px 0;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
}

.check-disc {
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:50%;
  background:#e5eddf;
  color:var(--forest);
  font-size:12px;
}

.commit-list small {
  display:block;
  color:#708067;
  font-size:12px;
}

.commit-list strong {
  font-weight:500;
}

.approval-stamp {
  color:var(--forest);
  font-size:12px;
  border:1px solid #c4d3bc;
  padding:8px 11px;
  display:inline-block;
  margin-bottom:16px;
}

.ledger-line {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #e4e9df;
  padding:12px 0;
  font-size:12px;
}

.ledger-line span {
  color:var(--muted);
}

.ledger-line strong {
  font-weight:500;
  text-align:right;
}

.ledger-note {
  font-size:12px!important;
  color:#798470!important;
  margin-top:15px;
}

.gate-card {
  text-align:center;
  padding:43px 28px;
}

.gate-card svg {
  margin:0 auto 20px;
  width:33px;
  height:33px;
  color:var(--forest);
}

.gate-card h4 {
  font-size:22px;
}

.gate-card .button {
  margin-top:24px;
  font-size:13px;
}

.walkthrough-status {
  border-top:1px solid var(--line);
  padding:12px 24px;
  font-size:12px;
  color:#63745b;
}

.integration-section {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:10%;
  align-items:center;
}

.integration-section h2 {
  font-size:56px;
  margin-bottom:26px;
}

.integration-section>div>p {
  font-size:16px;
}

.integration-list>div {
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:23px 0;
}

.integration-list>div:first-child {
  border-top:1px solid var(--line);
}

.integration-letter {
  font-family:var(--brand);
  font-weight:600;
  font-size:30px;
  width:40px;
  flex:none;
  color:var(--forest);
}

.integration-list h3 {
  font-size:18px;
  margin-bottom:5px;
}

.integration-list p {
  font-size:13px;
}

.integration-list>div>span:last-child {
  margin-left:auto;
  font-size:12px;
  color:var(--muted);
}

.control-rows {
  border-top:1px solid var(--line);
}

.control-rows article {
  display:grid;
  grid-template-columns:65px 1fr 1.7fr;
  gap:26px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}

.control-rows article>span {
  font-size:12px;
  color:var(--forest);
  padding-top:5px;
}

.control-rows h3 {
  font-size:21px;
}

.control-rows p {
  font-size:15px;
}

@keyframes flow-packet {
0%{transform:translateY(0);opacity:0}
15%{opacity:1}
80%{opacity:1}
100%{transform:translateY(32px);opacity:0}

}

@keyframes stage-in {
from{opacity:.35;transform:translateY(7px)}
to{opacity:1;transform:translateY(0)}

}

@media(max-width:1150px) {
  .section-heading>div:last-child:not(:first-child) {
  width:340px;
  }

  .workflow-feature {
  padding:80px 40px;
  gap:6%;
  }

  .workflow-preview {
  padding:22px 22px 0;
  }

  .governance-section {
  padding:80px 40px;
  gap:6%;
  }

  .governance-heading h2 {
  font-size:51px;
  }

  .governance-grid {
  gap:30px;
  }

  .firm-section {
  gap:8%;
  }

  .closing-cta {
  padding:70px 40px;
  gap:45px;
  }

  .closing-cta h2 {
  font-size:58px;
  }

  .walkthrough-section {
  padding:55px 40px;
  }

  .stage-tabs button {
  padding:20px 19px;
  }

  .stage-explanation {
  padding:34px 26px;
  }

  .stage-visual {
  padding:30px;
  }

  .workflow-hero h1,
  .page-hero h1 {
  font-size:69px;
  }

  .walkthrough-intro h2 {
  font-size:40px;
  }

  .integration-section {
  gap:7%;
  }
}

@media(max-width:850px) {
  .section-heading>div:last-child:not(:first-child) {
  width:310px;
  font-size:16px;
  }

  .workflow-feature {
  grid-template-columns:1fr;
  padding:65px 32px;
  gap:45px;
  }

  .feature-copy {
  max-width:580px;
  }

  .workflow-preview {
  max-width:600px;
  justify-self:center;
  padding:28px 30px 0;
  }

  .feature-copy h2 {
  font-size:54px;
  }

  .feature-copy p {
  max-width:100%;
  }




  .governance-section {
  grid-template-columns:1fr;
  padding:65px 32px;
  gap:45px;
  }

  .governance-heading h2 {
  font-size:54px;
  }

  .governance-heading p {
  max-width:560px;
  }

  .governance-grid {
  gap:32px 50px;
  }

  .firm-section {
  grid-template-columns:34% 1fr;
  gap:7%;
  align-items:start;
  }

  .firm-copy h2 {
  font-size:43px;
  }

  .firm-copy p,
.firm-copy .large-copy {
  font-size:16px;
  }

  .faq-section {
  grid-template-columns:1fr 1.6fr;
  gap:35px;
  }

  .faq-section h2 {
  font-size:43px;
  }

  .closing-cta {
  padding:65px 32px;
  gap:38px;
  }

  .closing-cta h2 {
  font-size:49px;
  }

  .closing-cta p {
  font-size:15px;
  }

  .workflow-hero .section-heading,
  .page-hero .section-heading {
  flex-direction:column;
  }

  .workflow-hero .section-heading>div:last-child,
  .page-hero .section-heading>div:last-child {
  width:auto;
  max-width:600px;
  }

  .workflow-hero h1,
  .page-hero h1 {
  font-size:73px;
  }

  .workflow-scope {
  flex-wrap:wrap;
  gap:15px 28px;
  }

  .workflow-hero .breadcrumb,
  .page-hero .breadcrumb {
  margin-bottom:45px;
  }

  .walkthrough-section {
  padding:50px 32px;
  }

  .walkthrough-intro {
  align-items:flex-start;
  }

  .walkthrough-intro h2 {
  font-size:36px;
  }

  .walkthrough-intro .eyebrow {
  font-size:12px;
  }

  .tour-button {
  padding:10px 12px;
  gap:5px;
  font-size:12px;
  }

  .stage-panel {
  grid-template-columns:1fr;
  }

  .stage-explanation {
  padding:27px 30px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:5px 40px;
  }

  .stage-explanation>.eyebrow {
  grid-column:1/-1;
  margin-bottom:10px;
  }

  .stage-explanation h3 {
  font-size:28px;
  grid-column:1;
  grid-row:2;
  }

  .stage-explanation>p {
  grid-column:1;
  grid-row:3;
  }

  .stage-boundary {
  grid-column:2;
  grid-row:2/4;
  margin:0;
  }

  .stage-controls {
  grid-column:2;
  grid-row:4;
  padding-top:14px;
  }

  .stage-visual {
  padding:35px;
  }

  .stage-card {
  max-width:100%;
  }

  .stage-tabs button {
  padding:17px 12px;
  gap:8px;
  font-size:12px;
  }

  .stage-tabs button>span {
  font-size:12px;
  }

  .integration-section {
  gap:40px;
  }

  .integration-section h2 {
  font-size:42px;
  }

  .integration-list h3 {
  font-size:16px;
  }

  .control-rows article {
  grid-template-columns:30px 1fr 1.5fr;
  gap:20px;
  }

  .control-rows h3 {
  font-size:18px;
  }

  .control-rows p {
  font-size:14px;
  }
}

@media(max-width:600px) {
  .section-heading>div:last-child:not(:first-child) {
  width:auto;
  font-size:16px;
  }

  .section-heading>div:last-child p {
  font-size:16px;
  }

  .workflow-feature {
  padding:56px 24px;
  gap:35px;
  }

  .feature-copy h2 {
  font-size:46px;
  margin-bottom:24px;
  }

  .feature-copy p {
  font-size:16px;
  }

  .feature-copy .button {
  font-size:13px;
  padding:13px 18px;
  gap:17px;
  }

  .feature-note {
  font-size:12px;
  }

  .workflow-preview {
  padding:22px 18px 0;
  }

  .preview-top {
  font-size:12px;
  letter-spacing:.8px;
  margin-bottom:22px;
  padding-bottom:18px;
  gap:15px;
  }

  .preview-row {
  gap:12px;
  }

  .workflow-icon {
  width:36px;
  height:44px;
  }

  .workflow-icon svg {
  width:22px;
  }

  .preview-row strong,
.approval-preview strong {
  font-size:12px;
  }

  .preview-row small,
.approval-preview small {
  font-size:12px;
  letter-spacing:.8px;
  }

  .preview-row div>span {
  font-size:12px;
  }

  .flow-connector {
  margin-left:18px;
  height:41px;
  }

  .approval-preview {
  gap:10px;
  padding:17px 12px;
  }

  .approval-preview svg {
  width:20px;
  }

  .round-link {
  width:24px;
  height:24px;
  }

  .round-link svg {
  width:15px;
  }

  .preview-bottom {
  font-size:12px;
  letter-spacing:.9px;
  padding:19px 0;
  }







  .governance-section {
  padding:57px 24px;
  gap:37px;
  }

  .governance-heading h2 {
  font-size:47px;
  margin-bottom:25px;
  }

  .governance-heading p {
  font-size:16px;
  }

  .governance-heading .text-link {
  font-size:13px;
  gap:12px;
  }

  .governance-grid {
  gap:31px 25px;
  }

  .governance-grid article {
  padding-top:18px;
  }

  .governance-grid h3 {
  font-size:18px;
  margin-bottom:13px;
  }

  .governance-grid p {
  font-size:14px;
  line-height:1.7;
  }

  .governance-grid article>svg {
  width:27px;
  height:27px;
  margin-bottom:23px;
  }

  .firm-section {
  grid-template-columns:1fr;
  gap:32px;
  }

  .founder-image {
  max-width:330px;
  margin:auto;
  width:100%;
  }

  .founder-image img {
  aspect-ratio:1.12;
  object-position:50% 23%;
  }

  .founder-image>span {
  font-size:12px;
  padding-top:14px;
  }

  .firm-copy h2 {
  font-size:45px;
  }

  .firm-copy .large-copy {
  font-size:18px;
  }

  .firm-copy p {
  font-size:16px;
  }

  .faq-section {
  grid-template-columns:1fr;
  gap:31px;
  padding-top:5px;
  }

  .faq-section h2 {
  font-size:45px;
  }

  .faq-list summary {
  font-size:16px;
  padding:21px 0;
  line-height:1.5;
  gap:18px;
  }

  .faq-list details p {
  font-size:15px;
  padding-right:17px;
  }

  .closing-cta {
  padding:55px 24px;
  flex-direction:column;
  align-items:flex-start;
  gap:30px;
  }

  .closing-cta h2 {
  font-size:47px;
  }

  .closing-cta p {
  font-size:16px;
  }

  .breadcrumb {
  font-size:12px;
  margin-bottom:36px;
  }

  .workflow-hero,
  .page-hero {
  padding-top:26px;
  padding-bottom:30px;
  }

  .workflow-hero h1,
  .page-hero h1 {
  font-size:57px;
  }

  .workflow-hero .section-heading,
  .page-hero .section-heading {
  margin-bottom:32px;
  gap:25px;
  }

  .workflow-hero .text-link,
  .page-hero .text-link {
  font-size:13px;
  margin-top:20px;
  }

  .workflow-scope {
  font-size:12px;
  gap:12px 24px;
  letter-spacing:1px;
  }

  .walkthrough-section {
  padding:42px 18px;
  }

  .walkthrough-intro {
  flex-direction:column;
  gap:20px;
  padding:0 6px;
  }

  .walkthrough-intro .eyebrow {
  font-size:12px;
  max-width:230px;
  }

  .walkthrough-intro h2 {
  font-size:36px;
  }

  .tour-button {
  min-height:40px;
  padding:9px 13px;
  font-size:12px;
  gap:10px;
  }

  .demo-disclosure {
  font-size:12px;
  margin:17px 6px;
  }

  .stage-tabs button {
  flex-direction:column;
  gap:4px;
  padding:14px 4px;
  font-size:12px;
  align-items:center;
  }

  .stage-tabs button span {
  font-size:12px;
  }

  .stage-panel {
  min-height:0;
  }

  .stage-explanation {
  display:flex;
  padding:27px 23px;
  gap:0;
  }

  .stage-explanation>.eyebrow {
  font-size:12px;
  margin-bottom:17px;
  }

  .stage-explanation h3 {
  font-size:28px;
  margin-bottom:17px;
  }

  .stage-explanation>p {
  font-size:14px;
  }

  .stage-boundary {
  margin-top:21px;
  padding-top:17px;
  gap:11px;
  }

  .stage-boundary p {
  font-size:12px;
  }

  .stage-controls {
  margin-top:0;
  padding-top:20px;
  }

  .stage-visual {
  padding:22px 15px;
  min-height:380px;
  }

  .stage-card-header {
  padding:15px;
  font-size:12px;
  gap:10px;
  }

  .stage-card-content {
  padding:22px 17px;
  }

  .stage-card h4 {
  font-size:17px;
  }

  .stage-card p {
  font-size:12px;
  }

  .mail-from {
  font-size:12px;
  }

  .attachment-row {
  gap:7px;
  }

  .attachment {
  font-size:12px;
  padding:9px;
  gap:6px;
  }

  .file-square {
  font-size:12px;
  padding:1px 3px;
  }

  .data-table {
  font-size:12px;
  }

  .data-table th {
  font-size:12px;
  }

  .data-table td {
  padding:10px 0;
  }

  .data-table td:last-child {
  font-size:12px;
  }

  .review-notice {
  font-size:12px;
  padding:10px;
  }

  .review-actions .button {
  font-size:12px;
  }

  .review-hold {
  font-size:12px;
  }

  .review-hint {
  font-size:12px!important;
  }

  .commit-list li {
  font-size:12px;
  gap:10px;
  }

  .commit-list small {
  font-size:12px;
  }

  .approval-stamp {
  font-size:12px;
  }

  .ledger-line {
  font-size:12px;
  gap:10px;
  }

  .gate-card {
  padding:28px 18px;
  }

  .gate-card .button {
  font-size:12px;
  padding:10px 15px;
  min-height:43px;
  }

  .walkthrough-status {
  font-size:12px;
  padding:11px 16px;
  line-height:1.6;
  }

  .integration-section {
  grid-template-columns:1fr;
  gap:30px;
  }

  .integration-section h2 {
  font-size:44px;
  }

  .integration-list>div {
  padding:20px 0;
  gap:16px;
  }

  .integration-list h3 {
  font-size:17px;
  }

  .integration-list p {
  font-size:12px;
  }

  .control-rows article {
  grid-template-columns:23px 1fr;
  gap:10px 19px;
  padding:23px 0;
  }

  .control-rows h3 {
  font-size:20px;
  }

  .control-rows p {
  grid-column:2;
  font-size:15px;
  }

  .control-rows article>span {
  font-size:12px;
  }

}

/* Production refinements: readable controls, stable media, and real form pages. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.governance-section :focus-visible { outline-color: var(--ivory); }
.section-heading > div { min-width: 0; }
.section-heading > div:last-child:not(:first-child) { max-width: 100%; }
.founder-image img { filter: none; }
.governance-grid p, .faq-list details p, .integration-list p, .control-rows p { font-size: 16px; }
.feature-note { font-size: 14px; }
.closing-cta > *, .stage-panel > * { min-width: 0; }
.flow-connector span { animation: none; }
html[data-motion="running"] .flow-connector span { animation: flow-packet 3.5s ease-in-out infinite; }
html[data-motion="paused"] .flow-connector span { animation: flow-packet 3.5s ease-in-out infinite paused; }
.workflow-hero h1,
.page-hero h1 { font-size: clamp(46px, 6vw, 84px); }
.workflow-scope { flex-wrap: wrap; gap: 12px 28px; }
.demo-disclosure { color: #526149; font-size: 14px; }
.tour-button { min-height: 46px; font-size: 14px; }
.stage-tabs button { min-height: 48px; font-size: 14px; }
.stage-tabs button span { font-size: 12px; }
.stage-explanation > p, .stage-card p { font-size: 16px; }
.stage-boundary p, .walkthrough-status, .review-notice { font-size: 14px; }
.stage-controls button { width: 44px; height: 44px; }
.stage-card h4 { font-size: 21px; }
.stage-card-content > p + p { margin-top: 14px; }
.stage-card-header { gap: 14px; flex-wrap: wrap; }
.attachment, .mail-from { font-size: 14px; }
.attachment { max-width: 100%; overflow-wrap: anywhere; }
.data-table { font-size: 14px; table-layout: fixed; }
.data-table thead th { text-transform: uppercase; letter-spacing: .06em; padding-right: 8px; }
.data-table tbody th { padding: 12px 8px 12px 0; font-size: 14px; letter-spacing: 0; border-top: 1px solid #e8ece3; vertical-align: top; color: var(--ink); }
.data-table td { padding: 12px 8px 12px 0; overflow-wrap: anywhere; }
.data-table td:last-child { font-size: 14px; color: #526149; }
.data-table .review-needed { color: #785c18 !important; }
.review-actions .button, .review-hold, .gate-card .button { min-height: 44px; font-size: 14px; }
.review-hold { color: var(--forest); text-underline-offset: 4px; }
.review-hint, .ledger-note { font-size: 14px !important; color: var(--muted) !important; }
.commit-list li { font-size: 16px; }
.commit-list small, .approval-stamp { font-size: 14px; }
.commit-list small { color: #526149; }
.ledger { margin: 0; }
.ledger > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ledger dt { color: var(--muted); }
.ledger dd { margin: 0; text-align: right; font-weight: 500; }
.workflow-transcript { margin-top: 25px; border-top: 1px solid #cdd4c7; }
.workflow-transcript summary { cursor: pointer; padding: 18px 0; color: var(--forest); font-size: 16px; }
.workflow-transcript ol { margin: 0; padding: 0 0 0 24px; max-width: 900px; }
.workflow-transcript li { margin: 0 0 15px; font-size: 16px; color: var(--prose); }
.workflow-transcript strong { color: var(--ink); }

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "intro form" "session form"; grid-template-rows: auto 1fr; gap: 0 10%; align-items: start; min-height: 650px; }
.contact-intro { grid-area: intro; }
.contact-layout > .session-list { grid-area: session; }
.contact-layout > .contact-card { grid-area: form; }
.contact-intro h1 { font-size: clamp(46px, 5vw, 72px); margin-bottom: 28px; }
.contact-intro > p { font-size: 17px; }
.session-list { margin-top: 32px; }
.session-list li { font-size: 16px; padding: 16px 0; }
.contact-card { background: var(--soft); padding: 44px; }
.contact-card h2 { font-size: 32px; line-height: 1.2; margin-bottom: 20px; text-wrap: balance; }
.contact-card > p { font-size: 16px; }
.contact-card form { margin-top: 30px; }
.contact-card label { display: block; font-size: 16px; font-weight: 500; margin-bottom: 9px; }
.contact-card input[type="email"] { display: block; min-width: 0; width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid #87937e; border-radius: 3px; background: var(--ivory); color: var(--ink); font-size: 16px; }
.contact-card input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.contact-card input:user-invalid { border-color: #9a351e; }
.contact-card .button { margin-top: 20px; width: 100%; }
.contact-card .hp-field { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.contact-card .contact-fineprint { margin-top: 25px; font-size: 14px; overflow-wrap: anywhere; }
.contact-fineprint a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.success-page { min-height: 55svh; }
.success-card { max-width: 800px; }
.success-card h1 { font-size: clamp(46px, 5vw, 72px); margin-bottom: 30px; }
.success-card p { margin-bottom: 30px; font-size: 18px; }
.legal-page { padding: 72px 24px; }
.legal-document { max-width: 760px; margin: auto; }
.legal-document h1 { font-size: clamp(42px, 5vw, 64px); margin-bottom: 20px; }
.legal-document h2 { margin: 38px 0 16px; font-size: 26px; line-height: 1.3; }
.legal-document p, .legal-document li { font-size: 17px; line-height: 1.75; }
.legal-document p { margin: 16px 0; }
.legal-document li { color: var(--prose); margin: 12px 0; }
.legal-document a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-document .back { display: inline-block; margin-top: 32px; }
.legal-document .updated, .legal-document .date { font-size: 14px; }

@media (max-width: 850px) {
  .contact-layout { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "session"; grid-template-rows: auto; gap: 40px; }
  .contact-intro, .contact-card, .contact-layout > .session-list { max-width: 620px; width: 100%; margin: auto; }
  .stage-panel { grid-template-columns: 1fr; }
  .stage-explanation { display: flex; flex-direction: column; gap: 0; }
  .stage-visual { padding: 32px; }
  .stage-tabs button { padding: 18px 12px; gap: 8px; }
  .stage-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .preview-top { flex-wrap: wrap; gap: 8px; }
  .preview-row div { min-width: 0; }
  .preview-row strong, .approval-preview strong { font-size: 15px; }
  .approval-preview { gap: 10px; padding: 18px 12px; }
  .approval-preview .round-link { flex: none; }
  .preview-bottom { flex-wrap: wrap; gap: 10px; }
  .closing-cta h2 { font-size: clamp(38px, 10vw, 50px); }
  .closing-cta { align-items: flex-start; }
  .workflow-hero h1,
  .page-hero h1 { font-size: clamp(44px, 11.5vw, 64px); }
  /* "investment insight." needs one line from 360px up in Familjen (2026-10-12). */
  .workflow-hero h1 { font-size: clamp(38px, 10.8vw, 64px); }
  .workflow-scope { font-size: 12px; gap: 12px 18px; }
  .walkthrough-intro { align-items: flex-start; }
  .walkthrough-intro h2 { font-size: 36px; }
  .stage-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-tabs button { flex-direction: column; align-items: flex-start; gap: 5px; min-height: 72px; padding: 12px; }
  .stage-tabs button:nth-child(3) { border-right: 0; }
  .stage-tabs button:nth-child(n+4) { border-top: 1px solid var(--line); }
  .stage-tabs button:last-child { border-right: 1px solid var(--line); }
  .stage-explanation { padding: 25px 20px; }
  .stage-explanation > p, .stage-card p { font-size: 16px; }
  .stage-boundary p, .review-notice, .walkthrough-status { font-size: 14px; }
  .stage-visual { padding: 20px 12px; min-height: 0; }
  .stage-card-content { padding: 23px 16px; }
  .stage-card-header { padding: 16px; }
  .stage-card h4 { font-size: 21px; }
  .data-table, .data-table tbody { display: block; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table tr { display: block; padding: 12px 0; border-top: 1px solid var(--line); }
  .data-table tbody th { display: block; padding: 0 0 6px; border: 0; color: var(--forest); }
  .data-table td { display: block; padding: 0 0 5px; border: 0; font-size: 16px; }
  .data-table td:last-child { text-align: left; font-size: 14px; }
  .data-table td:last-child::before { content: "Source: "; }
  .review-actions { gap: 8px; }
  .review-actions .button { width: 100%; font-size: 14px; }
  .review-hold { font-size: 14px; }
  .gate-card .button { font-size: 14px; white-space: normal; }
  .ledger > div { grid-template-columns: 1fr; gap: 5px; }
  .ledger dd { text-align: left; }
  .integration-section h2 { font-size: 40px; }
  .integration-list p, .control-rows p { font-size: 16px; }
  .contact-card { padding: 28px 22px; }
  .contact-card h2 { font-size: 29px; }
  .contact-layout { padding-top: 44px; gap: 28px; }
  .contact-intro h1 { font-size: clamp(42px, 11vw, 50px); margin-bottom: 20px; }
  .contact-intro .eyebrow { max-width: 240px; }
  .legal-page { padding: 48px 24px; }
}

/* Capabilities page: pillars, contrast pair, workflow library, lifecycle cards, engagement steps. */
.band-soft { background: var(--soft); }
.page-hero .workflow-scope { margin-top: 0; }
.pillar-rows article > div { min-width: 0; }
.pillar-rows .text-link { margin-top: 18px; font-size: 14px; }
.contrast-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; border-top: 1px solid var(--line); padding-top: 44px; }
.contrast-pair .eyebrow { margin-bottom: 18px; }
.contrast-pair h3 { margin-bottom: 18px; font-size: 28px; line-height: 1.2; letter-spacing: -.015em; }
.contrast-pair p { max-width: 560px; font-size: 16px; }
.contrast-pair strong { display: block; margin-top: 22px; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.4; }
.library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.library-grid .cap-panel { background: var(--soft); border-top: 0; padding: 36px; }
.library-grid .cap-panel h3 { margin-bottom: 6px; }
.library-grid .cap-panel > p { margin-bottom: 0; font-size: 15px; }
.library-list { margin-bottom: 0; }
.library-list li { padding: 18px 0 18px 21px; border-top: 1px solid var(--line); }
.library-list li:first-child { border-top: 0; }
.library-list li::before { top: 29px; }
.library-list li:first-child::before { top: 11px; }
.library-item h4 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.library-list p { margin: 8px 0 0; max-width: 560px; font-size: 15px; line-height: 1.6; }
.lifecycle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.lifecycle-card { max-width: none; }
.lifecycle-card .preview-row { align-items: flex-start; }
.lifecycle-card .preview-row strong { line-height: 1.4; }
.lifecycle-card .preview-bottom { align-items: center; color: var(--forest); }
.lifecycle-card .preview-bottom svg { width: 18px; height: 18px; }
.engagement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.engagement-grid > div { border-top: 1px solid var(--line); padding-top: 22px; }
.engagement-grid h3 { margin: 12px 0 10px; font-size: 21px; }
.engagement-grid p { font-size: 15px; }
@media (max-width: 1150px) {
  .engagement-grid { grid-template-columns: 1fr 1fr; }
  .contrast-pair { gap: 40px; }
}
@media (max-width: 850px) {
  .library-grid, .lifecycle-grid, .contrast-pair { grid-template-columns: 1fr; }
  .contrast-pair { gap: 36px; }
  .lifecycle-card { max-width: 540px; }
  .library-grid .cap-panel { padding: 32px 28px; }
}
@media (max-width: 600px) {
  .engagement-grid { grid-template-columns: 1fr; gap: 22px; }
  .library-grid .cap-panel { padding: 28px 20px; }
  .contrast-pair h3 { font-size: 24px; }
  .library-item h4 { font-size: 17px; }
  .library-list p, .engagement-grid p, .contrast-pair p { font-size: 16px; }
  .pillar-rows article > div { grid-column: 2; }
}

/* Home page positioning pass: links to the Capabilities page. */
.all-capabilities { margin-top: 28px; font-size: 14px; }
.feature-note a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* Firm page: story columns and the team grid (cells reuse .founder-image). */
.section-heading > p.large-copy { font-size: 21px; line-height: 1.6; color: var(--ink); }
.firm-story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.firm-story p { font-size: 17px; line-height: 1.7; }
.firm-story strong { color: var(--ink); font-weight: 500; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: start; }
.team-profile { margin: 0; min-width: 0; }
.team-profile img { filter: none; }
.team-profile .profile-focus { margin-top: 8px; color: var(--ink); font-size: 14px; }
.team-profile .text-link { margin-top: 12px; font-size: 14px; }
@media (max-width: 1023px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .firm-story { gap: 40px; }
}
@media (max-width: 850px) {
  .firm-story { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-heading > p.large-copy { font-size: 19px; }
}

/* Deal-intake page: ecosystem scene in "Built around your firm". Decorative
   Rive stage over a still poster; the list beneath keeps the content as text.
   System names are read from the scene, so they show only once it is too small. */
.integration-section.has-ecosystem { grid-template-columns: .8fr 1.35fr; gap: 6%; }
.ecosystem { margin: 0; min-width: 0; }
.ecosystem-stage { position: relative; aspect-ratio: 1488 / 1032; }
.ecosystem-stage img, .ecosystem-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ecosystem-stage canvas { pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.ecosystem-stage canvas.is-live { opacity: 1; }
.ecosystem-legend { display: grid; grid-template-columns: repeat(4, 1fr); margin: 10px 0 0; padding: 0; list-style: none; }
.ecosystem-legend li { position: relative; border-top: 1px solid var(--line); padding: 16px 18px 0 0; }
.ecosystem-legend li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--forest); transition: width .26s cubic-bezier(.2, .7, .3, 1); }
.ecosystem-legend li.is-active::before { width: calc(100% - 18px); }
.ecosystem-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ecosystem-detail { display: block; font-size: 15px; line-height: 1.5; color: var(--ink); transition: opacity .26s ease; }
.ecosystem-legend.is-focusing li:not(.is-active) .ecosystem-detail { opacity: .5; }
.ecosystem-row { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.ecosystem-row:focus-visible { outline: 3px solid var(--forest); outline-offset: 5px; }
@media (max-width: 1100px) {
  .integration-section.has-ecosystem { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .ecosystem-legend { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .ecosystem-name { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
  .ecosystem-detail { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ecosystem-stage canvas, .ecosystem-legend li::before, .ecosystem-detail { transition: none; }
}

/* 2026-09-23 UX review: in-page links carry a down arrow; contact form optional fields. */
.link-down svg { transition: transform .2s; }
.link-down:hover svg, .text-link.link-down:hover svg { transform: translateY(4px); }
.contact-card input[type="text"], .contact-card select { display: block; min-width: 0; width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid #87937e; border-radius: 3px; background: var(--ivory); color: var(--ink); font: inherit; font-size: 16px; }
.contact-card .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.contact-card .field-pair + label { margin-top: 18px; }
.contact-card .optional { color: var(--muted); font-weight: 400; font-size: 14px; }
@media (max-width: 600px) {
  .contact-card .field-pair { grid-template-columns: 1fr; }
}

/* 2026-09-23 Home: "How we partner" is the four pillars side by side
   (Brenden's choice). The CSS hurdles were retired; a replacement graphic, when
   supplied, returns between the heading and the columns. */
/* 2026-09-23 (Brenden): the FAQ on the closing CTA's darker sage, set apart from the founder section above it,
   and the home closing CTA on the governance green. How we partner stays on the ivory ground. */
/* 2026-10-02 (Brenden): How we partner on the soft band, so it no longer blends with the ivory capabilities section above. */
.approach { background: var(--soft); }
/* The FAQ is a width-capped .section, so the sage bleeds to both edges with a shadow clipped top and bottom
   (no horizontal scroll). Its top padding had been trimmed to sit under the founder section; as its own band
   it takes .section's padding at every breakpoint. */
.faq-section { background: var(--soft); box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); padding-top: 104px; }
@media (max-width: 1150px) { .faq-section { padding-top: 80px; } }
@media (max-width: 850px) { .faq-section { padding-top: 72px; } }
@media (max-width: 600px) { .faq-section { padding-top: 62px; } }
/* 2026-10-02 (Brenden): Capabilities' closing CTA joins it as .is-dark, its page's only --dark band. */
#contact.closing-cta, .closing-cta.is-dark { background: var(--dark); }
/* In Familjen the home closing heading's accent line wraps from 850px down: let the heading balance itself. */
@media (max-width: 850px) { #contact.closing-cta h2 .desktop-break { display: none; } #contact.closing-cta h2 { text-wrap: balance; } }
#contact.closing-cta h2, .closing-cta.is-dark h2 { color: var(--ivory); }
#contact.closing-cta p, .closing-cta.is-dark p { color: #bdccbf; }
#contact.closing-cta :focus-visible, .closing-cta.is-dark :focus-visible { outline-color: var(--ivory); }
.approach .section { padding-top: 88px; padding-bottom: 88px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.pillar { display: flex; gap: 18px; min-width: 0; border-top: 1px solid var(--line); padding-top: 22px; }
.pillar h3 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
/* The text column stretches to the row height and the paragraph takes the slack, so the links line up across a row. */
.pillar > div { display: flex; flex-direction: column; align-items: flex-start; }
.pillar p { flex: 1; font-size: 16px; line-height: 1.65; color: var(--prose); }
.pillar .text-link { margin-top: 16px; font-size: 14px; }
/* The band above the columns: a ribbon running through four medallions, one
   centred over each column. Decorative, so it goes when the columns reflow. */
/* The band is a column gap wider than the grid on each side, which puts each
   medallion exactly over a column centre whatever the viewport width. */
.partner-flow { position: relative; aspect-ratio: 1600 / 280; margin: -44px -16px -22px; }
.partner-flow img, .partner-flow canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.partner-flow canvas { pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.partner-flow[data-motion-ready="true"] canvas { opacity: 1; }
.partner-flow[data-motion-ready="true"] img { visibility: hidden; transition: visibility 0s .4s; }
.pillar { transition: opacity .26s ease; }
.pillar-grid.is-focusing .pillar:not(.is-active) { opacity: .55; }
@media (max-width: 1150px) {
  .pillar-grid { grid-template-columns: 1fr 1fr; gap: 34px 32px; }
  .partner-flow { display: none; }
}
@media (max-width: 600px) {
  .approach .section { padding-top: 56px; padding-bottom: 56px; }
  .pillar-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-flow canvas { display: none; }
  .partner-flow[data-motion-ready="true"] img { visibility: visible; }
  .pillar { transition: none; }
}

/* 2026-09-23 Deal-intake pages: the hero's link pair; numbered ecosystem legend
   (the numerals match the docks in the scene). */
.workflow-hero .hero-links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.ecosystem-index { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .09em; color: var(--forest); }
.ecosystem-marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ecosystem-marks li { position: absolute; display: grid; place-items: center; width: 2.2%; min-width: 22px; aspect-ratio: 1; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line); color: var(--forest); font-size: clamp(10px, 1.6cqw, 13px); letter-spacing: .06em; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(30, 65, 40, .12); }
.ecosystem-stage { container-type: inline-size; }
.ecosystem-mark-1 { left: 16.8%; top: 36.8%; }
.ecosystem-mark-2 { left: 82.7%; top: 38.8%; }
.ecosystem-mark-3 { left: 30.2%; top: 79.5%; }
.ecosystem-mark-4 { left: 70.6%; top: 80.4%; }

/* 2026-10-02 home hero (Brenden, on the founder's request): the track image, assets/hero.jpg (1900x1199),
   with the copy centred inside the arch so the lanes frame the headline like a gate. .hero-track carries the
   image treatment and .hero-centered the copy; drop either class from the home hero to undo that half.
   The arch's crown is 10-21% down the image and its centre 49% across; the infield is bright grass, so a
   forest shade (deepest behind the copy) keeps the ivory text readable. */
.hero.hero-track .hero-media picture { display: block; width: 100%; height: 100%; }
.hero.hero-track .hero-media img { object-position: 49% 12%; }
.hero.hero-track .hero-shade {
  background: radial-gradient(ellipse 46% 50% at 50% 56%, rgb(10 31 21 / 70%) 0%, rgb(10 31 21 / 54%) 60%, rgb(10 31 21 / 40%) 100%),
    linear-gradient(0deg, rgb(6 21 14 / 62%), transparent 34%),
    linear-gradient(180deg, rgb(10 31 21 / 30%), transparent 30%);
}
.hero-centered .hero-content { text-align: center; }
.hero.hero-centered p { margin-left: auto; margin-right: auto; }
.hero-centered .hero-actions { justify-content: center; }
@media (max-width: 850px) {
  /* Portrait screens: the landscape photo cannot fill a tall hero without cropping to bare grass, so the
     <picture> serves assets/hero-track-portrait.webp here: the same photo's arch with its vertical mirror,
     which makes the whole oval (1200x1847). It covers the full hero, anchored to the top so the crown stays
     in view, and the copy centres inside the infield. No camera drift, so the framing holds still. */
  .hero.hero-track .hero-media { inset: 0; top: 0; width: 100%; height: 100%; transform: none !important; }
  .hero.hero-track .hero-media img { object-position: 50% 0; animation: none !important; }
  /* No drift here, so the hero offers nothing to pause (2026-10-02 review). */
  .hero.hero-track .motion-toggle { display: none; }
  .hero.hero-track .hero-shade {
    background: radial-gradient(ellipse 70% 46% at 50% 52%, rgb(10 31 21 / 72%) 0%, rgb(10 31 21 / 58%) 70%, rgb(10 31 21 / 46%) 100%),
      linear-gradient(0deg, rgb(6 21 14 / 66%), transparent 22%);
  }
}
@media (max-width: 600px) {
  .hero-centered .hero-actions { flex-direction: column; gap: 14px; }
}

/* 2026-10-02 Motion control on the subpage heroes (review finding 4). Capabilities, Governance
   and the walkthrough run loops of their own, so each hero carries the home hero's .motion-toggle
   under its link, set in the page's own colours. site.js wires every toggle to html[data-motion]. */
.editorial-hero .motion-toggle, .workflow-hero .motion-toggle { margin: 18px 0 0 -8px; color: var(--muted); font-size: 13px; }
.editorial-hero .pause-icon, .workflow-hero .pause-icon { width: 24px; height: 24px; border-color: var(--line); color: var(--forest); }
.editorial-hero .motion-toggle:hover:not(:disabled), .workflow-hero .motion-toggle:hover:not(:disabled) { color: var(--ink); }