.product-site { --max: 1120px; background: var(--bg); line-height: 1.6; }
.product-site .family-bar { position: relative; background: var(--bg); border-color: var(--line); }
.product-site .family-nav { min-height: 56px; }
.product-site .family-brand { font-size: .8rem; font-weight: 500; }
.product-site .family-mark { border: 0; box-shadow: none; font-size: 1.2rem; }
.product-site .family-links a { color: var(--muted); }
.product-site h1 { max-width: 24ch; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.16; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: pretty; }
.product-site h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.25; letter-spacing: -.02em; }
.product-site h3 { font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.4; }
.product-site .summary { margin-top: 1.1rem; font-size: 1rem; max-width: 57ch; line-height: 1.7; text-wrap: pretty; }
.product-site .eyebrow, .product-site .section-index { font-size: .75rem; letter-spacing: .065em; }
.product-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; padding-block: 2.5rem; }
.product-pitch { min-width: 0; }
.product-wordmark { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; font-weight: 700; letter-spacing: -.015em; font-size: 1.45rem; }
.product-wordmark small { border: 1px solid var(--line); border-radius: 4px; padding: .1rem .4rem; font: .75rem var(--mono); color: var(--muted); letter-spacing: 0; }
.product-wordmark > span { display: none; }
.product-fit { display: flex; flex-wrap: wrap; gap: .4rem .6rem; color: var(--muted); font-size: .75rem; margin: 1rem 0 0; font-family: var(--mono); }
.product-fit span { color: var(--line-strong); }
.product-note { max-width: 62ch; color: var(--muted); border-left: 2px solid var(--accent); padding-left: .8rem; font-size: .875rem; margin: 1rem 0 0; }
.product-site .actions { gap: .6rem; margin-top: 1.25rem; }
.product-site .button { min-height: 44px; font-size: .875rem; font-family: var(--sans); font-weight: 600; border-radius: 6px; }
.product-site .button.primary { color: var(--bg); }
.product-demo { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.product-demo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .75rem; font-family: var(--mono); color: var(--muted); }
.product-demo figcaption b { color: var(--accent); font-weight: 500; }
.product-demo pre { margin: 0; padding: 1.25rem; overflow-x: auto; font: .8125rem/1.8 var(--mono); color: var(--text); }
.product-demo img { display: block; width: 100%; height: auto; }
.product-benefits { border-top: 1px solid var(--line); padding-block: 2rem; }
.product-site .section-heading { margin-bottom: 1.25rem; }
.product-benefits .section-index { display: none; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: benefit; }
.benefit-grid article { border-left: 2px solid var(--line-strong); padding-left: 1rem; }
.benefit-grid p, .product-workflow p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: .5rem 0 0; }
.benefit-number { display: block; font: .75rem var(--mono); color: var(--accent); margin-bottom: .65rem; }
.benefit-number::before { counter-increment: benefit; content: counter(benefit, decimal-leading-zero); }
.product-workflow { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 2rem; padding-block: 2rem; border-block: 1px solid var(--line); }
.product-workflow .section-index { display: none; }
.product-workflow ol { display: grid; gap: 1rem; list-style-position: outside; margin: 0; padding-left: 1.3rem; }
.product-workflow li { padding-left: .4rem; }
.product-workflow li::marker { color: var(--accent); font: .875rem var(--mono); }
.product-screenshot { margin-block: 0 2rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.product-screenshot summary { padding: .8rem 1rem; cursor: pointer; font-size: .875rem; font-weight: 600; }
.product-screenshot img { display: block; width: 100%; height: auto; border-top: 1px solid var(--line); }
.product-site .command, .product-site .readme pre { background: var(--surface); }
.product-site .readme { color: var(--text); }
.product-site .content-section { padding-block: 1.75rem; scroll-margin-top: 1rem; }
.product-site .content-section .section-index { display: none; }
.product-site .split-heading { gap: 1rem; }
.product-site .split-heading p { font-size: .875rem; margin-top: .5rem; }
.product-site .readme-section { border-bottom: 1px solid var(--line); }
.documentation-disclosure { border: 1px solid var(--line); border-radius: 6px; }
.documentation-disclosure summary { padding: .85rem 1rem; cursor: pointer; font-weight: 600; color: var(--text); font-size: .875rem; }
.documentation-disclosure .readme { padding: 0 1.25rem 1rem; }
.product-close { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; padding-block: 2rem; }
.product-close .eyebrow { display: none; }
.product-close h2 { max-width: 38ch; font-size: 1.5rem; }
.product-site .family-section { background: var(--surface); }
.product-site .family-callout { min-height: 0; padding-block: 1.5rem; gap: 1rem 2rem; }
.product-site .family-callout .section-index { display: none; }
.product-site .family-callout h2 { font-size: 1.2rem; max-width: none; }
.product-site .family-callout p:last-child { margin-top: .4rem; font-size: .875rem; }
.product-site .footer-inner { min-height: 0; padding-block: 1.2rem; }
.product-site .locale-nav a { font-size: .75rem; }

.theme-barber { --bg: #111814; --surface: #19241d; --line: #354339; --line-strong: #586f5e; --text: #eef4e9; --muted: #b2bdae; --accent: #bfe872; }
.theme-barber .product-wordmark { font-family: var(--mono); }
.theme-barber .demo-branches pre { color: #d4efb5; }
.theme-ports { --bg: #071421; --surface: #0c2133; --line: #263e50; --line-strong: #44657d; --text: #edf7ff; --muted: #a9bfd0; --accent: #7fd8ff; }
.theme-ports .product-demo { border-top: 2px solid var(--accent); }
.theme-ports .product-wordmark { font-family: var(--mono); }
.theme-schema { color-scheme: light; --bg: #f6f6f2; --surface: #eceee6; --line: #c8cebf; --line-strong: #8e9c86; --text: #19251c; --muted: #52604e; --accent: #2f612d; }
.theme-schema h1 { font-family: Georgia, serif; font-weight: 500; letter-spacing: -.02em; }
.theme-schema .product-demo { background: #18261e; border-color: #425d47; }
.theme-schema .product-demo pre { color: #dcebdc; }
.theme-schema .product-demo figcaption { color: #becdbb; border-color: #425d47; }
.theme-schema .product-demo figcaption b { color: #b8ee8c; }
.theme-messenger { color-scheme: light; --bg: #fbfaf7; --surface: #f2ece1; --line: #d9d0c1; --line-strong: #afa591; --text: #28221e; --muted: #685e54; --accent: #9e361f; }
.theme-messenger .product-demo { border-radius: 16px 16px 16px 4px; background: #fff0e3; }
.theme-messenger .product-wordmark { color: var(--accent); }
.theme-crypto { --bg: #15131b; --surface: #1e1c27; --line: #393446; --line-strong: #645777; --text: #f2edf7; --muted: #b9aec6; --accent: #d0b0fc; }
.primitive-strip { display: grid; grid-template-columns: repeat(3,1fr); padding: 1rem; gap: 1rem; border-bottom: 1px solid var(--line); }
.primitive-strip span { font: 1.2rem/1.4 var(--mono); color: var(--accent); border-left: 1px solid var(--line-strong); padding-left: .6rem; }
.primitive-strip b { font-size: .75rem; color: var(--muted); font-weight: 400; }
.theme-liquidity { --bg: #0a1015; --surface: #101b24; --line: #293740; --line-strong: #45606d; --text: #e9f3f7; --muted: #a1b5c0; --accent: #85dacb; }
.theme-liquidity .product-hero { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.theme-transfer { color-scheme: light; --bg: #f7f5f1; --surface: #ece4d9; --line: #d8caba; --line-strong: #a8917e; --text: #30231e; --muted: #6c5b50; --accent: #a23c1c; }
.theme-transfer .product-demo { border-left: 3px solid var(--accent); }
.theme-words { color-scheme: light; --bg: #faf7f0; --surface: #eee4d2; --line: #d8cab4; --line-strong: #ad9677; --text: #362c21; --muted: #71614e; --accent: #714421; }
.theme-words h1 { font-family: Georgia, serif; font-weight: 400; }
.theme-words .product-demo { background: #fffcf5; }
.theme-words .product-demo pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.receipt-value { padding: 1.25rem 1.25rem .7rem; font: 2.7rem Georgia, serif; }
.receipt-value span { font-size: 1.6rem; }
.receipt-rule { margin-inline: 1.25rem; border-bottom: 1px dashed var(--line-strong); }
.theme-lab { --bg: #1c1624; --surface: #2a2135; --line: #4b3a5d; --line-strong: #77648a; --text: #f8edf9; --muted: #c7b4ce; --accent: #edbcf5; }
.theme-lab .product-demo { border-style: dashed; }
.theme-lab .product-note { color: var(--text); padding: .75rem; background: var(--surface); border-radius: 4px; }
.theme-weekly { color-scheme: light; --bg: #f5f8f1; --surface: #e3ebd9; --line: #c6d3b9; --line-strong: #879b72; --text: #293425; --muted: #5d6d54; --accent: #3c632c; }
.theme-weekly .product-demo { background: #fcfff8; }
.report-day { display: flex; align-items: baseline; justify-content: space-between; margin: 1.1rem 1.25rem 0; font: 2.5rem/1 Georgia, serif; color: var(--accent); }
.report-day span { font: .875rem var(--mono); }

@media (max-width: 800px) {
  .product-site .product-hero { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.75rem; }
  .product-site h1 { max-width: 30ch; font-size: clamp(1.9rem,5vw,2.65rem); }
  .product-demo { width: 100%; }
  .product-site .product-workflow { grid-template-columns: 1fr; gap: 1.25rem; }
  .benefit-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .product-site .family-callout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .product-site .shell { width: calc(100% - 2rem); }
  .product-site h1 { font-size: 2rem; }
  .product-wordmark { margin-bottom: 1rem; }
  .product-demo pre { font-size: .8125rem; padding: 1rem; }
  .product-close { grid-template-columns: 1fr; gap: 1rem; }
  .product-close .button { justify-self: start; }
  .product-site .command { flex-direction: row; }
  .product-site .command code { min-width: 0; font-size: .8rem; padding: .8rem; }
  .product-site .command button { min-width: 44px; border-top: 0; border-left: 1px solid var(--line); }
}