/* Hallmark · macrostructure: Bento Grid · theme: studied-DNA (Z Fit), results + process.
   E4 real screenshots without device chrome. Existing fonts, header and footer retained. */
/* Audience: development/SEO prospects; action: discuss a project; tone: visual portfolio.
   Pre-emit critique: P4 H5 E4 S5 R4 V5. No invented results or generated interface imagery. */
.tc-page {
  --tc-paper: var(--background);
  --tc-ink: var(--foreground);
  --tc-quiet: var(--secondary-foreground);
  --tc-rule: var(--border);
  --tc-surface: var(--muted);
  --tc-project-blue: #7c99cf;
  --tc-chart-blue: #6f8fc7;
  --tc-accent: var(--tc-project-blue);
  --tc-accent-ink: var(--background);
  --tc-focus: #0064ff;
  --tc-overlay: rgb(0 0 0 / .75);
  --tc-stage-bg: oklch(24% 0.015 254);
  --tc-stage-soft: oklch(84% 0.015 254);
  --tc-scene-bg: oklch(95% 0.012 254);
  --tc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tc-z-base: 1;
  --tc-z-raised: 10;
  --tc-gap: 1rem;
  --tc-radius: 0.5rem;
  color: var(--tc-ink);
  background: var(--tc-paper);
  padding-block: 0;
  font-family: var(--font-sans), sans-serif;
  line-height: 1.5;
}
/* Use the same content edges and section rhythm as .container and .site-main.
   Gallery-internal spacing stays local to the galleries. */
.tc-page, .tc-site-widgets {
  --tc-container-gutter: .625rem;
  --tc-section-space: 5rem;
  --tc-footer-space: 6.25rem;
}
@media (min-width: 48rem) {
  .tc-page, .tc-site-widgets { --tc-container-gutter: 1rem; }
}
@media (min-width: 49.75rem) {
  .tc-page, .tc-site-widgets { --tc-section-space: 7.5rem; --tc-footer-space: 7.5rem; }
}
@media (min-width: 64rem) {
  .tc-page, .tc-site-widgets { --tc-section-space: 10rem; --tc-footer-space: 10rem; }
}
@media (min-width: 80rem) {
  .tc-page, .tc-site-widgets { --tc-container-gutter: 1.75rem; }
}
html:has(.tc-page), body:has(.tc-page) { overflow-x: clip; }
.tc-wrap { width: 100%; max-width: var(--container-8xl); margin-inline: auto; padding-inline: var(--tc-container-gutter); }
.tc-page *, .tc-page *::before, .tc-page *::after { box-sizing: border-box; }
.tc-page :where(p, h1, h2, h3, dl, dd, figure, ol) { margin: 0; white-space: normal; }
.tc-page :where(section, div, figure, aside) { min-width: 0; }
.tc-page [hidden] { display: none !important; }
.tc-page :where(button, a, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--tc-focus); outline-offset: 4px; }
/* Page and section titles use the site's shared typography and breakpoints. */
.tc-page :where(h1, h2, h3):not(:where(.tc-native *, .home-team-department__name)) { overflow-wrap: anywhere; }
.tc-page h3:not(:where(.tc-native *, .home-team-department__name)) { font-family: var(--font-sans), sans-serif; font-weight: 400; }
.tc-page h3:not(:where(.tc-native *, .home-team-department__name)) { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; }
/* Match the homepage's compact hero and feature-copy tracking. Keep the shared
   H2 typography and native widgets unchanged; do not inherit tracking globally. */
.tc-intro-tile h1 { letter-spacing: -0.04em; }
.tc-page :where(
  .tc-section-heading > p,
  .tc-structure-notes p,
  .tc-ui-kit-heading p,
  .tc-ui-collection-heading > p,
  .tc-ui-module figcaption p,
  .tc-account-copy > p:not(.tc-label),
  .tc-account-scenarios li,
  .tc-results-notes > p,
  .tc-brief-tile > p:not(.tc-brief-title)
) { letter-spacing: -0.04em; }
.tc-page a { color: inherit; }
.tc-page button { cursor: pointer; }
.tc-page :where(button, .tc-cta) { -webkit-tap-highlight-color: transparent; }
.tc-page :where(button, .tc-cta):active { transform: translateY(1px); }
.tc-page :where(button[disabled], [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
.tc-page :where(section[id]) { scroll-margin-top: 6rem; }
.tc-label { font: 0.75rem/1.4 var(--font-mono), monospace; color: var(--tc-quiet); letter-spacing: -.03em; text-transform: uppercase; }
.tc-note { color: var(--tc-quiet); font-size: .8125rem; line-height: 1.55; }
.tc-breadcrumbs { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; font: .75rem/1.4 var(--font-mono), monospace; }
.tc-breadcrumbs a { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }
.tc-breadcrumbs > span[aria-hidden] { color: var(--tc-quiet); }
/* Search results and the actual site share the opening screen. */
.tc-hero { background: var(--tc-stage-bg); color: var(--tc-paper); margin-top: .75rem; overflow: clip; }
.tc-hero-header { display: grid; gap: 1.5rem; padding: 1.5rem 1.25rem; }
.tc-hero-brand > p { margin-top: .65rem; font: .75rem/1.5 var(--font-mono), monospace; color: var(--tc-stage-soft); }
.tc-hero-proof { display: grid; gap: 1rem; }
.tc-hero-growth { display: flex; align-items: center; gap: .75rem; }
.tc-hero-growth strong { font: clamp(2.75rem, 5.2vw, 4.5rem)/1 var(--font-display), monospace; letter-spacing: -.03em; white-space: nowrap; }
.tc-hero-growth > span { font-size: 1rem; line-height: 1.35; }
.tc-hero-volume strong { display: block; font: 1.375rem/1.3 var(--font-mono), monospace; letter-spacing: -.04em; white-space: nowrap; }
.tc-hero-volume > p > span { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--tc-stage-soft); }
.tc-hero-period { margin-top: .5rem !important; color: var(--tc-stage-soft); font: .6875rem/1.5 var(--font-mono), monospace; }
.tc-hero-volume a { display: inline-flex; align-items: center; gap: 1rem; min-height: 2.75rem; font: .6875rem/1.5 var(--font-mono), monospace; text-decoration: underline; text-underline-offset: .25rem; white-space: nowrap; }
.tc-stage { padding: 0 1.25rem 1.5rem; }
.tc-stage-main { width: 100%; }
.tc-stage-mobile { display: none; }
.tc-stage-main .tc-image-link { animation: tc-stage-enter 220ms var(--tc-ease-out) both; }
.tc-stage img { display: block; width: 100%; height: auto; }
.tc-hero-bottom { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; padding: 0 1.25rem 1.25rem; font: .6875rem/1.5 var(--font-mono), monospace; }
.tc-hero-bottom > span { color: var(--tc-stage-soft); }
.tc-hero-bottom a { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 2.75rem; white-space: nowrap; }
.tc-project-meta { display: grid; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--tc-rule); }
.tc-project-meta dl { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-project-meta dt { font: .6875rem/1.5 var(--font-mono), monospace; color: var(--tc-quiet); margin-bottom: .4rem; }
.tc-project-meta dd { font-size: .8125rem; line-height: 1.5; }
@keyframes tc-stage-enter { from { opacity: .25; } to { opacity: 1; } }
.tc-heading { display: grid; gap: 1rem; padding-block: 1.5rem 2rem; }
.tc-heading h1 { font-size: 2rem; line-height: 1; letter-spacing: 0; margin-top: .6rem; }
.tc-heading-summary { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -.025em; }
.tc-overview { display: grid; gap: var(--tc-gap); }
.tc-panel { border: 1px solid var(--tc-rule); border-radius: var(--tc-radius); padding: 1.25rem; }
.tc-page .tc-panel-title { font: .8125rem/1.5 var(--font-mono), monospace; letter-spacing: 0; }
.tc-panel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tc-facts dl { display: grid; gap: .9rem; margin-top: 1.2rem; }
.tc-facts dt { font-size: .75rem; color: var(--tc-quiet); margin-bottom: .15rem; }
.tc-facts dd { font-size: .875rem; line-height: 1.4; }
.tc-text-link { display: inline-flex; gap: 1.5rem; align-items: center; min-height: 2.75rem; width: fit-content; max-width: 100%; font: .75rem/1.4 var(--font-mono), monospace; border-bottom: 1px solid currentColor; text-decoration: none; white-space: nowrap; }
.tc-facts > .tc-text-link { margin-top: 1rem; }
.tc-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tc-tabs button, .tc-concept-controls button { min-height: 2.75rem; padding: .65rem .85rem; background: transparent; color: var(--tc-quiet); font: .75rem/1.2 var(--font-mono), monospace; white-space: nowrap; border-radius: .25rem; transition: background-color 120ms var(--tc-ease-out), color 120ms var(--tc-ease-out); }
.tc-tabs button[aria-selected="true"] { background: var(--tc-ink); color: var(--tc-paper); }
.tc-tabs--compact { padding-bottom: .75rem; border-bottom: 1px solid var(--tc-rule); }
.tc-tabs--compact button { flex: 1 1 auto; padding-inline: .5rem; }
.tc-snapshot-body { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; min-height: 15rem; }
.tc-snapshot { order: -1; }
.tc-snapshot-body > p:not([class]) { font-size: .9375rem; line-height: 1.55; }
.tc-snapshot-body .tc-text-link { margin-top: auto; }
.tc-stat { font: clamp(3.5rem, 6vw, 5rem)/1 var(--font-display), monospace; letter-spacing: -.03em; }
.tc-snapshot-title { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.02em; }
.tc-mini-chart { display: flex; flex-direction: column; }
.tc-mini-value { display: flex; align-items: baseline; gap: .75rem; margin-top: 1.1rem; }
.tc-mini-value strong { font: 2.375rem/1.1 var(--font-display), monospace; letter-spacing: -.03em; }
.tc-mini-value > span, .tc-mini-axis { font: .6875rem/1.5 var(--font-mono), monospace; color: var(--tc-quiet); }
.tc-spark { display: block; width: 100%; height: auto; margin-top: .75rem; overflow: visible; }
.tc-mini-axis { display: flex; justify-content: space-between; }
.tc-mini-yoy { font: 1rem/1.4 var(--font-mono), monospace; margin-top: auto !important; padding-top: 1.5rem; }
.tc-mini-yoy span { display: block; color: var(--tc-quiet); font: .75rem/1.5 var(--font-sans), sans-serif; }
.tc-chart-line { stroke: var(--tc-chart-blue); stroke-width: 3; fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tc-chart-dot { fill: var(--tc-paper); stroke: var(--tc-chart-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tc-cover { margin-top: var(--tc-gap) !important; padding: .75rem; border: 1px solid var(--tc-rule); border-radius: var(--tc-radius); background: var(--tc-surface); color: var(--tc-ink); }
.tc-image-link { position: relative; display: block; width: 100%; text-decoration: none; }
.tc-image-link img { display: block; width: 100%; height: auto; }
.tc-image-hint { position: absolute; inset: auto .75rem .75rem auto; padding: .5rem .65rem; background: var(--tc-ink); color: var(--tc-paper); font: .6875rem/1.3 var(--font-mono), monospace; white-space: nowrap; border: 1px solid var(--tc-paper); }
.tc-cover figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .75rem .25rem 0; font-size: .75rem; color: var(--tc-quiet); }
.tc-section { padding-top: var(--tc-section-space); }
.tc-section-heading { margin-bottom: 2rem; }
.tc-section-heading h2 { margin-top: .9rem; text-transform: uppercase; }
.tc-section-heading > p:last-child:not(:first-child) { max-width: 38rem; margin-top: 1.25rem; color: var(--tc-quiet); font-family: var(--font-mono), monospace; font-size: 1rem; line-height: 1.4; }
.tc-start-grid { display: grid; gap: var(--tc-gap); }
.tc-start-before, .tc-start-after { position: relative; padding: clamp(1.5rem, 3.5vw, 3rem); border-radius: var(--tc-radius); min-height: 19rem; }
.tc-start-before { background: var(--tc-ink); color: var(--tc-paper); }
.tc-start-before .tc-label { color: var(--tc-paper); opacity: .7; }
.tc-start-before h3, .tc-start-after h3 { margin: 1.5rem 0 1rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.tc-start-before p, .tc-start-after p { max-width: 30rem; font-size: .9375rem; }
.tc-start-before p { padding-bottom: 2.5rem; }
.tc-start-after { background: var(--tc-surface); color: var(--tc-ink); border: 1px solid var(--tc-rule); }
.tc-start-arrow { position: absolute; right: 1.5rem; bottom: .75rem; font-size: 3rem; font-family: var(--font-mono), monospace; }
.tc-date { display: flex; flex-direction: column; gap: .2rem; margin-top: 1.75rem !important; font-family: var(--font-mono), monospace; }
.tc-date span { font: .75rem/1.5 var(--font-sans), sans-serif; color: var(--tc-quiet); }
.tc-workbench { border: 1px solid var(--tc-rule); border-radius: var(--tc-radius); }
.tc-page .tc-workbench { border: 0; border-radius: 0; }
.tc-page .tc-process-tabs { padding: 0 0 1rem; gap: .5rem; border: 0; }
.tc-page .tc-process-tabs button { border-radius: 0; padding-inline: 1.5rem; border: 1px solid var(--tc-rule); }
.tc-page .tc-process-panel { background: var(--tc-surface); color: var(--tc-ink); }
.tc-page .tc-canvas { background: var(--tc-stage-bg); color: var(--tc-paper); }
.tc-page [data-tc-concepts] { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 1rem; }
.tc-page .tc-concept-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; order: 1; margin: 0; }
.tc-page .tc-concept-controls button { display: grid; gap: .5rem; padding: .5rem; min-width: 0; border: 1px solid transparent; border-radius: 0; color: var(--tc-stage-soft); background: transparent; text-align: left; }
.tc-page .tc-concept-controls button img { display: block; width: 100%; height: auto; opacity: .55; transition: opacity 150ms var(--tc-ease-out); }
.tc-page .tc-concept-controls button[aria-pressed="true"] { border-color: var(--tc-paper); color: var(--tc-paper); background: transparent; }
.tc-page .tc-concept-controls button[aria-pressed="true"] img { opacity: 1; }
.tc-page .tc-concept-controls button[aria-pressed="true"] span::after { content: ' / выбран'; }
.tc-page .tc-concept-controls button span { font-size: .625rem; line-height: 1.4; white-space: nowrap; }
.tc-page .tc-process-notes { border: 0; }
.tc-page .tc-process-notes p { font-size: 1rem; }
.tc-page .tc-process-notes .tc-label { display: none; }
.tc-page .tc-process-notes h3 { margin-top: 0; }
.tc-page .tc-start-before, .tc-page .tc-start-after { border-radius: 0; }
.tc-showcase { margin-top: var(--tc-section-space); padding: 2rem 1rem; background: var(--tc-scene-bg); color: var(--tc-ink); }
.tc-showcase .tc-section-heading { padding-inline: .25rem; }
.tc-screen-pair { display: grid; gap: 2rem; align-items: start; }
.tc-screen-pair figcaption { margin-top: 1rem; font: .6875rem/1.5 var(--font-mono), monospace; color: var(--tc-quiet); }
.tc-screen-narrow { width: min(100%, 20rem); justify-self: center; }
.tc-screen-disclaimer { margin-top: 2rem !important; font-size: .75rem; line-height: 1.6; color: var(--tc-quiet); max-width: 55rem; }
.tc-process-tabs { padding: .75rem; border-bottom: 1px solid var(--tc-rule); }
.tc-process-panel { display: grid; }
.tc-canvas { background: var(--tc-surface); color: var(--tc-ink); padding: 1rem; align-content: start; }
.tc-concept-controls { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
.tc-concept-controls button { padding-inline: .5rem; font-size: .6875rem; border: 1px solid transparent; }
.tc-concept-controls button[aria-pressed="true"] { border-color: var(--tc-ink); color: var(--tc-ink); background: var(--tc-paper); }
.tc-process-notes { padding: 1.5rem; }
.tc-process-notes h3 { margin: 1.5rem 0 1rem; }
.tc-process-notes p { margin-top: 1rem; font-size: .875rem; line-height: 1.6; }
.tc-process-notes p.tc-note { font-size: .75rem; margin-top: 2rem; }
.tc-design-facts { margin-top: 2rem !important; display: grid; gap: 1.25rem; }
.tc-design-facts dt { font: .6875rem/1.5 var(--font-mono), monospace; margin-bottom: .4rem; color: var(--tc-quiet); }
.tc-design-facts dd { font-size: .875rem; }
.tc-blue-swatch { display: inline-block; width: .8rem; height: .8rem; margin-inline-end: .5rem; background: var(--tc-project-blue); }
.tc-canvas--system .tc-image-link { max-width: 32rem; margin-inline: auto; }
.tc-screen-stack { display: grid; gap: 1.5rem; }
.tc-canvas--mobile .tc-image-link { max-width: 20rem; margin-inline: auto; }
.tc-build { display: grid; gap: 1rem; }
.tc-intro { font-size: 1.125rem; line-height: 1.6; max-width: 40rem; }
.tc-work-list { list-style: none; padding: 0; margin-top: 2rem !important; }
.tc-work-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; border-top: 1px solid var(--tc-rule); padding-block: 1.5rem; }
.tc-work-list li > span { padding-top: .2rem; }
.tc-work-list h3 { font-size: 1.25rem; }
.tc-work-list p { color: var(--tc-quiet); font-size: .875rem; line-height: 1.6; margin-top: .65rem; }
.tc-results-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; margin-bottom: 2rem; }
.tc-results-summary > div { display: flex; flex-direction: column; gap: .25rem; }
.tc-results-summary strong { font: clamp(2rem, 4.8vw, 3.75rem)/1.2 var(--font-display), monospace; letter-spacing: -.03em; white-space: nowrap; }
.tc-results-summary > div > span:last-child { font: .75rem/1.4 var(--font-mono), monospace; letter-spacing: -.03em; color: var(--tc-quiet); }
.tc-results-arrow { font-size: 1.5rem; }
.tc-results-summary .tc-result-growth { grid-column: 1/-1; padding-top: 1rem; margin-top: .75rem; border-top: 1px solid var(--tc-rule); }
.tc-result-growth strong { color: var(--tc-accent); }
.tc-chart { padding: 1.5rem 0 1rem; border-block: 1px solid var(--tc-rule); }
.tc-chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: 1.25rem; }
.tc-chart-top .tc-label { color: var(--tc-ink); }
.tc-chart-period { font: .75rem/1.4 var(--font-mono), monospace; color: var(--tc-quiet); }
.tc-chart-plot { position: relative; margin: 1.5rem .25rem 0 3rem; height: clamp(12rem, 25vw, 20rem); }
.tc-chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tc-chart-y { position: absolute; inset: 0 auto 0 -3rem; width: 2.5rem; }
.tc-chart-y span { position: absolute; right: 0; transform: translateY(-50%); font: .6875rem/1 var(--font-mono), monospace; color: var(--tc-quiet); white-space: nowrap; }
.tc-chart-x { position: relative; height: 1.5rem; margin: 1rem .25rem 0 3rem; }
.tc-chart-x span { position: absolute; transform: translateX(-50%); font: .6875rem/1 var(--font-mono), monospace; color: var(--tc-quiet); white-space: nowrap; }
.tc-chart-x span:first-child { transform: none; }
.tc-chart-x span:last-child { transform: translateX(-100%); }
.tc-chart-x span:nth-child(2), .tc-chart-x span:nth-child(4) { display: none; }
.tc-chart-grid { stroke: var(--tc-rule); stroke-width: 1; opacity: .8; }
.tc-chart-start-marker { position: absolute; z-index: var(--tc-z-raised); left: var(--tc-chart-start-x); top: var(--tc-chart-start-y); width: .75rem; height: .75rem; border: 3px solid var(--tc-chart-blue); border-radius: 50%; background: var(--tc-paper); box-shadow: 0 0 0 3px var(--tc-paper); transform: translate(-50%, -50%); }
.tc-chart-start-marker > span { position: absolute; left: 50%; bottom: calc(100% + .625rem); padding: .25rem .375rem; background: var(--tc-ink); color: var(--tc-paper); transform: translateX(-50%); font: .625rem/1.2 var(--font-mono), monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tc-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font: .75rem/1.4 var(--font-mono), monospace; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tc-rule); color: var(--tc-quiet); }
.tc-launch-key::before { content: ''; display: inline-block; height: .75rem; border-left: 2px dashed var(--tc-project-blue); margin-right: .5rem; }
.tc-results-notes { display: grid; gap: 1rem; margin-top: 1.5rem; font-family: var(--font-mono), monospace; }
.tc-results-notes > p:first-child { font-size: .875rem; line-height: 1.45; }
.tc-data { border-block: 1px solid var(--tc-rule); margin-top: 2rem; }
.tc-data summary { padding-block: 1rem; cursor: pointer; font: .875rem/1.5 var(--font-mono), monospace; }
.tc-data table { border-collapse: collapse; width: 100%; max-width: 40rem; font: .875rem/1.4 var(--font-mono), monospace; }
.tc-data caption { text-align: left; font-size: .75rem; padding-bottom: 1rem; color: var(--tc-quiet); }
.tc-data :where(th, td) { border-top: 1px solid var(--tc-rule); padding: .75rem .25rem; font-weight: 400; }
.tc-data th { text-align: left; }
.tc-data td, .tc-data th:last-child { text-align: right; font-family: var(--font-mono), monospace; }
.tc-table-note { display: block; font-size: .6875rem; color: var(--tc-quiet); }
.tc-outro { display: grid; justify-items: start; gap: 1.5rem; padding-block: var(--tc-section-space); }
.tc-cta { display: inline-flex; gap: 2rem; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; min-height: 3.5rem; background: var(--tc-ink); color: var(--tc-paper) !important; font: .875rem/1.5 var(--font-mono), monospace; text-decoration: none; white-space: nowrap; }
.tc-lightbox { position: fixed; inset: 0; margin: auto; width: min(96vw, 100rem); max-width: none; height: 94dvh; max-height: 94dvh; padding: 0; border: 1px solid var(--tc-rule); border-radius: var(--tc-radius); background: var(--tc-paper); color: var(--tc-ink); }
.tc-lightbox[open] { display: flex; flex-direction: column; }
.tc-lightbox::backdrop { background: var(--tc-overlay); }
.tc-lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--tc-rule); }
.tc-lightbox-bar p { font: .75rem/1.4 var(--font-mono), monospace; }
.tc-lightbox-bar button { flex: none; min-height: 2.75rem; padding: .5rem; font: .75rem var(--font-mono), monospace; white-space: nowrap; background: var(--tc-ink); color: var(--tc-paper); }
.tc-lightbox-media { overflow: auto; padding: 1rem; background: var(--tc-surface); color: var(--tc-ink); }
.tc-lightbox-media img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.tc-lightbox:not(.tc-lightbox--prototype) .tc-lightbox-media img { max-width: min(100%, var(--tc-image-fit-width, 100%)); }
@media (hover: hover) {
  .tc-page .tc-concept-controls button:hover { background: transparent; color: var(--tc-paper); }
  .tc-page .tc-concept-controls button:hover img { opacity: 1; }
  .tc-hero-volume a:hover { color: var(--tc-stage-soft); }
  .tc-tabs button:not([aria-selected="true"]):hover, .tc-concept-controls button:hover { background: var(--secondary); color: var(--tc-ink); }
  .tc-text-link:hover, .tc-breadcrumbs a:hover { color: var(--tc-accent); }
  .tc-image-link:hover .tc-image-hint { background: var(--tc-paper); color: var(--tc-ink); border-color: var(--tc-ink); }
  .tc-cta:hover { background: var(--tc-quiet); color: var(--tc-paper); }
}
@media (min-width: 40rem) {
  .tc-hero-header { padding: 2rem 2.5rem 1.5rem; }
  .tc-hero-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  .tc-stage { position: relative; height: clamp(20rem, 40vw, 35rem); padding: 0; }
  .tc-stage-main { position: absolute; width: 77%; top: 1rem; left: 4%; transform: none; z-index: var(--tc-z-base); }
  .tc-stage-mobile { display: block; position: absolute; width: 17%; top: 3.5rem; right: 4%; transform: none; z-index: var(--tc-z-raised); }
  .tc-stage-mobile .tc-image-link { animation: tc-stage-enter 220ms var(--tc-ease-out) 120ms both; }
  .tc-stage-mobile .tc-image-hint { display: none; }
  .tc-hero-bottom { position: relative; z-index: var(--tc-z-raised); background: var(--tc-stage-bg); color: var(--tc-paper); padding: 1rem 2.5rem; }
  .tc-project-meta dl { grid-template-columns: .8fr 1.25fr .8fr; }
  .tc-project-meta { grid-template-columns: minmax(0, 1fr); }
  .tc-page [data-tc-concepts] { padding: 2rem; }
  .tc-page .tc-concept-controls { width: 75%; align-self: center; }
  .tc-page .tc-concept-controls button span { font-size: .75rem; }
  .tc-showcase { padding: 3rem 2rem; }
  .tc-screen-pair { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); gap: 1.5rem; padding-top: 1rem; }
  .tc-screen-wide { margin-top: 4rem !important; }
  .tc-screen-narrow { width: 100%; }
  .tc-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block: 1.75rem 2.25rem; }
  .tc-overview { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .tc-snapshot { order: initial; }
  .tc-mini-chart { grid-column: 1/-1; }
  .tc-spark { max-height: 11rem; }
  .tc-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-cover { padding: 1.5rem; }
  .tc-canvas { padding: 1.5rem; }
  .tc-results-summary { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
  .tc-results-summary .tc-result-growth { grid-column: auto; padding: 0 0 0 1.5rem; margin: 0; border-top: 0; border-left: 1px solid var(--tc-rule); }
  .tc-chart { padding: 1.5rem; }
  .tc-chart-x span:nth-child(2), .tc-chart-x span:nth-child(4) { display: block; }
}
@media (min-width: 49.75rem) {
  .tc-heading h1 { font-size: 2.625rem; }
}
@media (min-width: 64rem) {
  .tc-hero-header { grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); align-items: center; gap: 2rem; }
  .tc-project-meta { padding-block: 2rem; }
  .tc-page .tc-process-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); min-height: 0; }
  .tc-page .tc-process-notes { padding: 2rem; }
  .tc-showcase { padding: 4rem; }
  .tc-screen-pair { gap: 2rem; }
  .tc-heading h1 { font-size: var(--page-title-size); }
  .tc-overview { grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.15fr); }
  .tc-mini-chart { grid-column: auto; }
  .tc-snapshot-body { min-height: 15rem; }
  .tc-panel { padding: 1.5rem; }
  .tc-process-panel { grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); min-height: 31rem; }
  .tc-process-notes { border-left: 1px solid var(--tc-rule); padding: 2rem; }
  .tc-build { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4rem; }
  .tc-results-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .tc-page *, .tc-page *::before, .tc-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* The case uses the site's actions, people, milestones, review and final CTA. */
.tc-hero--board { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'proof' 'applications' 'visual' 'launch' 'brief'; gap: 1rem; background: transparent; color: var(--tc-ink); overflow: visible; }
.tc-tile { padding: 1.5rem; }
.tc-applications-tile { grid-area: applications; display: grid; gap: 1.5rem; background: var(--tc-surface); }
.tc-page .tc-applications-title { font: 400 1.5rem/1.25 var(--font-sans), sans-serif; letter-spacing: -.02em; text-transform: none; }
.tc-applications-copy > p { margin-top: .75rem; font: .875rem/1.5 var(--font-mono), monospace; letter-spacing: -.04em; }
.tc-applications-metrics { display: grid; gap: 1.5rem; }
.tc-applications-metrics > div { display: flex; flex-direction: column; gap: .5rem; }
.tc-applications-metrics dt { font: .875rem/1.4 var(--font-mono), monospace; letter-spacing: -.03em; }
.tc-applications-metrics dd { order: -1; color: var(--tc-accent); font: clamp(2.75rem, 4vw, 3.75rem)/1.1 var(--font-display), monospace; letter-spacing: -.03em; white-space: nowrap; }
.tc-applications-method { grid-column: 1/-1; padding-top: 1rem; border-top: 1px solid var(--tc-rule); color: var(--tc-quiet); font: .75rem/1.5 var(--font-mono), monospace; letter-spacing: -.03em; }
.tc-applications-method > span { color: var(--tc-ink); }
.tc-intro-tile { grid-area: intro; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; background: var(--tc-surface); }
.tc-hero-lede { font: .875rem/1.4 var(--font-mono), monospace; letter-spacing: -.03em; }
.tc-service-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.tc-service-tags span { padding: .35rem .5rem; border: 1px solid var(--tc-rule); font: .6875rem/1.4 var(--font-mono), monospace; }
.tc-proof-tile { grid-area: proof; position: relative; background: var(--tc-stage-bg); color: var(--tc-paper); }
.tc-proof-label { font: .8125rem/1.4 var(--font-mono), monospace; }
.tc-proof-number { display: block; font: clamp(3.5rem, 6vw, 4.5rem)/1 var(--font-display), monospace; letter-spacing: -.03em; margin-block: .75rem; }
.tc-proof-comparison { font: 1.125rem/1.5 var(--font-mono), monospace; white-space: nowrap !important; }
.tc-proof-comparison > span { display: block; font: .75rem/1.4 var(--font-mono), monospace; letter-spacing: -.03em; color: var(--tc-stage-soft); }
.tc-proof-period { font: .6875rem/1.5 var(--font-mono), monospace; color: var(--tc-stage-soft); margin-top: .5rem !important; }
.tc-tile-link { display: inline-flex; gap: 1.5rem; align-items: center; min-height: 2.75rem; font: .6875rem/1.4 var(--font-mono), monospace; text-decoration: underline; text-underline-offset: .25rem; white-space: nowrap; }
.tc-launch-tile { grid-area: launch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; background: var(--tc-scene-bg); color: var(--tc-ink); }
.tc-launch-tile > p { font: .75rem/1.4 var(--font-mono), monospace; }
.tc-launch-tile time { display: block; font: 1.375rem/1.2 var(--font-mono), monospace; letter-spacing: -.03em; }
.tc-hero-visual { grid-area: visual; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: clip; background: var(--tc-stage-bg); color: var(--tc-paper); }
.tc-hero-visual .tc-stage { padding-top: 1.25rem; }
.tc-hero-visual .tc-hero-bottom { padding: .5rem 1.25rem 1rem; }
.tc-brief-tile { grid-area: brief; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; background: var(--tc-surface); }
.tc-brief-title { font-size: 1.375rem; line-height: 1.15; letter-spacing: -.02em; }
.tc-brief-tile > p:not(.tc-brief-title) { font-family: var(--font-mono), monospace; font-size: .875rem; line-height: 1.45; color: var(--tc-quiet); }
.tc-page .home-enter-button { align-items: center; min-width: 0; gap: .75rem; white-space: nowrap; transition-timing-function: var(--tc-ease-out); }
.tc-brief-tile .home-enter-button { margin-top: auto; }
.tc-page .action-arrow-icon { flex: none; width: 1.25rem; height: 1.25rem; }
.tc-page .home-enter-button--black .action-arrow-icon { filter: invert(1); }
.tc-bridge { display: grid; gap: 1.5rem; padding: 2rem 1.5rem; border-block: 1px solid var(--tc-rule); margin-top: 3rem; }
.tc-bridge > p { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.3; letter-spacing: -.035em; }
.tc-bridge .home-enter-button { max-width: 20rem; }

.tc-page .tc-process-tabs { gap: .5rem; }
.tc-page .tc-process-tabs button { display: flex; gap: .75rem; align-items: center; padding: .875rem 1rem; border-radius: 0; }
.tc-tab-number { opacity: .65; }
.tc-phase { display: grid; gap: 1rem; align-items: start; }
.tc-phase-materials { min-width: 0; }
.tc-phase-note { padding: 1.5rem; background: var(--tc-surface); }
.tc-phase-note > p { font-family: var(--font-mono), monospace; font-size: .875rem; line-height: 1.45; margin-top: 1rem; color: var(--tc-quiet); }
.tc-stage-output { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--tc-rule); }
.tc-stage-output > span, .tc-team-label { font: .6875rem/1.5 var(--font-mono), monospace; color: var(--tc-quiet); }
.tc-stage-output > p { font-family: var(--font-mono), monospace; font-size: .875rem; line-height: 1.4; margin-top: .5rem; }
.tc-stage-team { display: grid; gap: 1rem; border-top: 1px solid var(--tc-rule); padding-top: 1.5rem; margin-top: 1.5rem; }
.tc-page .tc-person { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem; width: 100%; align-items: center; background: transparent; color: var(--tc-ink); border: 0; padding: 0; text-align: left; }
.tc-person-photo { display: block; width: 3rem; height: 3rem; object-fit: cover; border-radius: 0; }
.tc-person-name { display: block; font-size: .8125rem; line-height: 1.4; }
.tc-person-role { display: block; font: .625rem/1.5 var(--font-mono), monospace; color: var(--tc-quiet); margin-top: .25rem; }
.tc-reference-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tc-reference { padding: 1rem; background: var(--tc-scene-bg); }
.tc-reference--samolet { background: var(--tc-surface); }
.tc-reference-crop { overflow: hidden; aspect-ratio: 270 / 300; background: var(--tc-paper); }
/* Magnify two regions of the original board without changing the asset. */
.tc-reference-crop img { position: absolute; max-width: none; height: auto; }
.tc-reference--brusnika img { width: 1481.4815%; left: -181.4815%; top: -30%; }
.tc-reference--samolet .tc-reference-crop { aspect-ratio: 275 / 300; }
.tc-reference--samolet img { width: 1454.5455%; left: -142.5455%; top: -143.3333%; }
.tc-reference-full { grid-column: 1/-1; justify-self: end; }
.tc-phase-materials figcaption { padding-top: .75rem; font: .6875rem/1.5 var(--font-mono), monospace; color: var(--tc-quiet); }
.tc-research-questions { display: grid; gap: .5rem; padding: 1.5rem; margin-top: 1rem; background: var(--tc-stage-bg); color: var(--tc-paper); }
.tc-research-questions p { font: .875rem/1.4 var(--font-mono), monospace; letter-spacing: -.03em; }
.tc-research-questions > span { transform: rotate(90deg); width: fit-content; color: var(--tc-stage-soft); }
.tc-prototype-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tc-prototype-board > figure { min-width: 0; padding: 1rem; background: var(--tc-surface); }
.tc-prototype-page .tc-image-link { height: 22rem; overflow: hidden; }
.tc-prototype-calculator .tc-image-link { max-width: 18rem; margin-inline: auto; }
.tc-design-board { display: grid; gap: 1rem; }
.tc-page .tc-design-board [data-tc-concepts] { padding: 1rem; }
.tc-design-system { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; background: var(--tc-scene-bg); }
.tc-design-system h3 { font-size: 1.5rem; }
.tc-design-system p { font: .6875rem/1.5 var(--font-mono), monospace; margin-top: 1rem; }
.tc-design-system > .tc-image-link { max-width: 16rem; justify-self: end; }
.tc-design-system > .tc-image-link img { max-height: 18rem; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.tc-palette { display: flex; gap: .5rem; margin-top: 1.5rem; }
.tc-palette i { display: block; width: 2.5rem; height: 2.5rem; background: var(--tc-project-blue); }
.tc-palette i:nth-child(2) { background: var(--tc-stage-bg); }
.tc-palette i:nth-child(3) { background: var(--tc-surface); border: 1px solid var(--tc-rule); }
.tc-native { margin-top: var(--tc-section-space); scroll-margin-top: 6rem; }
/* Milestones alone sit inside the case container. Full-width shared widgets
   below it retain their native .container, padding and responsive width. */
.tc-milestones > .container { width: 100%; max-width: none; padding-inline: 0; margin-inline: 0; }
/* The reused widget owns its .container; do not inset it a second time. */
.tc-technology {
  width: 100%;
  margin-inline: 0;
}
.tc-native .launch-steps { padding-block: 0; }
.tc-native .preserve-lines { white-space: pre-line; }
.tc-case-faq .faq-item__summary h3 { line-height: 1.4; }
.tc-case-faq .faq-item__answer { line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .tc-case-faq .faq-item__summary img { transition: none; }
}
.tc-lightbox-bar > p { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.tc-site-widgets { padding-top: var(--tc-section-space); }
.tc-site-widgets .home-reviews { margin-bottom: var(--tc-section-space); }
.tc-back { padding-block: 2rem var(--tc-footer-space); font: .8125rem/1.5 var(--font-mono), monospace; }
.tc-back a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: underline; text-underline-offset: .25rem; }
@media (hover: hover) {
  .tc-tile-link:hover { text-decoration-thickness: 2px; }
  .tc-person:hover .tc-person-name { text-decoration: underline; text-underline-offset: .2rem; }
}
@media (min-width: 40rem) {
  .tc-hero--board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'intro proof' 'applications applications' 'visual visual' 'launch brief'; }
  .tc-applications-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-hero-visual .tc-stage { height: clamp(23rem, 53vw, 33rem); padding: 0; }
  .tc-hero-visual .tc-stage-main { width: 90%; top: 1.75rem; left: 3%; }
  .tc-hero-visual .tc-stage-mobile { width: 21%; top: 8rem; right: 2%; }
  .tc-hero-visual .tc-hero-bottom { padding: .75rem 1.5rem; }
  .tc-brief-tile .home-enter-button { width: 100%; }
  .tc-reference-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-bridge { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 2rem; }
  .tc-bridge .home-enter-button { width: 17rem; }
  .tc-research-questions { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; }
  .tc-research-questions > span { transform: none; }
  .tc-prototype-board { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .tc-prototype-lead { grid-column: 1/-1; }
  .tc-prototype-page .tc-image-link { height: 26rem; }
  .tc-design-system { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 64rem) {
  .tc-hero--board { grid-template-columns: minmax(0, .85fr) minmax(0, 1.85fr); grid-template-areas: 'intro visual' 'proof visual' 'applications applications' 'launch brief'; }
  .tc-applications-tile { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); align-items: center; gap: 1.5rem 2rem; }
  .tc-tile { padding: 1.5rem; }
  .tc-hero-visual .tc-stage { flex: 1; height: auto; min-height: clamp(28rem, 37vw, 34rem); }
  .tc-proof-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-content: start; }
  .tc-proof-label, .tc-proof-number, .tc-proof-comparison { grid-column: 1/-1; }
  .tc-proof-period { align-self: center; }
  .tc-proof-tile .tc-tile-link { grid-column: 1/-1; }
  .tc-intro-tile { gap: 1rem; }
  .tc-brief-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.5rem; align-items: center; }
  .tc-brief-title { font-size: 1.5rem; }
  .tc-brief-tile > p { grid-column: 1; }
  .tc-brief-tile .home-enter-button { grid-column: 2; grid-row: 1/3; width: 15rem; margin-top: 0; }
  .tc-phase { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: 1rem; }
  .tc-phase-note { padding: 2rem; }
  .tc-stage-team { margin-top: 2rem; }
  .tc-page .tc-person { grid-template-columns: 4rem minmax(0, 1fr); }
  .tc-person-photo { width: 4rem; height: 4rem; }
  .tc-person-name { font-size: .875rem; }
  .tc-person-role { font-size: .6875rem; }
}