/* ThatsKrispy /brand-infrastructure/, v3, 2026-09-25. Loads after tkheader.css and
   depends on its tokens, .wrap, .sec, .eyebrow, .t-display, .t-h2, .t-h3, .t-body,
   .t-lede, .tk-link, .btn*, .on-dark, .rv and .tkf* form classes. home.css and
   service.css are not loaded on this page, so every page-specific class below is
   defined here, under the "bi-" prefix, even where a similar pattern exists on
   another page. Everything is scoped under body.tk, which this page opts into. */

/* ---------- hero ---------- */
.bi-hero { position: relative; padding: clamp(2.2rem, 5vh, 3.6rem) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.bi-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.2rem, 5vw, 4rem); align-items: stretch; }
@media (max-width: 900px) { .bi-hero-grid { grid-template-columns: 1fr; } }
.bi-hero-punch { margin: 0.4rem 0 0; font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.bi-hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.9rem 0 1.3rem; }
.bi-hero-note { margin: 0; color: var(--gray); font-size: 0.98rem; }
.bi-hero-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; }
.bi-hero-note a:hover { text-decoration-color: currentColor; }

/* ---------- flow diagram: sources converge into one live view, which fans out
   to three outputs. One narrow (<=700px) and one wide SVG, toggled by class,
   both sized to fill the hero's right column like v2's diagram did. ---------- */
.bi-diagram { margin: 0; display: flex; flex-direction: column; height: 100%; }
.bi-diagram-card {
  flex: 1 1 auto; min-height: 420px; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--cream);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) clamp(1rem, 2.4vw, 1.5rem);
}
.bi-diagram-svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.bi-flow-narrow { display: block; }
.bi-flow-wide { display: none; }
@media (min-width: 701px) {
  .bi-flow-narrow { display: none; }
  .bi-flow-wide { display: block; }
}
.bi-node rect { fill: var(--cream); stroke: var(--line); stroke-width: 1.4; }
.bi-node text { font-family: var(--tk-sans); font-weight: 700; fill: var(--ink); }
.bi-node-ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.bi-node--center rect { fill: var(--ink); stroke: var(--ink); }
.bi-node--center text { fill: var(--cream); }
.bi-node-highlight { fill: rgba(255, 255, 255, 0.1); }
.bi-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bi-travel-dot { fill: var(--ink); animation: bi-travel 5.5s linear infinite; }
.bi-travel-dot--red { fill: var(--red); }
@keyframes bi-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .bi-travel-dot { display: none; } }
html[data-a11y-motion="reduced"] .bi-travel-dot { display: none; }
html.nojs .bi-travel-dot { display: none; }
.bi-line--out { opacity: 0; transition: opacity 0.5s var(--ease); }
.bi-diagram.in .bi-line { transition: stroke-dashoffset 0.75s var(--ease); stroke-dashoffset: 0; }
.bi-diagram.in .bi-line.l1 { transition-delay: 0.05s; }
.bi-diagram.in .bi-line.l2 { transition-delay: 0.2s; }
.bi-diagram.in .bi-line.l3 { transition-delay: 0.35s; }
.bi-diagram.in .bi-line.l4 { transition-delay: 0.5s; }
.bi-diagram.in .bi-line--out { transition: opacity 0.5s var(--ease); stroke-dashoffset: 0; }
.bi-diagram.in .bi-line--out.o1 { transition-delay: 0.75s; opacity: 1; }
.bi-diagram.in .bi-line--out.o2 { transition-delay: 0.88s; opacity: 1; }
.bi-diagram.in .bi-line--out.o3 { transition-delay: 1.01s; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bi-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .bi-line--out { opacity: 1 !important; transition: none !important; }
}
html.nojs .bi-line { stroke-dashoffset: 0; }
html.nojs .bi-line--out { opacity: 1; }
.bi-diagram figcaption { margin-top: 1rem; font-size: 0.92rem; color: var(--gray); text-align: center; }

/* small chip row, reused under the hero diagram and in the foundation band */
.bi-chip { font-family: var(--tk-sans); font-size: 0.78rem; font-weight: 600; color: var(--gray); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; white-space: nowrap; }

/* ---------- outcomes, editorial rows (statement wide, detail narrow) ---------- */
.bi-outcomes-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: clamp(1.6rem, 3.4vw, 2.6rem); align-items: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.bi-outcomes-art { margin: 0; border-radius: var(--r-media); overflow: hidden; align-self: stretch; }
.bi-outcomes-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .bi-outcomes-row { grid-template-columns: 1fr; } .bi-outcomes-art { order: 2; aspect-ratio: 1400 / 1045; max-height: 280px; } }
.bi-outcomes { margin-top: 0; border-top: 1px solid var(--line); }
.bi-outcome {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem 2.4rem;
  padding: clamp(1.6rem, 3.4vw, 2.3rem) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.bi-outcome-stat { margin: 0; font-family: var(--tk-sans); font-weight: 900; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.28; color: var(--ink); letter-spacing: -0.01em; }
.bi-outcome-note { margin: 0; color: var(--sub); font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 700px) {
  .bi-outcome { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ---------- the morning view (report-sheet card, reused from v2) ---------- */
.bi-report {
  margin-top: clamp(2rem, 4vw, 2.8rem); background: var(--cream); border-radius: var(--r-media);
  box-shadow: var(--lift); padding: clamp(1.2rem, 3vw, 2rem);
}
.bi-table-wrap { position: relative; overflow-x: auto; border-radius: var(--r-card); }
.bi-table-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 253, 248, 0), var(--cream));
}
.bi-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.bi-table caption { text-align: left; font-size: 0.85rem; color: var(--gray); margin-bottom: 1rem; caption-side: top; }
.bi-table th, .bi-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.95rem; }
.bi-table th { font-family: var(--tk-sans); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); border-bottom: 1px solid var(--ink); }
.bi-table tbody tr:last-child td { border-bottom: 0; }
.bi-table td:first-child { font-weight: 700; color: var(--ink); }
.bi-table td.bi-status { color: var(--gray); }
.bi-table .num { font-variant-numeric: tabular-nums; }

/* ---------- what it looks like: built illustrations, no client references ---------- */
.bi-show-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 1.4rem; align-items: stretch; margin-top: clamp(2rem, 4vw, 2.8rem); }
@media (max-width: 760px) { .bi-show-grid { grid-template-columns: 1fr; } }
.bi-show-stack { display: grid; gap: 1.4rem; }
.bi-illus { margin: 0; display: flex; flex-direction: column; }
.bi-illus figcaption { margin-top: 0.9rem; font-size: 0.88rem; color: var(--dmute); }
.bi-illus-sample {
  position: absolute; top: 0.7rem; right: 0.9rem; margin: 0; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray);
}
.bi-card, .bi-phone-screen { position: relative; }

/* phone mock: rounded rect, ink bezel, radius 32px, no gradients or reflections */
.bi-illus--phone { flex: 1; }
.bi-phone-frame {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--dline); border-radius: 32px; padding: 10px; min-height: 420px;
}
.bi-phone-screen {
  position: relative; width: 100%; max-width: 280px; height: 100%; min-height: 400px;
  background: var(--cream); border-radius: 24px; padding: 1.3rem 1.1rem; overflow: hidden;
  display: flex; flex-direction: column;
}
.bi-phone-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem; }
.bi-phone-today { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.bi-phone-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gray); font-size: 0.92rem; }
.bi-phone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.bi-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; }
.bi-tile .ic { width: 18px; height: 18px; color: var(--gray); margin-bottom: 0.2rem; }
.bi-tile strong { font-family: var(--tk-sans); font-weight: 900; font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bi-tile span { font-size: 0.78rem; color: var(--gray); }
.bi-phone-spark { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); flex: 1; display: flex; flex-direction: column; }
.bi-phone-spark span { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.4rem; }
.bi-spark { width: 100%; height: auto; flex: 1; min-height: 56px; color: var(--ink); }
.bi-spark path { vector-effect: non-scaling-stroke; }

/* live dot: the one red accent, a slow calm pulse */
.bi-live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.bi-live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--red);
  opacity: 0.6; animation: bi-pulse 2.8s ease-out infinite;
}
@keyframes bi-pulse { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bi-live-dot::after { animation: none; opacity: 0; } }
html[data-a11y-motion="reduced"] .bi-live-dot::after { animation: none; opacity: 0; }

/* activity feed and weekly summary: cream cards on the dark band */
.bi-card { background: var(--cream); border-radius: var(--r-card); box-shadow: var(--lift); padding: clamp(1.2rem, 3vw, 1.6rem); flex: 1; }
.bi-feed-rows { display: grid; gap: 0.9rem; }
.bi-feed-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.bi-feed-row .ic { width: 18px; height: 18px; color: var(--gray); flex: none; margin-top: 0.1rem; }
.bi-ic-done { color: #2f7d5b; }
.bi-feed-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.bi-feed-t { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.bi-feed-s { font-size: 0.82rem; color: var(--gray); }
.bi-feed-time { flex: none; font-size: 0.82rem; color: var(--gray); font-variant-numeric: tabular-nums; }
.bi-card-h { margin: 0 0 1rem; font-family: var(--tk-sans); font-weight: 900; font-size: 1.02rem; color: var(--ink); }
.bi-bar-rows { display: grid; gap: 0.9rem; }
.bi-bar-row { display: grid; gap: 0.4rem; }
.bi-bar-row span:first-child { font-size: 0.88rem; color: var(--sub); }
.bi-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bi-bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.bi-card-footer { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--gray); }

/* the morning view: slim status bar + row icons */
.bi-report-bar { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.bi-report-bar-sample { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.bi-row-ic { width: 16px; height: 16px; color: var(--gray); vertical-align: -3px; margin-right: 0.55rem; }

/* foundation chips: small icon inside each chip */
.bi-chip .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 0.4rem; color: var(--gray); }

@media (prefers-reduced-motion: reduce) {
  .bi-feed-row { opacity: 1 !important; transform: none !important; }
}

/* ---------- how we get you there (five rows, light band) ---------- */
.bi-process-rows { display: grid; border-top: 1px solid var(--line); margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.bi-process-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1.2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.bi-process-row h3 { margin: 0; font-family: var(--tk-sans); font-weight: 900; font-size: 1.1rem; color: var(--ink); }
.bi-process-row p { margin: 0; color: var(--sub); max-width: 44em; }
@media (max-width: 560px) { .bi-process-row { grid-template-columns: 1fr; gap: 0.35rem; } }
.bi-process-cta { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- the foundation (compact chip band) ---------- */
.bi-foundation-line { margin: 0.6rem 0 0; color: var(--sub); }
.bi-foundation-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin-top: clamp(1.4rem, 3vw, 1.9rem); }

/* ---------- who runs it ---------- */
.bi-who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2.2rem, 5vw, 4rem); align-items: center; margin-top: clamp(1.8rem, 4vw, 2.4rem); }
@media (max-width: 860px) { .bi-who-grid { grid-template-columns: 1fr; } }
.bi-who-copy p { margin: 0 0 1.2rem; color: var(--sub); max-width: 46em; }
.bi-who-copy p:last-of-type { margin-bottom: 1.6rem; }
.bi-who-photo { margin: 0; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 3; }
.bi-who-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- where it fits ---------- */
.bi-fits { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.bi-fit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.4rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.bi-fit p { margin: 0; font-size: 1.02rem; color: var(--ink); font-weight: 700; }

/* ---------- FAQ (same pattern as the homepage FAQ, restated here since home.css is not loaded) ---------- */
.bi-faq { max-width: 820px; margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.bi-faq details { border-top: 1px solid var(--line); }
.bi-faq details:last-child { border-bottom: 1px solid var(--line); }
.bi-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; font-family: var(--tk-sans); font-weight: 700; font-size: 1.08rem;
  color: var(--ink); cursor: pointer; list-style: none;
}
.bi-faq summary::-webkit-details-marker { display: none; }
.bi-faq summary::after { content: "+"; font-weight: 500; font-size: 1.5rem; color: var(--red); transition: transform 0.3s var(--ease); line-height: 1; flex: none; }
.bi-faq details[open] summary::after { transform: rotate(45deg); }
.bi-faq details p { margin: 0 0 1.3rem; color: var(--sub); max-width: 42em; }

/* ---------- closing band with the form ---------- */
.bi-scope-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 2.8rem); align-items: start; }
@media (max-width: 860px) { .bi-scope-grid { grid-template-columns: 1fr; } }
.bi-scope-aside { display: grid; gap: 1.4rem; padding-top: 0.3rem; }
.bi-scope-aside p { margin: 0; }
.bi-phone-lg { font-size: 1.3rem; font-weight: 900; color: var(--cream); }
.bi-phone-lg a { color: inherit; }