/* Homepage and product tour: local fonts, static illustrations, no scripts or remote assets. */
.home-page { --teal: #0f766e; --teal-dark: #115e59; --teal-soft: #eaf4ef; }
.home-page main .container { max-width: 1220px; }
.home-page a { color: var(--teal); }
.home-page a:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
.home-page .btn { background: var(--teal); border-color: var(--teal); color: white; font-size: 1rem; }
.home-page .btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.home-page .btn span { margin-left: .6rem; }
.home-page .btn-small { font-size: .95rem; padding: .45rem 1.1rem; }
.home-page .btn-ghost { background: white; color: var(--teal); border-color: var(--teal); }
.home-page .btn-ghost:hover { background: var(--teal-soft); color: var(--teal-dark); border-color: var(--teal-dark); }
.home-hero-solo .hero-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.home-page .site-nav a:not(.btn) { color: var(--ink); }
.home-page .site-nav a:hover, .home-page .site-nav a[aria-current="page"] { color: var(--teal); }
.skip-link { position: fixed; top: -100px; left: 1rem; background: white; padding: .8rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.home-page section[id] { scroll-margin-top: 100px; }
.home-page .kicker { color: var(--teal-dark); font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1.2rem; }
.home-page figcaption { color: var(--muted); font-size: .75rem; text-align: center; margin-top: .85rem; line-height: 1.5; }

/* The hero: one column, centred. The first feature panel follows it directly. */
.home-hero-solo { text-align: center; padding-top: 3.75rem; padding-bottom: 2.75rem; }
.home-hero-solo .kicker { margin-bottom: 1.4rem; }
.home-hero-solo h1 { font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.045em; max-width: 24ch; margin: 0 auto 1.1rem; text-wrap: initial; }
/* The headline breaks in two places when wide and three when narrow; the phone rule swaps the breaks. */
.home-hero-solo h1 br.br-narrow { display: none; }
.hero-promise { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.4; max-width: 54ch; margin: 0 auto; letter-spacing: -.01em; text-wrap: balance; }
/* The lede breaks by hand when wide, and once more by hand on a phone; otherwise the lines balance on their own. */
.hero-promise br.br-narrow { display: none; }
.hero-promise + .hero-promise { margin-top: 1.15rem; }
.hero-promise em { font-style: italic; color: var(--ink); }
/* The hero stands on a faint drawing of a building; a cream glow keeps the words clear. */
.hero-band { position: relative; background: var(--cream) url(../assets/blueprint-hero.svg) center top / 1500px auto no-repeat; }
.hero-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 72% at 50% 48%, var(--cream) 28%, rgba(253, 247, 238, .92) 58%, rgba(253, 247, 238, 0) 100%); pointer-events: none; }
.hero-band > .home-hero-solo { position: relative; }
/* The four nodes of the blueprint, joined by lines whose dashes flow; still under reduced motion. */
.hero-nodes { list-style: none; padding: 0; display: flex; justify-content: center; align-items: flex-start; margin: 1.3rem auto 0; }
.node { position: relative; display: flex; flex-direction: column; align-items: center; width: 3.6rem; padding-bottom: 2.2rem; }
.node-circle { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: white; border: 1.5px solid var(--teal); color: var(--teal-dark); box-shadow: 0 6px 18px #0f766e14; }
.node-circle svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.node-label { position: absolute; top: calc(3.6rem + .5rem); left: 50%; transform: translateX(-50%); width: max-content; font-size: .95rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.node-link { width: 4.5rem; height: 10px; margin-top: calc(1.8rem - 5px); flex: 0 0 auto; }
.node-link svg { display: block; width: 100%; height: 100%; }
.node-link line { stroke: var(--teal); stroke-width: 1.6; stroke-dasharray: 5 6; animation: node-flow 1.4s linear infinite; }
@keyframes node-flow { to { stroke-dashoffset: -11; } }
/* The thesis speaks in the lede's voice: same size, weight, and measure, so the hero has two voices, statement and detail, not three. */
.hero-thesis { margin: 1.6rem auto 0; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.4; font-weight: 400; color: var(--ink); letter-spacing: -.01em; max-width: 54ch; text-wrap: balance; }
.pair-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: .3rem; }
/* The lede says what it is. The two payoffs sit beneath it as a pair, one step smaller, each under a short rule, so the eye reads what it is and then what you get. */
.hero-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 21rem)); justify-content: center; gap: 1rem 3rem; margin: 1.4rem auto 0; text-align: left; }
.hero-pair p { position: relative; margin: 0; padding-top: .9rem; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.45; letter-spacing: -.005em; text-wrap: balance; }
.hero-pair p::before { content: ''; position: absolute; top: 0; left: 0; width: 2rem; height: 2px; border-radius: 1px; background: var(--teal); }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.home-hero-solo .home-actions { justify-content: center; margin-top: 2rem; }
.text-link { font-size: .9rem; font-weight: 600; }

/* The showcase (hidden since 2026-10-07; its markup waits as a comment in index.html): real screens
   from a sample company, one scene at a time, on a stage that holds the
   tabs inside its border. No script: until a visitor picks a scene, one animation walks the scenes
   and fills each tab from left to right as its timer, a white on teal copy of the label revealed
   until the tab is the site's solid button; picking a tab (a hidden radio, the blueprint's trick)
   stops the walk on that scene. Hover and keyboard focus pause it; reduced motion shows the first. */
.showcase { background: #f4f2e9; border-block: 1px solid var(--border); padding: 2.25rem 0 2rem; }
.sc-panel { position: relative; background: linear-gradient(180deg, #e6f1ed, #f6f9f8); border: 1px solid #cfe0d9; border-radius: 20px; padding: 1.1rem 1.25rem 1.25rem; box-shadow: 0 16px 55px #57493210; }
.sc-radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sc-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.sc-tab { position: relative; overflow: hidden; display: inline-block; padding: .45rem 1.1rem; border: 2px solid var(--teal); border-radius: 8px; background: white; color: var(--teal); font-size: .95rem; font-weight: 700; line-height: 1.2; cursor: pointer; user-select: none; }
.sc-tab:hover { background: var(--teal-soft); color: var(--teal-dark); }
.sc-tab::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--teal); color: white; border-radius: 6px; clip-path: inset(0 100% 0 0); }
.sc-stage { display: grid; }
.sc-scene { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; }
.sc-frame { max-width: 1020px; margin: 0 auto; border: 1px solid #d9d2c3; border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 14px 40px #57493214; }
.sc-frame img { display: block; width: 100%; height: auto; }
.showcase .sc-scene figcaption { margin-top: 1rem; font-size: .98rem; }
.sc-scene figcaption strong { color: var(--ink); }
.sc-note { margin-top: .9rem; text-align: center; font-size: .75rem; color: var(--muted); }
@keyframes sc-scene { 0% { opacity: 0; visibility: visible; } 4%, 33.333% { opacity: 1; visibility: visible; } 37.333%, 100% { opacity: 0; visibility: hidden; } }
@keyframes sc-fill { 0% { clip-path: inset(0 100% 0 0); } 33.333% { clip-path: inset(0 0 0 0); } 33.334%, 100% { clip-path: inset(0 100% 0 0); } }
.sc-scene { animation: sc-scene 21s infinite; }
.sc-tab::after { animation: sc-fill 21s linear infinite; }
/* Seven seconds a scene, each fading in as the one before fades out; the first starts already in. */
.sc-technology, .sc-tab-technology::after { animation-delay: -.84s; }
.sc-organization, .sc-tab-organization::after { animation-delay: -14.84s; }
.sc-blueprint, .sc-tab-blueprint::after { animation-delay: -7.84s; }
.showcase:hover .sc-scene, .showcase:hover .sc-tab::after, .showcase:focus-within .sc-scene, .showcase:focus-within .sc-tab::after { animation-play-state: paused; }
.sc-radio:checked ~ .sc-stage .sc-scene { animation: none; opacity: 0; visibility: hidden; }
.sc-radio:checked ~ .sc-tabs .sc-tab::after { animation: none; clip-path: inset(0 100% 0 0); }
#sc-technology:checked ~ .sc-stage .sc-technology, #sc-organization:checked ~ .sc-stage .sc-organization, #sc-blueprint:checked ~ .sc-stage .sc-blueprint { opacity: 1; visibility: visible; }
#sc-technology:checked ~ .sc-tabs .sc-tab-technology::after, #sc-organization:checked ~ .sc-tabs .sc-tab-organization::after, #sc-blueprint:checked ~ .sc-tabs .sc-tab-blueprint::after { clip-path: inset(0); }
#sc-technology:focus-visible ~ .sc-tabs .sc-tab-technology, #sc-organization:focus-visible ~ .sc-tabs .sc-tab-organization, #sc-blueprint:focus-visible ~ .sc-tabs .sc-tab-blueprint { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sc-scene, .sc-tab::after { animation: none; }
  .sc-technology { opacity: 1; visibility: visible; }
  .sc-tab-technology::after { clip-path: inset(0); }
}
/* A whole screen is too small to read on a phone, so each scene shows its busiest corner at half size. */
@media (max-width: 600px) {
  .showcase { padding: 1.5rem 0 1.75rem; }
  .sc-panel { padding: .75rem; border-radius: 14px; }
  .sc-tabs { gap: .4rem; margin-bottom: .85rem; }
  .sc-tab { padding: .4rem .7rem; font-size: .82rem; }
  .sc-frame { position: relative; aspect-ratio: 3 / 2; }
  .sc-frame img { position: absolute; top: 0; left: 0; width: 238.8%; max-width: none; transform: translate(calc(var(--sc-x) * -1), calc(var(--sc-y) * -1)); }
  .sc-technology { --sc-x: 23.1%; --sc-y: 16.7%; }
  .sc-organization { --sc-x: 25.9%; --sc-y: 16.7%; }
  .sc-blueprint { --sc-x: 12.8%; --sc-y: 53.4%; }
}

/* The blueprint: pure CSS, radios drive which thread lights, no script. */
.feature-row.feature-blueprint { grid-template-columns: 2fr 3fr; gap: 3.5rem; }
.feature-row.feature-blueprint.feature-reverse { grid-template-columns: 3fr 2fr; }
.feature-blueprint .feature-copy h2 { max-width: 15ch; }
/* The seven questions as a frame, and the journey's numbered steps. */
.frame-questions { padding: 1.1rem 1.4rem 1.3rem; }
.frame-questions .questions { margin: 0; gap: .75rem; }
.frame-questions .questions li { font-size: .86rem; }
.proof-list.steps { counter-reset: step; }
.proof-list.steps li { padding-left: 2rem; }
.proof-list.steps li::before { counter-increment: step; content: counter(step); top: .05rem; width: 1.35rem; height: 1.35rem; background: var(--teal-soft); color: var(--teal-dark); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.bp { position: relative; }
.bp-stage { padding: 1.1rem 1.2rem .9rem; }
.bp-board { position: relative; display: grid; grid-template-columns: 31% 29% 31%; justify-content: space-between; min-height: 330px; }
.bp-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bp-wires path { fill: none; stroke: #d9d3c4; stroke-width: 2; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; transition: stroke .2s ease; }
.bp-col { display: flex; flex-direction: column; }
.bp-col-head { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.bp-col-apps .bp-app { position: absolute; left: 0; width: 31%; transform: translateY(-50%); }
#l-sf { top: 18%; }
#l-hs { top: 50%; }
#l-m365 { top: 82%; }
.bp-col-teams .bp-node, .bp-col-work .bp-node { position: absolute; width: 29%; transform: translateY(-50%); }
.bp-col-teams .bp-node { left: 35.5%; }
.bp-col-work .bp-node { width: 31%; right: 0; }
#t-sales { top: 30%; }
#t-support { top: 70%; }
#w-winning { top: 30%; }
#w-supporting { top: 70%; }
.bp-card { display: block; background: #fffcf6; border: 1.4px solid #d1dcd1; border-radius: 10px; padding: .6rem .8rem; font-size: .84rem; line-height: 1.35; transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.bp-name { display: block; font-weight: 700; color: var(--ink); }
.bp-sub { display: block; color: var(--muted); font-size: .73rem; margin-top: .15rem; }
.bp-app, .bp-work { cursor: pointer; }
.bp-app:hover, .bp-work:hover { border-color: var(--teal); }
.bp-node { opacity: .45; }
.bp-work { opacity: .8; }
.bp-work:hover { opacity: 1; }
#bp-sf:checked ~ .bp-stage .p-sf-sales, #bp-sf:checked ~ .bp-stage .p-sf-support,
#bp-sf:checked ~ .bp-stage .p-sales-winning, #bp-sf:checked ~ .bp-stage .p-support-supporting,
#bp-hs:checked ~ .bp-stage .p-hs-sales, #bp-hs:checked ~ .bp-stage .p-sales-winning,
#bp-m365:checked ~ .bp-stage .p-m365-support, #bp-m365:checked ~ .bp-stage .p-support-supporting,
#bp-winning:checked ~ .bp-stage .p-sf-sales, #bp-winning:checked ~ .bp-stage .p-hs-sales, #bp-winning:checked ~ .bp-stage .p-sales-winning,
#bp-supporting:checked ~ .bp-stage .p-sf-support, #bp-supporting:checked ~ .bp-stage .p-m365-support, #bp-supporting:checked ~ .bp-stage .p-support-supporting {
  stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 6 4;
}
@media (prefers-reduced-motion: no-preference) {
  #bp-sf:checked ~ .bp-stage .p-sf-sales, #bp-sf:checked ~ .bp-stage .p-sf-support,
  #bp-sf:checked ~ .bp-stage .p-sales-winning, #bp-sf:checked ~ .bp-stage .p-support-supporting,
  #bp-hs:checked ~ .bp-stage .p-hs-sales, #bp-hs:checked ~ .bp-stage .p-sales-winning,
  #bp-m365:checked ~ .bp-stage .p-m365-support, #bp-m365:checked ~ .bp-stage .p-support-supporting,
  #bp-winning:checked ~ .bp-stage .p-sf-sales, #bp-winning:checked ~ .bp-stage .p-hs-sales, #bp-winning:checked ~ .bp-stage .p-sales-winning,
  #bp-supporting:checked ~ .bp-stage .p-sf-support, #bp-supporting:checked ~ .bp-stage .p-m365-support, #bp-supporting:checked ~ .bp-stage .p-support-supporting {
    animation: bpcrawl 1.2s linear infinite;
  }
  @keyframes bpcrawl { to { stroke-dashoffset: -10; } }
}
#bp-sf:checked ~ .bp-stage #l-sf, #bp-sf:checked ~ .bp-stage #t-sales, #bp-sf:checked ~ .bp-stage #t-support,
#bp-sf:checked ~ .bp-stage #w-winning, #bp-sf:checked ~ .bp-stage #w-supporting,
#bp-hs:checked ~ .bp-stage #l-hs, #bp-hs:checked ~ .bp-stage #t-sales, #bp-hs:checked ~ .bp-stage #w-winning,
#bp-m365:checked ~ .bp-stage #l-m365, #bp-m365:checked ~ .bp-stage #t-support, #bp-m365:checked ~ .bp-stage #w-supporting,
#bp-winning:checked ~ .bp-stage #l-sf, #bp-winning:checked ~ .bp-stage #l-hs, #bp-winning:checked ~ .bp-stage #t-sales, #bp-winning:checked ~ .bp-stage #w-winning,
#bp-supporting:checked ~ .bp-stage #l-sf, #bp-supporting:checked ~ .bp-stage #l-m365, #bp-supporting:checked ~ .bp-stage #t-support, #bp-supporting:checked ~ .bp-stage #w-supporting {
  opacity: 1; border-color: var(--teal);
}
#bp-sf:checked ~ .bp-stage #l-sf, #bp-hs:checked ~ .bp-stage #l-hs, #bp-m365:checked ~ .bp-stage #l-m365,
#bp-winning:checked ~ .bp-stage #w-winning, #bp-supporting:checked ~ .bp-stage #w-supporting {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}
#bp-sf:focus-visible ~ .bp-stage #l-sf, #bp-hs:focus-visible ~ .bp-stage #l-hs, #bp-m365:focus-visible ~ .bp-stage #l-m365,
#bp-winning:focus-visible ~ .bp-stage #w-winning, #bp-supporting:focus-visible ~ .bp-stage #w-supporting {
  outline: 3px solid var(--teal); outline-offset: 3px;
}

/* Under the board: the thread you picked. */
.bp-caps { margin: 0 1.2rem; padding: .9rem 0 1.1rem; border-top: 1px dashed var(--border); }
.bp-caps::before { content: 'The thread you picked'; display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.bp-cap { display: none; color: var(--ink); font-size: .88rem; line-height: 1.5; }
#bp-sf:checked ~ .bp-caps .bp-cap-sf, #bp-hs:checked ~ .bp-caps .bp-cap-hs, #bp-m365:checked ~ .bp-caps .bp-cap-m365,
#bp-winning:checked ~ .bp-caps .bp-cap-winning, #bp-supporting:checked ~ .bp-caps .bp-cap-supporting { display: block; }
.advisor-label { color: var(--teal-dark); font-size: .78rem; font-weight: 700; }

/* Under the hero: the four things the page will prove, in the order it proves them. */
.understand { background: #f4f2e9; border-block: 1px solid var(--border); padding: 1.6rem 0 1.7rem; text-align: center; }
.understand-lead { margin: 0 0 .85rem; font-size: .95rem; font-weight: 600; color: var(--ink); }
.understand-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2.75rem; font-size: 1rem; font-weight: 600; color: var(--ink); }
.understand-list li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: .6rem; vertical-align: 1px; }
/* Bold led proof: a result, then one sentence. */
.proof-list { list-style: none; display: grid; gap: .85rem; margin: 1.5rem 0; font-size: .94rem; line-height: 1.5; color: var(--muted); }
.proof-list li { position: relative; padding-left: 1.3rem; }
.proof-list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.proof-list strong { color: var(--ink); }
/* The map of what the business does: areas of work, the jobs inside, the systems each runs on. */
.bizmap { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; padding: 1.1rem 1.2rem 1.3rem; }
.bizmap-group { border: 1px solid var(--border); border-radius: 12px; padding: .8rem .85rem .9rem; background: var(--surface-warm); }
.bizmap-area { margin: 0 0 .55rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); }
.bizmap-fn { background: white; border: 1px solid #e3dccd; border-radius: 9px; padding: .55rem .7rem .6rem; font-size: .84rem; font-weight: 600; color: var(--ink); }
.bizmap-fn + .bizmap-fn { margin-top: .5rem; }
.bizmap-health { float: right; margin-left: .4rem; font-size: .64rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; }
.bizmap-health.good { color: #1f6b3b; background: #e4f2e8; }
.bizmap-health.warn { color: #8a5a00; background: #fbefd6; }
.bizmap-apps { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.bizmap-app { font-size: .7rem; font-weight: 600; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; padding: .15rem .55rem; }
.feature-visual .product-frame + .product-frame { margin-top: 1.1rem; }

/* Feature rows: copy and illustration, alternating. */
.feature-section { padding: 4rem 0; }
.feature-tinted { background: #f4f2e9; border-block: 1px solid var(--border); }
.feature-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: center; }
.feature-reverse { grid-template-columns: 1.1fr .9fr; }
.feature-reverse .feature-copy { order: 2; }
.feature-copy h2 { font-size: clamp(2rem, 3.1vw, 2.75rem); max-width: 17ch; line-height: 1.12; letter-spacing: -.035em; margin-bottom: 1.2rem; text-wrap: initial; }
.feature-copy > p:not(.kicker) { color: var(--muted); font-size: 1rem; }
.benefit-list { list-style: none; display: grid; gap: .75rem; margin: 1.65rem 0; font-size: .94rem; }
.benefit-list li { position: relative; padding-left: 1.5rem; }
.benefit-list li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.feature-copy p.feature-note { font-size: .85rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.feature-visual { min-width: 0; }

/* Product frames: the illustration language. */
.product-frame { background: white; border: 1px solid #e3ddcf; border-radius: 14px; box-shadow: 0 14px 38px #5749320c; overflow: hidden; }
.frame-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid #eee9e0; font-size: .83rem; font-weight: 600; }
.status-chip { border: 1px solid #e4e7dc; border-radius: 20px; background: #f5f7f0; color: #466451; font-size: .7rem; padding: .2rem .5rem; white-space: nowrap; font-weight: 400; }
.spend-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem 1.4rem; }
.small-label { display: block; color: var(--muted); font-size: .75rem; }
.spend-summary strong { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -.035em; }
.spend-summary strong span { font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.renewal-note { font-size: .75rem; color: var(--muted); border-left: 1px solid var(--border); padding-left: 1rem; }
.renewal-note strong { font-size: .83rem; color: var(--ink); letter-spacing: 0; margin-top: .2rem; }
.portfolio-table-wrap { padding: 0 1.4rem; }
.portfolio-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.portfolio-table th, .portfolio-table td { padding: .95rem 0; text-align: left; border-bottom: 1px solid #eee9e0; }
.portfolio-table thead th { color: var(--muted); font-size: .75rem; font-weight: 400; padding-block: .5rem; }
.portfolio-table tbody th { font-weight: 600; }
.portfolio-table th:last-child, .portfolio-table td:last-child { text-align: right; }
.portfolio-table td { color: var(--muted); }
.app-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; margin-right: .6rem; font-size: .75rem; }
.icon-crm { background: #e4efee; color: #17665e; }
.icon-support { background: #ece6f4; color: #735688; }
.icon-team { background: #e8edf5; color: #4b6588; }
.icon-books { background: #f6eddc; color: #846329; }
.frame-insight { display: flex; gap: .7rem; padding: 1rem 1.4rem; margin: 1rem; background: #f7f5ef; border-radius: 8px; color: var(--muted); font-size: .75rem; }
.frame-insight > span { color: var(--teal); font-size: 1.3rem; }
.frame-insight strong { display: block; color: var(--ink); }
.project-question { margin: 1.2rem; padding: 1rem; background: #f3f2e9; border-radius: 10px; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.decision-content { padding: .2rem 1.5rem 1.5rem; }
.decision-content h3 { font-size: 1.1rem; line-height: 1.35; margin: .75rem 0 .5rem; }
.decision-content > p:not(.advisor-label) { color: var(--muted); font-size: .8rem; }
.decision-facts { margin-top: 1.1rem; font-size: .75rem; }
.decision-facts > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: .6rem; padding: .65rem 0; border-top: 1px solid #eee9e0; }
.decision-facts dt { color: var(--muted); }
.decision-facts dd { font-weight: 600; }
.decision-next { display: grid; gap: .2rem; font-size: .76rem; padding: .9rem 1rem; background: var(--teal-soft); border-radius: 8px; margin-top: 1rem; color: var(--teal-dark); }

/* What could be affected: the focus, an arrow, the applications the change reaches. */
.impact-board { display: grid; grid-template-columns: 1fr 34px 1fr; gap: .75rem; align-items: center; padding: 1.25rem 1.4rem .5rem; }
.impact-card { border: 1.4px solid #d1dcd1; border-radius: 10px; background: #fffcf6; padding: .75rem .9rem; font-size: .82rem; line-height: 1.4; }
.impact-card strong { display: block; font-size: .95rem; }
.impact-card .rel { color: var(--teal-dark); font-size: .78rem; margin-top: .15rem; }
.impact-card .carries { color: var(--muted); font-size: .75rem; margin-top: .35rem; }
.impact-focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); }
.impact-hops { display: grid; gap: .75rem; }
.impact-arrow { color: #82a9a0; font-size: 1.4rem; text-align: center; }
.impact-check { border-style: dashed; }
.impact-chip { display: inline-block; font-size: .68rem; border-radius: 20px; padding: .1rem .5rem; margin-top: .35rem; background: var(--teal-soft); color: var(--teal-dark); }
.impact-check .impact-chip { background: #f6eddc; color: #846329; }
.impact-unknowns { margin: .75rem 1.4rem 1.4rem; padding: .8rem 1rem; background: #f7f5ef; border-radius: 8px; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.impact-unknowns strong { color: var(--ink); }

/* The planning band, the FAQ, the closing call. */
.planning-section { background: #173d36; color: #fffcf6; padding: 4rem 0; }
.planning-heading { max-width: 650px; }
.planning-section .kicker { color: #bcd4c2; }
.planning-heading h2 { font-size: clamp(2rem, 3.1vw, 2.75rem); letter-spacing: -.025em; }
.planning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin: 3rem 0; }
.planning-number { display: block; font-size: .75rem; color: #bcd4c2; margin-bottom: .7rem; }
.planning-grid h3 { font-size: 1.08rem; }
.planning-grid p { color: #d0ded5; font-size: .9rem; line-height: 1.6; }
.change-timeline { padding-top: 1.75rem; border-top: 1px solid #49675b; }
.change-timeline ol { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.change-timeline li { border-top: 1px solid #87a698; padding: 1.2rem 1rem 0 0; position: relative; }
.change-timeline li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: #c3dcca; border-radius: 50%; }
.change-timeline span { font-size: .75rem; color: #bcd4c2; }
.change-timeline strong { display: block; font-size: .86rem; margin: .2rem 0; }
.change-timeline p { font-size: .76rem; color: #d0ded5; }
.home-page .change-timeline figcaption { color: #bcd4c2; text-align: left; margin-top: 1.6rem; }
.home-faq { padding: 5rem 0 4rem; }
.home-faq h2 { text-align: center; font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: -.03em; margin-bottom: 2rem; }
.home-page .faq summary::after { color: var(--teal); }
.home-cta { padding-top: 5rem; padding-bottom: 6rem; text-align: center; border-top: 1px solid var(--border); }
.home-cta h2 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.03em; }
.home-cta > p:not(.kicker) { color: var(--muted); margin: 1.2rem 0 1.8rem; font-size: 1rem; }
.home-cta p.cta-note { font-size: .75rem; margin: .7rem 0 0; }

@media (max-width: 1000px) {
  .feature-row { gap: 2.5rem; }
  .home-actions { gap: .8rem; }
  .home-actions .btn { padding-inline: 1rem; }
}
@media (max-width: 760px) {
  .home-page .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .home-page .site-header { position: static; }
  .home-hero-solo { padding-top: 2.5rem; padding-bottom: 2rem; }
  .home-hero-solo h1 { font-size: clamp(2.2rem, 8.6vw, 3.6rem); }
  .home-hero-solo h1 br.br-narrow { display: inline; }
  .home-hero-solo h1 br.br-wide { display: none; }
  .hero-promise br.br-narrow { display: inline; }
  .hero-pair { grid-template-columns: minmax(0, 34rem); gap: 1.1rem; margin-top: 1.5rem; }
  .hero-band { background-size: 1000px auto; }
  .bp-board { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
  .bp-wires { display: none; }
  .bp-col { gap: .5rem; }
  .bp-col-head { margin-top: .6rem; text-align: left; }
  .bp-col-apps .bp-app, .bp-col-teams .bp-node, .bp-col-work .bp-node { position: static; width: 100%; transform: none; }
  .bp-caps { margin: 0 1rem; }
  .understand-list { gap: .45rem 1.6rem; }
  .feature-section { padding: 2.5rem 0; }
  .feature-row, .feature-reverse, .feature-row.feature-blueprint { grid-template-columns: 1fr; gap: 2rem; }
  .feature-reverse .feature-copy { order: initial; }
  .feature-copy h2 { max-width: 22ch; }
  .feature-visual { width: 100%; max-width: 580px; justify-self: center; }
  .impact-board { grid-template-columns: 1fr; }
  .impact-arrow { transform: rotate(90deg); }
  .planning-section { padding: 2.75rem 0; }
  .planning-grid { grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
  .planning-number { margin-bottom: .3rem; }
  .change-timeline ol { grid-template-columns: 1fr; }
  .change-timeline li { border-top: 0; border-left: 1px solid #87a698; padding: 0 0 1.5rem 1.2rem; }
  .change-timeline li::before { top: 10px; left: -4px; }
  .change-timeline li:last-child { padding-bottom: 0; }
  .home-faq { padding: 3.5rem 0 2.5rem; }
  .home-cta { padding-block: 3.5rem; }
}
@media (max-width: 600px) {
  .understand-list { flex-direction: column; align-items: flex-start; width: max-content; margin: 0 auto; }
  .bizmap { grid-template-columns: 1fr; padding: .9rem; }
  .node-link { display: none; }
  .hero-nodes { flex-wrap: wrap; gap: .9rem .25rem; }
  .node { width: 7.6rem; }
  .home-actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .home-actions .btn { box-sizing: border-box; width: 100%; text-align: center; }
  .home-actions .text-link { text-align: center; }
}
@media (max-width: 420px) {
  .bp-stage { padding: 1rem; }
  .frame-top { padding: 1rem; font-size: .74rem; gap: .4rem; flex-wrap: wrap; }
  .spend-summary { padding: 1.2rem 1rem; }
  .spend-summary > div:first-child > strong { font-size: 1.7rem; }
  .spend-summary strong span { display: block; }
  .portfolio-table-wrap { padding-inline: 1rem; }
  .portfolio-table { font-size: .75rem; }
  .app-icon { margin-right: .35rem; width: 22px; height: 22px; }
  .frame-insight { padding: .75rem; }
  .decision-content { padding: .2rem 1rem 1rem; }
  .impact-board { padding: 1rem 1rem .5rem; }
  .impact-unknowns { margin: .5rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .node-link line { animation: none; }
  html { scroll-behavior: auto; }
  .home-page .btn { transition: none; }
}